xiaoxia-saas/apps/web/src/pages/editing-planner/hooks/usePlaybackControl.ts

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,
  }
}