From a526066b61f18b082adf6faeaf3e19f3d13cd77d Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 2 Mar 2026 16:36:10 +0100 Subject: feat: wire ui to have keyframes for: opacity, text color, and all background properties --- .../properties/hooks/use-element-playhead.ts | 24 ++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts (limited to 'apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts') diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts b/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts new file mode 100644 index 00000000..46e6cb6d --- /dev/null +++ b/apps/web/src/components/editor/panels/properties/hooks/use-element-playhead.ts @@ -0,0 +1,24 @@ +import { useEditor } from "@/hooks/use-editor"; +import { getElementLocalTime } from "@/lib/animation"; +import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants"; + +export function useElementPlayhead({ + startTime, + duration, +}: { + startTime: number; + duration: number; +}) { + const editor = useEditor(); + const playheadTime = editor.playback.getCurrentTime(); + const localTime = getElementLocalTime({ + timelineTime: playheadTime, + elementStartTime: startTime, + elementDuration: duration, + }); + const isPlayheadWithinElementRange = + playheadTime >= startTime - TIME_EPSILON_SECONDS && + playheadTime <= startTime + duration + TIME_EPSILON_SECONDS; + + return { localTime, isPlayheadWithinElementRange }; +} -- cgit v1.3.1