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({
- {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
diff --git a/apps/web/src/components/ui/editable-timecode.tsx b/apps/web/src/components/ui/editable-timecode.tsx
index f6d29f49..404831f6 100644
--- a/apps/web/src/components/ui/editable-timecode.tsx
+++ b/apps/web/src/components/ui/editable-timecode.tsx
@@ -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,
diff --git a/apps/web/src/hooks/use-editor-actions.ts b/apps/web/src/hooks/use-editor-actions.ts
index bfe9a7b9..81500416 100644
--- a/apps/web/src/hooks/use-editor-actions.ts
+++ b/apps/web/src/hooks/use-editor-actions.ts
@@ -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
diff --git a/apps/web/src/hooks/use-timeline-element-resize.ts b/apps/web/src/hooks/use-timeline-element-resize.ts
index ba13e05a..2875185c 100644
--- a/apps/web/src/hooks/use-timeline-element-resize.ts
+++ b/apps/web/src/hooks/use-timeline-element-resize.ts
@@ -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
diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts
index 08587228..97086abb 100644
--- a/apps/web/src/hooks/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/use-timeline-playhead.ts
@@ -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
diff --git a/apps/web/src/lib/time.ts b/apps/web/src/lib/time.ts
index f24c5961..20e2ff6d 100644
--- a/apps/web/src/lib/time.ts
+++ b/apps/web/src/lib/time.ts
@@ -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;
+};
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index a92cb530..c2b9cf4a 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -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
((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);
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 259533bf..5ff88418 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -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((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((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((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(