62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
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,
|
|
};
|
|
}
|