diff options
| author | ryu <ryumacodes@gmail.com> | 2025-08-01 02:33:42 +0500 |
|---|---|---|
| committer | ryu <ryumacodes@gmail.com> | 2025-08-01 02:33:42 +0500 |
| commit | f5d5a387d349c35688c958c591073fa15c4d2c38 (patch) | |
| tree | 6710e79f8b3c57f7983f7af4fa7bc447e32a01f4 /apps | |
| parent | e6e08057f510e70c956af0f0c08c6eef349edf3c (diff) | |
| download | opencut-f5d5a387d349c35688c958c591073fa15c4d2c38.tar.gz | |
feat: add timeline navigation return to start functionality
- Add Enter key shortcut for seeking to timeline start (00:00:00)
- Add return to start button in timeline toolbar with skip-back icon
- Both methods complement existing Home key shortcut
- Update keyboard shortcuts help to display Enter key properly
- Maintain consistent UI styling with existing playback controls
Resolves #415
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/package.json | 1 | ||||
| -rw-r--r-- | apps/web/src/components/editor/timeline/index.tsx | 20 | ||||
| -rw-r--r-- | apps/web/src/hooks/use-keyboard-shortcuts-help.ts | 1 | ||||
| -rw-r--r-- | apps/web/src/stores/keybindings-store.ts | 1 |
4 files changed, 22 insertions, 1 deletions
diff --git a/apps/web/package.json b/apps/web/package.json index 9531b6c7..139c6529 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -72,6 +72,7 @@ "devDependencies": { "@tailwindcss/typography": "^0.5.16", "@types/bun": "latest", + "@types/node": "^24.1.0", "@types/pg": "^8.15.4", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx index 078f1258..cf5fd524 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -12,6 +12,7 @@ import { SplitSquareHorizontal, Pause, Play, + SkipBack, Video, Music, TypeIcon, @@ -508,7 +509,7 @@ export function Timeline() { onMouseEnter={() => setIsInTimeline(true)} onMouseLeave={() => setIsInTimeline(false)} > - <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} /> + <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} seek={seek} /> {/* Timeline Container */} <div @@ -806,9 +807,11 @@ function TrackIcon({ track }: { track: TimelineTrack }) { function TimelineToolbar({ zoomLevel, setZoomLevel, + seek, }: { zoomLevel: number; setZoomLevel: (zoom: number) => void; + seek: (time: number) => void; }) { const { tracks, @@ -981,6 +984,21 @@ function TimelineToolbar({ {isPlaying ? "Pause (Space)" : "Play (Space)"} </TooltipContent> </Tooltip> + <Tooltip> + <TooltipTrigger asChild> + <Button + variant="text" + size="icon" + onClick={() => seek(0)} + className="mr-2" + > + <SkipBack className="h-4 w-4" /> + </Button> + </TooltipTrigger> + <TooltipContent> + Return to Start (Home / Enter) + </TooltipContent> + </Tooltip> <div className="w-px h-6 bg-border mx-1" /> {/* Time Display */} <div diff --git a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts index 2f1a4d4a..e2cde3b4 100644 --- a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts +++ b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts @@ -77,6 +77,7 @@ const formatKey = (key: string): string => { .replace("down", "↓") .replace("space", "Space") .replace("home", "Home") + .replace("enter", "Enter") .replace("end", "End") .replace("delete", "Delete") .replace("backspace", "Backspace") diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts index 97cba23f..4c11cfde 100644 --- a/apps/web/src/stores/keybindings-store.ts +++ b/apps/web/src/stores/keybindings-store.ts @@ -17,6 +17,7 @@ export const defaultKeybindings: KeybindingConfig = { "shift+left": "jump-backward", "shift+right": "jump-forward", home: "goto-start", + enter: "goto-start", end: "goto-end", s: "split-element", n: "toggle-snapping", |
