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

1 files changed, 2 insertions, 8 deletions

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>

   );