40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { useEditor } from "@/hooks/use-editor";
|
|
import { findTrackInSceneTracks, type TimelineElement } from "@/lib/timeline";
|
|
|
|
/**
|
|
* Subscribes to render tracks and returns the live (preview-aware) version of
|
|
* an element alongside helpers for previewing and committing updates.
|
|
*
|
|
* Use this wherever property fields need to reflect in-progress preview state
|
|
* (e.g. a slider being dragged) rather than the last committed value.
|
|
*/
|
|
export function useElementPreview<T extends TimelineElement>({
|
|
trackId,
|
|
elementId,
|
|
fallback,
|
|
}: {
|
|
trackId: string;
|
|
elementId: string;
|
|
fallback: T;
|
|
}) {
|
|
const editor = useEditor();
|
|
useEditor((e) => e.timeline.getPreviewTracks());
|
|
|
|
const previewTracks = editor.timeline.getPreviewTracks();
|
|
const renderElement =
|
|
(findTrackInSceneTracks({
|
|
tracks: previewTracks ?? editor.scenes.getActiveScene().tracks,
|
|
trackId,
|
|
})?.elements.find((element) => element.id === elementId) as T | undefined) ??
|
|
fallback;
|
|
|
|
const previewUpdates = (updates: Partial<TimelineElement>) =>
|
|
editor.timeline.previewElements({
|
|
updates: [{ trackId, elementId, updates }],
|
|
});
|
|
|
|
const commit = () => editor.timeline.commitPreview();
|
|
|
|
return { renderElement, previewUpdates, commit };
|
|
}
|