Use StoryVideo for StoryHeroStacked and clean up

SU-SWS · Feb 27, 2025 · 55eb146 · 55eb146
1 parent 919302e
commit 55eb146
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 46 deletions.
diff --git a/components/Hero/StoryHeroStacked.styles.ts b/components/Hero/StoryHeroStacked.styles.ts
@@ -22,10 +22,3 @@ export const image = 'rs-mt-4 w-full';
 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';
-export const videoBtnWrapper = 'absolute block z-10 bottom-0 right-0 pb-20 md:pb-36';
-export const videoButton = 'relative';
-
diff --git a/components/Hero/StoryHeroStacked.tsx b/components/Hero/StoryHeroStacked.tsx
@@ -1,12 +1,11 @@
-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 { StoryVideo } from '@/components/Video';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import { getSbImageSize } from '@/utilities/getSbImageSize';
 import { taxonomyMap, type TaxonomyType } from '@/utilities/taxonomyMaps';
@@ -69,19 +68,6 @@ export const StoryHeroStacked = ({
    */
   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
@@ -204,26 +190,13 @@ export const StoryHeroStacked = ({
             </picture>
           )}
           {hasVideo && (
-            <div className={styles.videoWrapper}>
-              <div className={styles.videoPlayerWrapper}>
-                <MutedVideoLoop
-                  ref={videoRef}
-                  webmSrc={videoWebm}
-                  mp4Src={videoMp4}
-                  onPlay={() => setIsPlaying(true)}
-                  onPause={() => setIsPlaying(false)}
-                  posterSrc={videoPosterSrc}
-                  className={styles.video}
-                />
-              </div>
-              <Container width="wide" className={styles.videoBtnWrapper}>
-                <VideoButton
-                  isPause={isPlaying}
-                  onClick={toggleVideo}
-                  className={styles.videoButton}
-                />
-              </Container>
-            </div>
+            <StoryVideo
+              videoWebm={videoWebm}
+              videoMp4={videoMp4}
+              videoPosterSrc={videoPosterSrc}
+              aspectRatio="free"
+              isFullScreen
+            />
           )}
         </AnimateInView>
       )}

diff --git a/components/Video/StoryVideo.styles.ts b/components/Video/StoryVideo.styles.ts
@@ -8,8 +8,8 @@ export const captionBgColors = {
 };
 export type CaptionBgColorType = keyof typeof captionBgColors;
 
-export const root = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-full' : '');
-export const animateWrapper = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-full' : '');
+export const root = (isFullHeight: boolean) => cnb(isFullHeight ? 'h-full' : '');
+export const animateWrapper = (isFullHeight: boolean) => cnb(isFullHeight ? 'h-full' : '');
 export const figure = (isFullHeight: boolean) => cnb(isFullHeight ? 'h-full' : '');
 export const imageWrapper = (isFullHeight: boolean, isParallax: boolean) => cnb('relative',
   isFullHeight ? 'h-full' : '',
@@ -22,4 +22,9 @@ export const caption = (captionBgColor: CaptionBgColorType) => cnb(
   !!captionBgColor && captionBgColor !== 'transparent' ? 'px-1em py-08em' : 'pt-06em',
 );
 export const video = 'size-full object-cover pointer-events-none';
-export const videoButton = 'absolute block z-10 bottom-10 right-10 md:bottom-20 md:right-20';
+export const videoButton = (isFullScreen: boolean) => cnb(
+  'absolute block z-10 bottom-10 md:bottom-20',
+  isFullScreen ?
+  'right-20 sm:right-30 md:right-50 lg:right-80 xl:right-100 4xl:right-[calc((100%-1800px)/2)]'
+  : 'right-10 md:right-20',
+);
diff --git a/components/Video/StoryVideo.tsx b/components/Video/StoryVideo.tsx
@@ -17,10 +17,12 @@ export type StoryVideoProps = React.HTMLAttributes<HTMLDivElement> & MediaWrappe
   videoWebm?: string;
   videoMp4?: string;
   videoPosterSrc?: string;
+  isFullScreen?: boolean; // Whether the video takes the full width of the device
   spacingTop?: PaddingType;
   spacingBottom?: PaddingType;
   animation?: AnimationType;
   delay?: number;
+  buttonClass?: string;
 };
 
 export const StoryVideo = ({
@@ -32,6 +34,7 @@ export const StoryVideo = ({
   isFullHeight,
   boundingWidth = 'full',
   width,
+  isFullScreen,
   spacingTop,
   spacingBottom,
   isCaptionInset,
@@ -40,6 +43,7 @@ export const StoryVideo = ({
   delay,
   children,
   className,
+  buttonClass,
   ...props
 }: StoryVideoProps) => {
   const hasVideo = !!videoWebm || !!videoMp4;
@@ -113,7 +117,7 @@ export const StoryVideo = ({
         <VideoButton
           isPause={isPlaying}
           onClick={toggleVideo}
-          className={styles.videoButton}
+          className={cnb(styles.videoButton(isFullScreen), buttonClass)}
         />
       </div>
       {children}