Update VideoPlayer.tsx

src/components/VideoPlayer.tsx

@@ -1,114 +1,85 @@
-'use client';
 import React, { useEffect, useRef, useState } from 'react';
+import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
+import 'video.js/dist/video-js.css';
+import 'videojs-seek-buttons/dist/videojs-seek-buttons.css';
+import 'videojs-seek-buttons';
 
-// mpdUrl => https://cloudfront.enet/video/video.mp4
-// thumbnail => https://cloudfront.enet/video/thumbnail.jpg
-// subtitles => https://cloudfront.enet/video/subtitles.vtt
-//
-export const VideoPlayer = ({
-  mpdUrl,
-  subtitles,
-}: {
+interface VideoPlayerProps {
   mpdUrl: string;
-  thumbnail: string;
   subtitles: string;
-}) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [player, setPlayer] = useState<any>(null);
+}
 
-  useEffect(() => {
-    if (!player) {
-      return;
-    }
-    const handleKeyPress = (event: any) => {
-      switch (event.code) {
-      case 'Space': // Space bar for play/pause
-        if (player.paused()) {
-          player.play();
-          event.stopPropagation();
-        } else {
-          player.pause();
-          event.stopPropagation();
-        }
-        break;
-      case 'ArrowRight': // Right arrow for seeking forward 5 seconds
-        player.currentTime(player.currentTime() + 5);
-        event.stopPropagation();
-        break;
-      case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
-        player.currentTime(player.currentTime() - 5);
-        event.stopPropagation();
-        break;
-      }
-    };
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ mpdUrl, subtitles }) => {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [player, setPlayer] = useState<VideoJsPlayer | null>(null);
 
-    document.addEventListener('keydown', handleKeyPress);
+  const initializePlayer = () => {
+    if (!videoRef.current) return;
 
-    // Cleanup function
-    return () => {
-      document.removeEventListener('keydown', handleKeyPress);
+    const options: VideoJsPlayerOptions = {
+      playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2],
+      controls: true,
+      fluid: true,
+      html5: {
+        vhs: {
+          overrideNative: true,
+        },
+      },
     };
-  }, [player]);
 
-  useEffect(() => {
-    if (!videoRef.current) {
-      return;
+    const playerInstance = videojs(videoRef.current, options);
+
+    const videoType = mpdUrl.endsWith('.mpd')
+      ? 'application/dash+xml'
+      : mpdUrl.endsWith('.m3u8')
+        ? 'application/x-mpegURL'
+        : 'video/mp4';
+
+    playerInstance.src({
+      src: mpdUrl,
+      type: videoType,
+    });
+
+    playerInstance.addRemoteTextTrack(
+      {
+        kind: 'subtitles',
+        src: subtitles,
+        srclang: 'en',
+        label: 'English',
+      },
+      false
+    );
+
+    // Initialize player
+    playerInstance.on('chapterchange', handleChapterChange);
+    playerInstance.on('keystatuschange', (event: unknown) => {
+      console.log('Keystatus Change Event:', event);
+    });
+    playerInstance.seekButtons({ forward: 10, back: 10 });
+    playerInstance.playbackRate(1); // Set initial playback rate to 1x
+
+    setPlayer(playerInstance);
+  };
+
+  // Handle chapter changes
+  const handleChapterChange = () => {
+    if (player) {
+      player.tech().off('chapterchange', handleChapterChange);
+      player.dispose();
+      setPlayer(null);
+      initializePlayer();
     }
-    window.setTimeout(() => {
-      const player = (window as any).videojs(
-        videoRef.current,
-        {
-          playbackrates: [0.5, 1, 1.25, 1.5, 1.75, 2],
-          controls: true,
-          fluid: true,
-          html5: {
-            vhs: {
-              overridenative: true,
-            },
-          },
-        },
-        function () {
-          //@ts-ignore
-          player.eme();
-          setPlayer(player);
-          if (mpdUrl.endsWith('.mpd')) {
-            //@ts-ignore
-            this.src({
-              src: mpdUrl,
-              type: 'application/dash+xml',
-              keySystems: {
-                'com.widevine.alpha':
-                  'https://widevine-dash.ezdrm.com/proxy?pX=288FF5&user_id=MTAwMA==',
-              },
-            });
-          } else if (mpdUrl.endsWith('.m3u8')) {
-            //@ts-ignore
-            this.src({
-              src: mpdUrl,
-              type: 'application/x-mpegURL',
-            });
-          } else {
-            //@ts-ignore
-            this.src({
-              src: mpdUrl,
-              type: 'video/mp4',
-            });
-          }
+  };
 
-          //@ts-ignore
-          this.on('keystatuschange', (event: any) => {
-            console.log('event: ', event);
-          });
-          player.seekButtons({
-            forward: 10,
-            back: 10,
-          });
-        },
-      );
-    }, 1000);
+  useEffect(() => {
+    initializePlayer();
 
-    return () => {};
-  }, [videoRef.current]);
+    return () => {
+      if (player) {
+        player.dispose();
+      }
+    };
+  }, [mpdUrl, subtitles]);
 
   return (
     <div className="py-2">