diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx index a32fd804..2a33d6bd 100644 --- a/src/components/video-editor/SettingsPanel.tsx +++ b/src/components/video-editor/SettingsPanel.tsx @@ -346,7 +346,7 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [ { depth: 6, label: "5×" }, ]; -type SettingsPanelMode = "background" | "effects" | "layout" | "cursor" | "export"; +type SettingsPanelMode = "background" | "effects" | "layout" | "cursor" | "export" | "timeline"; const MP4_EXPORT_SHORT_SIDES = { medium: 720, @@ -392,7 +392,7 @@ export function SettingsPanel({ onShadowCommit, showBlur, onBlurChange, - showTrimWaveform = true, + showTrimWaveform = false, onTrimWaveformChange, motionBlurAmount = 0, onMotionBlurChange, @@ -608,6 +608,7 @@ export function SettingsPanel({ { id: "background", label: t("background.title"), icon: Palette }, { id: "effects", label: t("effects.title"), icon: SlidersHorizontal }, { id: "layout", label: t("layout.title"), icon: LayoutPanelTop, disabled: !hasWebcam }, + { id: "timeline", label: "Timeline", icon: AudioWaveform }, ...(hasCursorPanel ? [ { @@ -629,8 +630,10 @@ export function SettingsPanel({ : selectedSpeedId ? t("speed.playbackSpeed") : t("trim.deleteRegion") - : ([...panelModes, exportPanelMode].find((mode) => mode.id === activePanelMode)?.label ?? - t("background.title")); + : activePanelMode === "timeline" + ? "Timeline" + : ([...panelModes, exportPanelMode].find((mode) => mode.id === activePanelMode)?.label ?? + t("background.title")); const handleDeleteClick = () => { if (selectedZoomId && onZoomDelete) { @@ -1183,11 +1186,7 @@ export function SettingsPanel({ )} {!hasTimelineSelection && ( - + {hasWebcam && activePanelMode === "layout" && ( @@ -1705,27 +1704,28 @@ export function SettingsPanel({ )} - {/* Timeline Settings — always visible regardless of active panel mode */} - - -
- - Timeline -
-
- -
-
-
Waveform
- + {activePanelMode === "timeline" && ( + + +
+ + Timeline
-
- - + + +
+
+
Waveform
+ +
+
+
+ + )} )}
diff --git a/src/components/video-editor/editorDefaults.ts b/src/components/video-editor/editorDefaults.ts index 2e1e9510..914ec769 100644 --- a/src/components/video-editor/editorDefaults.ts +++ b/src/components/video-editor/editorDefaults.ts @@ -40,7 +40,7 @@ export const DEFAULT_EDITOR_APPEARANCE_SETTINGS: { showBlur: false, motionBlurAmount: 0, borderRadius: 0, - showTrimWaveform: true, + showTrimWaveform: false, }; export const DEFAULT_EDITOR_LAYOUT_SETTINGS: { diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx index 76959a3e..d0026610 100644 --- a/src/components/video-editor/timeline/TimelineEditor.tsx +++ b/src/components/video-editor/timeline/TimelineEditor.tsx @@ -37,8 +37,8 @@ import type { import Item from "./Item"; import KeyframeMarkers from "./KeyframeMarkers"; import Row from "./Row"; -import TimelineWrapper from "./TimelineWrapper"; import RowWaveform from "./RowWaveform"; +import TimelineWrapper from "./TimelineWrapper"; import { detectZoomDwellCandidates, normalizeCursorTelemetry } from "./zoomSuggestionUtils"; const ZOOM_ROW_ID = "row-zoom"; @@ -571,7 +571,7 @@ function Timeline({ selectedSpeedId, keyframes = [], videoUrl, - showTrimWaveform = true, + showTrimWaveform = false, }: { items: TimelineRenderItem[]; videoDurationMs: number; @@ -799,7 +799,11 @@ function Timeline({ id={TRIM_ROW_ID} isEmpty={trimItems.length === 0} hint={t("hints.pressTrim")} - background={showTrimWaveform ? : undefined} + background={ + showTrimWaveform ? ( + + ) : undefined + } > {trimItems.map((item) => ( Math.max(0, Math.round(videoDuration * 1000)), [videoDuration]);