diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 80d9d222..49547069 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -515,6 +515,7 @@ function LaunchWindowContent() {
;
webcamPreviewDragStartRef: RefObject;
}) {
- const anyPopoverOpenRef = useRef(false);
const isMouseOverHudRef = useRef(false);
+ const timeoutRef = useRef(null);
useEffect(() => {
- anyPopoverOpenRef.current = openId !== null;
if (openId !== null) {
window.electronAPI?.hudOverlaySetIgnoreMouse?.(false);
} else {
// Proactively check if we should ignore mouse when popover closes
setTimeout(() => {
- if (!isMouseOverHudRef.current && !anyPopoverOpenRef.current) {
+ if (!isMouseOverHudRef.current) {
window.electronAPI?.hudOverlaySetIgnoreMouse?.(true);
}
}, 150);
}
}, [openId]);
+ useEffect(() => {
+ const handleMouseOver = (e: globalThis.MouseEvent) => {
+ const target = e.target as HTMLElement | null;
+ if (!target) return;
+ const isInteractive = !!target.closest(
+ ".pointer-events-auto, [data-hud-interactive], [data-radix-popper-content-wrapper]"
+ );
+
+ if (isInteractive) {
+ isMouseOverHudRef.current = true;
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ window.electronAPI?.hudOverlaySetIgnoreMouse?.(false);
+ } else {
+ isMouseOverHudRef.current = false;
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ timeoutRef.current = setTimeout(() => {
+ if (
+ !isHudDraggingRef.current &&
+ !isWebcamPreviewDraggingRef.current &&
+ !webcamPreviewDragStartRef.current &&
+ !isMouseOverHudRef.current
+ ) {
+ window.electronAPI?.hudOverlaySetIgnoreMouse?.(true);
+ }
+ }, 300);
+ }
+ };
+
+ window.addEventListener("mouseover", handleMouseOver);
+ return () => window.removeEventListener("mouseover", handleMouseOver);
+ }, [isHudDraggingRef, isWebcamPreviewDraggingRef, webcamPreviewDragStartRef]);
+
const beginInteractiveHudAction = useCallback(() => {
isMouseOverHudRef.current = true;
window.electronAPI?.hudOverlaySetIgnoreMouse?.(false);
@@ -39,8 +70,6 @@ export function useLaunchHudInteractionState({
window.electronAPI?.hudOverlaySetIgnoreMouse?.(false);
}, []);
- const timeoutRef = useRef(null);
-
const handleHudMouseLeave = useCallback((event: MouseEvent) => {
const nextTarget = event.relatedTarget;
if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
@@ -56,11 +85,8 @@ export function useLaunchHudInteractionState({
!isHudDraggingRef.current &&
!isWebcamPreviewDraggingRef.current &&
!webcamPreviewDragStartRef.current &&
- !isMouseOverHudRef.current &&
- !anyPopoverOpenRef.current
+ !isMouseOverHudRef.current
) {
- // If a popover is open, we can still ignore mouse if the mouse is truly gone,
- // but we give a bit more breathing room (the 300ms timeout).
window.electronAPI?.hudOverlaySetIgnoreMouse?.(true);
}
}, 300);
diff --git a/src/components/launch/popovers/LaunchPopoverCoordinator.tsx b/src/components/launch/popovers/LaunchPopoverCoordinator.tsx
index ead6cdc4..55aa5f47 100644
--- a/src/components/launch/popovers/LaunchPopoverCoordinator.tsx
+++ b/src/components/launch/popovers/LaunchPopoverCoordinator.tsx
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
interface LaunchPopoverCoordinatorValue {
openId: string | null;
@@ -22,6 +22,12 @@ export function LaunchPopoverCoordinatorProvider({ children }: { children: React
const isOpen = useCallback((id: string) => openId === id, [openId]);
+ useEffect(() => {
+ const handleBlur = () => setOpenId(null);
+ window.addEventListener("blur", handleBlur);
+ return () => window.removeEventListener("blur", handleBlur);
+ }, []);
+
const value = useMemo(
() => ({
openId,
diff --git a/src/components/launch/popovers/MorePopover.tsx b/src/components/launch/popovers/MorePopover.tsx
index 94687308..9a5a5290 100644
--- a/src/components/launch/popovers/MorePopover.tsx
+++ b/src/components/launch/popovers/MorePopover.tsx
@@ -25,6 +25,7 @@ const LOCALE_LABELS: Record = {
en: "English",
es: "Español",
fr: "Français",
+ it: "Italiano",
nl: "Nederlands",
ko: "한국어",
"pt-BR": "Português",
diff --git a/src/components/launch/popovers/PopoverScaffold.tsx b/src/components/launch/popovers/PopoverScaffold.tsx
index 856de855..be349192 100644
--- a/src/components/launch/popovers/PopoverScaffold.tsx
+++ b/src/components/launch/popovers/PopoverScaffold.tsx
@@ -80,6 +80,7 @@ export function HudPopover({
{trigger}
,
+ VariantProps {
+ label?: string;
+}
+
+/**
+ * A magnificent Skeleton component designed with Apple-inspired aesthetics.
+ * Supports shimmer animations, pulse effects, and labels.
+ */
+const Skeleton = React.forwardRef(
+ ({ className, variant, animation, label, children, ...props }, ref) => {
+ return (
+ = {
en: "English",
es: "Español",
fr: "Français",
+ it: "Italiano",
nl: "Nederlands",
ko: "한국어",
"pt-BR": "Português",
@@ -3239,7 +3240,7 @@ export function SettingsPanel({
value={settings.volume}
defaultValue={1}
min={0}
- max={2}
+ max={1}
step={0.01}
onChange={(v) => onSourceAudioTrackVolumeChange?.(track.id, v)}
formatValue={(v) => `${Math.round(v * 100)}%`}
diff --git a/src/components/video-editor/SliderControl.tsx b/src/components/video-editor/SliderControl.tsx
index d9db8998..dd0aaf0d 100644
--- a/src/components/video-editor/SliderControl.tsx
+++ b/src/components/video-editor/SliderControl.tsx
@@ -1,5 +1,5 @@
import type { PointerEvent as ReactPointerEvent } from "react";
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, memo, useEffect } from "react";
import { cn } from "@/lib/utils";
interface SliderControlProps {
@@ -27,7 +27,7 @@ function quantizeToStep(value: number, min: number, step: number) {
return min + Math.round((value - min) / step) * step;
}
-export function SliderControl({
+export const SliderControl = memo(function SliderControl({
label,
value,
defaultValue: _defaultValue,
@@ -40,30 +40,51 @@ export function SliderControl({
accentColor = "blue",
}: SliderControlProps) {
const rootRef = useRef(null);
+ const valueTextRef = useRef(null);
+ const boundsRef = useRef(null);
+ const requestRef = useRef(null);
+
const pct = Math.min(100, Math.max(0, ((value - min) / (max - min || 1)) * 100));
+
const dividerClass =
accentColor === "purple"
? "bg-foreground/95 shadow-[0_0_10px_rgba(139,92,246,0.28)]"
: "bg-foreground/95 shadow-[0_0_10px_rgba(37,99,235,0.28)]";
- const setValueFromClientX = useCallback(
+ // Sync initial and prop-driven changes to CSS variable
+ useEffect(() => {
+ if (rootRef.current) {
+ rootRef.current.style.setProperty("--slider-pct", String(pct / 100));
+ }
+ }, [pct]);
+
+ const updateValue = useCallback(
(clientX: number) => {
- const root = rootRef.current;
- if (!root) {
+ const bounds = boundsRef.current;
+ if (!bounds || bounds.width <= 6) {
return;
}
- const bounds = root.getBoundingClientRect();
- if (!(bounds.width > 0)) {
- return;
- }
-
- const normalized = clamp((clientX - bounds.left) / bounds.width, 0, 1);
+ const normalized = clamp((clientX - (bounds.left + 3)) / (bounds.width - 6), 0, 1);
const rawValue = min + normalized * (max - min);
const nextValue = clamp(quantizeToStep(rawValue, min, step), min, max);
- onChange(Number(nextValue.toFixed(6)));
+ const finalValue = Number(nextValue.toFixed(6));
+ const finalPct = (((finalValue - min) / (max - min || 1)) * 100).toFixed(4);
+
+ // Direct DOM update for instant feedback
+ if (rootRef.current) {
+ rootRef.current.style.setProperty("--slider-pct", String(Number(finalPct) / 100));
+ rootRef.current.setAttribute("aria-valuenow", String(finalValue));
+ rootRef.current.setAttribute("aria-valuetext", formatValue(finalValue));
+ }
+ if (valueTextRef.current) {
+ valueTextRef.current.textContent = formatValue(finalValue);
+ }
+
+ // Notify parent
+ onChange(finalValue);
},
- [max, min, onChange, step],
+ [max, min, onChange, step, formatValue],
);
const handlePointerDown = useCallback(
@@ -72,15 +93,24 @@ export function SliderControl({
const pointerId = event.pointerId;
const target = event.currentTarget;
+ // Cache bounds to avoid layout thrashing during move
+ boundsRef.current = target.getBoundingClientRect();
+
target.setPointerCapture(pointerId);
- setValueFromClientX(event.clientX);
+ updateValue(event.clientX);
const handlePointerMove = (moveEvent: PointerEvent) => {
if (moveEvent.pointerId !== pointerId) {
return;
}
- setValueFromClientX(moveEvent.clientX);
+ if (requestRef.current) {
+ cancelAnimationFrame(requestRef.current);
+ }
+
+ requestRef.current = requestAnimationFrame(() => {
+ updateValue(moveEvent.clientX);
+ });
};
const finishPointer = (finishEvent: PointerEvent) => {
@@ -88,17 +118,27 @@ export function SliderControl({
return;
}
+ if (requestRef.current) {
+ cancelAnimationFrame(requestRef.current);
+ requestRef.current = null;
+ }
+
+ if (finishEvent.type === "pointerup") {
+ updateValue(finishEvent.clientX);
+ }
+
target.releasePointerCapture(pointerId);
target.removeEventListener("pointermove", handlePointerMove);
target.removeEventListener("pointerup", finishPointer);
target.removeEventListener("pointercancel", finishPointer);
+ boundsRef.current = null;
};
target.addEventListener("pointermove", handlePointerMove);
target.addEventListener("pointerup", finishPointer);
target.addEventListener("pointercancel", finishPointer);
},
- [setValueFromClientX],
+ [updateValue],
);
return (
@@ -124,11 +164,16 @@ export function SliderControl({
}
}}
className="relative flex h-10 w-full select-none items-center overflow-hidden rounded-xl bg-editor-bg/80 px-1.5 outline-none focus-visible:ring-1 focus-visible:ring-[#2563EB]/40"
+ style={
+ {
+ "--slider-pct": String(pct / 100),
+ } as React.CSSProperties
+ }
>
c.showSourceAudio)}
sourceAudioTrackSettings={audio.activeSourceAudioTrackSettings}
getSourceAudioTrackSettingsForClip={
diff --git a/src/components/video-editor/audio/useAudioPreviewSync.ts b/src/components/video-editor/audio/useAudioPreviewSync.ts
index 78482460..3ff9d116 100644
--- a/src/components/video-editor/audio/useAudioPreviewSync.ts
+++ b/src/components/video-editor/audio/useAudioPreviewSync.ts
@@ -189,20 +189,9 @@ export function useAudioPreviewSync({
audio.volume = 1;
audio.dataset.sourceAudioPath = audioPath;
- const context = ensureSourceAudioContext();
- const masterGain = sourceAudioMasterGainRef.current;
- if (context && masterGain && !sourceAudioMediaNodesRef.current.has(audioPath)) {
- try {
- const mediaNode = context.createMediaElementSource(audio);
- const trackGainNode = context.createGain();
- mediaNode.connect(trackGainNode);
- trackGainNode.connect(masterGain);
- sourceAudioMediaNodesRef.current.set(audioPath, mediaNode);
- sourceAudioGainNodesRef.current.set(audioPath, trackGainNode);
- } catch (error) {
- onSourceFallbackLoadError(error);
- }
- }
+ // Web Audio API createMediaElementSource breaks preservesPitch on Chromium.
+ // We route directly through the HTMLAudioElement to ensure pitch preservation works
+ // during speed changes. Note: this limits maximum preview volume to 1.0 (100%).
if (sourceAudioElementResourcesRef.current.get(audioPath) !== audioPath) {
audio.pause();
@@ -245,10 +234,7 @@ export function useAudioPreviewSync({
})();
}
- const trackGainNode = sourceAudioGainNodesRef.current.get(audioPath);
- if (trackGainNode) {
- trackGainNode.gain.value = Math.max(0, Math.min(2, getSourceTrackPreviewGain(audioPath)));
- }
+ audio.volume = Math.max(0, Math.min(1, getSourceTrackPreviewGain(audioPath) * (isCurrentClipMuted ? 0 : previewVolume)));
}
if (sourceAudioMasterGainRef.current) {
@@ -378,10 +364,7 @@ export function useAudioPreviewSync({
for (const audio of sourceAudioElementsRef.current.values()) {
const sourceAudioPath = audio.dataset.sourceAudioPath ?? "";
- const trackGainNode = sourceAudioGainNodesRef.current.get(sourceAudioPath);
- if (trackGainNode) {
- trackGainNode.gain.value = Math.max(0, Math.min(2, getSourceTrackPreviewGain(sourceAudioPath)));
- }
+ audio.volume = Math.max(0, Math.min(1, getSourceTrackPreviewGain(sourceAudioPath) * (isCurrentClipMuted ? 0 : previewVolume)));
enablePitchPreservingPlayback(audio);
const audioDuration = Number.isFinite(audio.duration) ? audio.duration : null;
diff --git a/src/components/video-editor/audio/useClipAudioSettingsController.ts b/src/components/video-editor/audio/useClipAudioSettingsController.ts
index 08ad0d5e..924d8652 100644
--- a/src/components/video-editor/audio/useClipAudioSettingsController.ts
+++ b/src/components/video-editor/audio/useClipAudioSettingsController.ts
@@ -63,7 +63,7 @@ export function useClipAudioSettingsController({
normalize: false,
};
const normalizeGain = settings.normalize ? SOURCE_AUDIO_NORMALIZE_GAIN : 1;
- return Math.max(0, Math.min(2, settings.volume * normalizeGain));
+ return Math.max(0, Math.min(1, settings.volume * normalizeGain));
}, [embeddedTrackId, previewSourceAudioTrackSettings]);
const getSourceTrackPreviewGain = useCallback(
@@ -74,7 +74,7 @@ export function useClipAudioSettingsController({
normalize: false,
};
const normalizeGain = settings.normalize ? SOURCE_AUDIO_NORMALIZE_GAIN : 1;
- return Math.max(0, Math.min(2, settings.volume * normalizeGain));
+ return Math.max(0, Math.min(1, settings.volume * normalizeGain));
},
[previewSourceAudioTrackSettings],
);
diff --git a/src/components/video-editor/audio/useSourceAudioTrackSettings.ts b/src/components/video-editor/audio/useSourceAudioTrackSettings.ts
index 22688534..9f126853 100644
--- a/src/components/video-editor/audio/useSourceAudioTrackSettings.ts
+++ b/src/components/video-editor/audio/useSourceAudioTrackSettings.ts
@@ -116,7 +116,7 @@ export function useSourceAudioTrackSettings({
setSourceAudioTrackSettingsByClip((prev) => {
const prevClip = prev[selectedClipId] ?? defaultSourceAudioTrackSettings;
const nextVolume = Number.isFinite(volume)
- ? Math.max(0, Math.min(2, volume))
+ ? Math.max(0, Math.min(1, volume))
: (prevClip[id]?.volume ?? 1);
const prevNormalize = prevClip[id]?.normalize ?? false;
if (
diff --git a/src/components/video-editor/audio/waveform/WaveformGenerator.ts b/src/components/video-editor/audio/waveform/WaveformGenerator.ts
index b44c274f..9dd6c69f 100644
--- a/src/components/video-editor/audio/waveform/WaveformGenerator.ts
+++ b/src/components/video-editor/audio/waveform/WaveformGenerator.ts
@@ -2,6 +2,8 @@ import WorkerConstructor from "./waveform.worker?worker";
import type { AudioPeaksData } from "../../timeline/core/timelineTypes";
import { WAVEFORM_DEFAULT_PEAK_COUNT } from "../../timeline/core/constants";
+const MAX_WAVEFORM_PEAKS = 200_000;
+
export class WaveformGenerator {
private audioContext: AudioContext;
private worker: Worker;
@@ -74,22 +76,37 @@ export class WaveformGenerator {
const arrayBuffer = await response.arrayBuffer();
const decoded = await this.audioContext.decodeAudioData(arrayBuffer);
-
+ const adaptivePeakCount = Math.max(
+ peakCount,
+ Math.floor(decoded.duration * 500)
+ );
+ const boundedPeakCount = Math.min(adaptivePeakCount, MAX_WAVEFORM_PEAKS);
const channels: Float32Array[] = [];
for (let i = 0; i < decoded.numberOfChannels; i++) {
// We slice to transfer the underlying buffer to the worker
channels.push(decoded.getChannelData(i).slice());
}
- const peaks = await this.computePeaksWithWorker(channels, peakCount);
+ const peaks = await this.computePeaksWithWorker(channels, boundedPeakCount);
+ // Robust Normalization: Use 99.5th percentile to avoid being squashed by a single loud spike/pop
let max = 0;
- for (let i = 0; i < peaks.length; i++) {
- if (peaks[i] > max) max = peaks[i];
+ const sortedPeaks = [...peaks].sort((a, b) => a - b);
+ const percentileIndex = Math.floor(sortedPeaks.length * 0.995);
+ const robustMax = sortedPeaks[percentileIndex] || 0;
+
+ // Fallback to absolute max if the percentile is zero (very quiet file)
+ if (robustMax === 0) {
+ for (let i = 0; i < peaks.length; i++) {
+ if (peaks[i] > max) max = peaks[i];
+ }
+ } else {
+ max = robustMax;
}
+
if (max > 0) {
for (let i = 0; i < peaks.length; i++) {
- peaks[i] /= max;
+ peaks[i] = Math.min(1.0, peaks[i] / max);
}
}
diff --git a/src/components/video-editor/audio/waveform/waveform.worker.ts b/src/components/video-editor/audio/waveform/waveform.worker.ts
index 1e43df98..80403a09 100644
--- a/src/components/video-editor/audio/waveform/waveform.worker.ts
+++ b/src/components/video-editor/audio/waveform/waveform.worker.ts
@@ -24,12 +24,17 @@ workerScope.onmessage = (e: MessageEvent) => {
const firstChannel = channels[0];
const result = new Float32Array(samples);
const total = firstChannel.length;
+ const blockSize = total / samples;
for (let i = 0; i < samples; i++) {
- const start = Math.floor((i * total) / samples);
- const end = Math.floor(((i + 1) * total) / samples);
+ const start = Math.floor(i * blockSize);
+ const end = Math.min(total, Math.floor((i + 1) * blockSize));
+
let max = 0;
- for (let j = start; j < end; j++) {
+ // Ensure we check at least one sample even if blockSize < 1
+ const actualEnd = Math.max(start + 1, end);
+
+ for (let j = start; j < actualEnd && j < total; j++) {
for (let c = 0; c < channels.length; c++) {
const val = Math.abs(channels[c][j]);
if (val > max) max = val;
diff --git a/src/components/video-editor/timeline/Item.tsx b/src/components/video-editor/timeline/Item.tsx
index 44405905..b38e42f7 100644
--- a/src/components/video-editor/timeline/Item.tsx
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -12,6 +12,7 @@ import type { Span } from "dnd-timeline";
import { useItem } from "dnd-timeline";
import { useMemo } from "react";
import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
import AudioWaveform from "./components/waveform/AudioWaveform";
import type { AudioPeaksData } from "./core/timelineTypes";
import glassStyles from "./ItemGlass.module.css";
@@ -34,6 +35,8 @@ interface ItemProps {
waveformNormalize?: boolean;
muted?: boolean;
variant?: "zoom" | "trim" | "clip" | "annotation" | "speed" | "audio";
+ isLoading?: boolean;
+ loadingLabel?: string;
}
// Map zoom depth to multiplier labels
@@ -73,15 +76,49 @@ export default function Item({
waveformNormalize = false,
muted = false,
variant = "zoom",
+ isLoading = false,
+ loadingLabel,
children,
}: ItemProps) {
const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
id,
span,
- disabled,
+ disabled: disabled || isLoading,
data: { rowId },
});
+ const timeLabel = useMemo(
+ () => `${formatMs(span.start)} – ${formatMs(span.end)}`,
+ [span.start, span.end],
+ );
+
+ if (isLoading) {
+ return (
+ (
onAudioDelete,
selectedAudioId,
onSelectAudio,
- aspectRatio = "native",
- onAspectRatioChange,
- onOpenCropEditor,
- isCropped = false,
videoPath,
- hideToolbar = false,
+ videoSourcePath,
+ cursorTelemetrySourcePath,
showSourceAudioTrack = false,
onSourceAudioAvailabilityChange,
sourceAudioTrackSettings = {},
@@ -185,9 +170,6 @@ const TimelineEditor = forwardRef(
ref,
) {
const t = useScopedT("settings");
- const tTimeline = useScopedT("timeline");
- const tEditor = useScopedT("editor");
- const initialEditorPreferences = useMemo(() => loadEditorPreferences(), []);
const totalMs = useMemo(
() => Math.max(0, Math.round(videoDuration * 1000)),
[videoDuration],
@@ -211,16 +193,7 @@ const TimelineEditor = forwardRef(
totalMs,
timelineContainerRef,
});
- const [customAspectWidth, setCustomAspectWidth] = useState(
- initialEditorPreferences.customAspectWidth,
- );
- const [customAspectHeight, setCustomAspectHeight] = useState(
- initialEditorPreferences.customAspectHeight,
- );
- const [scrollLabels, setScrollLabels] = useState({
- pan: "Shift + Ctrl + Scroll",
- zoom: "Ctrl + Scroll",
- });
+
const [liveSpanPreviewById, setLiveSpanPreviewById] = useState>({});
const liveZoomPreview = useMemo(() => {
const previewSpans: Record = { ...liveSpanPreviewById };
@@ -272,7 +245,7 @@ const TimelineEditor = forwardRef(
return { previewSpans, hiddenZoomIds };
}, [clipRegions, liveSpanPreviewById, zoomRegions]);
const { shortcuts: keyShortcuts, isMac } = useShortcuts();
- const sourceAudioPeaks = useTimelineAudioPeaks(videoPath, {
+ const { peaks: sourceAudioPeaks, loading: sourceAudioLoading } = useTimelineAudioPeaks(videoPath, {
enableSourceSidecarFallback: true,
});
const localSourcePath = useMemo(() => {
@@ -290,8 +263,8 @@ const TimelineEditor = forwardRef(
() => (localSourcePath ? buildSourceSidecarPath(localSourcePath, "system") : null),
[localSourcePath],
);
- const micSidecarPeaks = useTimelineAudioPeaks(micSidecarPath);
- const systemSidecarPeaks = useTimelineAudioPeaks(systemSidecarPath);
+ const { peaks: micSidecarPeaks, loading: micSidecarLoading } = useTimelineAudioPeaks(micSidecarPath);
+ const { peaks: systemSidecarPeaks, loading: systemSidecarLoading } = useTimelineAudioPeaks(systemSidecarPath);
const sourceAudioTracks = useMemo(() => {
if (systemSidecarPeaks || micSidecarPeaks) {
const tracks: SourceAudioTrackWithPeaks[] = [];
@@ -319,6 +292,17 @@ const TimelineEditor = forwardRef(
]
: [];
}, [micSidecarPeaks, sourceAudioPeaks, systemSidecarPeaks, t]);
+
+ const isLoading = useMemo(() => {
+ // If we are still actively trying to load audio peaks (main or sidecars)
+ if (videoPath && (sourceAudioLoading || micSidecarLoading || systemSidecarLoading)) return true;
+
+ // Robust telemetry loading detection:
+ // If a source path is set but telemetry hasn't arrived (or failed/retried) for it yet.
+ if (videoSourcePath && cursorTelemetrySourcePath !== videoSourcePath) return true;
+
+ return false;
+ }, [videoPath, videoSourcePath, cursorTelemetrySourcePath, sourceAudioLoading, micSidecarLoading, systemSidecarLoading]);
useEffect(() => {
onSourceAudioTracksMetaChange?.(sourceAudioTracks.map((t) => ({ id: t.id, label: t.label })));
}, [onSourceAudioTracksMetaChange, sourceAudioTracks]);
@@ -327,53 +311,6 @@ const TimelineEditor = forwardRef(
onSourceAudioAvailabilityChange?.(sourceAudioTracks.length > 0);
}, [onSourceAudioAvailabilityChange, sourceAudioTracks.length]);
- useEffect(() => {
- if (aspectRatio === "native") {
- return;
- }
- const [width, height] = aspectRatio.split(":");
- if (width && height) {
- setCustomAspectWidth(width);
- setCustomAspectHeight(height);
- }
- }, [aspectRatio]);
-
- useEffect(() => {
- saveEditorPreferences({
- customAspectWidth,
- customAspectHeight,
- });
- }, [customAspectHeight, customAspectWidth]);
-
- const applyCustomAspectRatio = useCallback(() => {
- const width = Number.parseInt(customAspectWidth, 10);
- const height = Number.parseInt(customAspectHeight, 10);
- if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
- toast.error("Custom aspect ratio must be positive numbers.");
- return;
- }
- onAspectRatioChange?.(`${width}:${height}` as AspectRatio);
- }, [customAspectHeight, customAspectWidth, onAspectRatioChange]);
-
- const handleCustomAspectRatioKeyDown = useCallback(
- (event: ReactKeyboardEvent) => {
- // Prevent Radix DropdownMenu typeahead from selecting preset items while typing.
- event.stopPropagation();
- if (event.key === "Enter") {
- event.preventDefault();
- applyCustomAspectRatio();
- }
- },
- [applyCustomAspectRatio],
- );
-
- useEffect(() => {
- formatShortcut(["shift", "mod", "Scroll"]).then((pan) => {
- formatShortcut(["mod", "Scroll"]).then((zoom) => {
- setScrollLabels({ pan, zoom });
- });
- });
- }, []);
const {
keyframes,
selectedKeyframeId,
@@ -393,11 +330,6 @@ const TimelineEditor = forwardRef(
handleItemSpanChange,
canPlaceZoomAtMs,
addZoomAtMs,
- handleAddZoom,
- handleSuggestZooms,
- handleSplitClip,
- handleAddAudio,
- handleAddAnnotation,
} = useTimelineEditorRuntime({
ref,
videoDuration,
@@ -441,12 +373,6 @@ const TimelineEditor = forwardRef(
keyShortcuts,
isTimelineFocusedRef,
});
- const handleToolbarAddAnnotation = useCallback(() => {
- handleAddAnnotation();
- }, [handleAddAnnotation]);
- const handleToolbarAddAudio = useCallback(() => {
- void handleAddAudio();
- }, [handleAddAudio]);
if (!videoDuration || videoDuration === 0) {
return (
@@ -466,32 +392,6 @@ const TimelineEditor = forwardRef(
return (
+ {(label || children) && (
+
+ );
+ },
+);
+
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton, skeletonVariants };
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 56e74d01..0e131cd7 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -642,6 +642,7 @@ const APP_LANGUAGE_LABELS: Record
+ {label && (
+
+ )}
+
+ {label.split("").map((char, i) => (
+
+ {char}
+
+ ))}
+
+ )}
+ {children}
+ 0 ? `max(calc(${pct}% - 6px), 2.1rem)` : 0,
+ width: "calc(var(--slider-pct) * (100% - 6px))",
}}
/>
{label}
-
+
{formatValue(value)}
);
-}
+});
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 9a4642fa..fd3a3141 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -2499,6 +2499,34 @@ export default function VideoEditor() {
smokeExportConfig.webcamSize,
]);
+ useEffect(() => {
+ if (!window.electronAPI.onRecordingSessionChanged) {
+ return;
+ }
+
+ return window.electronAPI.onRecordingSessionChanged((session) => {
+ console.log("[VideoEditor] onRecordingSessionChanged received!", {
+ sessionVideoPath: session?.videoPath,
+ videoSourcePath: videoSourcePath,
+ match: session?.videoPath === videoSourcePath,
+ webcamPath: session?.webcamPath
+ });
+
+ if (!session || session.videoPath !== videoSourcePath) {
+ return;
+ }
+
+ setWebcam((prev) => ({
+ ...prev,
+ enabled: Boolean(session.webcamPath),
+ sourcePath: session.webcamPath ?? null,
+ timeOffsetMs: session.webcamPath
+ ? (session.timeOffsetMs ?? prev.timeOffsetMs)
+ : DEFAULT_WEBCAM_TIME_OFFSET_MS,
+ }));
+ });
+ }, [videoSourcePath]);
+
useEffect(() => {
let cancelled = false;
if (!webcam.sourcePath) {
@@ -6356,15 +6384,17 @@ export default function VideoEditor() {
>
event.stopPropagation()}
+ onClickCapture={(event) => event.stopPropagation()}
+ >
+
+ );
+ }
+
const isZoom = variant === "zoom";
const isTrim = variant === "trim";
const isClip = variant === "clip";
@@ -101,11 +138,6 @@ export default function Item({
? glassStyles.glassDarkGreen
: glassStyles.glassYellow;
- const timeLabel = useMemo(
- () => `${formatMs(span.start)} – ${formatMs(span.end)}`,
- [span.start, span.end],
- );
-
const MIN_ITEM_PX = 6;
const handleSelect = () => {
onSelect?.();
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index df2ed47b..02b8b9b7 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -2,21 +2,13 @@ import type { Span } from "dnd-timeline";
import { Plus } from "@phosphor-icons/react";
import {
forwardRef,
- type KeyboardEvent as ReactKeyboardEvent,
- useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
-import { toast } from "sonner";
import { useScopedT } from "@/contexts/I18nContext";
import { useShortcuts } from "@/contexts/ShortcutsContext";
-import {
- type AspectRatio,
-} from "@/utils/aspectRatioUtils";
-import { formatShortcut } from "@/utils/platformUtils";
-import { loadEditorPreferences, saveEditorPreferences } from "../editorPreferences";
import { fromFileUrl } from "../projectPersistence";
import type {
SourceAudioTrackMeta,
@@ -40,7 +32,6 @@ import { calculateTimelineScale } from "./core/time";
import { useTimelineEditorRuntime } from "./hooks/useTimelineEditorRuntime";
import { useTimelineRange } from "./hooks/useTimelineRange";
import TimelineCanvas from "./components/viewport/TimelineCanvas";
-import TimelineToolbar from "./components/toolbar/TimelineToolbar";
export interface TimelineEditorProps {
videoDuration: number;
@@ -80,12 +71,9 @@ export interface TimelineEditorProps {
onAudioDelete?: (id: string) => void;
selectedAudioId?: string | null;
onSelectAudio?: (id: string | null) => void;
- aspectRatio?: AspectRatio;
- onAspectRatioChange?: (aspectRatio: AspectRatio) => void;
- onOpenCropEditor?: () => void;
- isCropped?: boolean;
videoPath?: string | null;
- hideToolbar?: boolean;
+ videoSourcePath?: string | null;
+ cursorTelemetrySourcePath?: string | null;
showSourceAudioTrack?: boolean;
onSourceAudioAvailabilityChange?: (available: boolean) => void;
sourceAudioTrackSettings?: SourceAudioTrackSettings;
@@ -170,12 +158,9 @@ const TimelineEditor = forwardRef
- {hideToolbar ? null : (
- ;
keyframes?: { id: string; time: number }[];
+ isLoading?: boolean;
}
export default function PlaybackCursor({
@@ -17,6 +18,7 @@ export default function PlaybackCursor({
onSeek,
timelineRef,
keyframes = [],
+ isLoading = false,
}: PlaybackCursorProps) {
const { sidebarWidth, direction, range, valueToPixels, pixelsToValue } = useTimelineContext();
const sideProperty = direction === "rtl" ? "right" : "left";
@@ -100,11 +102,27 @@ export default function PlaybackCursor({
(
showSourceAudioTrack={showSourceAudioTrack}
liveSpanPreviewById={liveZoomPreview.previewSpans}
liveHiddenItemIds={Array.from(liveZoomPreview.hiddenZoomIds)}
+ isLoading={isLoading}
/>
diff --git a/src/components/video-editor/timeline/components/playhead/PlaybackCursor.tsx b/src/components/video-editor/timeline/components/playhead/PlaybackCursor.tsx
index 7ff0c1a9..d780dcfb 100644
--- a/src/components/video-editor/timeline/components/playhead/PlaybackCursor.tsx
+++ b/src/components/video-editor/timeline/components/playhead/PlaybackCursor.tsx
@@ -9,6 +9,7 @@ interface PlaybackCursorProps {
onSeek?: (time: number) => void;
timelineRef: RefObject
- {formatPlayheadTime(clampedTime)}
+
+ {formatPlayheadTime(clampedTime).split("").map((char, i) => (
+
+ {char}
+
+ ))}
+