Convert preview player to use html5

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -181,7 +181,10 @@ function PreviewContent({
   setProgress,
   setReviewed,
 }: PreviewContentProps) {
-  const playerRef = useRef<Player | null>(null);
+  const playerRef = useRef<HTMLVideoElement | null>(null);
+
+  // keep track of playback state
+
   const playerStartTime = useMemo(() => {
     if (!relevantPreview) {
       return 0;
@@ -190,73 +193,33 @@ function PreviewContent({
     // start with a bit of padding
     return Math.max(0, review.start_time - relevantPreview.start - 8);
   }, []);
+  const [lastPercent, setLastPercent] = useState(0.0);
 
-  // manual playback
-  // safari is incapable of playing at a speed > 2x
-  // so manual seeking is required on iOS
+  // initialize player correctly
 
-  const [manualPlayback, setManualPlayback] = useState(false);
   useEffect(() => {
-    if (!manualPlayback || !playerRef.current) {
-      return;
-    }
-
-    let counter = 0;
-    const intervalId: NodeJS.Timeout = setInterval(() => {
-      if (playerRef.current) {
-        playerRef.current.currentTime(playerStartTime + counter);
-        counter += 1;
-      }
-    }, 125);
-    return () => clearInterval(intervalId);
-  }, [manualPlayback, playerRef]);
-
-  // preview
-
-  if (relevantPreview) {
-    return (
-      <VideoPlayer
-        options={{
-          preload: "auto",
-          autoplay: true,
-          controls: false,
-          muted: true,
-          fluid: true,
-          aspectRatio: "16:9",
-          loadingSpinner: false,
-          sources: relevantPreview
-            ? [
-                {
-                  src: `${relevantPreview.src}`,
-                  type: "video/mp4",
-                },
-              ]
-            : [],
-        }}
-        seekOptions={{}}
-        onReady={(player) => {
-          playerRef.current = player;
-
-          if (!relevantPreview) {
+    if (!playerRef.current) {
       return;
     }
 
     if (isSafari) {
-            player.pause();
+      playerRef.current.pause();
       setManualPlayback(true);
     } else {
-            player.currentTime(playerStartTime);
-            player.playbackRate(8);
+      playerRef.current.currentTime = playerStartTime;
+      playerRef.current.playbackRate = 8;
     }
+  }, [playerRef]);
 
-          let lastPercent = 0;
-          player.on("timeupdate", () => {
+  // time progress update
+
+  const onProgress = useCallback(() => {
     if (!setProgress) {
       return;
     }
 
     const playerProgress =
-              (player.currentTime() || 0) - playerStartTime;
+      (playerRef.current?.currentTime || 0) - playerStartTime;
 
     // end with a bit of padding
     const playerDuration = review.end_time - review.start_time + 8;
@@ -271,7 +234,7 @@ function PreviewContent({
       setReviewed();
     }
 
-            lastPercent = playerPercent;
+    setLastPercent(playerPercent);
 
     if (playerPercent > 100) {
       playerRef.current?.pause();
@@ -280,12 +243,43 @@ function PreviewContent({
     } else {
       setProgress(playerPercent);
     }
-          });
-        }}
-        onDispose={() => {
-          playerRef.current = null;
-        }}
-      />
+  }, [setProgress, lastPercent]);
+
+  // manual playback
+  // safari is incapable of playing at a speed > 2x
+  // so manual seeking is required on iOS
+
+  const [manualPlayback, setManualPlayback] = useState(false);
+  useEffect(() => {
+    if (!manualPlayback || !playerRef.current) {
+      return;
+    }
+
+    let counter = 0;
+    const intervalId: NodeJS.Timeout = setInterval(() => {
+      if (playerRef.current) {
+        playerRef.current.currentTime = playerStartTime + counter;
+        counter += 1;
+      }
+    }, 125);
+    return () => clearInterval(intervalId);
+  }, [manualPlayback, playerRef]);
+
+  // preview
+
+  if (relevantPreview) {
+    return (
+      <video
+        ref={playerRef}
+        className="w-full h-full aspect-video bg-black"
+        autoPlay
+        playsInline
+        preload="auto"
+        muted
+        onTimeUpdate={onProgress}
+      >
+        <source src={relevantPreview.src} type={relevantPreview.type} />
+      </video>
     );
   } else if (isCurrentHour(review.start_time)) {
     return (