Create and use MutedVideoLoop component for convenience

SU-SWS · Feb 18, 2025 · cb6b954 · cb6b954
1 parent 8ccb109
commit cb6b954
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 53 deletions.
diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx
@@ -8,7 +8,7 @@ import { Grid } from '@/components/Grid';
 import {
   Heading, Paragraph, Text, type HeadingType, SrOnlyText,
 } from '@/components/Typography';
-import { Video, VideoButton } from '@/components/Video';
+import { MutedVideoLoop, VideoButton } from '@/components/Video';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import {
   accentBorderColors,
@@ -193,14 +193,12 @@ export const BlurryPoster = ({
         </picture>
       )}
       {hasBgVideo && (
-        <Video
+        <MutedVideoLoop
           ref={bgVideoRef}
           webmSrc={bgVideoWebm}
           mp4Src={bgVideoMp4}
-          autoPlay
-          playsInline
-          loop
-          muted
+          onPlay={() => setIsBgPlaying(true)}
+          onPause={() => setIsBgPlaying(false)}
           poster={getProcessedImage(bgVideoPosterSrc, '1600x900', bgVideoPosterFocus)}
           className="absolute inset-0 size-full object-cover"
         />
@@ -318,14 +316,10 @@ export const BlurryPoster = ({
                 {hasVideo && (
                   <div className={styles.videoWrapper}>
                     <div className={styles.videoPlayerWrapper(isTwoCol)}>
-                      <Video
+                      <MutedVideoLoop
                         ref={videoRef}
                         webmSrc={videoWebm}
                         mp4Src={videoMp4}
-                        autoPlay
-                        playsInline
-                        loop
-                        muted
                         onPlay={() => setIsPlaying(true)}
                         onPause={() => setIsPlaying(false)}
                         poster={getProcessedImage(videoPosterSrc, '1600x900', videoPosterFocus)}
@@ -335,7 +329,7 @@ export const BlurryPoster = ({
                     <VideoButton
                       isPause={isPlaying}
                       onClick={toggleVideo}
-                      className="absolute block z-10 bottom-20 right-20"
+                      className="block z-10 bottom-20 right-20"
                     />
                   </div>
                 )}

diff --git a/components/Hero/BasicHero.tsx b/components/Hero/BasicHero.tsx
@@ -3,7 +3,7 @@ import { cnb } from 'cnbuilder';
 import { AnimateInView } from '@/components/Animate';
 import { Container } from '@/components/Container';
 import { Heading, SrOnlyText, Text } from '@/components/Typography';
-import { Video, VideoButton } from '@/components/Video';
+import { MutedVideoLoop, VideoButton } from '@/components/Video';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import {
   gradientFroms,
@@ -124,14 +124,10 @@ export const BasicHero = ({
         </picture>
       )}
       {hasVideo && (
-        <Video
+        <MutedVideoLoop
           ref={videoRef}
           webmSrc={videoWebm}
           mp4Src={videoMp4}
-          autoPlay
-          playsInline
-          loop
-          muted
           onPlay={() => setIsPlaying(true)}
           onPause={() => setIsPlaying(false)}
           poster={getProcessedImage(videoPosterSrc, '1600x900', videoPosterFocus)}

diff --git a/components/Hero/StoryHeroMvp.tsx b/components/Hero/StoryHeroMvp.tsx
@@ -101,6 +101,10 @@ export const StoryHeroMvp = ({
           imageSrc={filename}
           imageFocus={focus}
           alt={alt}
+          videoWebm={webmFilename}
+          videoMp4={mp4Filename}
+          videoPosterSrc={posterFilename}
+          videoPosterFocus={posterFocus}
           isLightHero={isLightHero}
           hasCaption={hasCaption}
           taxonomy={taxonomy}

diff --git a/components/Hero/StoryHeroStacked.styles.ts b/components/Hero/StoryHeroStacked.styles.ts
@@ -2,7 +2,7 @@ import { cnb } from 'cnbuilder';
 
 export const root = 'relative';
 
-export const contentWrapper = 'mt-40 md:-mt-60 xl:mt-0';
+export const contentWrapper = (hasVideo: boolean) => cnb('mt-40 md:-mt-60 xl:mt-0', hasVideo && 'rs-pb-3');
 export const superhead = (isLightHero: boolean) => cnb('cc mb-04em w-full', !isLightHero && 'text-shadow-sm');
 export const heading = (
   isSmallHeading?: boolean,
@@ -23,3 +23,7 @@ export const mobileImage = 'size-full lg:hidden';
 export const captionWrapper = 'mt-06em';
 export const caption = 'caption *:leading-display mt-08em max-w-prose-wide';
 
+export const videoWrapper = 'relative';
+export const videoPlayerWrapper = 'aspect-w-16 aspect-h-9';
+export const video = 'h-full w-full object-cover object-center pointer-events-none';
+
diff --git a/components/Hero/StoryHeroStacked.tsx b/components/Hero/StoryHeroStacked.tsx
@@ -1,10 +1,12 @@
+import { useRef, useState } from 'react';
 import { AnimateInView } from '@/components/Animate';
 import { Container } from '@/components/Container';
 import { CtaLink } from '@/components/Cta';
 import { FlexBox } from '@/components/FlexBox';
 import {
   Heading, Paragraph, Text, SrOnlyText,
 } from '@/components/Typography';
+import { MutedVideoLoop, VideoButton } from '@/components/Video';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import { getSbImageSize } from '@/utilities/getSbImageSize';
 import { taxonomyMap, type TaxonomyType } from '@/utilities/taxonomyMaps';
@@ -22,6 +24,10 @@ export type StoryHeroStackedProps = {
   imageSrc?: string;
   imageFocus?: string;
   alt?: string;
+  videoWebm?: string;
+  videoMp4?: string;
+  videoPosterSrc?: string;
+  videoPosterFocus?: string;
   hasCaption?: boolean;
   isLightHero?: boolean;
   taxonomy?: TaxonomyType[];
@@ -39,6 +45,10 @@ export const StoryHeroStacked = ({
   imageSrc,
   imageFocus,
   alt,
+  videoWebm,
+  videoMp4,
+  videoPosterSrc,
+  videoPosterFocus,
   hasCaption,
   isLightHero = false,
   taxonomy,
@@ -56,14 +66,33 @@ export const StoryHeroStacked = ({
   // We're using the date only (no time) version of the date picker so trimming the time off
   const date = publishedDate?.slice(0, 10);
 
+  /**
+   * Image/video
+   */
+  const hasVideo = !!videoWebm || !!videoMp4;
+  const hasMedia = !!imageSrc || hasVideo;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlaying, setIsPlaying] = useState(null);
+
+  const toggleVideo = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause();
+      } else {
+        videoRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
   return (
     <Container
       width="full"
       className={styles.root}
       pt={10}
       style={{ backgroundColor: heroBgColor || '#888' }}
     >
-      <Container className={styles.contentWrapper}>
+      <Container className={styles.contentWrapper(hasVideo)}>
         {superhead && (
           <AnimateInView animation="slideUp">
             <Text
@@ -141,39 +170,61 @@ export const StoryHeroStacked = ({
           </AnimateInView>
         )}
       </Container>
-      {imageSrc && (
+      {hasMedia && (
         <AnimateInView animation="zoomSharpen" duration={1}>
-          <picture>
-            <source
-              srcSet={getProcessedImage(imageSrc, '2000x0', imageFocus)}
-              media="(min-width: 1500px)"
-            />
-            <source
-              srcSet={getProcessedImage(imageSrc, '1500x0', imageFocus)}
-              media="(min-width: 1200px)"
-            />
-            <source
-              srcSet={getProcessedImage(imageSrc, '1200x0', imageFocus)}
-              media="(min-width: 768px)"
-            />
-            <source
-              srcSet={getProcessedImage(imageSrc, '800x0', imageFocus)}
-              media="(min-width: 576px)"
-            />
-            <source
-              srcSet={getProcessedImage(imageSrc, '600x0', imageFocus)}
-              media="(max-width: 575px)"
-            />
-            <img
-              src={getProcessedImage(imageSrc, '2000x0', imageFocus)}
-              alt={alt || ''}
-              aria-describedby={hasCaption ? 'story-hero-caption' : undefined}
-              fetchPriority="high"
-              width={imageWidth}
-              height={imageHeight}
-              className={styles.image}
-            />
-          </picture>
+          {imageSrc && (
+            <picture>
+              <source
+                srcSet={getProcessedImage(imageSrc, '2000x0', imageFocus)}
+                media="(min-width: 1500px)"
+              />
+              <source
+                srcSet={getProcessedImage(imageSrc, '1500x0', imageFocus)}
+                media="(min-width: 1200px)"
+              />
+              <source
+                srcSet={getProcessedImage(imageSrc, '1200x0', imageFocus)}
+                media="(min-width: 768px)"
+              />
+              <source
+                srcSet={getProcessedImage(imageSrc, '800x0', imageFocus)}
+                media="(min-width: 576px)"
+              />
+              <source
+                srcSet={getProcessedImage(imageSrc, '600x0', imageFocus)}
+                media="(max-width: 575px)"
+              />
+              <img
+                src={getProcessedImage(imageSrc, '2000x0', imageFocus)}
+                alt={alt || ''}
+                aria-describedby={hasCaption ? 'story-hero-caption' : undefined}
+                fetchPriority="high"
+                width={imageWidth}
+                height={imageHeight}
+                className={styles.image}
+              />
+            </picture>
+          )}
+          {hasVideo && (
+            <div className={styles.videoWrapper}>
+              <div className={styles.videoPlayerWrapper}>
+                <MutedVideoLoop
+                  ref={videoRef}
+                  webmSrc={videoWebm}
+                  mp4Src={videoMp4}
+                  onPlay={() => setIsPlaying(true)}
+                  onPause={() => setIsPlaying(false)}
+                  poster={getProcessedImage(videoPosterSrc, '1600x900', videoPosterFocus)}
+                  className={styles.video}
+                />
+              </div>
+              <VideoButton
+                isPause={isPlaying}
+                onClick={toggleVideo}
+                className="absolute block z-10 bottom-20 right-20"
+              />
+            </div>
+          )}
         </AnimateInView>
       )}
     </Container>

diff --git a/components/Video/MutedVideoLoop.tsx b/components/Video/MutedVideoLoop.tsx
@@ -0,0 +1,6 @@
+import { forwardRef } from 'react';
+import { Video, type VideoProps } from './Video';
+
+export const MutedVideoLoop = forwardRef<HTMLVideoElement, VideoProps>((props, ref) => (
+  <Video ref={ref} role="presentation" muted autoPlay loop playsInline {...props} />
+));
diff --git a/components/Video/VideoButton.styles.ts b/components/Video/VideoButton.styles.ts
@@ -1,6 +1,6 @@
 import { cnb } from 'cnbuilder';
 
-export const root = 'group z-10 size-36 md:size-44 bg-black-true/40 border-2 rounded-full border-black-20/50 transition-colors hocus-visible:bg-cardinal-red hocus-visible:border-white hocus-visible:text-white shrink-0';
+export const root = 'group z-10 size-36 md:size-44 bg-black-true/40 border-2 rounded-full border-black-10/60 transition-colors hocus-visible:bg-cardinal-red hocus-visible:border-white hocus-visible:text-white shrink-0';
 export const icon = (isPause: boolean) => cnb(
   'text-black-20 size-16 md:size-20 group-hocus-within:scale-110 group-hocus-within:text-white',
   !isPause && 'ml-1',

diff --git a/components/Video/index.ts b/components/Video/index.ts
@@ -1,2 +1,3 @@
+export * from './MutedVideoLoop';
 export * from './Video';
 export * from './VideoButton';