diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 8842b482..a47e446a 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -234,7 +234,8 @@ export function PreviewPanel() { const getActiveElements = (): ActiveElement[] => { const activeElements: ActiveElement[] = []; - tracks.forEach((track) => { + // Iterate tracks from bottom to top so topmost track renders last (on top) + ;[...tracks].reverse().forEach((track) => { track.elements.forEach((element) => { if (element.hidden) return; const elementStart = element.startTime; @@ -311,6 +312,7 @@ export function PreviewPanel() { trimEnd={element.trimEnd} clipDuration={element.duration} className="w-full h-full object-cover" + trackMuted={true} /> ); @@ -434,6 +436,7 @@ export function PreviewPanel() { trimStart={element.trimStart} trimEnd={element.trimEnd} clipDuration={element.duration} + trackMuted={elementData.track.muted} /> ); @@ -459,7 +462,7 @@ export function PreviewPanel() { // Audio elements (no visual representation) if (mediaItem.type === "audio") { return ( -
+
(null); const { isPlaying, currentTime, volume, speed, muted } = usePlaybackStore(); @@ -109,9 +111,9 @@ export function VideoPlayer({ if (!video) return; video.volume = volume; - video.muted = muted; + video.muted = muted || trackMuted; video.playbackRate = speed; - }, [volume, speed, muted]); + }, [volume, speed, muted, trackMuted]); return (