feat: add time formatting utility and update editor and preview components to use it

apps/web/src/components/editor-header.tsx

@@ -6,6 +6,7 @@ import { ChevronLeft, Download } from "lucide-react";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { HeaderBase } from "./header-base";
 import { ProjectNameEditor } from "./editor/project-name-editor";
+import { formatTimeCode } from "@/lib/time";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
@@ -15,13 +16,6 @@ export function EditorHeader() {
     console.log("Export project");
   };
 
-  // Format duration from seconds to MM:SS format
-  const formatDuration = (seconds: number): string => {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = Math.floor(seconds % 60);
-    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
-  };
-
   const leftContent = (
     <div className="flex items-center gap-2">
       <Link
@@ -36,7 +30,7 @@ export function EditorHeader() {
 
   const centerContent = (
     <div className="flex items-center gap-2 text-xs text-muted-foreground">
-      <span>{formatDuration(getTotalDuration())}</span>
+      <span>{formatTimeCode(getTotalDuration(), "HH:MM:SS:CS")}</span>
     </div>
   );
 

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

@@ -24,6 +24,7 @@ import {
 import { Play, Pause, Volume2, VolumeX, Plus, Square } from "lucide-react";
 import { useState, useRef, useEffect } from "react";
 import { cn } from "@/lib/utils";
+import { formatTimeCode } from "@/lib/time";
 
 interface ActiveClip {
   clip: TimelineClip;
@@ -236,7 +237,7 @@ export function PreviewPanel() {
 }
 
 function PreviewToolbar({ hasAnyClips }: { hasAnyClips: boolean }) {
-  const { isPlaying, toggle } = usePlaybackStore();
+  const { isPlaying, toggle, currentTime } = usePlaybackStore();
   const {
     canvasSize,
     canvasPresets,
@@ -244,7 +245,7 @@ function PreviewToolbar({ hasAnyClips }: { hasAnyClips: boolean }) {
     setCanvasSizeFromAspectRatio,
   } = useEditorStore();
   const { mediaItems } = useMediaStore();
-  const { tracks } = useTimelineStore();
+  const { tracks, getTotalDuration } = useTimelineStore();
 
   // Find the current preset based on canvas size
   const currentPreset = canvasPresets.find(
@@ -289,11 +290,12 @@ function PreviewToolbar({ hasAnyClips }: { hasAnyClips: boolean }) {
       <div>
         <p
           className={cn(
-            "text-xs text-muted-foreground",
+            "text-xs text-muted-foreground tabular-nums",
             !hasAnyClips && "opacity-50"
           )}
         >
-          00:00:00:00/00:00:00:00
+          {formatTimeCode(currentTime, "HH:MM:SS:CS")}/
+          {formatTimeCode(getTotalDuration(), "HH:MM:SS:CS")}
         </p>
       </div>
       <Button

apps/web/src/lib/time.ts

@@ -0,0 +1,21 @@
+// Time-related utility functions
+
+// Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS)
+export const formatTimeCode = (
+  timeInSeconds: number,
+  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" = "HH:MM:SS:CS"
+): string => {
+  const hours = Math.floor(timeInSeconds / 3600);
+  const minutes = Math.floor((timeInSeconds % 3600) / 60);
+  const seconds = Math.floor(timeInSeconds % 60);
+  const centiseconds = Math.floor((timeInSeconds % 1) * 100);
+
+  switch (format) {
+    case "MM:SS":
+      return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+    case "HH:MM:SS":
+      return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+    case "HH:MM:SS:CS":
+      return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${centiseconds.toString().padStart(2, "0")}`;
+  }
+};