Improve some naming and logic

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 (
     <Container backgroundColor={backgroundColor} position={position}>
@@ -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

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}