diff options
| -rw-r--r-- | apps/web/src/components/editor-header.tsx | 10 | ||||
| -rw-r--r-- | apps/web/src/components/editor/preview-panel.tsx | 10 | ||||
| -rw-r--r-- | apps/web/src/lib/time.ts | 21 |
3 files changed, 29 insertions, 12 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>
);
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 diff --git a/apps/web/src/lib/time.ts b/apps/web/src/lib/time.ts new file mode 100644 index 00000000..e2db28c2 --- /dev/null +++ b/apps/web/src/lib/time.ts @@ -0,0 +1,21 @@ +// Time-related utility functions
+
+// Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS)
+export const formatTimeCode = (
+ timeInSeconds: number,
+ format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" = "HH:MM:SS:CS"
+): string => {
+ const hours = Math.floor(timeInSeconds / 3600);
+ const minutes = Math.floor((timeInSeconds % 3600) / 60);
+ const seconds = Math.floor(timeInSeconds % 60);
+ const centiseconds = Math.floor((timeInSeconds % 1) * 100);
+
+ switch (format) {
+ case "MM:SS":
+ return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+ case "HH:MM:SS":
+ return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+ case "HH:MM:SS:CS":
+ return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${centiseconds.toString().padStart(2, "0")}`;
+ }
+};
|