diff options
| -rw-r--r-- | apps/web/src/timeline/bookmarks/components/bookmarks.tsx | 23 | ||||
| -rw-r--r-- | apps/web/src/timeline/components/timeline-element.tsx | 13 |
2 files changed, 21 insertions, 15 deletions
diff --git a/apps/web/src/timeline/bookmarks/components/bookmarks.tsx b/apps/web/src/timeline/bookmarks/components/bookmarks.tsx index 43ba4ffc..d0a7863d 100644 --- a/apps/web/src/timeline/bookmarks/components/bookmarks.tsx +++ b/apps/web/src/timeline/bookmarks/components/bookmarks.tsx @@ -85,6 +85,7 @@ export function TimelineBookmarksRow({ <div className="relative flex-1 overflow-hidden" style={{ height: TIMELINE_BOOKMARK_ROW_HEIGHT_PX }} + onWheel={handleWheel} > <button className="relative w-full cursor-default select-none border-0 bg-transparent p-0" @@ -94,7 +95,6 @@ export function TimelineBookmarksRow({ }} aria-label="Timeline ruler" type="button" - onWheel={handleWheel} onClick={(event) => { if (!event.currentTarget.contains(event.target as Node)) return; handleTimelineContentClick(event); @@ -104,17 +104,16 @@ export function TimelineBookmarksRow({ handleRulerMouseDown(event); handleRulerTrackingMouseDown(event); }} - > - {bookmarks.map((bookmark) => ( - <TimelineBookmark - key={`bookmark-${bookmark.time}`} - bookmark={bookmark} - zoomLevel={zoomLevel} - dragState={dragState} - onBookmarkMouseDown={onBookmarkMouseDown} - /> - ))} - </button> + /> + {bookmarks.map((bookmark) => ( + <TimelineBookmark + key={`bookmark-${bookmark.time}`} + bookmark={bookmark} + zoomLevel={zoomLevel} + dragState={dragState} + onBookmarkMouseDown={onBookmarkMouseDown} + /> + ))} </div> ); } diff --git a/apps/web/src/timeline/components/timeline-element.tsx b/apps/web/src/timeline/components/timeline-element.tsx index b25a7a28..5c412435 100644 --- a/apps/web/src/timeline/components/timeline-element.tsx +++ b/apps/web/src/timeline/components/timeline-element.tsx @@ -605,6 +605,12 @@ function ElementInner({ </div> </div> + {FEATURES.effects && + (element.type === "video" || element.type === "image") && + hasElementEffects({ element }) && ( + <EffectsButton element={element} track={track} /> + )} + {isSelected && ( <> <ResizeHandle @@ -1074,7 +1080,8 @@ function EffectsButton({ return ( <button type="button" - className="flex shrink-0 justify-center text-white cursor-pointer" + className="absolute top-1 left-1 z-10 flex shrink-0 justify-center text-white cursor-pointer" + aria-label="Open effects" onMouseDown={(event) => event.stopPropagation()} onClick={handleClick} > @@ -1135,7 +1142,7 @@ function VideoElementContent({ name={mediaAsset.name} leading={ FEATURES.effects && hasElementEffects({ element }) ? ( - <EffectsButton element={element} track={track} /> + <div className="w-3" /> ) : null } hasFade={true} @@ -1184,7 +1191,7 @@ function ImageElementContent({ name={mediaAsset?.name} leading={ FEATURES.effects && hasElementEffects({ element }) ? ( - <EffectsButton element={element} track={track} /> + <div className="w-3" /> ) : null } hasFade={true} |