From 7e4cd767622e3e1a09e76770ce800f4a541cf0e8 Mon Sep 17 00:00:00 2001 From: Zaka <149817565+ZakaHaceCosas@users.noreply.github.com> Date: Fri, 15 Aug 2025 23:01:18 +0200 Subject: feat: add an input so the user can go to a specific timestamp (#530) * feat: add an input so the user can go to a specific timestamp * fix: use TimeCode type for EditableTimecodeProps * cleanup --------- Co-authored-by: Maze Winther --- apps/web/src/components/editor/preview-panel.tsx | 6 ++-- apps/web/src/components/editor/timeline/index.tsx | 37 +++++++++++++--------- .../components/editor/timeline/timeline-track.tsx | 8 ++--- 3 files changed, 29 insertions(+), 22 deletions(-) (limited to 'apps/web/src/components/editor') diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 3873ebca..42c4becc 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -14,7 +14,7 @@ import { cn } from "@/lib/utils"; import { formatTimeCode } from "@/lib/time"; import { EditableTimecode } from "@/components/ui/editable-timecode"; import { FONT_CLASS_MAP } from "@/lib/font-config"; -import { DEFAULT_CANVAS_SIZE, useProjectStore } from "@/stores/project-store"; +import { DEFAULT_CANVAS_SIZE, DEFAULT_FPS, useProjectStore } from "@/stores/project-store"; import { TextElementDragState } from "@/types/editor"; import { Popover, @@ -631,7 +631,7 @@ function FullscreenToolbar({ time={currentTime} duration={totalDuration} format="HH:MM:SS:FF" - fps={activeProject?.fps || 30} + fps={activeProject?.fps || DEFAULT_FPS} onTimeChange={seek} disabled={!hasAnyElements} className="text-foreground/90 hover:bg-white/10" @@ -641,7 +641,7 @@ function FullscreenToolbar({ {formatTimeCode( totalDuration, "HH:MM:SS:FF", - activeProject?.fps || 30 + activeProject?.fps || DEFAULT_FPS )} diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx index 34d38234..284384eb 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -40,7 +40,7 @@ import { import { useTimelineStore } from "@/stores/timeline-store"; import { useMediaStore } from "@/stores/media-store"; import { usePlaybackStore } from "@/stores/playback-store"; -import { useProjectStore } from "@/stores/project-store"; +import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store"; import { useTimelineZoom } from "@/hooks/use-timeline-zoom"; import { processMediaFiles } from "@/lib/media-processing"; @@ -65,6 +65,8 @@ import { snapTimeToFrame, } from "@/constants/timeline-constants"; import { Slider } from "@/components/ui/slider"; +import { formatTimeCode } from "@/lib/time"; +import { EditableTimecode } from "@/components/ui/editable-timecode"; export function Timeline() { // Timeline shows all tracks (video, audio, effects) and their elements. @@ -610,11 +612,7 @@ export function Timeline() { onMouseEnter={() => setIsInTimeline(true)} onMouseLeave={() => setIsInTimeline(false)} > - + {/* Timeline Container */}
void; - seek: (time: number) => void; }) { const { tracks, @@ -961,8 +957,8 @@ function TimelineToolbar({ rippleEditingEnabled, toggleRippleEditing, } = useTimelineStore(); - const { currentTime, duration, isPlaying, toggle } = usePlaybackStore(); - const { toggleBookmark, isBookmarked } = useProjectStore(); + const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore(); + const { toggleBookmark, isBookmarked, activeProject } = useProjectStore(); const handleSplitSelected = () => { if (selectedElements.length === 0) return; @@ -1133,11 +1129,22 @@ function TimelineToolbar({ Return to Start (Home / Enter)
-
- {currentTime.toFixed(1)}s / {duration.toFixed(1)}s + {/* Time Display */} +
+ +
+ / +
+
+ {formatTimeCode(duration, "HH:MM:SS:FF")} +
{tracks.length === 0 && ( <> diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx index ff4797fb..5a037710 100644 --- a/apps/web/src/components/editor/timeline/timeline-track.tsx +++ b/apps/web/src/components/editor/timeline/timeline-track.tsx @@ -21,7 +21,7 @@ import { snapTimeToFrame, TIMELINE_CONSTANTS, } from "@/constants/timeline-constants"; -import { useProjectStore } from "@/stores/project-store"; +import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store"; import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping"; export function TimelineTrackContent({ @@ -70,7 +70,7 @@ export function TimelineTrackContent({ ) => { // Always apply frame snapping first const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; + const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS; let finalTime = snapTimeToFrame(dropTime, projectFps); // Additionally apply element snapping if enabled @@ -156,7 +156,7 @@ export function TimelineTrackContent({ // Always apply frame snapping first const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; + const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS; let finalTime = snapTimeToFrame(adjustedTime, projectFps); let snapPoint = null; @@ -704,7 +704,7 @@ export function TimelineTrackContent({ const newStartTime = mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel); const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; + const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS; const snappedTime = snapTimeToFrame(newStartTime, projectFps); // Calculate drop position relative to tracks -- cgit v1.3.1