RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 <mazewinther@gmail.com>
This commit is contained in:
Zaka 2025-08-15 23:01:18 +02:00 committed by GitHub
parent 033a9aa1bc
commit 7e4cd76762
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 76 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/web/src/components/editor-header.tsx
View File

@ -1,17 +1,8 @@
"use client";
import { Button } from "./ui/button";
import {
ChevronDown,
ArrowLeft,
Download,
SquarePen,
Trash,
Sun,
} from "lucide-react";
import { useTimelineStore } from "@/stores/timeline-store";
import { ChevronDown, ArrowLeft, SquarePen, Trash, Sun } from "lucide-react";
import { HeaderBase } from "./header-base";
import { formatTimeCode } from "@/lib/time";
import { useProjectStore } from "@/stores/project-store";
import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
import { useState } from "react";
@ -28,13 +19,10 @@ import { DeleteProjectDialog } from "./delete-project-dialog";
import { useRouter } from "next/navigation";
import { FaDiscord } from "react-icons/fa6";
import { useTheme } from "next-themes";
import { usePlaybackStore } from "@/stores/playback-store";
import { TransitionUpIcon } from "./icons";
import { PanelPresetSelector } from "./panel-preset-selector";
export function EditorHeader() {
const { getTotalDuration } = useTimelineStore();
const { currentTime } = usePlaybackStore();
const { activeProject, renameProject, deleteProject } = useProjectStore();
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
@ -124,22 +112,6 @@ export function EditorHeader() {
</div>
);
const centerContent = (
<div className="flex items-center gap-2 text-xs">
<span className="text-foreground tabular-nums">
{formatTimeCode(currentTime, "HH:MM:SS:FF", activeProject?.fps || 30)}
</span>
<span className="text-foreground/50">/</span>
<span className="text-foreground/50 tabular-nums">
{formatTimeCode(
getTotalDuration(),
"HH:MM:SS:FF",
activeProject?.fps || 30
)}
</span>
</div>
);
const rightContent = (
<nav className="flex items-center gap-2">
<PanelPresetSelector />
@ -160,7 +132,6 @@ export function EditorHeader() {
return (
<HeaderBase
leftContent={leftContent}
centerContent={centerContent}
rightContent={rightContent}
className="bg-background h-[3.2rem] px-3 items-center mt-0.5"
/>
@ -177,14 +148,14 @@ function ExportButton() {
return (
<button
className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.1rem] py-[0.1rem] cursor-pointer hover:brightness-95 transition-all duration-200"
className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.12rem] py-[0.12rem] cursor-pointer hover:brightness-95 transition-all duration-200"
onClick={handleExport}
>
<div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.45)]">
<div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
<TransitionUpIcon className="z-50" />
<span className="text-[0.875rem] z-50">Export</span>
<div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
<div className="absolute w-[calc(100%-4px)] h-[calc(100%-4px)] top-[0.12rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-lg"></div>
<div className="absolute w-[calc(100%-2px)] h-[calc(100%-2px)] top-[0.08rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-[0.8rem]"></div>
</div>
</div>
</button>

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

@ -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
)}
</span>
</div>

37
apps/web/src/components/editor/timeline/index.tsx
View File

@ -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)}
>
<TimelineToolbar
zoomLevel={zoomLevel}
setZoomLevel={setZoomLevel}
seek={seek}
/>
<TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
{/* Timeline Container */}
<div
@ -938,11 +936,9 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
function TimelineToolbar({
zoomLevel,
setZoomLevel,
seek,
}: {
zoomLevel: number;
setZoomLevel: (zoom: number) => 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({
<TooltipContent>Return to Start (Home / Enter)</TooltipContent>
</Tooltip>
<div className="w-px h-6 bg-border mx-1" />
<div
className="text-xs text-muted-foreground font-mono px-2"
style={{ minWidth: "18ch", textAlign: "center" }}
>
{currentTime.toFixed(1)}s / {duration.toFixed(1)}s
{/* Time Display */}
<div className="flex flex-row items-center justify-center px-2">
<EditableTimecode
time={currentTime}
duration={duration}
format="HH:MM:SS:FF"
fps={activeProject?.fps ?? DEFAULT_FPS}
onTimeChange={seek}
className="text-center"
/>
<div className="text-xs text-muted-foreground font-mono px-2">
/
</div>
<div className="text-xs text-muted-foreground font-mono text-center">
{formatTimeCode(duration, "HH:MM:SS:FF")}
</div>
</div>
{tracks.length === 0 && (
<>

8
apps/web/src/components/editor/timeline/timeline-track.tsx
View File

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

7
apps/web/src/components/ui/editable-timecode.tsx
View File

@ -2,12 +2,13 @@
import { useState, useRef, useEffect } from "react";
import { cn } from "@/lib/utils";
import { formatTimeCode, parseTimeCode } from "@/lib/time";
import { formatTimeCode, parseTimeCode, TimeCode } from "@/lib/time";
import { DEFAULT_FPS } from "@/stores/project-store";
interface EditableTimecodeProps {
time: number;
duration?: number;
format?: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF";
format?: TimeCode;
fps?: number;
onTimeChange?: (time: number) => void;
className?: string;
@ -18,7 +19,7 @@ export function EditableTimecode({
time,
duration,
format = "HH:MM:SS:FF",
fps = 30,
fps = DEFAULT_FPS,
onTimeChange,
className,
disabled = false,

6
apps/web/src/hooks/use-editor-actions.ts
View File

@ -4,7 +4,7 @@ import { useEffect } from "react";
import { useActionHandler } from "@/constants/actions";
import { useTimelineStore } from "@/stores/timeline-store";
import { usePlaybackStore } from "@/stores/playback-store";
import { useProjectStore } from "@/stores/project-store";
import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
import { toast } from "sonner";
export function useEditorActions() {
@ -66,7 +66,7 @@ export function useEditorActions() {
useActionHandler(
"frame-step-forward",
() => {
const projectFps = activeProject?.fps || 30;
const projectFps = activeProject?.fps || DEFAULT_FPS;
seek(Math.min(duration, currentTime + 1 / projectFps));
},
undefined
@ -75,7 +75,7 @@ export function useEditorActions() {
useActionHandler(
"frame-step-backward",
() => {
const projectFps = activeProject?.fps || 30;
const projectFps = activeProject?.fps || DEFAULT_FPS;
seek(Math.max(0, currentTime - 1 / projectFps));
},
undefined

4
apps/web/src/hooks/use-timeline-element-resize.ts
View File

@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
import { ResizeState, TimelineElement, TimelineTrack } from "@/types/timeline";
import { useMediaStore } from "@/stores/media-store";
import { useTimelineStore } from "@/stores/timeline-store";
import { useProjectStore } from "@/stores/project-store";
import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
import { snapTimeToFrame } from "@/constants/timeline-constants";
interface UseTimelineElementResizeProps {
@ -113,7 +113,7 @@ export function useTimelineElementResize({
// Get project FPS for frame snapping
const projectStore = useProjectStore.getState();
const projectFps = projectStore.activeProject?.fps || 30;
const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
if (resizing.side === "left") {
// Left resize - different behavior for media vs text/image elements

4
apps/web/src/hooks/use-timeline-playhead.ts
View File

@ -1,5 +1,5 @@
import { snapTimeToFrame } from "@/constants/timeline-constants";
import { useProjectStore } from "@/stores/project-store";
import { DEFAULT_FPS, useProjectStore } from "@/stores/project-store";
import { usePlaybackStore } from "@/stores/playback-store";
import { useState, useEffect, useCallback, useRef } from "react";
@ -86,7 +86,7 @@ export function useTimelinePlayhead({
const rawTime = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
// Use frame snapping for playhead scrubbing
const projectStore = useProjectStore.getState();
const projectFps = projectStore.activeProject?.fps || 30;
const projectFps = projectStore.activeProject?.fps || DEFAULT_FPS;
const time = snapTimeToFrame(rawTime, projectFps);
// Debug logging

27
apps/web/src/lib/time.ts
View File

@ -1,10 +1,14 @@
// Time-related utility functions
import { DEFAULT_FPS } from "@/stores/project-store";
export type TimeCode = "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF";
// Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS, HH:MM:SS:FF)
export const formatTimeCode = (
timeInSeconds: number,
format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",
fps = 30
format: TimeCode = "HH:MM:SS:CS",
fps = DEFAULT_FPS
): string => {
const hours = Math.floor(timeInSeconds / 3600);
const minutes = Math.floor((timeInSeconds % 3600) / 60);
@ -26,8 +30,8 @@ export const formatTimeCode = (
export const parseTimeCode = (
timeCode: string,
format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",
fps = 30
format: TimeCode = "HH:MM:SS:CS",
fps = DEFAULT_FPS
): number | null => {
if (!timeCode || typeof timeCode !== "string") return null;
@ -116,3 +120,18 @@ export const parseTimeCode = (
return null;
};
export const guessTimeCodeFormat = (timeCode: string): TimeCode | null => {
if (!timeCode || typeof timeCode !== "string") return null;
const numbers = timeCode.split(":");
if (!numbers.every((n) => !isNaN(Number(n)))) return null;
if (numbers.length === 2) return "MM:SS";
if (numbers.length === 3) return "HH:MM:SS";
// todo: how to tell frames apart from cs?
if (numbers.length === 4) return "HH:MM:SS:FF";
return null;
};

8
apps/web/src/stores/playback-store.ts
View File

@ -1,7 +1,7 @@
import { create } from "zustand";
import type { PlaybackState, PlaybackControls } from "@/types/playback";
import { useTimelineStore } from "@/stores/timeline-store";
import { useProjectStore } from "./project-store";
import { DEFAULT_FPS, useProjectStore } from "./project-store";
interface PlaybackStore extends PlaybackState, PlaybackControls {
setDuration: (duration: number) => void;
@ -37,9 +37,9 @@ const startTimer = (store: () => PlaybackStore) => {
// When content completes, pause just before the end so we can see the last frame
const projectFps = useProjectStore.getState().activeProject?.fps;
if (!projectFps)
console.error("Project FPS is not set, assuming 30fps");
console.error("Project FPS is not set, assuming " + DEFAULT_FPS + "fps");
const frameOffset = 1 / (projectFps ?? 30); // Stop 1 frame before end based on project FPS
const frameOffset = 1 / (projectFps ?? DEFAULT_FPS); // Stop 1 frame before end based on project FPS
const stopTime = Math.max(0, effectiveDuration - frameOffset);
state.pause();
@ -91,7 +91,7 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
actualContentDuration > 0 ? actualContentDuration : state.duration;
if (effectiveDuration > 0) {
const fps = useProjectStore.getState().activeProject?.fps ?? 30;
const fps = useProjectStore.getState().activeProject?.fps ?? DEFAULT_FPS;
const frameOffset = 1 / fps;
const endThreshold = Math.max(0, effectiveDuration - frameOffset);

9
apps/web/src/stores/project-store.ts
View File

@ -8,6 +8,7 @@ import { generateUUID } from "@/lib/utils";
import { CanvasSize, CanvasMode } from "@/types/editor";
export const DEFAULT_CANVAS_SIZE: CanvasSize = { width: 1920, height: 1080 };
export const DEFAULT_FPS = 30;
const DEFAULT_PROJECT: TProject = {
id: generateUUID(),
@ -19,7 +20,7 @@ const DEFAULT_PROJECT: TProject = {
backgroundType: "color",
blurIntensity: 8,
bookmarks: [],
fps: 30,
fps: DEFAULT_FPS,
canvasSize: DEFAULT_CANVAS_SIZE,
canvasMode: "preset",
};
@ -77,7 +78,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
if (!activeProject) return;
// Round time to the nearest frame
const fps = activeProject.fps || 30;
const fps = activeProject.fps || DEFAULT_FPS;
const frameTime = Math.round(time * fps) / fps;
const bookmarks = activeProject.bookmarks || [];
@ -119,7 +120,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
if (!activeProject || !activeProject.bookmarks) return false;
// Round time to the nearest frame
const fps = activeProject.fps || 30;
const fps = activeProject.fps || DEFAULT_FPS;
const frameTime = Math.round(time * fps) / fps;
return activeProject.bookmarks.some(
@ -132,7 +133,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
if (!activeProject || !activeProject.bookmarks) return;
// Round time to the nearest frame
const fps = activeProject.fps || 30;
const fps = activeProject.fps || DEFAULT_FPS;
const frameTime = Math.round(time * fps) / fps;
const updatedBookmarks = activeProject.bookmarks.filter(