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-header.tsx

@@ -1,17 +1,8 @@
 "use client";
 
 import { Button } from "./ui/button";
-import {
+import { ChevronDown, ArrowLeft, SquarePen, Trash, Sun } from "lucide-react";
-  ChevronDown,
-  ArrowLeft,
-  Download,
-  SquarePen,
-  Trash,
-  Sun,
-} from "lucide-react";
-import { useTimelineStore } from "@/stores/timeline-store";
 import { HeaderBase } from "./header-base";
-import { formatTimeCode } from "@/lib/time";
 import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
 import { useState } from "react";
@@ -28,13 +19,10 @@ import { DeleteProjectDialog } from "./delete-project-dialog";
 import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
 import { useTheme } from "next-themes";
-import { usePlaybackStore } from "@/stores/playback-store";
 import { TransitionUpIcon } from "./icons";
 import { PanelPresetSelector } from "./panel-preset-selector";
 
 export function EditorHeader() {
-  const { getTotalDuration } = useTimelineStore();
-  const { currentTime } = usePlaybackStore();
   const { activeProject, renameProject, deleteProject } = useProjectStore();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
@@ -124,22 +112,6 @@ export function EditorHeader() {
     </div>
   );
 
-  const centerContent = (
-    <div className="flex items-center gap-2 text-xs">
-      <span className="text-foreground tabular-nums">
-        {formatTimeCode(currentTime, "HH:MM:SS:FF", activeProject?.fps || 30)}
-      </span>
-      <span className="text-foreground/50">/</span>
-      <span className="text-foreground/50 tabular-nums">
-        {formatTimeCode(
-          getTotalDuration(),
-          "HH:MM:SS:FF",
-          activeProject?.fps || 30
-        )}
-      </span>
-    </div>
-  );
-
   const rightContent = (
     <nav className="flex items-center gap-2">
       <PanelPresetSelector />
@@ -160,7 +132,6 @@ export function EditorHeader() {
   return (
     <HeaderBase
       leftContent={leftContent}
-      centerContent={centerContent}
       rightContent={rightContent}
       className="bg-background h-[3.2rem] px-3 items-center mt-0.5"
     />
@@ -177,14 +148,14 @@ function ExportButton() {
 
   return (
     <button
-      className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.1rem] py-[0.1rem] cursor-pointer hover:brightness-95 transition-all duration-200"
+      className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.12rem] py-[0.12rem] cursor-pointer hover:brightness-95 transition-all duration-200"
       onClick={handleExport}
     >
-            <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.45)]">
+      <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
         <TransitionUpIcon className="z-50" />
         <span className="text-[0.875rem] z-50">Export</span>
         <div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
-          <div className="absolute w-[calc(100%-4px)] h-[calc(100%-4px)] top-[0.12rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-lg"></div>
+          <div className="absolute w-[calc(100%-2px)] h-[calc(100%-2px)] top-[0.08rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-[0.8rem]"></div>
         </div>
       </div>
     </button>

apps/web/src/components/editor/preview-panel.tsx

@@ -14,7 +14,7 @@ import { cn } from "@/lib/utils";
 import { formatTimeCode } from "@/lib/time";
 import { EditableTimecode } from "@/components/ui/editable-timecode";
 import { FONT_CLASS_MAP } from "@/lib/font-config";
-import { DEFAULT_CANVAS_SIZE, useProjectStore } from "@/stores/project-store";
+import { DEFAULT_CANVAS_SIZE, DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { TextElementDragState } from "@/types/editor";
 import {
   Popover,
@@ -631,7 +631,7 @@ function FullscreenToolbar({
           time={currentTime}
           duration={totalDuration}
           format="HH:MM:SS:FF"
-          fps={activeProject?.fps || 30}
+          fps={activeProject?.fps || DEFAULT_FPS}
           onTimeChange={seek}
           disabled={!hasAnyElements}
           className="text-foreground/90 hover:bg-white/10"
@@ -641,7 +641,7 @@ function FullscreenToolbar({
           {formatTimeCode(
             totalDuration,
             "HH:MM:SS:FF",
-            activeProject?.fps || 30
+            activeProject?.fps || DEFAULT_FPS
           )}
         </span>
       </div>

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
+      <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
-        zoomLevel={zoomLevel}
-        setZoomLevel={setZoomLevel}
-        seek={seek}
-      />
 
       {/* 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 { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();
-  const { toggleBookmark, isBookmarked } = useProjectStore();
+  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
+          {/* Time Display */}
-            className="text-xs text-muted-foreground font-mono px-2"
+          <div className="flex flex-row items-center justify-center px-2">
-            style={{ minWidth: "18ch", textAlign: "center" }}
+            <EditableTimecode
-          >
+              time={currentTime}
-            {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
+              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 && (
             <>

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

apps/web/src/components/ui/editable-timecode.tsx

@@ -2,12 +2,13 @@
 
 import { useState, useRef, useEffect } from "react";
 import { cn } from "@/lib/utils";
-import { formatTimeCode, parseTimeCode } from "@/lib/time";
+import { formatTimeCode, parseTimeCode, TimeCode } from "@/lib/time";
+import { DEFAULT_FPS } from "@/stores/project-store";
 
 interface EditableTimecodeProps {
   time: number;
   duration?: number;
-  format?: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF";
+  format?: TimeCode;
   fps?: number;
   onTimeChange?: (time: number) => void;
   className?: string;
@@ -18,7 +19,7 @@ export function EditableTimecode({
   time,
   duration,
   format = "HH:MM:SS:FF",
-  fps = 30,
+  fps = DEFAULT_FPS,
   onTimeChange,
   className,
   disabled = false,

apps/web/src/hooks/use-editor-actions.ts

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { useActionHandler } from "@/constants/actions";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { usePlaybackStore } from "@/stores/playback-store";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { toast } from "sonner";
 
 export function useEditorActions() {
@@ -66,7 +66,7 @@ export function useEditorActions() {
   useActionHandler(
     "frame-step-forward",
     () => {
-      const projectFps = activeProject?.fps || 30;
+      const projectFps = activeProject?.fps || DEFAULT_FPS;
       seek(Math.min(duration, currentTime + 1 / projectFps));
     },
     undefined
@@ -75,7 +75,7 @@ export function useEditorActions() {
   useActionHandler(
     "frame-step-backward",
     () => {
-      const projectFps = activeProject?.fps || 30;
+      const projectFps = activeProject?.fps || DEFAULT_FPS;
       seek(Math.max(0, currentTime - 1 / projectFps));
     },
     undefined

apps/web/src/hooks/use-timeline-element-resize.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { ResizeState, TimelineElement, TimelineTrack } from "@/types/timeline";
 import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { snapTimeToFrame } from "@/constants/timeline-constants";
 
 interface UseTimelineElementResizeProps {
@@ -113,7 +113,7 @@ export function useTimelineElementResize({
 
     // Get project FPS for frame snapping
     const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || 30;
+    const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
 
     if (resizing.side === "left") {
       // Left resize - different behavior for media vs text/image elements

apps/web/src/hooks/use-timeline-playhead.ts

@@ -1,5 +1,5 @@
 import { snapTimeToFrame } from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
+import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useState, useEffect, useCallback, useRef } from "react";
 
@@ -86,7 +86,7 @@ export function useTimelinePlayhead({
       const rawTime = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
       // Use frame snapping for playhead scrubbing
       const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || 30;
+      const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
       const time = snapTimeToFrame(rawTime, projectFps);
 
       // Debug logging

apps/web/src/lib/time.ts

@@ -1,10 +1,14 @@
 // Time-related utility functions
 
+import { DEFAULT_FPS } from "@/stores/project-store";
+
+export type TimeCode = "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF";
+
 // Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS, HH:MM:SS:FF)
 export const formatTimeCode = (
   timeInSeconds: number,
-  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",
+  format: TimeCode = "HH:MM:SS:CS",
-  fps = 30
+  fps = DEFAULT_FPS
 ): string => {
   const hours = Math.floor(timeInSeconds / 3600);
   const minutes = Math.floor((timeInSeconds % 3600) / 60);
@@ -26,8 +30,8 @@ export const formatTimeCode = (
 
 export const parseTimeCode = (
   timeCode: string,
-  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",
+  format: TimeCode = "HH:MM:SS:CS",
-  fps = 30
+  fps = DEFAULT_FPS
 ): number | null => {
   if (!timeCode || typeof timeCode !== "string") return null;
 
@@ -116,3 +120,18 @@ export const parseTimeCode = (
 
   return null;
 };
+
+export const guessTimeCodeFormat = (timeCode: string): TimeCode | null => {
+  if (!timeCode || typeof timeCode !== "string") return null;
+
+  const numbers = timeCode.split(":");
+
+  if (!numbers.every((n) => !isNaN(Number(n)))) return null;
+
+  if (numbers.length === 2) return "MM:SS";
+  if (numbers.length === 3) return "HH:MM:SS";
+  // todo: how to tell frames apart from cs?
+  if (numbers.length === 4) return "HH:MM:SS:FF";
+
+  return null;
+};

apps/web/src/stores/playback-store.ts

@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import type { PlaybackState, PlaybackControls } from "@/types/playback";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { useProjectStore } from "./project-store";
+import { DEFAULT_FPS, useProjectStore } from "./project-store";
 
 interface PlaybackStore extends PlaybackState, PlaybackControls {
   setDuration: (duration: number) => void;
@@ -37,9 +37,9 @@ const startTimer = (store: () => PlaybackStore) => {
         // When content completes, pause just before the end so we can see the last frame
         const projectFps = useProjectStore.getState().activeProject?.fps;
         if (!projectFps)
-          console.error("Project FPS is not set, assuming 30fps");
+          console.error("Project FPS is not set, assuming " + DEFAULT_FPS + "fps");
 
-        const frameOffset = 1 / (projectFps ?? 30); // Stop 1 frame before end based on project FPS
+        const frameOffset = 1 / (projectFps ?? DEFAULT_FPS); // Stop 1 frame before end based on project FPS
         const stopTime = Math.max(0, effectiveDuration - frameOffset);
 
         state.pause();
@@ -91,7 +91,7 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
       actualContentDuration > 0 ? actualContentDuration : state.duration;
 
     if (effectiveDuration > 0) {
-      const fps = useProjectStore.getState().activeProject?.fps ?? 30;
+      const fps = useProjectStore.getState().activeProject?.fps ?? DEFAULT_FPS;
       const frameOffset = 1 / fps;
       const endThreshold = Math.max(0, effectiveDuration - frameOffset);
 

apps/web/src/stores/project-store.ts

@@ -8,6 +8,7 @@ import { generateUUID } from "@/lib/utils";
 import { CanvasSize, CanvasMode } from "@/types/editor";
 
 export const DEFAULT_CANVAS_SIZE: CanvasSize = { width: 1920, height: 1080 };
+export const DEFAULT_FPS = 30;
 
 const DEFAULT_PROJECT: TProject = {
   id: generateUUID(),
@@ -19,7 +20,7 @@ const DEFAULT_PROJECT: TProject = {
   backgroundType: "color",
   blurIntensity: 8,
   bookmarks: [],
-  fps: 30,
+  fps: DEFAULT_FPS,
   canvasSize: DEFAULT_CANVAS_SIZE,
   canvasMode: "preset",
 };
@@ -77,7 +78,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     if (!activeProject) return;
 
     // Round time to the nearest frame
-    const fps = activeProject.fps || 30;
+    const fps = activeProject.fps || DEFAULT_FPS;
     const frameTime = Math.round(time * fps) / fps;
 
     const bookmarks = activeProject.bookmarks || [];
@@ -119,7 +120,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     if (!activeProject || !activeProject.bookmarks) return false;
 
     // Round time to the nearest frame
-    const fps = activeProject.fps || 30;
+    const fps = activeProject.fps || DEFAULT_FPS;
     const frameTime = Math.round(time * fps) / fps;
 
     return activeProject.bookmarks.some(
@@ -132,7 +133,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     if (!activeProject || !activeProject.bookmarks) return;
 
     // Round time to the nearest frame
-    const fps = activeProject.fps || 30;
+    const fps = activeProject.fps || DEFAULT_FPS;
     const frameTime = Math.round(time * fps) / fps;
 
     const updatedBookmarks = activeProject.bookmarks.filter(