Files
Psychotoxical-psysonic/src/hooks/useWaveformInterpolation.ts
T
Frank Stellmacher 7a7a9f5e6b refactor(utils): group utils/ files into topic folders (Phase L, part 1) (#689)
111 of 122 top-level src/utils/ files move into 16 topic folders (audio,
cache, cover, share, server, playback, playlist, deviceSync, waveform,
mix, format, export, changelog, ui, perf, componentHelpers). True
singletons with no cluster stay at the utils/ root.

Pure file-move: a path-aware codemod rewrote 539 relative-import
specifiers across 275 files; no logic touched. The hot-path coverage
gate list (.github/frontend-hot-path-files.txt) is updated to the new
paths for the 11 gated utils files — a mechanical consequence of the
move, not a CI change. tsc is green.
2026-05-14 14:27:44 +02:00

114 lines
4.9 KiB
TypeScript

import React, { useEffect } from 'react';
import type { SeekbarStyle } from '../store/authStoreTypes';
import { getPlaybackProgressSnapshot } from '../store/playbackProgress';
import {
ANIMATED_STYLES, AnimState, INTERPOLATION_PAINT_MIN_MS,
isBarQuantizedSeekStyle, quantizeProgressByBars,
} from '../utils/waveform/waveformSeekHelpers';
import { drawSeekbar } from '../utils/waveform/waveformSeekRenderers';
interface Args {
duration: number;
isPlaying: boolean;
previewFreezesMainSeekbar: boolean;
canvasRef: React.RefObject<HTMLCanvasElement | null>;
heightsRef: React.MutableRefObject<Float32Array | null>;
styleRef: React.MutableRefObject<SeekbarStyle>;
progressRef: React.MutableRefObject<number>;
bufferedRef: React.MutableRefObject<number>;
visualProgressRef: React.MutableRefObject<number>;
visualTargetProgressRef: React.MutableRefObject<number>;
progressAnchorRef: React.MutableRefObject<{ progress: number; atMs: number }>;
animStateRef: React.MutableRefObject<AnimState>;
isDraggingRef: React.MutableRefObject<boolean>;
wheelPreviewFractionRef: React.MutableRefObject<number | null>;
wheelPreviewUntilRef: React.MutableRefObject<number>;
pendingCommittedSeekRef: React.MutableRefObject<{ fraction: number; setAtMs: number } | null>;
}
/** Smooth interpolation rAF loop — predicts playhead position between sparse
* transport heartbeats, with proper anchor reset on resume. Inactive while
* paused, dragging, wheel-preview, or pending-committed-seek. */
export function useWaveformInterpolation({
duration, isPlaying, previewFreezesMainSeekbar,
canvasRef, heightsRef, styleRef,
progressRef, bufferedRef, visualProgressRef, visualTargetProgressRef,
progressAnchorRef, animStateRef, isDraggingRef,
wheelPreviewFractionRef, wheelPreviewUntilRef, pendingCommittedSeekRef,
}: Args) {
useEffect(() => {
if (!isPlaying || previewFreezesMainSeekbar || duration <= 0 || !isFinite(duration)) return;
// This effect is torn down while paused, so `progressAnchorRef.atMs` is not refreshed.
// On resume the first `tick` would add the entire pause duration to `elapsedSec` and
// overshoot the playhead until the next transport heartbeat corrects it.
const snap = getPlaybackProgressSnapshot();
const raw = snap.progress;
progressRef.current = raw;
progressAnchorRef.current = {
progress: raw,
atMs: performance.now(),
};
const resumeVisual = isBarQuantizedSeekStyle(styleRef.current)
? quantizeProgressByBars(raw)
: raw;
visualTargetProgressRef.current = resumeVisual;
visualProgressRef.current = resumeVisual;
let rafId: number | null = null;
let lastPaintAt = 0;
const tick = (now: number) => {
if (document.hidden || window.__psyHidden) {
rafId = requestAnimationFrame(tick);
return;
}
if (isDraggingRef.current) {
rafId = requestAnimationFrame(tick);
return;
}
const wheelPreviewFraction = wheelPreviewFractionRef.current;
if (wheelPreviewFraction != null && Date.now() < wheelPreviewUntilRef.current) {
rafId = requestAnimationFrame(tick);
return;
}
if (pendingCommittedSeekRef.current) {
rafId = requestAnimationFrame(tick);
return;
}
const anchor = progressAnchorRef.current;
const elapsedSec = Math.max(0, (now - anchor.atMs) / 1000);
const predicted = Math.max(0, Math.min(1, anchor.progress + elapsedSec / duration));
const nextTargetProgress = isBarQuantizedSeekStyle(styleRef.current)
? quantizeProgressByBars(predicted)
: predicted;
if (Math.abs(nextTargetProgress - visualTargetProgressRef.current) > 0.000001) {
visualTargetProgressRef.current = nextTargetProgress;
}
const currentVisual = visualProgressRef.current;
const targetVisual = visualTargetProgressRef.current;
const delta = targetVisual - currentVisual;
if (Math.abs(delta) > 0.000001) {
const smoothing = isBarQuantizedSeekStyle(styleRef.current) ? 0.22 : 0.28;
const nextVisualProgress = Math.abs(delta) < 0.002
? targetVisual
: currentVisual + delta * smoothing;
visualProgressRef.current = nextVisualProgress;
progressRef.current = nextVisualProgress;
const needsDirectDraw = !ANIMATED_STYLES.has(styleRef.current);
if (needsDirectDraw && now - lastPaintAt >= INTERPOLATION_PAINT_MIN_MS) {
const canvas = canvasRef.current;
if (canvas) {
drawSeekbar(canvas, styleRef.current, heightsRef.current, nextVisualProgress, bufferedRef.current, animStateRef.current);
lastPaintAt = now;
}
}
}
rafId = requestAnimationFrame(tick);
};
rafId = requestAnimationFrame(tick);
return () => {
if (rafId != null) cancelAnimationFrame(rafId);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [duration, isPlaying, previewFreezesMainSeekbar]);
}