From e908bad1679b8182ffbe6006e71bf38c7ada1bc0 Mon Sep 17 00:00:00 2001
From: Justin322322 <jmrsibonga@bpsu.edu.ph>
Date: Sun, 10 Aug 2025 05:39:24 +0800
Subject: [PATCH] fix(preview): mute button not affecting embedded video audio,
 ensure topmost video track renders above lower tracksmute button not
 affecting embedded video audio (#529) (#532)

---
 apps/web/src/components/editor/preview-panel.tsx | 7 +++++--
 apps/web/src/components/ui/video-player.tsx      | 6 ++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

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}
           />
         </div>
       );
@@ -434,6 +436,7 @@ export function PreviewPanel() {
               trimStart={element.trimStart}
               trimEnd={element.trimEnd}
               clipDuration={element.duration}
+              trackMuted={elementData.track.muted}
             />
           </div>
         );
@@ -459,7 +462,7 @@ export function PreviewPanel() {
       // Audio elements (no visual representation)
       if (mediaItem.type === "audio") {
         return (
-          <div key={element.id} className="absolute inset-0">
+          <div key={element.id} className="absolute inset-0" style={{ pointerEvents: "none" }}>
             <AudioPlayer
               src={mediaItem.url!}
               clipStartTime={element.startTime}
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index 29d82cdf..99e787ef 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -11,6 +11,7 @@ interface VideoPlayerProps {
   trimStart: number;
   trimEnd: number;
   clipDuration: number;
+  trackMuted?: boolean;
 }
 
 export function VideoPlayer({
@@ -21,6 +22,7 @@ export function VideoPlayer({
   trimStart,
   trimEnd,
   clipDuration,
+  trackMuted = false,
 }: VideoPlayerProps) {
   const videoRef = useRef<HTMLVideoElement>(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 (
     <video