From 03180b0fa6300a7c2151da4f805596db41fed1da Mon Sep 17 00:00:00 2001
From: AndyEPhipps <a.phipps@comicrelief.com>
Date: Tue, 3 Oct 2023 16:04:03 +0100
Subject: [PATCH] Tidyup, handle diff contrasts

---
 .../Molecules/Promo/ProgressRing.js           | 11 +++++-----
 src/components/Molecules/Promo/Promo.js       |  5 ++++-
 .../Molecules/Promo/PromoVideoButton.js       | 19 ++++++----------
 .../Molecules/Promo/PromoVideoButton.style.js | 22 +++++++++++++++----
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/components/Molecules/Promo/ProgressRing.js b/src/components/Molecules/Promo/ProgressRing.js
index 6b9d3679f..0fec2a3c5 100644
--- a/src/components/Molecules/Promo/ProgressRing.js
+++ b/src/components/Molecules/Promo/ProgressRing.js
@@ -6,8 +6,10 @@ import {
 } from './PromoVideoButton.style';
 
 const ProgressRing = ({
-  thisStroke, thisRadius, videoProgress, isPlaying
+  videoProgress, ...rest
 }) => {
+  const thisStroke = 4;
+  const thisRadius = 28;
   const initNormRadius = thisRadius - thisStroke * 2;
   const thisCircumference = initNormRadius * 2 * Math.PI;
   const [thisDashOffset, setThisDashOffset] = useState(initNormRadius * 2 * Math.PI);
@@ -27,7 +29,7 @@ const ProgressRing = ({
           r={`${initNormRadius}`}
           cx={`${thisRadius}`}
           cy={`${thisRadius}`}
-          isPlaying={isPlaying}
+          {...rest}
         />
       </ProgressRingSVG>
     </ProgressRingWrapper>
@@ -35,10 +37,7 @@ const ProgressRing = ({
 };
 
 ProgressRing.propTypes = {
-  thisStroke: PropTypes.number.isRequired,
-  thisRadius: PropTypes.number.isRequired,
-  videoProgress: PropTypes.number.isRequired,
-  isPlaying: PropTypes.bool.isRequired
+  videoProgress: PropTypes.number.isRequired
 };
 
 export default ProgressRing;
diff --git a/src/components/Molecules/Promo/Promo.js b/src/components/Molecules/Promo/Promo.js
index 7e64454f6..4bed235d1 100644
--- a/src/components/Molecules/Promo/Promo.js
+++ b/src/components/Molecules/Promo/Promo.js
@@ -23,7 +23,7 @@ const Promo = ({
   video
 }) => {
   // To be updated via useEffect on load:
-  const [isPlaying, setIsPlaying] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
   const [videoProgress, setVideoProgress] = useState(0);
   const videoEl = useRef(null);
 
@@ -72,6 +72,8 @@ const Promo = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const whiteButtonDebug = true; // to-do: suss out how this relates in context
+
   return (
     <Container backgroundColor={backgroundColor} position={position}>
       {(hasImage && !hasVideo) && (
@@ -103,6 +105,7 @@ const Promo = ({
           videoProgress={videoProgress}
           togglePlay={togglePlay}
           isPlaying={isPlaying}
+          whiteButton={whiteButtonDebug}
         />
       </Media>
       )}
diff --git a/src/components/Molecules/Promo/PromoVideoButton.js b/src/components/Molecules/Promo/PromoVideoButton.js
index 8dc089aba..9f18eab17 100644
--- a/src/components/Molecules/Promo/PromoVideoButton.js
+++ b/src/components/Molecules/Promo/PromoVideoButton.js
@@ -1,33 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ProgressCircle from './ProgressRing';
+import ProgressRing from './ProgressRing';
 import { PlayButtonWrapper, PlayButton, Icon } from './PromoVideoButton.style';
 
 const PromoVideoButton = ({
-  videoProgress, copyLeft, togglePlay, isPlaying
+  videoProgress, togglePlay, ...rest
 }) => (
   <PlayButtonWrapper>
     <PlayButton
-      copyLeft={copyLeft}
       onClick={() => { togglePlay(); }}
-      isPlaying={isPlaying}
+      {...rest}
     >
-      <Icon isPlaying={isPlaying} />
-      <ProgressCircle
-        thisStroke={4}
-        thisRadius={25}
+      <Icon {...rest} />
+      <ProgressRing
         videoProgress={videoProgress}
-        isPlaying={isPlaying}
+        {...rest}
       />
     </PlayButton>
   </PlayButtonWrapper>
 );
 
 PromoVideoButton.propTypes = {
-  copyLeft: PropTypes.bool.isRequired,
   videoProgress: PropTypes.number.isRequired,
-  togglePlay: PropTypes.func.isRequired,
-  isPlaying: PropTypes.bool.isRequired
+  togglePlay: PropTypes.func.isRequired
 };
 
 export default PromoVideoButton;
diff --git a/src/components/Molecules/Promo/PromoVideoButton.style.js b/src/components/Molecules/Promo/PromoVideoButton.style.js
index 16954f9c1..6b44efb38 100644
--- a/src/components/Molecules/Promo/PromoVideoButton.style.js
+++ b/src/components/Molecules/Promo/PromoVideoButton.style.js
@@ -6,10 +6,10 @@ const PlayButton = styled.button`
   // visibility: hidden; // debug
   // opacity: 0; // debug
   transition: opacity 0.2s, visibility 0.2s;
+
   width: 50px;
   height: 50px;
   background: none;
-  display: flex;
   position: absolute;
   top: 10px;
   right: 10px;
@@ -19,8 +19,13 @@ const PlayButton = styled.button`
   border: 0;
   padding: 0;
   margin: 0;
+  border-radius: 50%;
+  background: black;
+
+  ${({ whiteButton }) => whiteButton && css`
+    background: ${({ theme }) => theme.color('white')};
+  `}
 
-  // Re-align button accordingly
   ${({ copyLeft }) => !copyLeft && css`
     right: auto;
     left: 10px;
@@ -46,10 +51,11 @@ const ProgressRingWrapper = styled.span`
     position: absolute;
     width: 100%;
     height: 100%;
+    display: flex;
 `;
 
 const ProgressRingSVG = styled.svg`
-//
+ //
 `;
 
 const ProgressRingCircle = styled.circle`
@@ -61,6 +67,10 @@ const ProgressRingCircle = styled.circle`
     stroke: white; // need to changed based on Promo settings
     fill: transparent;
 
+    ${({ whiteButton }) => whiteButton && css`
+      stroke: ${({ theme }) => theme.color('black')};
+    `}
+
     ${({ isPlaying }) => !isPlaying && css`
       // transition: stroke-dashoffset 0.1s;
   `}
@@ -69,12 +79,16 @@ const ProgressRingCircle = styled.circle`
 const Icon = styled.span`
   height: 40px;
   width: 40px;
-  background-color: white; // need to changed based on Promo settings
   -webkit-mask-image: url(${playIcon});
   mask-image: url(${playIcon});
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: 25px;
+  background-color: white; // need to changed based on Promo settings
+  
+  ${({ whiteButton }) => whiteButton && css`
+    background-color: ${({ theme }) => theme.color('black')};
+  `}
 
   ${({ isPlaying }) => isPlaying && css`
     -webkit-mask-image: url(${pauseIcon});