diff options
Diffstat (limited to 'apps/web/src/hooks/use-element-preview.ts')
| -rw-r--r-- | apps/web/src/hooks/use-element-preview.ts | 76 |
1 files changed, 38 insertions, 38 deletions
diff --git a/apps/web/src/hooks/use-element-preview.ts b/apps/web/src/hooks/use-element-preview.ts index 8aa16501..d717143d 100644 --- a/apps/web/src/hooks/use-element-preview.ts +++ b/apps/web/src/hooks/use-element-preview.ts @@ -1,38 +1,38 @@ -import { useEditor } from "@/hooks/use-editor"; -import 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.getRenderTracks()); - - const renderElement = - (editor.timeline - .getRenderTracks() - .find((t) => t.id === trackId) - ?.elements.find((el) => el.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 }; -} +import { useEditor } from "@/hooks/use-editor";
+import 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.getRenderTracks());
+
+ const renderElement =
+ (editor.timeline
+ .getRenderTracks()
+ .find((t) => t.id === trackId)
+ ?.elements.find((el) => el.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 };
+}
|
