From 3768488e49a2ff0365e9abb283ca3ca3bf7b6b62 Mon Sep 17 00:00:00 2001
From: Alois <aloisianer@proton.me>
Date: Wed, 29 Apr 2026 16:49:22 +0200
Subject: [PATCH] (fix): rename big -> grid, small -> focused

---
 .../modals/{small => focused}/user.tsx        |  0
 .../modals/{small => focused}/video.tsx       |  0
 .../components/modals/{big => grid}/user.tsx  |  0
 .../components/modals/{big => grid}/video.tsx |  0
 packages/call/src/store.tsx                   | 54 +++++++++++++++++++
 5 files changed, 54 insertions(+)
 rename packages/call/src/components/modals/{small => focused}/user.tsx (100%)
 rename packages/call/src/components/modals/{small => focused}/video.tsx (100%)
 rename packages/call/src/components/modals/{big => grid}/user.tsx (100%)
 rename packages/call/src/components/modals/{big => grid}/video.tsx (100%)

diff --git a/packages/call/src/components/modals/small/user.tsx b/packages/call/src/components/modals/focused/user.tsx
similarity index 100%
rename from packages/call/src/components/modals/small/user.tsx
rename to packages/call/src/components/modals/focused/user.tsx
diff --git a/packages/call/src/components/modals/small/video.tsx b/packages/call/src/components/modals/focused/video.tsx
similarity index 100%
rename from packages/call/src/components/modals/small/video.tsx
rename to packages/call/src/components/modals/focused/video.tsx
diff --git a/packages/call/src/components/modals/big/user.tsx b/packages/call/src/components/modals/grid/user.tsx
similarity index 100%
rename from packages/call/src/components/modals/big/user.tsx
rename to packages/call/src/components/modals/grid/user.tsx
diff --git a/packages/call/src/components/modals/big/video.tsx b/packages/call/src/components/modals/grid/video.tsx
similarity index 100%
rename from packages/call/src/components/modals/big/video.tsx
rename to packages/call/src/components/modals/grid/video.tsx
diff --git a/packages/call/src/store.tsx b/packages/call/src/store.tsx
index 1364b90..deecb72 100644
--- a/packages/call/src/store.tsx
+++ b/packages/call/src/store.tsx
@@ -13,6 +13,7 @@ import {
   LocalAudioTrack,
   Room,
   RoomEvent,
+  type RemoteTrack,
   Track,
 } from "livekit-client";
 import z from "zod";
@@ -80,6 +81,37 @@ const room = new Room({
     worker: e2eeWorker,
   },
 });
+const remoteAudioElements = new Map<string, HTMLMediaElement>();
+
+function attachRemoteAudio(trackSid: string, element: HTMLMediaElement) {
+  const existingElement = remoteAudioElements.get(trackSid);
+
+  if (existingElement) {
+    existingElement.remove();
+  }
+
+  element.autoplay = true;
+  element.style.display = "none";
+  document.body.appendChild(element);
+  remoteAudioElements.set(trackSid, element);
+}
+
+function detachRemoteAudio(trackSid: string) {
+  const element = remoteAudioElements.get(trackSid);
+
+  if (!element) {
+    return;
+  }
+
+  element.remove();
+  remoteAudioElements.delete(trackSid);
+}
+
+function clearRemoteAudio() {
+  for (const trackSid of remoteAudioElements.keys()) {
+    detachRemoteAudio(trackSid);
+  }
+}
 
 function requireRuntime(runtime: Runtime | null): Runtime {
   if (!runtime) {
@@ -495,9 +527,28 @@ export function useInitializeCall() {
       void ensureNoiseFilter(noiseFilter);
     };
 
+    const onTrackSubscribed = (track: RemoteTrack) => {
+      if (track.kind !== "audio" || !track.sid) {
+        return;
+      }
+
+      attachRemoteAudio(track.sid, track.attach());
+    };
+
+    const onTrackUnsubscribed = (track: RemoteTrack) => {
+      if (track.kind !== "audio" || !track.sid) {
+        return;
+      }
+
+      track.detach();
+      detachRemoteAudio(track.sid);
+    };
+
     room.on(RoomEvent.Connected, onConnected);
     room.on(RoomEvent.Reconnected, onConnected);
     room.on(RoomEvent.Disconnected, onDisconnected);
+    room.on(RoomEvent.TrackSubscribed, onTrackSubscribed);
+    room.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed);
     room.on(RoomEvent.TrackMuted, onParticipantStateChange);
     room.on(RoomEvent.TrackUnmuted, onParticipantStateChange);
     room.on(RoomEvent.LocalTrackPublished, onParticipantStateChange);
@@ -513,6 +564,8 @@ export function useInitializeCall() {
       room.off(RoomEvent.Connected, onConnected);
       room.off(RoomEvent.Reconnected, onConnected);
       room.off(RoomEvent.Disconnected, onDisconnected);
+      room.off(RoomEvent.TrackSubscribed, onTrackSubscribed);
+      room.off(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed);
       room.off(RoomEvent.TrackMuted, onParticipantStateChange);
       room.off(RoomEvent.TrackUnmuted, onParticipantStateChange);
       room.off(RoomEvent.LocalTrackPublished, onParticipantStateChange);
@@ -520,6 +573,7 @@ export function useInitializeCall() {
       room.off(RoomEvent.MediaDevicesError, onMediaDeviceFailure);
       room.off(RoomEvent.EncryptionError, onEncryptionError);
       room.off(RoomEvent.ConnectionStateChanged, onParticipantStateChange);
+      clearRemoteAudio();
       listenersRegistered.current = false;
       room.disconnect();
       e2eeWorker.terminate();