重构client，拆分组件

2025-10-22 20:14:11 +08:00
parent 5868407216
commit fe9bc8fd6c
23 changed files with 1601 additions and 1137 deletions
@@ -0,0 +1,171 @@
+import { useEffect, useRef } from "react";
+import type { RefObject } from "react";
+import { useRouter } from "next/navigation";
+import type { LoopMode, Neighbors } from "../types";
+
+interface UseVideoPlayerProps {
+  awemeId: string;
+  videoRef: RefObject<HTMLVideoElement | null>;
+  volume: number;
+  rate: number;
+  loopMode: LoopMode;
+  neighbors: Neighbors;
+  progressRestored: boolean;
+  setIsPlaying: (playing: boolean) => void;
+  setProgress: (progress: number) => void;
+  setProgressRestored: (restored: boolean) => void;
+}
+
+export function useVideoPlayer({
+  awemeId,
+  videoRef,
+  volume,
+  rate,
+  loopMode,
+  neighbors,
+  progressRestored,
+  setIsPlaying,
+  setProgress,
+  setProgressRestored,
+}: UseVideoPlayerProps) {
+  const router = useRouter();
+
+  // 恢复播放进度
+  useEffect(() => {
+    if (progressRestored) return;
+    const v = videoRef.current;
+    if (!v) return;
+
+    const onLoadedMetadata = () => {
+      if (progressRestored) return;
+
+      try {
+        const key = `aweme_progress_${awemeId}`;
+        const saved = localStorage.getItem(key);
+        if (!saved) {
+          setProgressRestored(true);
+          return;
+        }
+
+        const { time, timestamp } = JSON.parse(saved);
+        const now = Date.now();
+        const fiveMinutes = 5 * 60 * 1000;
+
+        if (now - timestamp < fiveMinutes && time > 1 && time < v.duration - 1) {
+          v.currentTime = time;
+          console.log(`恢复播放进度: ${Math.round(time)}s`);
+        } else if (now - timestamp >= fiveMinutes) {
+          localStorage.removeItem(key);
+        }
+      } catch (e) {
+        console.error("恢复播放进度失败", e);
+      }
+
+      setProgressRestored(true);
+    };
+
+    if (v.readyState >= 1) {
+      onLoadedMetadata();
+    } else {
+      v.addEventListener("loadedmetadata", onLoadedMetadata, { once: true });
+      return () => v.removeEventListener("loadedmetadata", onLoadedMetadata);
+    }
+  }, [awemeId, progressRestored, videoRef, setProgressRestored]);
+
+  // 保存播放进度
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+
+    const saveProgress = () => {
+      if (!v.duration || Number.isNaN(v.duration) || v.currentTime < 1) return;
+
+      try {
+        const key = `aweme_progress_${awemeId}`;
+        const value = JSON.stringify({
+          time: v.currentTime,
+          timestamp: Date.now(),
+        });
+        localStorage.setItem(key, value);
+      } catch (e) {
+        console.error("保存播放进度失败", e);
+      }
+    };
+
+    const interval = setInterval(saveProgress, 2000);
+    const onBeforeUnload = () => saveProgress();
+    window.addEventListener("beforeunload", onBeforeUnload);
+
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      saveProgress();
+    };
+  }, [awemeId, videoRef]);
+
+  // 监听播放状态和进度
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+
+    const onTime = () => {
+      if (!v.duration || Number.isNaN(v.duration)) return;
+      setProgress(v.currentTime / v.duration);
+    };
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => {
+      if (loopMode === "sequential" && neighbors?.next) {
+        router.push(`/aweme/${neighbors.next.aweme_id}`);
+      }
+    };
+
+    v.addEventListener("timeupdate", onTime);
+    v.addEventListener("loadedmetadata", onTime);
+    v.addEventListener("play", onPlay);
+    v.addEventListener("pause", onPause);
+    v.addEventListener("ended", onEnded);
+    
+    return () => {
+      v.removeEventListener("timeupdate", onTime);
+      v.removeEventListener("loadedmetadata", onTime);
+      v.removeEventListener("play", onPlay);
+      v.removeEventListener("pause", onPause);
+      v.removeEventListener("ended", onEnded);
+    };
+  }, [loopMode, neighbors?.next, router, videoRef, setIsPlaying, setProgress]);
+
+  // 自动播放检测
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+
+    const checkAutoplay = async () => {
+      try {
+        await v.play();
+        setIsPlaying(true);
+      } catch (error) {
+        console.log("自动播放被阻止，需要用户交互");
+        setIsPlaying(false);
+      }
+    };
+
+    if (v.readyState >= 1) {
+      checkAutoplay();
+    } else {
+      v.addEventListener("loadedmetadata", checkAutoplay, { once: true });
+      return () => v.removeEventListener("loadedmetadata", checkAutoplay);
+    }
+  }, [awemeId, videoRef, setIsPlaying]);
+
+  // 更新音量和倍速
+  useEffect(() => {
+    const v = videoRef.current;
+    if (v) v.volume = volume;
+  }, [volume, videoRef]);
+
+  useEffect(() => {
+    const v = videoRef.current;
+    if (v) v.playbackRate = rate;
+  }, [rate, videoRef]);
+}