pausing choices video/carousel and feedback now whenn not on screen

inovex · Dec 12, 2023 · f2bdaf8 · f2bdaf8
1 parent 0c74250
commit f2bdaf8
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@directus/sdk": "^13.0.2",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
+    "@uidotdev/usehooks": "^2.4.1",
     "astro": "^4.0.3",
     "classnames": "^2.3.2",
     "random-avatar-generator": "^2.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ProgressButton.tsx b/src/components/ProgressButton.tsx
@@ -7,6 +7,7 @@ type ProgessButtonProps = {
   icon: string;
   onClick: () => void;
   active: boolean;
+  paused: boolean;
   duration: number;
 };
 
@@ -15,13 +16,14 @@ const ProgressButton = ({
   icon,
   onClick,
   active,
+  paused,
   duration,
 }: ProgessButtonProps) => {
   return (
     <div
       className={classNames(
         "progress-button",
-        active && "progress-button--active"
+        active && "progress-button--active",
       )}
     >
       <Icon name={icon} />
@@ -33,7 +35,9 @@ const ProgressButton = ({
           <div
             className="progress-button__progress-bar"
             style={{
-              animation: `progress ${duration}ms linear forwards`,
+              animation: `progress ${duration}ms linear ${
+                paused ? "paused" : "running"
+              } forwards`,
             }}
           />
         </div>

diff --git a/src/components/Video.tsx b/src/components/Video.tsx
@@ -4,13 +4,15 @@ import { useRef, useEffect, useMemo } from "react";
 
 type Props = {
   className?: string;
-  handleLoadedMetadata?: (duration: number) => void;
   video: string;
+  paused: boolean;
+  handleLoadedMetadata?: (duration: number) => void;
 };
 
 export default function Video({
   className,
   video,
+  paused,
   handleLoadedMetadata,
 }: Props) {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -19,6 +21,13 @@ export default function Video({
     if (videoRef.current) videoRef.current.defaultMuted = true;
   }, []);
 
+  useEffect(() => {
+    if (videoRef.current) {
+      if (paused) videoRef.current.pause();
+      else videoRef.current.play();
+    }
+  }, [paused]);
+
   const key = useMemo(() => video, [video]);
 
   return (

diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useIntersectionObserver } from "@uidotdev/usehooks";
 import ProgressButton from "./ProgressButton";
 import useMediaQuery from "../hooks/useMediaQuery";
 import Video from "./Video";
@@ -16,10 +17,15 @@ type Props = {
     buttonFirstVidLabel: string;
     buttonSecondVidLabel: string;
     buttonThirdVidLabel: string;
-  }
-}
+  };
+};
 
 const VideoPlayer = (props: Props) => {
+  const [ref, entry] = useIntersectionObserver({
+    threshold: 0.75,
+    rootMargin: "0px",
+  });
+
   const [position, setPosition] = useState(0);
   const theme = useMediaQuery("(prefers-color-scheme: dark)")
     ? "dark"
@@ -37,6 +43,7 @@ const VideoPlayer = (props: Props) => {
   }, [isMobile]);
 
   useEffect(() => {
+    if (!entry?.isIntersecting) return;
     const interval = setInterval(() => {
       setPosition((prevPosition) => {
         if (!isMobile ? prevPosition === 8 : prevPosition === 2) {
@@ -48,106 +55,110 @@ const VideoPlayer = (props: Props) => {
     }, duration);
 
     return () => clearInterval(interval);
-  }, [position, duration, isMobile]);
+  }, [position, duration, isMobile, entry?.isIntersecting]);
 
   return (
-      <div className="choices__content">
-        <div className="choices__buttons">
-          <ProgressButton
-            icon="Edit"
-            onClick={() => setPosition(0)}
-            active={!isMobile ? position <= 2 : position === 0}
-            duration={!isMobile ? duration * 3 : duration}
-          >
-            {props.textContent.buttonCollab}
-          </ProgressButton>
-          <ProgressButton
-            icon="Vote"
-            onClick={() => setPosition(3)}
-            active={!isMobile ? position > 2 && position <= 5 : position === 1}
-            duration={!isMobile ? duration * 3 : duration}
-          >
-            {props.textContent.buttonModerate}
-          </ProgressButton>
-          <ProgressButton
-            icon="Columns"
-            onClick={() => setPosition(6)}
-            active={!isMobile ? position > 5 && position <= 8 : position === 2}
-            duration={!isMobile ? duration * 3 : duration}
-          >
-            {props.textContent.buttonCustomize}
-          </ProgressButton>
-        </div>
-        <div className="choices__image-wrapper">
-          {!isMobile && (
-            <picture>
-              <source
-                srcSet={`/assets/choices/choices_${theme}_${position}.webp`}
-                type="image/webp"
-              />
-              <img
-                src={`/assets/choices/choices_${theme}_${position}.png`}
-                height="290"
-                width="680"
-                alt={`${props.textContent.screenshotAlt} ${position + 1}`}
-              />
-            </picture>
-          )}
-        </div>
-        <div className="choices__video-wrapper">
-          <button
-            className="choices__video-button choices__video-button--left"
-            disabled={position === 0}
-            onClick={() => setPosition(position - 1)}
-            aria-label={props.textContent.buttonPrevVidLabel}
-          >
-            <Icon name="Chevron" />
-          </button>
-          {isMobile && (
-            <Video
-              className="choices__video"
-              video={`/assets/choices/videos/choices_${theme}_${position}`}
-              handleLoadedMetadata={setVideoDuration}
+    <div className="choices__content" ref={ref}>
+      <div className="choices__buttons">
+        <ProgressButton
+          icon="Edit"
+          onClick={() => setPosition(0)}
+          active={!isMobile ? position <= 2 : position === 0}
+          paused={!entry?.isIntersecting}
+          duration={!isMobile ? duration * 3 : duration}
+        >
+          {props.textContent.buttonCollab}
+        </ProgressButton>
+        <ProgressButton
+          icon="Vote"
+          onClick={() => setPosition(3)}
+          active={!isMobile ? position > 2 && position <= 5 : position === 1}
+          paused={!entry?.isIntersecting}
+          duration={!isMobile ? duration * 3 : duration}
+        >
+          {props.textContent.buttonModerate}
+        </ProgressButton>
+        <ProgressButton
+          icon="Columns"
+          onClick={() => setPosition(6)}
+          active={!isMobile ? position > 5 && position <= 8 : position === 2}
+          paused={!entry?.isIntersecting}
+          duration={!isMobile ? duration * 3 : duration}
+        >
+          {props.textContent.buttonCustomize}
+        </ProgressButton>
+      </div>
+      <div className="choices__image-wrapper">
+        {!isMobile && (
+          <picture>
+            <source
+              srcSet={`/assets/choices/choices_${theme}_${position}.webp`}
+              type="image/webp"
             />
-          )}
-          <button
-            className="choices__video-button choices__video-button--right"
-            disabled={position === 2}
-            onClick={() => setPosition(position + 1)}
-            aria-label={props.textContent.buttonNextVidLabel}
-          >
-            <Icon name="Chevron" />
-          </button>
-          <ul className="choices__video-position-buttons">
-            <li>
-              <button
-                className="choices__video-position-button--0"
-                disabled={position === 0}
-                onClick={() => setPosition(0)}
-                aria-label={props.textContent.buttonFirstVidLabel}
-              />
-            </li>
+            <img
+              src={`/assets/choices/choices_${theme}_${position}.png`}
+              height="290"
+              width="680"
+              alt={`${props.textContent.screenshotAlt} ${position + 1}`}
+            />
+          </picture>
+        )}
+      </div>
+      <div className="choices__video-wrapper">
+        <button
+          className="choices__video-button choices__video-button--left"
+          disabled={position === 0}
+          onClick={() => setPosition(position - 1)}
+          aria-label={props.textContent.buttonPrevVidLabel}
+        >
+          <Icon name="Chevron" />
+        </button>
+        {isMobile && (
+          <Video
+            className="choices__video"
+            paused={!entry?.isIntersecting}
+            video={`/assets/choices/videos/choices_${theme}_${position}`}
+            handleLoadedMetadata={setVideoDuration}
+          />
+        )}
+        <button
+          className="choices__video-button choices__video-button--right"
+          disabled={position === 2}
+          onClick={() => setPosition(position + 1)}
+          aria-label={props.textContent.buttonNextVidLabel}
+        >
+          <Icon name="Chevron" />
+        </button>
+        <ul className="choices__video-position-buttons">
+          <li>
+            <button
+              className="choices__video-position-button--0"
+              disabled={position === 0}
+              onClick={() => setPosition(0)}
+              aria-label={props.textContent.buttonFirstVidLabel}
+            />
+          </li>
 
-            <li>
-              <button
-                className="choices__video-position-button--1"
-                disabled={position === 1}
-                onClick={() => setPosition(1)}
-                aria-label={props.textContent.buttonSecondVidLabel}
-              />
-            </li>
-            <li>
-              <button
-                className="choices__video-position-button--2"
-                disabled={position === 2}
-                onClick={() => setPosition(2)}
-                aria-label={props.textContent.buttonThirdVidLabel}
-              />
-            </li>
-          </ul>
-        </div>
+          <li>
+            <button
+              className="choices__video-position-button--1"
+              disabled={position === 1}
+              onClick={() => setPosition(1)}
+              aria-label={props.textContent.buttonSecondVidLabel}
+            />
+          </li>
+          <li>
+            <button
+              className="choices__video-position-button--2"
+              disabled={position === 2}
+              onClick={() => setPosition(2)}
+              aria-label={props.textContent.buttonThirdVidLabel}
+            />
+          </li>
+        </ul>
       </div>
+    </div>
   );
-}
+};
 
 export default VideoPlayer;
diff --git a/src/views/Choices/Choices.astro b/src/views/Choices/Choices.astro
@@ -3,13 +3,12 @@ import VideoPlayer from "../../components/VideoPlayer";
 import getTranslatedContent from "../../utils/directus";
 import "./Choices.scss";
 
-const {lang} = Astro.params;
+const { lang } = Astro.params;
 const content = await getTranslatedContent("Choices_Section", lang!);
 ---
 
 <section class="choices">
   <h2>{content.header}</h2>
   <p>{content.text}</p>
-  <VideoPlayer client:visible textContent={content} />
+  <VideoPlayer client:idle textContent={content} />
 </section>
-
diff --git a/src/views/Feedback/Feedback.astro b/src/views/Feedback/Feedback.astro
@@ -1,10 +1,10 @@
 ---
 import FeedbackCarousel from "./FeedbackCarousel.tsx";
-import getTranslatedContent, {getContent} from "../../utils/directus";
+import getTranslatedContent, { getContent } from "../../utils/directus";
 
-const {lang} = Astro.params;
+const { lang } = Astro.params;
 const content = await getTranslatedContent("Feedback_Section", lang!);
-const testimonials = await getContent("testimonials") as FeedbackItem[];
+const testimonials = (await getContent("testimonials")) as FeedbackItem[];
 
 export type FeedbackItem = {
   name: string;
@@ -16,8 +16,8 @@ export type FeedbackItem = {
 ---
 
 <section class="feedback">
-    <h2>{content.header}</h2>
-    <p>{content.text}</p>
+  <h2>{content.header}</h2>
+  <p>{content.text}</p>
   <div class="feedback_carousel-container">
     <FeedbackCarousel items={testimonials} client:only="react" />
   </div>