diff options
Diffstat (limited to 'apps/web/src/components/editor/timeline/bookmarks.tsx')
| -rw-r--r-- | apps/web/src/components/editor/timeline/bookmarks.tsx | 111 |
1 files changed, 0 insertions, 111 deletions
diff --git a/apps/web/src/components/editor/timeline/bookmarks.tsx b/apps/web/src/components/editor/timeline/bookmarks.tsx deleted file mode 100644 index cfcb1e23..00000000 --- a/apps/web/src/components/editor/timeline/bookmarks.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useEditor } from "@/hooks/use-editor"; -import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; -import { getSnappedSeekTime } from "@/lib/time"; -import { Bookmark02Icon } from "@hugeicons/core-free-icons"; -import { HugeiconsIcon } from "@hugeicons/react"; - -interface TimelineBookmarksRowProps { - zoomLevel: number; - dynamicTimelineWidth: number; - handleWheel: (e: React.WheelEvent) => void; - handleTimelineContentClick: (e: React.MouseEvent) => void; - handleRulerTrackingMouseDown: (e: React.MouseEvent) => void; - handleRulerMouseDown: (e: React.MouseEvent) => void; -} - -export function TimelineBookmarksRow({ - zoomLevel, - dynamicTimelineWidth, - handleWheel, - handleTimelineContentClick, - handleRulerTrackingMouseDown, - handleRulerMouseDown, -}: TimelineBookmarksRowProps) { - const editor = useEditor(); - const activeScene = editor.scenes.getActiveScene(); - - return ( - <div className="relative h-4 flex-1 overflow-hidden"> - <button - className="relative h-4 w-full cursor-default select-none border-0 bg-transparent p-0" - style={{ - width: `${dynamicTimelineWidth}px`, - }} - aria-label="Timeline ruler" - type="button" - onWheel={handleWheel} - onClick={handleTimelineContentClick} - onMouseDown={(event) => { - handleRulerMouseDown(event); - handleRulerTrackingMouseDown(event); - }} - > - {activeScene.bookmarks.map((time: number) => ( - <TimelineBookmark - key={`bookmark-row-${time}`} - time={time} - zoomLevel={zoomLevel} - /> - ))} - </button> - </div> - ); -} - -export function TimelineBookmark({ - time, - zoomLevel, -}: { - time: number; - zoomLevel: number; -}) { - const editor = useEditor(); - const activeProject = editor.project.getActive(); - const duration = editor.timeline.getTotalDuration(); - - const handleBookmarkActivate = ({ - event, - }: { - event: - | React.MouseEvent<HTMLButtonElement> - | React.KeyboardEvent<HTMLButtonElement>; - }) => { - event.stopPropagation(); - const framesPerSecond = activeProject?.settings.fps ?? 30; - const snappedTime = getSnappedSeekTime({ - rawTime: time, - duration, - fps: framesPerSecond, - }); - editor.playback.seek({ time: snappedTime }); - }; - - return ( - <button - className="absolute top-0 h-10 w-0.5 cursor-pointer border-0 bg-transparent p-0" - style={{ - left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`, - }} - aria-label={`Seek to bookmark at ${time}s`} - type="button" - onMouseDown={(event) => { - event.preventDefault(); - event.stopPropagation(); - }} - onClick={(event) => handleBookmarkActivate({ event })} - onKeyDown={(event) => { - if (event.key !== "Enter" && event.key !== " ") return; - event.preventDefault(); - handleBookmarkActivate({ event }); - }} - > - <div className="text-primary absolute top-[-1px] left-[-5px]"> - <HugeiconsIcon - icon={Bookmark02Icon} - aria-hidden="true" - className="fill-primary size-3" - /> - </div> - </button> - ); -} |
