From 7e4cd767622e3e1a09e76770ce800f4a541cf0e8 Mon Sep 17 00:00:00 2001
From: Zaka <149817565+ZakaHaceCosas@users.noreply.github.com>
Date: Fri, 15 Aug 2025 23:01:18 +0200
Subject: feat: add an input so the user can go to a specific timestamp (#530)

* feat: add an input so the user can go to a specific timestamp

* fix: use TimeCode type for EditableTimecodeProps

* cleanup

---------

Co-authored-by: Maze Winther <mazewinther@gmail.com>
---
 apps/web/src/components/editor/timeline/index.tsx  | 37 +++++++++++++---------
 .../components/editor/timeline/timeline-track.tsx  |  8 ++---
 2 files changed, 26 insertions(+), 19 deletions(-)

(limited to 'apps/web/src/components/editor/timeline')

diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 34d38234..284384eb 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -40,7 +40,7 @@ import {
 import { useTimelineStore } from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { processMediaFiles } from "@/lib/media-processing";
@@ -65,6 +65,8 @@ import {
   snapTimeToFrame,
 } from "@/constants/timeline-constants";
 import { Slider } from "@/components/ui/slider";
+import { formatTimeCode } from "@/lib/time";
+import { EditableTimecode } from "@/components/ui/editable-timecode";
 
 export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their elements.
@@ -610,11 +612,7 @@ export function Timeline() {
       onMouseEnter={() => setIsInTimeline(true)}
       onMouseLeave={() => setIsInTimeline(false)}
     >
-      <TimelineToolbar
-        zoomLevel={zoomLevel}
-        setZoomLevel={setZoomLevel}
-        seek={seek}
-      />
+      <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
 
       {/* Timeline Container */}
       <div
@@ -938,11 +936,9 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
 function TimelineToolbar({
   zoomLevel,
   setZoomLevel,
-  seek,
 }: {
   zoomLevel: number;
   setZoomLevel: (zoom: number) => void;
-  seek: (time: number) => void;
 }) {
   const {
     tracks,
@@ -961,8 +957,8 @@ function TimelineToolbar({
     rippleEditingEnabled,
     toggleRippleEditing,
   } = useTimelineStore();
-  const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
-  const { toggleBookmark, isBookmarked } = useProjectStore();
+  const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();
+  const { toggleBookmark, isBookmarked, activeProject } = useProjectStore();
 
   const handleSplitSelected = () => {
     if (selectedElements.length === 0) return;
@@ -1133,11 +1129,22 @@ function TimelineToolbar({
             <TooltipContent>Return to Start (Home / Enter)</TooltipContent>
           </Tooltip>
           <div className="w-px h-6 bg-border mx-1" />
-          <div
-            className="text-xs text-muted-foreground font-mono px-2"
-            style={{ minWidth: "18ch", textAlign: "center" }}
-          >
-            {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
+          {/* Time Display */}
+          <div className="flex flex-row items-center justify-center px-2">
+            <EditableTimecode
+              time={currentTime}
+              duration={duration}
+              format="HH:MM:SS:FF"
+              fps={activeProject?.fps ?? DEFAULT_FPS}
+              onTimeChange={seek}
+              className="text-center"
+            />
+            <div className="text-xs text-muted-foreground font-mono px-2">
+              /
+            </div>
+            <div className="text-xs text-muted-foreground font-mono text-center">
+              {formatTimeCode(duration, "HH:MM:SS:FF")}
+            </div>
           </div>
           {tracks.length === 0 && (
             <>
diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index ff4797fb..5a037710 100644
--- a/apps/web/src/components/editor/timeline/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-track.tsx
@@ -21,7 +21,7 @@ import {
   snapTimeToFrame,
   TIMELINE_CONSTANTS,
 } from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";
 
 export function TimelineTrackContent({
@@ -70,7 +70,7 @@ export function TimelineTrackContent({
   ) => {
     // Always apply frame snapping first
     const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || 30;
+    const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
     let finalTime = snapTimeToFrame(dropTime, projectFps);
 
     // Additionally apply element snapping if enabled
@@ -156,7 +156,7 @@ export function TimelineTrackContent({
 
       // Always apply frame snapping first
       const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || 30;
+      const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
       let finalTime = snapTimeToFrame(adjustedTime, projectFps);
       let snapPoint = null;
 
@@ -704,7 +704,7 @@ export function TimelineTrackContent({
     const newStartTime =
       mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
     const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || 30;
+    const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
     const snappedTime = snapTimeToFrame(newStartTime, projectFps);
 
     // Calculate drop position relative to tracks
-- 
cgit v1.3.1