Handle button and copy accessibility

comicrelief · Sep 29, 2023 · d42a61d · d42a61d
1 parent 509626f
commit d42a61d
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 46 deletions.
diff --git a/src/components/Molecules/Promo/Promo.js b/src/components/Molecules/Promo/Promo.js
@@ -8,7 +8,7 @@ import {
 } from './Promo.style';
 
 const Promo = ({
-  copyFirst,
+  copyLeft,
   backgroundColor,
   imageLow,
   imageSet,
@@ -19,51 +19,53 @@ const Promo = ({
   autoPlay,
   loop,
   muted,
+  poster,
   showPosterAfterPlaying,
   video
 }) => {
-  // Use the prop as our default
-  const [isMuted, setIsMuted] = useState(muted);
-  const [isPlaying, setIsPlaying] = useState(null); // To be updated via useEffect on load
+  // To be updated via useEffect on load:
+  const [isPlaying, setIsPlaying] = useState(null);
   const videoEl = useRef(null);
 
-  console.log('showPosterAfterPlaying', showPosterAfterPlaying);
-
   const togglePlay = () => {
     if (isPlaying) videoEl.current.pause();
     else videoEl.current.play();
     setIsPlaying(!isPlaying);
   };
 
-  let hasImage = imageSet || false;
-  hasImage = false; // DEBUG
-  const hasVideo = video;
+  const hasVideo = video || false;
+  // Video Promo will override and ignore any 'non-Video' images
+  const hasImage = (imageSet && !hasVideo) || false;
 
   // On load:
   useEffect(() => {
     // Trigger onload autoplay based on prop:
     if (autoPlay && hasVideo && !isPlaying) {
       // As it's a Chrome requirement to mute any autoplay videos,
       // update accordingly; see https://developer.chrome.com/blog/autoplay/
-      setIsMuted(true);
+      // Need to suss out if this is still needed, given that this component
+      // is ALWAYS muted?
+      // setIsMuted(true);
       togglePlay();
     }
 
-    // And attach event listener based on prop:
-    // if (!loop && showPosterAfterPlaying) {
-    //   videoEl.current.addEventListener('ended', () => {
-    //     // Reloads video, which re-shows poster
-    //     videoEl.current.load();
-    //   });
-    // }
+    // If this is a non-looping video, add a listener to update our local state
+    // once the video's ended, to let the user retrigger it manually:
+    if (!loop) {
+      videoEl.current.addEventListener('ended', () => {
+        setIsPlaying(false);
+        // Reload the video to show the poster image:
+        if (showPosterAfterPlaying) videoEl.current.load();
+      });
+    }
   }, []);
 
   console.log(autoPlay, loop, muted, hasVideo);
 
   return (
     <Container backgroundColor={backgroundColor} position={position}>
       {(hasImage && !hasVideo) && (
-      <Media imageRight={copyFirst}>
+      <Media imageRight={copyLeft}>
         <Picture
           alt={imageAltText}
           imageLow={imageLow}
@@ -76,23 +78,23 @@ const Promo = ({
       </Media>
       )}
       {(hasVideo && !hasImage) && (
-      <Media imageRight={copyFirst}>
+      <Media imageRight={copyLeft}>
         <Video
           ref={videoEl}
           src={video}
           loop={loop}
-          muted={isMuted}
-          // poster={poster}
+          muted
+          poster={poster}
         >
           Your browser does not support video.
         </Video>
         <PlayButtonWrapper>
-          <PlayButton onClick={() => { togglePlay(); }}>PLAY ME</PlayButton>
+          <PlayButton copyLeft={copyLeft} onClick={() => { togglePlay(); }}>PLAY ME</PlayButton>
         </PlayButtonWrapper>
 
       </Media>
       )}
-      <Wrapper copyFirst={copyFirst}>
+      <Wrapper copyLeft={copyLeft}>
         <Copy position={position}>{children}</Copy>
       </Wrapper>
     </Container>
@@ -101,7 +103,7 @@ const Promo = ({
 
 Promo.propTypes = {
   backgroundColor: PropTypes.string,
-  copyFirst: PropTypes.bool,
+  copyLeft: PropTypes.bool,
   imageLow: PropTypes.string,
   imageSet: PropTypes.string,
   image: PropTypes.string,
@@ -112,20 +114,21 @@ Promo.propTypes = {
   loop: PropTypes.bool,
   muted: PropTypes.bool,
   video: PropTypes.string,
+  poster: PropTypes.string.isRequired,
   showPosterAfterPlaying: PropTypes.bool
 };
 
 Promo.defaultProps = {
   backgroundColor: 'white',
-  copyFirst: false,
+  copyLeft: false,
   imageSet: null,
   imageLow: null,
   image: null,
   imageAltText: '',
   children: null,
   position: 'none',
   autoPlay: true,
-  loop: false,
+  loop: true,
   muted: true,
   video: false,
   showPosterAfterPlaying: true

diff --git a/src/components/Molecules/Promo/Promo.md b/src/components/Molecules/Promo/Promo.md
@@ -14,7 +14,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="upper"
 >
@@ -50,7 +50,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="end"
 >
@@ -86,7 +86,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="lower"
 >
@@ -122,7 +122,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
 >
   <Text
@@ -155,9 +155,11 @@ Promo w/Video
 ```js
 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';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 
+
 <div>
 <Text tag="h2" size="xl" color="black">
   Promo Upper w/Video (autoplay by default)
@@ -168,11 +170,11 @@ const src =
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="upper"
   video={src}
-  loop
+  poster={poster}
 >
   <Text
     tag="h1"
@@ -208,12 +210,12 @@ const src =
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="end"
   video={src}
-  loop
   autoPlay={false}
+  poster={poster}
 >
   <Text
     tag="h1"
@@ -249,11 +251,11 @@ const src =
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="lower"
   video={src}
-  loop
+  poster={poster}
 >
   <Text
     tag="h1"
@@ -280,18 +282,19 @@ const src =
 
 <br />
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video
+  Promo None w/Video (no loop)
 </Text>
 <Promo
   backgroundColor="blue_dark"
   imageSet={defaultData.promoImage}
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={false}
   hasOverlay={true}
   video={src}
-  loop
+  loop={false}
+  poster={poster}
 >
   <Text
     tag="h1"

diff --git a/src/components/Molecules/Promo/Promo.style.js b/src/components/Molecules/Promo/Promo.style.js
@@ -44,7 +44,8 @@ const Wrapper = styled.div`
   margin: 0 auto;
   display: flex;
   align-items: center;
-  ${({ copyFirst }) => !copyFirst && 'justify-content: flex-end'};
+
+  ${({ copyLeft }) => !copyLeft && 'justify-content: flex-end'};
   ${media('medium')} {
     min-height: calc(100vh - 90px);
   }
@@ -58,10 +59,21 @@ const Copy = styled.div`
     width: 70%;
     padding: ${spacing('xl')} ${spacing('m')};
   }
+
+  // lol wtf is there 2 different medium media queries??
   ${media('medium')} {
     width: 50%;
     padding: ${spacing('xxl')} ${spacing('m')};
-  }
+
+    // ACCESSIBILITY IMPROVEMENT:  
+    // background-clip: content-box;
+    background-color: rgba(0,0,0,0.75);
+    overflow: hidden;
+    box-shadow: 0px 0px 100px 100px rgba(0, 0, 0, 0.75);
+    // filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.75));
+      }
+
+  
   ${({ position }) => position === 'lower' && css`
     padding: ${spacing('xl')} ${spacing('m')};
     ${media('medium')} {
@@ -92,16 +104,22 @@ const Video = styled.video.attrs(() => ({
 `;
 
 const PlayButton = styled.button`
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s, visibility 0.2s;
   width: 50px;
   height: 50px;
   background-color: red;
   display: block;
   position: absolute;
   top: 25px;
   right: 25px;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.2s, visibility 0.2s;
+
+  // Reposition button accordingly:
+  ${({ copyLeft }) => copyLeft === false && css`
+    right: auto;
+    left: 25px;
+  `}
 `;
 
 const PlayButtonWrapper = styled.div`

diff --git a/src/components/Molecules/Promo/Promo.test.js b/src/components/Molecules/Promo/Promo.test.js
@@ -13,7 +13,7 @@ it('renders Promo correctly', () => {
       imageSet={defaultData.promoImage}
       image={defaultData.promoImage}
       imageAltText=""
-      copyFirst={false}
+      copyLeft={false}
     >
       <Text
         tag="h1"
@@ -47,7 +47,7 @@ it('renders Promo correctly end position', () => {
       imageSet={defaultData.promoImage}
       image={defaultData.promoImage}
       imageAltText=""
-      copyFirst={false}
+      copyLeft={false}
       position="end"
     >
       <Text