xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Maze Winther
2025-07-01 01:30:02 +02:00
parent 1a01871cfc
commit c37c64c1b9
3 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/src/components/editor/preview-panel.tsx
View File

@ -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