1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import { useEffect, useState, type RefObject } from "react";
import { useEditor } from "@/editor/use-editor";
import { useCommittedRef } from "@/hooks/use-committed-ref";
import {
SeekController,
type SeekConfig,
} from "@/timeline/controllers/seek-controller";
import type { MediaTime } from "@/wasm";
interface UseTimelineSeekProps {
playheadRef: RefObject<HTMLDivElement | null>;
trackLabelsRef: RefObject<HTMLDivElement | null>;
rulerScrollRef: RefObject<HTMLDivElement | null>;
tracksScrollRef: RefObject<HTMLDivElement | null>;
zoomLevel: number;
duration: MediaTime;
isSelecting: boolean;
clearSelectedElements: () => void;
seek: (time: MediaTime) => void;
}
export function useTimelineSeek({
playheadRef,
trackLabelsRef,
rulerScrollRef,
tracksScrollRef,
zoomLevel,
duration,
isSelecting,
clearSelectedElements,
seek,
}: UseTimelineSeekProps) {
const editor = useEditor();
const config: SeekConfig = {
zoomLevel,
duration,
isSelecting,
getPlayheadEl: () => playheadRef.current,
getTrackLabelsEl: () => trackLabelsRef.current,
getRulerScrollEl: () => rulerScrollRef.current,
getTracksScrollEl: () => tracksScrollRef.current,
getActiveProjectFps: () => editor.project.getActive()?.settings.fps ?? null,
clearSelectedElements,
seek,
setTimelineViewState: ({ zoomLevel, scrollLeft, playheadTime }) =>
editor.project.setTimelineViewState({
viewState: {
zoomLevel,
scrollLeft,
playheadTime,
},
}),
};
const configRef = useCommittedRef(config);
const [controller] = useState(() => new SeekController({ configRef }));
useEffect(() => () => controller.destroy(), [controller]);
return {
handleTracksMouseDown: controller.onTracksMouseDown,
handleTracksClick: controller.onTracksClick,
handleRulerMouseDown: controller.onRulerMouseDown,
handleRulerClick: controller.onRulerClick,
};
}
|
