From 83ec5b387a476018c3d62798ebf26f4d2c7f34a0 Mon Sep 17 00:00:00 2001 From: AndyEPhipps Date: Wed, 4 Oct 2023 17:14:08 +0100 Subject: [PATCH] Handle poster and video across breakpoints --- src/components/Molecules/Promo/Promo.js | 28 ++++++---- src/components/Molecules/Promo/Promo.md | 49 ++++++++++++++++-- .../assets/mobileVideoPosterImage.png | Bin 0 -> 1486831 bytes 3 files changed, 63 insertions(+), 14 deletions(-) create mode 100644 src/styleguide/assets/mobileVideoPosterImage.png diff --git a/src/components/Molecules/Promo/Promo.js b/src/components/Molecules/Promo/Promo.js index 8146b869b..c92e151dc 100644 --- a/src/components/Molecules/Promo/Promo.js +++ b/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 ( @@ -125,7 +131,7 @@ const Promo = ({