feat: wire ui to have keyframes for: opacity, text color, and all background properties

1 files changed, 24 insertions, 0 deletions

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 };
+}