From d42a61d81b180f7e30bb283cc83df0909ccab095 Mon Sep 17 00:00:00 2001 From: AndyEPhipps Date: Fri, 29 Sep 2023 14:05:38 +0100 Subject: [PATCH] Handle button and copy accessibility --- src/components/Molecules/Promo/Promo.js | 55 ++++++++++--------- src/components/Molecules/Promo/Promo.md | 29 +++++----- src/components/Molecules/Promo/Promo.style.js | 28 ++++++++-- src/components/Molecules/Promo/Promo.test.js | 4 +- 4 files changed, 70 insertions(+), 46 deletions(-) diff --git a/src/components/Molecules/Promo/Promo.js b/src/components/Molecules/Promo/Promo.js index 2003a3791..6d7bdfd7d 100644 --- 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,25 +19,23 @@ 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(() => { @@ -45,17 +43,21 @@ const Promo = ({ 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); @@ -63,7 +65,7 @@ const Promo = ({ return ( {(hasImage && !hasVideo) && ( - + )} {(hasVideo && !hasImage) && ( - + - { togglePlay(); }}>PLAY ME + { togglePlay(); }}>PLAY ME )} - + {children} @@ -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,12 +114,13 @@ 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, @@ -125,7 +128,7 @@ Promo.defaultProps = { 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 index 75449f323..8b32018b6 100644 --- 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} > 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} > - Promo None w/Video + Promo None w/Video (no loop) !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,6 +104,9 @@ 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; @@ -99,9 +114,12 @@ const PlayButton = styled.button` 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 index ab9872d7e..b1331e38c 100644 --- 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} > { imageSet={defaultData.promoImage} image={defaultData.promoImage} imageAltText="" - copyFirst={false} + copyLeft={false} position="end" >