Clean up Blurry Poster to use same play/pause mechanism

SU-SWS · Feb 27, 2025 · 1b64573 · 1b64573
1 parent a2b849b
commit 1b64573
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 28 deletions.
diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx
@@ -105,18 +105,13 @@ export const mediaWrapper = (imageOnLeft?: boolean, isTwoCol?: boolean, hasMedia
   'lg:mt-0' : isTwoCol,
   'rs-mt-6' : hasMedia,
 });
-export const imageInnerWrapper = 'h-full w-full';
+export const mediaInnerWrapper = 'h-full w-full';
 export const image = 'h-full w-full object-cover object-center';
-
-export const videoWrapper = 'relative';
-export const videoPlayerWrapper = (isTwoCol: boolean) => cnb(
-  isTwoCol ? 'aspect-w-1 aspect-h-1 lg:aspect-w-3 lg:aspect-h-4' : 'aspect-w-16 aspect-h-9',
-);
-export const video = 'h-full w-full object-cover object-center pointer-events-none';
-export const videoButton = 'absolute block z-10 bottom-10 right-10 md:bottom-20 md:right-20';
+export const video = 'lg:aspect-w-3 lg:aspect-h-4';
 
 // Background video
 export const bgVideoBtnWrapper = 'relative pb-20 md:pb-36';
+export const bgVideo = 'absolute inset-0 size-full object-cover';
 export const bgVideoButton = (hasForegroundImage: boolean) => cnb(
   'block z-10 ml-auto mr-0',
   hasForegroundImage && 'lg:bottom-0 lg:right-0',

diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx
@@ -1,5 +1,6 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cnb } from 'cnbuilder';
+import { useInView } from 'framer-motion';
 import { AnimateInView } from '@/components/Animate';
 import { Container } from '@/components/Container';
 import { CtaLink } from '@/components/Cta';
@@ -119,20 +120,43 @@ export const BlurryPoster = ({
    */
   const hasBgVideo = !!bgVideoWebm || !!bgVideoMp4;
   const bgVideoRef = useRef<HTMLVideoElement>(null);
-  const [isBgPlaying, setIsBgPlaying] = useState(null);
+  const isBgVideoInView = useInView(bgVideoRef, { once: false, amount: 0.1 });
+  const [isBgPlaying, setIsBgPlaying] = useState<boolean>(false);
+  const [isBgUserPaused, setIsBgUserPaused] = useState<boolean>(false);
 
-  // Toggle background video play/pause
+  // Toggle foreground video play/pause
   const toggleBgVideo = () => {
-    if (bgVideoRef.current) {
-      if (isBgPlaying) {
-        bgVideoRef.current.pause();
+    if (!bgVideoRef.current) return;
+
+    setIsBgPlaying((prev) => {
+      if (prev) {
+        bgVideoRef.current?.pause();
+        setIsBgUserPaused(true);
       } else {
-        bgVideoRef.current.play();
+        bgVideoRef.current
+          ?.play()
+          .catch(() => {});
+        setIsBgUserPaused(false);
       }
-      setIsBgPlaying(!isBgPlaying);
-    }
+      return !prev;
+    });
   };
 
+  /**
+   * Pause video when it goes out of view,
+   * resume when it comes back into view if it was not manually paused by the user.
+   */
+  useEffect(() => {
+    const video = bgVideoRef.current;
+    if (!video) return;
+
+    if (isBgVideoInView && !isBgUserPaused) {
+      video.play().catch(() => {});
+    } else {
+      video.pause();
+    }
+  }, [isBgVideoInView, isBgUserPaused]);
+
   return (
     <Container {...props} bgColor={bgColor} width="full" className={styles.root}>
       {bgImageSrc && (
@@ -181,7 +205,7 @@ export const BlurryPoster = ({
           onPlay={() => setIsBgPlaying(true)}
           onPause={() => setIsBgPlaying(false)}
           posterSrc={bgVideoPosterSrc}
-          className="absolute inset-0 size-full object-cover"
+          className={styles.bgVideo}
         />
       )}
       <div className={cnb(
@@ -292,17 +316,15 @@ export const BlurryPoster = ({
           {/* Foreground media */}
           <Container width={isTwoCol ? 'full' : 'site'} className={styles.mediaWrapper(imageOnLeft, isTwoCol, hasMedia)}>
             {hasMedia && (
-              <AnimateInView animation="zoomSharpen" duration={1} className={styles.imageInnerWrapper}>
+              <AnimateInView animation="zoomSharpen" duration={1} className={styles.mediaInnerWrapper}>
                 {hasVideo && (
-                  <div className={styles.videoPlayerWrapper(isTwoCol)}>
-                    <StoryVideo
-                      videoWebm={videoWebm}
-                      videoMp4={videoMp4}
-                      videoPosterSrc={videoPosterSrc}
-                      aspectRatio={isTwoCol ? '1x1' : '16x9'}
-                      aspectRatioClass="lg:aspect-w-3 lg:aspect-h-4"
-                    />
-                  </div>
+                  <StoryVideo
+                    videoWebm={videoWebm}
+                    videoMp4={videoMp4}
+                    videoPosterSrc={videoPosterSrc}
+                    aspectRatio={isTwoCol ? '1x1' : '16x9'}
+                    aspectRatioClass={styles.video}
+                  />
                 )}
                 {imageSrc && (
                   <picture>