summaryrefslogtreecommitdiff
path: root/apps/web/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/components')
-rw-r--r--apps/web/src/components/editor-header.tsx37
-rw-r--r--apps/web/src/components/editor/preview-panel.tsx6
-rw-r--r--apps/web/src/components/editor/timeline/index.tsx37
-rw-r--r--apps/web/src/components/editor/timeline/timeline-track.tsx8
-rw-r--r--apps/web/src/components/ui/editable-timecode.tsx7
5 files changed, 37 insertions, 58 deletions
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 98aec2b9..88deaf0c 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -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>
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
)}
</span>
</div>
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)}
>
- <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 && (
<>
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,
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 15:16:24 +0000