From 7e3a80eb74af23a36cfff43aa61175e1630222e1 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 22 Jun 2025 22:10:50 +0200
Subject: improve lots of stuff around the editor

---
 apps/web/src/components/editor-header.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 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 f59193d0..c6cecbe8 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -4,20 +4,25 @@ import Link from "next/link";
 import { Button } from "./ui/button";
 import { ChevronLeft, Download } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";
-import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { HeaderBase } from "./header-base";
 
 export function EditorHeader() {
   const { activeProject } = useProjectStore();
-  const { mediaItems } = useMediaStore();
-  const { tracks } = useTimelineStore();
+  const { getTotalDuration } = useTimelineStore();
 
   const handleExport = () => {
     // TODO: Implement export functionality
     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 = (
     <Link
       href="/"
@@ -30,9 +35,7 @@ export function EditorHeader() {
 
   const centerContent = (
     <div className="flex items-center gap-2 text-xs text-muted-foreground">
-      <span>{mediaItems.length} media</span>
-      <span>•</span>
-      <span>{tracks.length} tracks</span>
+      <span>{formatDuration(getTotalDuration())}</span>
     </div>
   );
 
-- 
cgit v1.3.1