From c37c64c1b9e586dada01ede472e7e7800fd75f28 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 1 Jul 2025 01:30:02 +0200
Subject: feat: add time formatting utility and update editor and preview
 components to use it

---
 apps/web/src/components/editor/preview-panel.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 21d39d4d..65901365 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/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
-- 
cgit v1.3.1