From 3e89d2998588f8e35c524e523ba2ee853f0f6475 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 20 Apr 2026 11:31:17 +0200 Subject: refactor: restructure files to their domains, new preview overlay system, and dep graph --- apps/web/src/timeline/hooks/use-element-preview.ts | 39 ++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 apps/web/src/timeline/hooks/use-element-preview.ts (limited to 'apps/web/src/timeline/hooks/use-element-preview.ts') diff --git a/apps/web/src/timeline/hooks/use-element-preview.ts b/apps/web/src/timeline/hooks/use-element-preview.ts new file mode 100644 index 00000000..67213094 --- /dev/null +++ b/apps/web/src/timeline/hooks/use-element-preview.ts @@ -0,0 +1,39 @@ +import { useEditor } from "@/editor/use-editor"; +import { findTrackInSceneTracks, type TimelineElement } from "@/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({ + 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) => + editor.timeline.previewElements({ + updates: [{ trackId, elementId, updates }], + }); + + const commit = () => editor.timeline.commitPreview(); + + return { renderElement, previewUpdates, commit }; +} -- cgit v1.3.1