Merge pull request #342 from AppQuality/test-player

Add lazy loading for video player in highlight stories
AppQuality · May 13, 2024 · e49b65c · e49b65c
2 parents 06c3b2d + 3a89a41
commit e49b65c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.86",
+  "version": "3.1.86-player-ref",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",

diff --git a/src/stories/highlight/index.stories.tsx b/src/stories/highlight/index.stories.tsx
@@ -1,15 +1,16 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 import { Highlight } from ".";
+import useDebounce from "../../hooks/useDebounce";
 import { Button } from "../buttons/button";
 import { Col } from "../grid/col";
 import { Grid } from "../grid/grid";
 import { Row } from "../grid/row";
+import { Player } from "../player";
 import { theme } from "../theme";
 import { getColor } from "../theme/utils";
 import { Paragraph } from "../typography/paragraph";
 import { HighlightArgs, Observation } from "./_types";
-import useDebounce from "../../hooks/useDebounce";
 
 interface StoryArgs extends HighlightArgs {
   words: { start: number; end: number; word: string; speaker: number }[];
@@ -102,24 +103,23 @@ const VideoTemplate: StoryFn<StoryArgs> = (args) => {
   }>();
 
   const [currentTime, setCurrentTime] = useState(0);
-  const videoRef = useRef<HTMLVideoElement>(null);
 
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.addEventListener("timeupdate", () => {
-        setCurrentTime(videoRef.current?.currentTime || 0);
+  const handleRef = useCallback((video: HTMLVideoElement) => {
+    if (video) {
+      video.addEventListener("timeupdate", () => {
+        setCurrentTime(video?.currentTime || 0);
       });
     }
 
     return () => {
-      if (videoRef.current) {
-        videoRef.current.removeEventListener("timeupdate", () => {
+      if (video) {
+        video.removeEventListener("timeupdate", () => {
           // eslint-disable-next-line react-hooks/exhaustive-deps
-          setCurrentTime(videoRef.current?.currentTime || 0);
+          setCurrentTime(video?.currentTime || 0);
         });
       }
     };
-  }, [videoRef]);
+  }, []);
 
   const [observations, setObservations] = useState<Observation[]>([]);
 
@@ -158,10 +158,16 @@ const VideoTemplate: StoryFn<StoryArgs> = (args) => {
             </Highlight>
           </Col>
           <Col>
-            <video
+            {/* <video
               ref={videoRef}
               controls
               src="https://mediaconvert-test-output-bk.s3.eu-west-1.amazonaws.com/02b786286aa36703832b783711affb4fbf11ad77_1712765073.mp4"
+            /> */}
+            <Player
+              ref={handleRef}
+              url={
+                "https://mediaconvert-test-output-bk.s3.eu-west-1.amazonaws.com/02b786286aa36703832b783711affb4fbf11ad77_1712765073.mp4"
+              }
             />
           </Col>
         </Row>

diff --git a/src/stories/player/index.tsx b/src/stories/player/index.tsx
@@ -13,17 +13,11 @@ import { ProgressContextProvider } from "./parts/progressContext";
  * Used for this:
     - To display a video 
  */
-const Player = forwardRef<HTMLVideoElement, PlayerArgs>((props, forwardRef) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useImperativeHandle(forwardRef, () => videoRef.current as HTMLVideoElement);
-
-  return (
-    <Video src={props.url} {...props}>
-      <PlayerCore ref={videoRef} {...props} />
-    </Video>
-  );
-});
+const Player = forwardRef<HTMLVideoElement, PlayerArgs>((props, forwardRef) => (
+  <Video src={props.url} {...props}>
+    <PlayerCore ref={forwardRef} {...props} />
+  </Video>
+));
 
 const PlayerCore = forwardRef<HTMLVideoElement, PlayerArgs>(
   (props, forwardRef) => {
@@ -33,7 +27,7 @@ const PlayerCore = forwardRef<HTMLVideoElement, PlayerArgs>(
     const isLoaded = !!videoRef;
     const containerRef = useRef<HTMLDivElement>(null);
 
-    useImperativeHandle(forwardRef, () => videoRef as HTMLVideoElement);
+    useImperativeHandle(forwardRef, () => videoRef as HTMLVideoElement, [videoRef]);
 
     useEffect(() => {
       if (videoRef) {