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-header.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

(limited to 'apps/web/src/components/editor-header.tsx')

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 5131230f..aaea97bd 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/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>
   );
 
-- 
cgit v1.3.1