Handle video 'lightness' across subcomponents

comicrelief · Oct 4, 2023 · 40d1fba · 40d1fba
1 parent dcba1ae
commit 40d1fba
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/components/Molecules/Promo/Promo.js b/src/components/Molecules/Promo/Promo.js
@@ -20,7 +20,8 @@ const Promo = ({
   loop,
   poster,
   showPosterAfterPlaying,
-  video
+  video,
+  lightVideo
 }) => {
   // To be updated via useEffect on load:
   const [isPlaying, setIsPlaying] = useState(false);
@@ -72,7 +73,7 @@ const Promo = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const lightVideo = false; // to-do: suss out how this relates in context
+  // const lightVideo = false; // to-do: suss out how this relates in context
 
   return (
     <Container backgroundColor={backgroundColor} position={position}>
@@ -110,7 +111,9 @@ const Promo = ({
       </Media>
       )}
       <Wrapper copyLeft={copyLeft}>
-        <Copy position={position} hasVideo={hasVideo}>{children}</Copy>
+        <Copy position={position} hasVideo={hasVideo} lightVideo={lightVideo}>
+          {children}
+        </Copy>
       </Wrapper>
     </Container>
   );
@@ -129,7 +132,8 @@ Promo.propTypes = {
   loop: PropTypes.bool,
   video: PropTypes.string,
   poster: PropTypes.string.isRequired,
-  showPosterAfterPlaying: PropTypes.bool
+  showPosterAfterPlaying: PropTypes.bool,
+  lightVideo: PropTypes.bool
 };
 
 Promo.defaultProps = {
@@ -144,8 +148,8 @@ Promo.defaultProps = {
   autoPlay: true,
   loop: true,
   video: false,
-  showPosterAfterPlaying: true
-
+  showPosterAfterPlaying: true,
+  lightVideo: false
 };
 
 export default Promo;
diff --git a/src/components/Molecules/Promo/Promo.md b/src/components/Molecules/Promo/Promo.md
@@ -326,10 +326,10 @@ const src =
 </Promo>
 
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video (no loop or autoplay, DARK text albeit the same video)
+  Promo None w/Video (no loop or autoplay, 'light video', albeit with same file for now)
 </Text>
 <Promo
-  backgroundColor="blue_dark"
+  backgroundColor="blue_light"
   imageSet={defaultData.promoImage}
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
@@ -340,6 +340,7 @@ const src =
   poster={poster}
   loop={false}
   autoPlay={false}
+  lightVideo={true}
 >
   <Text
     tag="h1"

diff --git a/src/components/Molecules/Promo/Promo.style.js b/src/components/Molecules/Promo/Promo.style.js
@@ -71,6 +71,10 @@ const Copy = styled.div`
       overflow: hidden;
       box-shadow: 0px 0px 100px 100px rgba(0, 0, 0, 0.75);
     `}
+    ${({ hasVideo, lightVideo }) => (hasVideo !== false && lightVideo) && css`
+    background-color: rgba(255, 255, 255, 0.75);
+    box-shadow: 0px 0px 100px 100px rgba(255, 255, 255, 0.75);
+  `}
   }
 
   ${({ position }) => position === 'lower' && css`