重构client，拆分组件

app/aweme/[awemeId]/hooks/usePlayerState.ts

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import type { LoopMode, ObjectFit } from "../types";
+import { getNumberFromStorage, getStringFromStorage, saveToStorage } from "../utils";
+
+export function usePlayerState() {
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [volume, setVolume] = useState(() => getNumberFromStorage("aweme_player_volume", 1));
+  const [rate, setRate] = useState(() => getNumberFromStorage("aweme_player_rate", 1));
+  const [progress, setProgress] = useState(0);
+  const [rotation, setRotation] = useState(0);
+  const [progressRestored, setProgressRestored] = useState(false);
+  const [objectFit, setObjectFit] = useState<ObjectFit>("contain");
+  const [loopMode, setLoopMode] = useState<LoopMode>(() => {
+    const saved = getStringFromStorage("aweme_player_loop_mode", "loop");
+    return saved === "sequential" ? "sequential" : "loop";
+  });
+
+  // 持久化音量
+  useEffect(() => {
+    saveToStorage("aweme_player_volume", volume);
+  }, [volume]);
+
+  // 持久化倍速
+  useEffect(() => {
+    saveToStorage("aweme_player_rate", rate);
+  }, [rate]);
+
+  // 持久化循环模式
+  useEffect(() => {
+    saveToStorage("aweme_player_loop_mode", loopMode);
+  }, [loopMode]);
+
+  // 监听全屏状态
+  useEffect(() => {
+    const onFsChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
+
+  return {
+    isPlaying,
+    setIsPlaying,
+    isFullscreen,
+    setIsFullscreen,
+    volume,
+    setVolume,
+    rate,
+    setRate,
+    progress,
+    setProgress,
+    rotation,
+    setRotation,
+    progressRestored,
+    setProgressRestored,
+    objectFit,
+    setObjectFit,
+    loopMode,
+    setLoopMode,
+  };
+}