From 3843ecdd84d4c881020b9358aaf0c1c60acf4bf5 Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Mon, 24 Nov 2025 22:15:57 +0800
Subject: [PATCH] feat: Implement intelligent HLS preloading that respects
 player loading state and browser buffer health.

---
 components/player/DesktopVideoPlayer.tsx      |  2 +-
 components/player/MobileVideoPlayer.tsx       |  5 ++-
 .../hooks/desktop/useProgressControls.ts      |  9 +++-
 .../hooks/mobile/useMobilePlaybackControls.ts | 10 ++++-
 .../hooks/mobile/useMobileProgressControls.ts |  5 +--
 components/player/hooks/useHLSPreloader.ts    | 41 +++++++++++++++++--
 lib/hooks/useHistoryDownloader.ts             |  5 +++
 lib/utils/segmentDownloader.ts                |  5 +--
 8 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/components/player/DesktopVideoPlayer.tsx b/components/player/DesktopVideoPlayer.tsx
index accdc5d..853632f 100644
--- a/components/player/DesktopVideoPlayer.tsx
+++ b/components/player/DesktopVideoPlayer.tsx
@@ -27,7 +27,7 @@ export function DesktopVideoPlayer({
   const { currentTime } = state;
 
   // Preload HLS segments
-  useHLSPreloader({ src, currentTime });
+  useHLSPreloader({ src, currentTime, videoRef: refs.videoRef, isLoading: state.isLoading });
 
   const {
     videoRef,
diff --git a/components/player/MobileVideoPlayer.tsx b/components/player/MobileVideoPlayer.tsx
index 7098aa7..f6cae96 100644
--- a/components/player/MobileVideoPlayer.tsx
+++ b/components/player/MobileVideoPlayer.tsx
@@ -31,7 +31,7 @@ export function MobileVideoPlayer({
   const { currentTime } = state;
 
   // Preload HLS segments
-  useHLSPreloader({ src, currentTime });
+  useHLSPreloader({ src, currentTime, videoRef: refs.videoRef, isLoading: state.isLoading });
 
   const {
     videoRef,
@@ -97,7 +97,7 @@ export function MobileVideoPlayer({
       {/* Video Element */}
       <video
         ref={videoRef}
-        className="w-full h-full object-contain"
+        className="w-full h-full object-contain touch-none"
         src={src}
         poster={poster}
         onPlay={handlePlay}
@@ -108,6 +108,7 @@ export function MobileVideoPlayer({
         onWaiting={() => setIsLoading(true)}
         onCanPlay={() => setIsLoading(false)}
         onTouchEnd={handleTap}
+        onClick={(e) => e.preventDefault()}
         playsInline
         webkit-playsinline="true"
         x-webkit-airplay="allow"
diff --git a/components/player/hooks/desktop/useProgressControls.ts b/components/player/hooks/desktop/useProgressControls.ts
index 51b30c4..c044bff 100644
--- a/components/player/hooks/desktop/useProgressControls.ts
+++ b/components/player/hooks/desktop/useProgressControls.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 interface UseProgressControlsProps {
     videoRef: React.RefObject<HTMLVideoElement | null>;
@@ -15,6 +15,8 @@ export function useProgressControls({
     setCurrentTime,
     isDraggingProgressRef
 }: UseProgressControlsProps) {
+    const lastDragTimeRef = useRef<number>(0);
+
     const handleProgressClick = useCallback((e: any) => {
         if (!videoRef.current || !progressBarRef.current) return;
         const rect = progressBarRef.current.getBoundingClientRect();
@@ -37,13 +39,16 @@ export function useProgressControls({
             const rect = progressBarRef.current.getBoundingClientRect();
             const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
             const newTime = pos * duration;
-            videoRef.current.currentTime = newTime;
+            lastDragTimeRef.current = newTime;
             setCurrentTime(newTime);
         };
 
         const handleMouseUp = () => {
             if (isDraggingProgressRef.current) {
                 isDraggingProgressRef.current = false;
+                if (videoRef.current) {
+                    videoRef.current.currentTime = lastDragTimeRef.current;
+                }
             }
         };
 
diff --git a/components/player/hooks/mobile/useMobilePlaybackControls.ts b/components/player/hooks/mobile/useMobilePlaybackControls.ts
index d8dd8cb..35305a1 100644
--- a/components/player/hooks/mobile/useMobilePlaybackControls.ts
+++ b/components/player/hooks/mobile/useMobilePlaybackControls.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { formatTime } from '@/lib/utils/format-utils';
 import { usePlaybackPolling } from '../usePlaybackPolling';
 import { useMobileTogglePlay } from './useMobileTogglePlay';
@@ -81,14 +81,20 @@ export function useMobilePlaybackControls({
         });
     }, [videoRef, setDuration, setIsLoading, initialTime]);
 
+    const hasInitialSeekHappened = useRef(false);
+
     // Handle late initialization of initialTime (e.g. from async storage hydration)
     useEffect(() => {
-        if (initialTime > 0 && videoRef.current) {
+        if (initialTime > 0 && videoRef.current && !hasInitialSeekHappened.current) {
             // Only seek if we haven't progressed far (e.g. still near start)
             // AND if the target time is significantly different from current time (> 0.5s)
             // This prevents jumping if the user has already started watching and initialTime updates
             if (videoRef.current.currentTime < 2 && Math.abs(videoRef.current.currentTime - initialTime) > 0.5) {
                 videoRef.current.currentTime = initialTime;
+                hasInitialSeekHappened.current = true;
+            } else if (videoRef.current.currentTime >= 2) {
+                // If user already watched past 2s, assume they don't want to be reset
+                hasInitialSeekHappened.current = true;
             }
         }
     }, [initialTime, videoRef]);
diff --git a/components/player/hooks/mobile/useMobileProgressControls.ts b/components/player/hooks/mobile/useMobileProgressControls.ts
index 3935f1f..88e0fd8 100644
--- a/components/player/hooks/mobile/useMobileProgressControls.ts
+++ b/components/player/hooks/mobile/useMobileProgressControls.ts
@@ -47,11 +47,8 @@ export function useMobileProgressControls({
         const newTime = updateProgressFromEvent(e);
         if (newTime !== undefined) {
             setCurrentTime(newTime);
-            if (videoRef.current) {
-                videoRef.current.currentTime = newTime;
-            }
         }
-    }, [isDraggingProgressRef, updateProgressFromEvent, setCurrentTime, videoRef]);
+    }, [isDraggingProgressRef, updateProgressFromEvent, setCurrentTime]);
 
     const handleProgressTouchEnd = useCallback((e: any) => {
         if (!isDraggingProgressRef.current) return;
diff --git a/components/player/hooks/useHLSPreloader.ts b/components/player/hooks/useHLSPreloader.ts
index 3493652..a29c4ed 100644
--- a/components/player/hooks/useHLSPreloader.ts
+++ b/components/player/hooks/useHLSPreloader.ts
@@ -5,15 +5,18 @@ import { downloadSegmentQueue } from '@/lib/utils/segmentDownloader';
 interface UseHLSPreloaderProps {
     src: string;
     currentTime: number;
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    isLoading: boolean;
 }
 
-export function useHLSPreloader({ src, currentTime }: UseHLSPreloaderProps) {
+export function useHLSPreloader({ src, currentTime, videoRef, isLoading }: UseHLSPreloaderProps) {
     const abortControllerRef = useRef<AbortController | null>(null);
     const segmentsRef = useRef<Segment[]>([]);
     const [isManifestLoaded, setIsManifestLoaded] = useState(false);
     const lastStartIndexRef = useRef<number>(-1);
     const isInitializedRef = useRef(false);
     const downloadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const lastCurrentTimeRef = useRef<number>(0);
 
     // Fetch and parse manifest when src changes
     useEffect(() => {
@@ -51,6 +54,15 @@ export function useHLSPreloader({ src, currentTime }: UseHLSPreloaderProps) {
     useEffect(() => {
         if (!isManifestLoaded || segmentsRef.current.length === 0) return;
 
+        // Stop if player is struggling (loading)
+        if (isLoading) {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+                abortControllerRef.current = null;
+            }
+            return;
+        }
+
         // Clear any pending download timeout
         if (downloadTimeoutRef.current) {
             clearTimeout(downloadTimeoutRef.current);
@@ -67,6 +79,25 @@ export function useHLSPreloader({ src, currentTime }: UseHLSPreloaderProps) {
                 }
             }
 
+            // Check browser buffer health
+            if (videoRef.current) {
+                const buffered = videoRef.current.buffered;
+                let bufferEnd = 0;
+                for (let i = 0; i < buffered.length; i++) {
+                    if (buffered.start(i) <= currentTime && buffered.end(i) >= currentTime) {
+                        bufferEnd = buffered.end(i);
+                        break;
+                    }
+                }
+
+                // If browser buffer is less than 30s ahead, let browser handle it
+                // Only preload if we are "safe"
+                if (bufferEnd - currentTime < 30) {
+                    // console.log('[Preloader] Browser buffer low (<30s), yielding to browser.');
+                    return;
+                }
+            }
+
             // Offset start index by 3 segments to avoid competing with browser playback
             // The browser needs the immediate segments NOW; we preload the future.
             startIndex = Math.min(startIndex + 3, segmentsRef.current.length - 1);
@@ -104,9 +135,11 @@ export function useHLSPreloader({ src, currentTime }: UseHLSPreloaderProps) {
                 signal: abortControllerRef.current.signal,
                 videoUrl: src // Pass the m3u8 URL for metadata tracking
             });
-        }, isInitializedRef.current ? 0 : 100); // 100ms debounce on initial load only
+        }, !isInitializedRef.current ? 100 : (Math.abs(currentTime - lastCurrentTimeRef.current) > 2 ? 2000 : 500));
 
-    }, [isManifestLoaded, currentTime]);
+        lastCurrentTimeRef.current = currentTime;
+
+    }, [isManifestLoaded, currentTime, isLoading, videoRef]);
 
     // Cleanup on unmount
     useEffect(() => {
@@ -116,4 +149,4 @@ export function useHLSPreloader({ src, currentTime }: UseHLSPreloaderProps) {
             }
         };
     }, []);
-}
+}
\ No newline at end of file
diff --git a/lib/hooks/useHistoryDownloader.ts b/lib/hooks/useHistoryDownloader.ts
index cd72125..4b07717 100644
--- a/lib/hooks/useHistoryDownloader.ts
+++ b/lib/hooks/useHistoryDownloader.ts
@@ -6,6 +6,7 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
+import { usePathname } from 'next/navigation';
 import { useHistoryStore } from '@/lib/store/history-store';
 import { parseHLSManifest } from '@/lib/utils/hlsManifestParser';
 import { downloadSegmentQueue } from '@/lib/utils/segmentDownloader';
@@ -13,8 +14,12 @@ import { downloadSegmentQueue } from '@/lib/utils/segmentDownloader';
 export function useHistoryDownloader() {
     const viewingHistory = useHistoryStore((state) => state.viewingHistory);
     const processedUrlsRef = useRef<Set<string>>(new Set());
+    const pathname = usePathname();
 
     useEffect(() => {
+        // Don't download history while watching a video
+        if (pathname?.startsWith('/player')) return;
+
         if (viewingHistory.length === 0) return;
 
         const downloadHistoryVideos = async () => {
diff --git a/lib/utils/segmentDownloader.ts b/lib/utils/segmentDownloader.ts
index 2f4934d..9dd4db0 100644
--- a/lib/utils/segmentDownloader.ts
+++ b/lib/utils/segmentDownloader.ts
@@ -14,7 +14,7 @@ interface DownloadQueueOptions {
     videoUrl?: string; // The m3u8 URL for metadata tracking
 }
 
-const CONCURRENCY = 5;
+const CONCURRENCY = 2;
 const TIMEOUT_MS = 15000;
 const CACHE_NAME = 'video-cache-v1';
 
@@ -45,8 +45,7 @@ export async function downloadSegmentQueue(options: DownloadQueueOptions): Promi
             const isValid = match ? await cacheManager.isCacheValid(url) : false;
 
             if (match && isValid) {
-                onProgress?.(currentIndex, segments.length);
-                console.log(`[Preloader] 已缓存且有效: ${currentIndex}/${segments.length}`);
+                // Silently skip cached segments
             } else {
                 // If cache exists but expired, delete it
                 if (match && !isValid) {