From 39ef730b883f8cdb68c3c579a8dc6673ab016088 Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Fri, 28 Nov 2025 21:46:55 +0800
Subject: [PATCH] feat: Add `useHlsPlayer` hook to manage HLS video playback
 and integrate it into `DesktopVideoPlayer`.

---
 components/player/DesktopVideoPlayer.tsx |   9 +-
 components/player/hooks/useHlsPlayer.ts  | 102 +++++++++++++++++++++++
 2 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 components/player/hooks/useHlsPlayer.ts

diff --git a/components/player/DesktopVideoPlayer.tsx b/components/player/DesktopVideoPlayer.tsx
index 853632f..1ed3182 100644
--- a/components/player/DesktopVideoPlayer.tsx
+++ b/components/player/DesktopVideoPlayer.tsx
@@ -3,6 +3,7 @@
 import { useDesktopPlayerState } from './hooks/useDesktopPlayerState';
 import { useDesktopPlayerLogic } from './hooks/useDesktopPlayerLogic';
 import { useHLSPreloader } from './hooks/useHLSPreloader';
+import { useHlsPlayer } from './hooks/useHlsPlayer';
 import { DesktopControlsWrapper } from './desktop/DesktopControlsWrapper';
 import { DesktopOverlayWrapper } from './desktop/DesktopOverlayWrapper';
 
@@ -29,6 +30,13 @@ export function DesktopVideoPlayer({
   // Preload HLS segments
   useHLSPreloader({ src, currentTime, videoRef: refs.videoRef, isLoading: state.isLoading });
 
+  // Initialize HLS Player
+  useHlsPlayer({
+    videoRef: refs.videoRef,
+    src,
+    autoPlay: shouldAutoPlay
+  });
+
   const {
     videoRef,
     containerRef,
@@ -71,7 +79,6 @@ export function DesktopVideoPlayer({
       <video
         ref={videoRef}
         className="w-full h-full object-contain"
-        src={src}
         poster={poster}
         x-webkit-airplay="allow"
         onPlay={handlePlay}
diff --git a/components/player/hooks/useHlsPlayer.ts b/components/player/hooks/useHlsPlayer.ts
new file mode 100644
index 0000000..98001df
--- /dev/null
+++ b/components/player/hooks/useHlsPlayer.ts
@@ -0,0 +1,102 @@
+import { useEffect, useRef } from 'react';
+import Hls from 'hls.js';
+
+interface UseHlsPlayerProps {
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    src: string;
+    autoPlay?: boolean;
+    onAutoPlayPrevented?: (error: Error) => void;
+}
+
+export function useHlsPlayer({
+    videoRef,
+    src,
+    autoPlay = false,
+    onAutoPlayPrevented
+}: UseHlsPlayerProps) {
+    const hlsRef = useRef<Hls | null>(null);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !src) return;
+
+        // Cleanup previous HLS instance
+        if (hlsRef.current) {
+            hlsRef.current.destroy();
+            hlsRef.current = null;
+        }
+
+        let hls: Hls | null = null;
+
+        // Check if HLS is supported natively (Safari, Mobile Chrome)
+        // We prefer native playback if available as it's usually more battery efficient
+        const isNativeHlsSupported = video.canPlayType('application/vnd.apple.mpegurl');
+
+        if (Hls.isSupported()) {
+            // Use hls.js for browsers without native support (Desktop Chrome, Firefox, Edge)
+            // OR if we want to force hls.js for better control (optional, but sticking to native first is safer)
+
+            // Note: Some desktop browsers (like Safari) support native HLS.
+            // We usually prefer native, BUT sometimes native implementation is buggy or lacks features.
+            // For now, we follow the standard pattern: Native first, then HLS.js.
+            // EXCEPT for Chrome on Desktop which reports canPlayType as '' (false).
+
+            if (!isNativeHlsSupported) {
+                console.log('[HLS] Initializing hls.js');
+                hls = new Hls({
+                    enableWorker: true,
+                    lowLatencyMode: true,
+                });
+                hlsRef.current = hls;
+
+                hls.loadSource(src);
+                hls.attachMedia(video);
+
+                hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                    console.log('[HLS] Manifest parsed');
+                    if (autoPlay) {
+                        video.play().catch((err) => {
+                            console.warn('[HLS] Autoplay prevented:', err);
+                            onAutoPlayPrevented?.(err);
+                        });
+                    }
+                });
+
+                hls.on(Hls.Events.ERROR, (event, data) => {
+                    if (data.fatal) {
+                        switch (data.type) {
+                            case Hls.ErrorTypes.NETWORK_ERROR:
+                                console.error('[HLS] Network error, trying to recover...');
+                                hls?.startLoad();
+                                break;
+                            case Hls.ErrorTypes.MEDIA_ERROR:
+                                console.error('[HLS] Media error, trying to recover...');
+                                hls?.recoverMediaError();
+                                break;
+                            default:
+                                console.error('[HLS] Fatal error, cannot recover:', data);
+                                hls?.destroy();
+                                break;
+                        }
+                    }
+                });
+            } else {
+                console.log('[HLS] Using native HLS support');
+                // Native HLS support
+                video.src = src;
+            }
+        } else if (isNativeHlsSupported) {
+            // Fallback for environments where Hls.js is not supported but native is (e.g. iOS without MSE?)
+            console.log('[HLS] Using native HLS support (Hls.js not supported)');
+            video.src = src;
+        } else {
+            console.error('[HLS] HLS not supported in this browser');
+        }
+
+        return () => {
+            if (hls) {
+                hls.destroy();
+            }
+        };
+    }, [src, videoRef, autoPlay, onAutoPlayPrevented]);
+}