@@ -1,56 +0,0 @@
|
||||
import { useState, useCallback, useEffect, useRef } from "react"
|
||||
|
||||
/**
|
||||
* 播放控制 Hook
|
||||
* 播放/暂停、rAF 帧推进、时间线缩放、seek
|
||||
*/
|
||||
export const usePlaybackControl = (totalDuration: number) => {
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const [currentTime, setCurrentTime] = useState(0)
|
||||
const [pixelsPerSecond, setPixelsPerSecond] = useState(40)
|
||||
const prevFrameTimeRef = useRef<number | null>(null)
|
||||
|
||||
/** 播放头跳转 */
|
||||
const handleSeek = useCallback((time: number) => {
|
||||
setCurrentTime(Math.max(0, time))
|
||||
}, [])
|
||||
|
||||
/** 轨道缩放 */
|
||||
const handleZoomChange = useCallback((pps: number) => {
|
||||
setPixelsPerSecond(pps)
|
||||
}, [])
|
||||
|
||||
/** rAF 帧推进 — 播放时平滑更新播放头位置 */
|
||||
useEffect(() => {
|
||||
if (!isPlaying) {
|
||||
prevFrameTimeRef.current = null
|
||||
return
|
||||
}
|
||||
let rafId: number
|
||||
const tick = (timestamp: number) => {
|
||||
if (prevFrameTimeRef.current !== null) {
|
||||
const delta = (timestamp - prevFrameTimeRef.current) / 1000
|
||||
setCurrentTime((prev) => {
|
||||
const next = prev + delta
|
||||
return next >= totalDuration ? totalDuration : next
|
||||
})
|
||||
}
|
||||
prevFrameTimeRef.current = timestamp
|
||||
rafId = requestAnimationFrame(tick)
|
||||
}
|
||||
rafId = requestAnimationFrame(tick)
|
||||
return () => {
|
||||
cancelAnimationFrame(rafId)
|
||||
prevFrameTimeRef.current = null
|
||||
}
|
||||
}, [isPlaying, totalDuration])
|
||||
|
||||
return {
|
||||
isPlaying,
|
||||
setIsPlaying,
|
||||
currentTime,
|
||||
pixelsPerSecond,
|
||||
handleSeek,
|
||||
handleZoomChange,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user