From 756a7c7caaeada4fff9a51f2ec4fe2968ac3b01e Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 18 Aug 2025 10:54:28 +0200 Subject: feat: implement reveal in media feature --- .../editor/timeline/timeline-element.tsx | 28 ++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) (limited to 'apps/web/src/components/editor/timeline') diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx index ca5d8c0a..a1a33837 100644 --- a/apps/web/src/components/editor/timeline/timeline-element.tsx +++ b/apps/web/src/components/editor/timeline/timeline-element.tsx @@ -4,6 +4,7 @@ import { Scissors, Trash2, Copy, + Search, RefreshCw, EyeOff, Eye, @@ -29,6 +30,7 @@ import { ContextMenuSeparator, ContextMenuTrigger, } from "../../ui/context-menu"; +import { useMediaPanelStore } from "../media-panel/store"; export function TimelineElement({ element, @@ -69,6 +71,8 @@ export function TimelineElement({ onUpdateDuration: updateElementDuration, }); + const { requestRevealMedia } = useMediaPanelStore.getState(); + const effectiveDuration = element.duration - element.trimStart - element.trimEnd; const elementWidth = Math.max( @@ -166,6 +170,16 @@ export function TimelineElement({ input.click(); }; + const handleRevealInMedia = (e: React.MouseEvent) => { + e.stopPropagation(); + if (element.type !== "media") { + toast.error("Reveal is only available for media clips"); + return; + } + + requestRevealMedia(element.mediaId); + }; + const renderElementContent = () => { if (element.type === "text") { return ( @@ -348,10 +362,16 @@ export function TimelineElement({ Duplicate {element.type === "text" ? "text" : "clip"} {element.type === "media" && ( - - - Replace clip - + <> + + + Reveal in media + + + + Replace clip + + )}