| import { useEffect, useRef, useState } from 'react' |
|
|
| export interface SamplingPreviewFrame { |
| bitmap: ImageBitmap |
| durationMs: number |
| } |
|
|
| export function useSamplingPreviewFrames( |
| blob: Blob | null, |
| revision: string | undefined, |
| enabled = true, |
| ) { |
| const [frames, setFrames] = useState<SamplingPreviewFrame[]>([]) |
| const activeFrames = useRef<SamplingPreviewFrame[]>([]) |
|
|
| useEffect(() => { |
| let disposed = false |
| let committed = false |
| let decoder: ImageDecoder | null = null |
| const decodedFrames: SamplingPreviewFrame[] = [] |
|
|
| const replaceFrames = (nextFrames: SamplingPreviewFrame[]) => { |
| const previousFrames = activeFrames.current |
| activeFrames.current = nextFrames |
| setFrames(nextFrames) |
| previousFrames.forEach(({ bitmap }) => bitmap.close()) |
| } |
|
|
| async function decodeFrames() { |
| if (!enabled || !blob || blob.type !== 'image/webp' || typeof ImageDecoder === 'undefined') { |
| if (!disposed) replaceFrames([]) |
| return |
| } |
| const supported = await ImageDecoder.isTypeSupported(blob.type) |
| if (disposed) return |
| if (!supported) { |
| replaceFrames([]) |
| return |
| } |
|
|
| const data = await blob.arrayBuffer() |
| if (disposed) return |
| decoder = new ImageDecoder({ data, type: blob.type, preferAnimation: true }) |
| await decoder.tracks.ready |
| const frameCount = decoder.tracks.selectedTrack?.frameCount ?? 0 |
|
|
| for (let frameIndex = 0; frameIndex < frameCount; frameIndex += 1) { |
| const result = await decoder.decode({ frameIndex, completeFramesOnly: true }) |
| const durationMs = Math.max(1, (result.image.duration ?? 0) / 1000) |
| let bitmap: ImageBitmap |
| try { |
| bitmap = await createImageBitmap(result.image) |
| } finally { |
| result.image.close() |
| } |
| if (disposed) { |
| bitmap.close() |
| return |
| } |
| decodedFrames.push({ bitmap, durationMs }) |
| } |
|
|
| if (!disposed) { |
| committed = true |
| replaceFrames([...decodedFrames]) |
| decoder.close() |
| decoder = null |
| } |
| } |
|
|
| void decodeFrames().catch((error: unknown) => { |
| if (!disposed) console.error('[SamplingPreviewWidget] failed to decode preview:', error) |
| }) |
|
|
| return () => { |
| disposed = true |
| decoder?.close() |
| if (!committed) decodedFrames.forEach(({ bitmap }) => bitmap.close()) |
| } |
| }, [blob, enabled, revision]) |
|
|
| useEffect(() => () => { |
| activeFrames.current.forEach(({ bitmap }) => bitmap.close()) |
| activeFrames.current = [] |
| }, []) |
|
|
| return frames |
| } |
|
|
| export function useSamplingPreviewPlayback( |
| revision: string | undefined, |
| frameCount: number, |
| fps: number | null, |
| isPlaying: boolean, |
| ) { |
| const [progress, setProgress] = useState(0) |
| const [frameIndex, setFrameIndex] = useState(0) |
| const elapsedMs = useRef(0) |
|
|
| useEffect(() => { |
| elapsedMs.current = 0 |
| setProgress(0) |
| setFrameIndex(0) |
| }, [revision]) |
|
|
| useEffect(() => { |
| const durationMs = fps && frameCount > 1 ? frameCount / fps * 1000 : 0 |
| if (!revision || durationMs <= 0) { |
| setProgress(revision ? 100 : 0) |
| setFrameIndex(0) |
| return |
| } |
| if (!isPlaying) return |
|
|
| let animationFrame = 0 |
| let previousTime = performance.now() |
| const update = (now: number) => { |
| elapsedMs.current = (elapsedMs.current + now - previousTime) % durationMs |
| previousTime = now |
| const nextProgress = elapsedMs.current / durationMs * 100 |
| setProgress(nextProgress) |
| setFrameIndex(Math.min(frameCount - 1, Math.floor(nextProgress / 100 * frameCount))) |
| animationFrame = requestAnimationFrame(update) |
| } |
| animationFrame = requestAnimationFrame(update) |
| return () => cancelAnimationFrame(animationFrame) |
| }, [fps, frameCount, isPlaying, revision]) |
|
|
| return { frameIndex, progress } |
| } |
|
|
