Handle poster and video across breakpoints

src/components/Molecules/Promo/Promo.js

@@ -21,9 +21,10 @@ const Promo = ({
   autoPlay,
   loop,
   poster,
+  mobilePoster,
   showPosterAfterPlaying,
   video,
-  mobileVideo,
+  mobileVideoSrc,
   lightVideo
 }) => {
   // To be updated via useEffect on load:
@@ -32,6 +33,8 @@ const Promo = ({
   const [isDesktop, setIsDesktop] = useState(null);
   // Store the appropriate prop in state, dependent on the breakpoint
   const [thisVideoSrc, setThisVideoSrc] = useState(null);
+  const [thisPoster, setThisPoster] = useState(null);
+
   const [videoProgress, setVideoProgress] = useState(0);
   const videoEl = useRef(null);
 
@@ -41,7 +44,7 @@ const Promo = ({
     setIsPlaying(!isPlaying);
   };
 
-  const hasVideo = (video || mobileVideo) || false;
+  const hasVideo = (video || mobileVideoSrc) || false;
   // Video Promo will override and ignore any 'non-Video' images
   const hasImage = (imageSet && !hasVideo) || false;
 
@@ -64,14 +67,16 @@ const Promo = ({
 
       // If we've got both desktop AND mobile videos,
       // let the breakpoint define which video src to use:
-      if (video && mobileVideo) {
-        setThisVideoSrc(desktopView ? video : mobileVideo);
+      if (video && mobileVideoSrc) {
+        setThisVideoSrc(desktopView ? video : mobileVideoSrc);
+        setThisPoster(desktopView ? poster : mobilePoster);
       } else {
         // Else, pick whatever we do actually have
-        setThisVideoSrc(video || mobileVideo);
+        setThisVideoSrc(video || mobileVideoSrc);
+        setThisPoster(poster || mobilePoster);
       }
     }
-  }, [hasVideo, video, mobileVideo]);
+  }, [hasVideo, video, mobileVideoSrc]);
 
   // Only loads once the initial screensize check is complete
   useEffect(() => {
@@ -103,7 +108,8 @@ const Promo = ({
         setTimeout(() => { setIsRestarting(false); }, 100);
       });
     }
-  }, [thisVideoSrc, hasVideo, autoPlay, isPlaying, loop, showPosterAfterPlaying, togglePlay]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [thisVideoSrc]);
 
   return (
     <Container backgroundColor={backgroundColor} position={position}>
@@ -125,7 +131,7 @@ const Promo = ({
         <Video
           ref={videoEl}
           src={thisVideoSrc}
-          poster={poster}
+          poster={thisPoster}
           muted
         >
           Your browser does not support video.
@@ -161,8 +167,9 @@ Promo.propTypes = {
   autoPlay: PropTypes.bool,
   loop: PropTypes.bool,
   video: PropTypes.string,
-  mobileVideo: PropTypes.string,
+  mobileVideoSrc: PropTypes.string,
   poster: PropTypes.string,
+  mobilePoster: PropTypes.string,
   showPosterAfterPlaying: PropTypes.bool,
   lightVideo: PropTypes.bool
 };
@@ -179,8 +186,9 @@ Promo.defaultProps = {
   autoPlay: true,
   loop: true,
   poster: null,
+  mobilePoster: null,
   video: null,
-  mobileVideo: null,
+  mobileVideoSrc: null,
   showPosterAfterPlaying: true,
   lightVideo: false
 };

src/components/Molecules/Promo/Promo.md

@@ -156,11 +156,11 @@ Promo w/Video
 const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
+import mobilePoster from '../../../styleguide/assets/mobileVideoPosterImage.png';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 
-let mobileVideoSrc = 'https://www.w3schools.com/tags/movie.mp4';
-mobileVideoSrc = 'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 
 <div>
 <Text tag="h2" size="xl" color="black">
@@ -328,7 +328,7 @@ mobileVideoSrc = 'https://www.comicrelief.com/sites/default/files/downloads/Crea
 </Promo>
 
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video (no loop or autoplay, 'light video', albeit with same file for now)
+  Promo None w/Video (no loop or autoplay, 'light video' setting, different videos and posters for mobile and desktop)
 </Text>
 <Promo
   backgroundColor="blue_light"
@@ -339,8 +339,49 @@ mobileVideoSrc = 'https://www.comicrelief.com/sites/default/files/downloads/Crea
   copyLeft={true}
   hasOverlay={true}
   video={src}
-  mobileVideo={mobileVideoSrc}
+  mobileVideoSrc={mobileVideoSrc}
   poster={poster}
+  mobilePoster={mobilePoster}
+  loop={false}
+  autoPlay={false}
+  lightVideo={true}
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="black">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="black">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay, 'light video' setting, mobile-only video and poster)
+</Text>
+<Promo
+  backgroundColor="blue_light"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  mobileVideoSrc={mobileVideoSrc}
+  mobilePoster={mobilePoster}
   loop={false}
   autoPlay={false}
   lightVideo={true}