diff --git a/src/components/Molecules/Promo/Promo.js b/src/components/Molecules/Promo/Promo.js index 473bbaa79..6a903533d 100644 --- a/src/components/Molecules/Promo/Promo.js +++ b/src/components/Molecules/Promo/Promo.js @@ -23,16 +23,19 @@ const Promo = ({ poster, mobilePoster, showPosterAfterPlaying, - video, + videoSrc, mobileVideoSrc, lightVideo }) => { // Store the appropriate prop in state, dependent on the breakpoint const [thisVideoSrc, setThisVideoSrc] = useState(null); const [thisPoster, setThisPoster] = useState(null); - const hasVideo = (video || mobileVideoSrc) || false; - // Video Promo will override and ignore any 'non-Video' images - const hasImage = (imageSet && !hasVideo) || false; + + // Let either field define this, just in case + const hasVideo = Boolean(videoSrc || mobileVideoSrc); + // A 'video-y' Promo will override and ignore any 'non-Video' images; + // none of these fields are required so we have to handle them accordingly: + const hasImage = Boolean(imageSet && !hasVideo); // Runs on initial load: useEffect(() => { @@ -42,20 +45,20 @@ const Promo = ({ let currentPoster; let currentSrc; // If we've got both desktop AND mobile videos, let - // the breakpoint define which video src to use: - if (video && mobileVideoSrc) { - currentSrc = isDesktop ? video : mobileVideoSrc; + // the *current* screen width define which video src to use: + if (videoSrc && mobileVideoSrc) { + currentSrc = isDesktop ? videoSrc : mobileVideoSrc; currentPoster = isDesktop ? poster : mobilePoster; } else { // Else, pick whatever we DO actually have: - currentSrc = video || mobileVideoSrc; + currentSrc = videoSrc || mobileVideoSrc; currentPoster = poster || mobilePoster; } setThisVideoSrc(currentSrc); setThisPoster(currentPoster); } - }, [hasVideo, video, mobileVideoSrc, mobilePoster, poster]); + }, [hasVideo, videoSrc, mobileVideoSrc, mobilePoster, poster]); return ( @@ -106,7 +109,7 @@ Promo.propTypes = { position: PropTypes.oneOf(['upper', 'lower', 'end', 'none']), autoPlay: PropTypes.bool, loop: PropTypes.bool, - video: PropTypes.string, + videoSrc: PropTypes.string, mobileVideoSrc: PropTypes.string, poster: PropTypes.string, mobilePoster: PropTypes.string, @@ -127,7 +130,7 @@ Promo.defaultProps = { loop: true, poster: null, mobilePoster: null, - video: null, + videoSrc: null, mobileVideoSrc: null, showPosterAfterPlaying: true, lightVideo: false diff --git a/src/components/Molecules/Promo/Promo.md b/src/components/Molecules/Promo/Promo.md index 0cb1f6f85..58057db98 100644 --- a/src/components/Molecules/Promo/Promo.md +++ b/src/components/Molecules/Promo/Promo.md @@ -157,7 +157,7 @@ const defaultData = require('../../../styleguide/data/data').defaultData;import import Link from '../../Atoms/Link/Link'; import poster from '../../../styleguide/assets/VideoBannerPosterImage.png'; import mobilePoster from '../../../styleguide/assets/mobileVideoPosterImage.png'; -const src = +const videoSrc = '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'; @@ -175,7 +175,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4'; copyLeft={true} hasOverlay={true} position="upper" - video={src} + videoSrc={videoSrc} poster={poster} loop={true} autoplay={true} @@ -217,7 +217,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4'; copyLeft={true} hasOverlay={true} position="end" - video={src} + videoSrc={videoSrc} poster={poster} loop={true} autoPlay={false} @@ -259,7 +259,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4'; copyLeft={true} hasOverlay={true} position="lower" - video={src} + videoSrc={videoSrc} poster={poster} loop={false} autoPlay={true} @@ -299,7 +299,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4'; imageAltText="" copyLeft={false} hasOverlay={true} - video={src} + videoSrc={videoSrc} poster={poster} loop={false} autoPlay={false} @@ -338,7 +338,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4'; imageAltText="" copyLeft={true} hasOverlay={true} - video={src} + videoSrc={videoSrc} mobileVideoSrc={mobileVideoSrc} poster={poster} mobilePoster={mobilePoster}