improve lots of stuff around the editor

1 files changed, 9 insertions, 6 deletions

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>

   );