From c5612ad07497651278decaa48a2819280dd4def3 Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Thu, 14 Nov 2024 13:28:04 -0300
Subject: [PATCH 01/11] feat(calling): enhance video preview functionality and
 improve stream handling

---
 .../components/calling/VideoPreview.svelte    | 111 +++++++++++-------
 src/lib/media/Voice.ts                        |   2 +-
 src/routes/+layout.svelte                     |   2 +-
 3 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 00af59c5c..353dc5fe3 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -1,54 +1,71 @@
 <script lang="ts">
-    import { VoiceRTCInstance } from "$lib/media/Voice"
+    import { callScreenVisible } from "$lib/media/Voice"
     import { Store } from "$lib/state/Store"
     import { onMount } from "svelte"
     import { page } from "$app/stores"
-    import { Route } from "$lib/enums"
+    import { Shape } from "$lib/enums"
     import { get } from "svelte/store"
     import Participant from "./Participant.svelte"
     import { UIStore } from "$lib/state/ui"
     import { log } from "$lib/utils/Logger"
+    import Icon from "$lib/elements/Icon.svelte"
 
-    export let show: boolean = false
+    let showVideoPreview = false
     let previewVideo: HTMLDivElement
-    let remoteVideoElement: HTMLVideoElement
-
-    Store.state.activeChat.subscribe(async activeChat => {
-        if (activeChat.id !== VoiceRTCInstance.channel && get(Store.state.activeCall)) {
-            show = true
-            if (VoiceRTCInstance.remoteVideoElement) {
-                remoteVideoElement.srcObject = VoiceRTCInstance.activeCall?.remoteStream!
-                remoteVideoElement.play()
-            }
-        }
-    })
+    $: remoteStreams = Store.state.activeCallMeta
 
     $: chat = get(Store.state.activeCall)?.chat
 
     Store.state.activeCall.subscribe(async activeCall => {
         log.debug(`VideoPreview: Page: ${$page.route.id}. activeCall: ${activeCall}`)
-        if ($page.route.id !== Route.Chat && activeCall != null) {
-            show = true
-            remoteVideoElement.srcObject = VoiceRTCInstance.activeCall?.remoteStream!
-            remoteVideoElement.play()
-        } else if (!activeCall && remoteVideoElement) {
-            show = false
-            remoteVideoElement.pause()
-            remoteVideoElement.srcObject = null
-        } else if ($page.route.id === Route.Chat && get(Store.state.activeChat).id === VoiceRTCInstance.channel) {
-            show = false
-            remoteVideoElement.pause()
-            remoteVideoElement.srcObject = null
+        if (activeCall) {
+            chat = activeCall.chat
+        } else {
+            chat = undefined
+            showVideoPreview = false
+        }
+    })
+
+    callScreenVisible.subscribe(visible => {
+        if (visible === true) {
+            showVideoPreview = false
+            return
+        }
+        if (visible === false && get(Store.state.activeCall) !== null) {
+            setTimeout(() => {
+                log.warn("Changing video preview visibility")
+                showVideoPreview = true
+            }, 100)
         }
-        otherUserSettingsInCall = VoiceRTCInstance.remoteVoiceUser
-        chat = activeCall?.chat
     })
 
-    $: otherUserSettingsInCall = VoiceRTCInstance.remoteVoiceUser
     $: ownUser = get(Store.state.user)
     $: chats = UIStore.state.chats
     $: userCache = Store.getUsersLookup($chats.map(c => c.users).flat())
 
+    function attachStream(node: HTMLMediaElement, user: string) {
+        const stream = $remoteStreams[user]?.stream
+
+        if (stream) {
+            node.srcObject = stream
+            stream.onremovetrack = () => {
+                log.dev("Stream removed: ", user)
+            }
+        }
+
+        return {
+            update(newUser: string) {
+                const newStream = $remoteStreams[newUser]?.stream
+                if (newStream && node.srcObject !== newStream) {
+                    node.srcObject = newStream
+                }
+            },
+            destroy() {
+                node.srcObject = null
+            },
+        }
+    }
+
     onMount(() => {
         const video = previewVideo
 
@@ -107,20 +124,32 @@
     })
 </script>
 
-<div id="video-preview" class={show ? "video-preview" : "hidden"}>
+<div id="video-preview" class={showVideoPreview ? "video-preview" : "hidden"}>
     <div id="preview-video" bind:this={previewVideo}>
-        <video id="remote-user-float-video" bind:this={remoteVideoElement} width={otherUserSettingsInCall?.videoEnabled ? 400 : 0} height={otherUserSettingsInCall?.videoEnabled ? 400 : 0} autoplay>
-            <track kind="captions" src="" />
-        </video>
-        {#if !otherUserSettingsInCall?.videoEnabled && chat !== undefined}
+        {#if chat !== undefined && get(Store.state.activeCall) !== null && $callScreenVisible === false}
             {#each chat.users as user}
-                {#if user !== ownUser.key}
-                    <Participant
-                        participant={$userCache[user]}
-                        hasVideo={$userCache[user].media.is_streaming_video}
-                        isMuted={$userCache[user].media.is_muted}
-                        isDeafened={$userCache[user].media.is_deafened}
-                        isTalking={$userCache[user].media.is_playing_audio} />
+                {#if $userCache[user] && $userCache[user].key !== ownUser.key && $remoteStreams[user]}
+                    <div class="video-container {$userCache[user].media.is_playing_audio ? 'talking' : ''}" style={!$remoteStreams[user].user.videoEnabled ? "display: none" : ""} role="none">
+                        <video data-cy="remote-user-video" id="remote-user-video-{user}" class={$remoteStreams[user].user.videoEnabled ? "" : "disabled"} autoplay muted={false} use:attachStream={user}>
+                            <track kind="captions" src="" />
+                        </video>
+                        <div class="user-name">{$userCache[user].name}</div>
+                        {#if !$remoteStreams[user].user.audioEnabled}
+                            <div class="mute-status">
+                                <Icon icon={Shape.MicrophoneSlash}></Icon>
+                            </div>
+                        {/if}
+                    </div>
+
+                    {#if !$remoteStreams[user].stream || !$remoteStreams[user].user.videoEnabled}
+                        <Participant
+                            participant={$userCache[user]}
+                            hasVideo={$userCache[user].media.is_streaming_video}
+                            isMuted={$remoteStreams[user] && !$remoteStreams[user].user.audioEnabled}
+                            isDeafened={$remoteStreams[user] && $remoteStreams[user].user.isDeafened}
+                            isTalking={$userCache[user].media.is_playing_audio}
+                            on:click={_ => {}} />
+                    {/if}
                 {/if}
             {/each}
         {/if}
diff --git a/src/lib/media/Voice.ts b/src/lib/media/Voice.ts
index 4cc78d183..5b027fd32 100644
--- a/src/lib/media/Voice.ts
+++ b/src/lib/media/Voice.ts
@@ -734,7 +734,6 @@ export class VoiceRTC {
     }
 
     async leaveCall(sendEndCallMessage = false) {
-        callScreenVisible.set(false)
         callInProgress.set(null)
         timeCallStarted.set(null)
         usersDeniedTheCall.set([])
@@ -759,6 +758,7 @@ export class VoiceRTC {
         if (get(Store.state.activeCall)) {
             Store.endCall()
         }
+        callScreenVisible.set(false)
 
         if (get(Store.state.pendingCall)) {
             Store.denyCall()
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 652eb5af8..327a34af6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -290,7 +290,7 @@
 
         <Toasts />
         <IncomingCall />
-        <!-- <VideoPreview /> This needs a rework as atm it only supports one to one calling. Maybe add ability to select source? -->
+        <VideoPreview />
         <GamepadListener />
         <Market on:close={() => UIStore.toggleMarket()} />
         <InstallBanner />

From a8090e80acce431a2ff47b4f9146ce1cfa17181c Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Thu, 14 Nov 2024 14:13:02 -0300
Subject: [PATCH 02/11] feat(calling): enhance video preview layout and add
 user name and mute status indicators

---
 .../components/calling/VideoPreview.svelte    | 65 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 353dc5fe3..7aeef52fe 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import CallScreen from "$lib/components/calling/CallScreen.svelte"
     import { callScreenVisible } from "$lib/media/Voice"
     import { Store } from "$lib/state/Store"
     import { onMount } from "svelte"
@@ -126,7 +127,7 @@
 
 <div id="video-preview" class={showVideoPreview ? "video-preview" : "hidden"}>
     <div id="preview-video" bind:this={previewVideo}>
-        {#if chat !== undefined && get(Store.state.activeCall) !== null && $callScreenVisible === false}
+        {#if chat !== undefined && get(Store.state.activeCall) !== null}
             {#each chat.users as user}
                 {#if $userCache[user] && $userCache[user].key !== ownUser.key && $remoteStreams[user]}
                     <div class="video-container {$userCache[user].media.is_playing_audio ? 'talking' : ''}" style={!$remoteStreams[user].user.videoEnabled ? "display: none" : ""} role="none">
@@ -167,6 +168,7 @@
         overflow: hidden;
         pointer-events: none;
     }
+
     #video-preview {
         position: fixed;
         top: 0;
@@ -193,10 +195,69 @@
             pointer-events: all;
             transition: transform 0.3s ease;
             margin: var(--padding);
-            display: inline-flex;
+            display: flex;
+            flex-direction: column;
             justify-content: center;
+            align-items: center;
+            padding: var(--padding);
+            box-sizing: border-box;
             overflow: hidden;
             align-items: center;
+
+            .video-container {
+                position: relative;
+                display: inline-block;
+                border-radius: 12px;
+                overflow: hidden;
+                border: 2px solid var(--color-muted);
+                cursor: pointer;
+                &.talking {
+                    border: 2px solid var(--success-color);
+                }
+                width: 100%;
+                height: 100%;
+                aspect-ratio: unset;
+
+                .user-name {
+                    position: absolute;
+                    bottom: 8px;
+                    left: 12px;
+                    background-color: rgba(0, 0, 0, 0.6);
+                    color: white;
+                    padding: 4px 8px;
+                    border-radius: 8px;
+                    font-size: 14px;
+                    z-index: 1;
+                }
+
+                .mute-status {
+                    position: absolute;
+                    display: flex;
+                    bottom: 8px;
+                    right: 12px;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: rgba(0, 0, 0, 0.6);
+                    color: white;
+                    padding: 4px 8px;
+                    border-radius: 8px;
+                    font-size: 14px;
+                    z-index: 1;
+                }
+
+                video {
+                    object-fit: cover;
+                    border-radius: 12px;
+                    background-color: var(--black);
+                    width: 100%;
+                    height: 100%;
+
+                    &.disabled {
+                        width: 0;
+                        height: 0;
+                    }
+                }
+            }
         }
     }
 </style>

From 928b749641fdd63766a2688f14d5ed5d279f708b Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Thu, 14 Nov 2024 15:09:09 -0300
Subject: [PATCH 03/11] feat(calling): implement dynamic user grid layout in
 video preview and enhance user visibility

---
 .../components/calling/VideoPreview.svelte    | 64 ++++++++++++-------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 7aeef52fe..2c73aaae7 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -17,6 +17,9 @@
 
     $: chat = get(Store.state.activeCall)?.chat
 
+    $: filteredUsers = chat?.users.filter(user => $userCache[user] && $userCache[user].key !== ownUser.key && $remoteStreams[user]) || []
+    $: gridTemplateColumns = `repeat(${Math.min(filteredUsers.length, 3)}, 1fr)`
+
     Store.state.activeCall.subscribe(async activeCall => {
         log.debug(`VideoPreview: Page: ${$page.route.id}. activeCall: ${activeCall}`)
         if (activeCall) {
@@ -128,31 +131,33 @@
 <div id="video-preview" class={showVideoPreview ? "video-preview" : "hidden"}>
     <div id="preview-video" bind:this={previewVideo}>
         {#if chat !== undefined && get(Store.state.activeCall) !== null}
-            {#each chat.users as user}
-                {#if $userCache[user] && $userCache[user].key !== ownUser.key && $remoteStreams[user]}
-                    <div class="video-container {$userCache[user].media.is_playing_audio ? 'talking' : ''}" style={!$remoteStreams[user].user.videoEnabled ? "display: none" : ""} role="none">
-                        <video data-cy="remote-user-video" id="remote-user-video-{user}" class={$remoteStreams[user].user.videoEnabled ? "" : "disabled"} autoplay muted={false} use:attachStream={user}>
-                            <track kind="captions" src="" />
-                        </video>
-                        <div class="user-name">{$userCache[user].name}</div>
-                        {#if !$remoteStreams[user].user.audioEnabled}
-                            <div class="mute-status">
-                                <Icon icon={Shape.MicrophoneSlash}></Icon>
-                            </div>
+            <div class="video-grid" style="grid-template-columns: {gridTemplateColumns};">
+                {#each filteredUsers as user}
+                    {#if $remoteStreams[user]}
+                        <div class="video-container {$userCache[user].media.is_playing_audio ? 'talking' : ''}" style={!$remoteStreams[user].user.videoEnabled ? "display: none" : ""} role="none">
+                            <video data-cy="remote-user-video" id="remote-user-video-{user}" class={$remoteStreams[user].user.videoEnabled ? "" : "disabled"} autoplay muted={false} use:attachStream={user}>
+                                <track kind="captions" src="" />
+                            </video>
+                            <div class="user-name">{$userCache[user].name}</div>
+                            {#if !$remoteStreams[user].user.audioEnabled}
+                                <div class="mute-status">
+                                    <Icon icon={Shape.MicrophoneSlash}></Icon>
+                                </div>
+                            {/if}
+                        </div>
+
+                        {#if !$remoteStreams[user].stream || !$remoteStreams[user].user.videoEnabled}
+                            <Participant
+                                participant={$userCache[user]}
+                                hasVideo={$userCache[user].media.is_streaming_video}
+                                isMuted={$remoteStreams[user] && !$remoteStreams[user].user.audioEnabled}
+                                isDeafened={$remoteStreams[user] && $remoteStreams[user].user.isDeafened}
+                                isTalking={$userCache[user].media.is_playing_audio}
+                                on:click={_ => {}} />
                         {/if}
-                    </div>
-
-                    {#if !$remoteStreams[user].stream || !$remoteStreams[user].user.videoEnabled}
-                        <Participant
-                            participant={$userCache[user]}
-                            hasVideo={$userCache[user].media.is_streaming_video}
-                            isMuted={$remoteStreams[user] && !$remoteStreams[user].user.audioEnabled}
-                            isDeafened={$remoteStreams[user] && $remoteStreams[user].user.isDeafened}
-                            isTalking={$userCache[user].media.is_playing_audio}
-                            on:click={_ => {}} />
                     {/if}
-                {/if}
-            {/each}
+                {/each}
+            </div>
         {/if}
     </div>
 </div>
@@ -204,6 +209,17 @@
             overflow: hidden;
             align-items: center;
 
+            .video-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+                justify-content: center;
+                align-items: center;
+                justify-items: center;
+                gap: 10px;
+                width: 100%;
+                height: 100%;
+            }
+
             .video-container {
                 position: relative;
                 display: inline-block;
@@ -216,7 +232,7 @@
                 }
                 width: 100%;
                 height: 100%;
-                aspect-ratio: unset;
+                aspect-ratio: 4 / 3;
 
                 .user-name {
                     position: absolute;

From d5d968783eb1e83117eaadd6428a07e4cbe9b048 Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Thu, 14 Nov 2024 16:17:02 -0300
Subject: [PATCH 04/11] feat(calling): implement user sorting logic based on
 audio playback status in video preview

---
 .../components/calling/VideoPreview.svelte    | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 2c73aaae7..37ac847f0 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import CallScreen from "$lib/components/calling/CallScreen.svelte"
-    import { callScreenVisible } from "$lib/media/Voice"
+    import { callScreenVisible, usersAcceptedTheCall } from "$lib/media/Voice"
     import { Store } from "$lib/state/Store"
     import { onMount } from "svelte"
     import { page } from "$app/stores"
@@ -17,7 +17,40 @@
 
     $: chat = get(Store.state.activeCall)?.chat
 
-    $: filteredUsers = chat?.users.filter(user => $userCache[user] && $userCache[user].key !== ownUser.key && $remoteStreams[user]) || []
+    function sortUsers(users: string[]) {
+        return users.sort((a, b) => {
+            const userA = $userCache[a]
+            const userB = $userCache[b]
+            if (userA.media.is_playing_audio && !userB.media.is_playing_audio) return -1
+            if (!userA.media.is_playing_audio && userB.media.is_playing_audio) return 1
+            return 0
+        })
+    }
+
+    $: filteredUsers = $usersAcceptedTheCall.length > 1 ? sortUsers($usersAcceptedTheCall) : $usersAcceptedTheCall
+    let lastSortedUsers: string[] = []
+
+    $: {
+        if ($usersAcceptedTheCall.length > 1) {
+            const usersPlayingAudio = filteredUsers.filter(user => $userCache[user].media.is_playing_audio)
+            if (usersPlayingAudio.length > 0 && !arraysEqual(usersPlayingAudio, lastSortedUsers)) {
+                filteredUsers = sortUsers($usersAcceptedTheCall)
+                lastSortedUsers = [...usersPlayingAudio]
+            }
+        }
+    }
+
+    function arraysEqual(a: any[], b: any[]) {
+        if (a === b) return true
+        if (a == null || b == null) return false
+        if (a.length !== b.length) return false
+
+        for (let i = 0; i < a.length; ++i) {
+            if (a[i] !== b[i]) return false
+        }
+        return true
+    }
+
     $: gridTemplateColumns = `repeat(${Math.min(filteredUsers.length, 3)}, 1fr)`
 
     Store.state.activeCall.subscribe(async activeCall => {
@@ -43,7 +76,6 @@
         }
     })
 
-    $: ownUser = get(Store.state.user)
     $: chats = UIStore.state.chats
     $: userCache = Store.getUsersLookup($chats.map(c => c.users).flat())
 

From 7baca8f393000cab4dbdc709d6c9e8921cd70cb2 Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Thu, 14 Nov 2024 16:40:00 -0300
Subject: [PATCH 05/11] feat(calling): update user filtering logic and limit
 displayed users in video preview

---
 src/lib/components/calling/VideoPreview.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 37ac847f0..8c4051085 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -14,8 +14,10 @@
     let showVideoPreview = false
     let previewVideo: HTMLDivElement
     $: remoteStreams = Store.state.activeCallMeta
+    $: gridTemplateColumns = `repeat(${Math.min(filteredUsers.length, 3)}, 1fr)`
 
     $: chat = get(Store.state.activeCall)?.chat
+    let ownUserKey = get(Store.state.user).key
 
     function sortUsers(users: string[]) {
         return users.sort((a, b) => {
@@ -27,7 +29,7 @@
         })
     }
 
-    $: filteredUsers = $usersAcceptedTheCall.length > 1 ? sortUsers($usersAcceptedTheCall) : $usersAcceptedTheCall
+    $: filteredUsers = sortUsers($usersAcceptedTheCall.filter(user => $userCache[user] && $userCache[user].key !== ownUserKey && $remoteStreams[user]) || [])
     let lastSortedUsers: string[] = []
 
     $: {
@@ -35,6 +37,7 @@
             const usersPlayingAudio = filteredUsers.filter(user => $userCache[user].media.is_playing_audio)
             if (usersPlayingAudio.length > 0 && !arraysEqual(usersPlayingAudio, lastSortedUsers)) {
                 filteredUsers = sortUsers($usersAcceptedTheCall)
+                usersAcceptedTheCall.set(filteredUsers)
                 lastSortedUsers = [...usersPlayingAudio]
             }
         }
@@ -51,8 +54,6 @@
         return true
     }
 
-    $: gridTemplateColumns = `repeat(${Math.min(filteredUsers.length, 3)}, 1fr)`
-
     Store.state.activeCall.subscribe(async activeCall => {
         log.debug(`VideoPreview: Page: ${$page.route.id}. activeCall: ${activeCall}`)
         if (activeCall) {
@@ -164,7 +165,7 @@
     <div id="preview-video" bind:this={previewVideo}>
         {#if chat !== undefined && get(Store.state.activeCall) !== null}
             <div class="video-grid" style="grid-template-columns: {gridTemplateColumns};">
-                {#each filteredUsers as user}
+                {#each filteredUsers.slice(0, 3) as user}
                     {#if $remoteStreams[user]}
                         <div class="video-container {$userCache[user].media.is_playing_audio ? 'talking' : ''}" style={!$remoteStreams[user].user.videoEnabled ? "display: none" : ""} role="none">
                             <video data-cy="remote-user-video" id="remote-user-video-{user}" class={$remoteStreams[user].user.videoEnabled ? "" : "disabled"} autoplay muted={false} use:attachStream={user}>

From 9344ab2bb1b5f429baf50dd7b144cc056e9bc778 Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Fri, 15 Nov 2024 10:56:49 -0300
Subject: [PATCH 06/11] feat(calling): update user tracking logic and add
 loading state for video preview when no users joined the call yet

---
 .../components/calling/VideoPreview.svelte    | 50 ++++++++++++++++---
 src/lib/lang/en.json                          |  1 +
 src/lib/media/Voice.ts                        | 10 ++--
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 8c4051085..7b562c36b 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import CallScreen from "$lib/components/calling/CallScreen.svelte"
-    import { callScreenVisible, usersAcceptedTheCall } from "$lib/media/Voice"
+    import { callScreenVisible, usersDidInActiveCall } from "$lib/media/Voice"
     import { Store } from "$lib/state/Store"
     import { onMount } from "svelte"
     import { page } from "$app/stores"
@@ -10,6 +9,7 @@
     import { UIStore } from "$lib/state/ui"
     import { log } from "$lib/utils/Logger"
     import Icon from "$lib/elements/Icon.svelte"
+    import { _ } from "svelte-i18n"
 
     let showVideoPreview = false
     let previewVideo: HTMLDivElement
@@ -29,15 +29,15 @@
         })
     }
 
-    $: filteredUsers = sortUsers($usersAcceptedTheCall.filter(user => $userCache[user] && $userCache[user].key !== ownUserKey && $remoteStreams[user]) || [])
+    $: filteredUsers = sortUsers($usersDidInActiveCall.filter(user => $userCache[user] && $userCache[user].key !== ownUserKey && $remoteStreams[user]) || [])
     let lastSortedUsers: string[] = []
 
     $: {
-        if ($usersAcceptedTheCall.length > 1) {
+        if ($usersDidInActiveCall.length > 1) {
             const usersPlayingAudio = filteredUsers.filter(user => $userCache[user].media.is_playing_audio)
             if (usersPlayingAudio.length > 0 && !arraysEqual(usersPlayingAudio, lastSortedUsers)) {
-                filteredUsers = sortUsers($usersAcceptedTheCall)
-                usersAcceptedTheCall.set(filteredUsers)
+                filteredUsers = sortUsers($usersDidInActiveCall)
+                usersDidInActiveCall.set(filteredUsers)
                 lastSortedUsers = [...usersPlayingAudio]
             }
         }
@@ -163,7 +163,7 @@
 
 <div id="video-preview" class={showVideoPreview ? "video-preview" : "hidden"}>
     <div id="preview-video" bind:this={previewVideo}>
-        {#if chat !== undefined && get(Store.state.activeCall) !== null}
+        {#if chat !== undefined && get(Store.state.activeCall) !== null && filteredUsers.length > 0}
             <div class="video-grid" style="grid-template-columns: {gridTemplateColumns};">
                 {#each filteredUsers.slice(0, 3) as user}
                     {#if $remoteStreams[user]}
@@ -191,6 +191,11 @@
                     {/if}
                 {/each}
             </div>
+        {:else if chat !== undefined && get(Store.state.activeCall) !== null && filteredUsers.length === 0}
+            <div class="loading-when-no-answer">
+                <div class="spinner"></div>
+                <p>{$_("settings.calling.waitingOthersToJoin")}</p>
+            </div>
         {/if}
     </div>
 </div>
@@ -309,4 +314,35 @@
             }
         }
     }
+
+    .spinner {
+        width: 48px;
+        height: 48px;
+        border: 8px solid #f3f3f3;
+        border-top: 8px solid #3498db;
+        border-radius: 50%;
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .loading-when-no-answer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        text-align: center;
+        margin: 32px;
+    }
+
+    .loading-when-no-answer p {
+        margin-top: 16px;
+    }
 </style>
diff --git a/src/lib/lang/en.json b/src/lib/lang/en.json
index 8e729f9ce..5a58c06e4 100644
--- a/src/lib/lang/en.json
+++ b/src/lib/lang/en.json
@@ -379,6 +379,7 @@
             "hasCancelled": "Has cancelled the call.",
             "disconnecting": "Disconnecting...",
             "userInviteToAGroupCall": "{user} has started a group call in {group}",
+            "waitingOthersToJoin": "Waiting for others to join...",
             "noAnswer": "No answer, leaving the call...",
             "everybodyDeniedTheCall": "Everybody Denied the call. Disconnecting...",
             "acceptedCall": "Joined, loading...",
diff --git a/src/lib/media/Voice.ts b/src/lib/media/Voice.ts
index 5b027fd32..9e6174b2b 100644
--- a/src/lib/media/Voice.ts
+++ b/src/lib/media/Voice.ts
@@ -28,6 +28,7 @@ export const timeCallStarted: Writable<Date | null> = writable(null)
 export const callInProgress: Writable<string | null> = writable(null)
 export const makeCallSound = writable<SoundHandler | undefined>(undefined)
 export const callScreenVisible = writable(false)
+export const usersDidInActiveCall = writable<string[]>([])
 
 const relaysToTest = [
     "wss://nostr-pub.wellorder.net",
@@ -155,6 +156,7 @@ async function handleStreamMeta(did: string, stream: MediaStream): Promise<Strea
             }, 200)
         },
     }
+
     const voiceDetector = vad(audioContext, stream, options)
     voiceDetector.connect()
 
@@ -235,6 +237,9 @@ export class CallRoom {
         })
         let [did_ch, did_rv] = room.makeAction<string>("did_sync")
         did_rv((did, peer) => {
+            if (!get(usersDidInActiveCall).includes(did)) {
+                usersDidInActiveCall.update(u => [...u, did])
+            }
             this.participants[did] = new Participant(did, peer)
         })
         room.onPeerJoin(async peer => {
@@ -249,13 +254,14 @@ export class CallRoom {
                 this.start = new Date()
             }
         })
-        room.onPeerTrack((stream, peer, _meta) => {
+        room.onPeerTrack((_, peer, _meta) => {
             log.debug(`Receiving track from ${peer}`)
         })
         room.onPeerLeave(peer => {
             log.debug(`Peer ${peer} left the room`)
             let participant = Object.entries(this.participants).find(p => p[1].remotePeerId === peer)
             if (participant) {
+                usersDidInActiveCall.update(u => u.filter(did => did !== participant[0]))
                 VoiceRTCInstance.remoteVideoCreator.delete(participant[0])
                 delete this.participants[participant[0]]
             }
@@ -272,8 +278,6 @@ export class CallRoom {
                 participant[1].handleRemoteStream(stream)
             }
         })
-        room.onPeerTrack((stream, peer, _meta) => {})
-        // room.onPeerTrack((stream, peer, meta) => {})
     }
 
     toggleStreams(state: boolean, type: ToggleType) {

From 37ef4d32a3f741b95b3f532dd768c5606dc3ec8b Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Sat, 16 Nov 2024 19:03:56 -0300
Subject: [PATCH 07/11] fix(calling): update border color in video preview to
 use muted color for better visibility

---
 src/lib/components/calling/VideoPreview.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 7b562c36b..3dab7bed5 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -230,7 +230,7 @@
             height: 225px;
             background: var(--background-alt);
             border-radius: var(--border-radius);
-            border: var(--border-width) solid var(--border-color);
+            border: var(--border-width) solid var(--color-muted);
             position: absolute;
             top: 0;
             right: 0;

From 23da66c1969309529b22f6e17766a313413da448 Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Sat, 16 Nov 2024 19:43:08 -0300
Subject: [PATCH 08/11] feat(calling): add user count display in video preview
 for better user awareness

---
 .../components/calling/VideoPreview.svelte    | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 3dab7bed5..7fbb47557 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -163,6 +163,10 @@
 
 <div id="video-preview" class={showVideoPreview ? "video-preview" : "hidden"}>
     <div id="preview-video" bind:this={previewVideo}>
+        <div class="users-in-call">
+            <Icon icon={Shape.Users}></Icon>
+            {filteredUsers.length}
+        </div>
         {#if chat !== undefined && get(Store.state.activeCall) !== null && filteredUsers.length > 0}
             <div class="video-grid" style="grid-template-columns: {gridTemplateColumns};">
                 {#each filteredUsers.slice(0, 3) as user}
@@ -247,6 +251,22 @@
             overflow: hidden;
             align-items: center;
 
+            .users-in-call {
+                position: absolute;
+                display: flex;
+                gap: 4px;
+                bottom: 8px;
+                right: 12px;
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(14, 13, 13, 0.5);
+                color: white;
+                padding: 4px 8px;
+                border-radius: 8px;
+                font-size: 14px;
+                z-index: 1;
+            }
+
             .video-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

From 6b3ffbe57fa228bce921d8f02fa42519b5ff9afa Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Fri, 22 Nov 2024 08:22:05 -0300
Subject: [PATCH 09/11] feat(call): implement showCallPopUp state management in
 CallScreen and VideoPreview components

---
 src/lib/components/calling/CallScreen.svelte  | 21 ++++++++++++++++++-
 .../components/calling/VideoPreview.svelte    | 21 ++-----------------
 src/lib/media/Voice.ts                        |  2 ++
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/calling/CallScreen.svelte b/src/lib/components/calling/CallScreen.svelte
index e7b5de82c..de0a83bb5 100644
--- a/src/lib/components/calling/CallScreen.svelte
+++ b/src/lib/components/calling/CallScreen.svelte
@@ -13,7 +13,19 @@
     import type { Chat } from "$lib/types"
     import VolumeMixer from "./VolumeMixer.svelte"
     import { createEventDispatcher, onDestroy, onMount } from "svelte"
-    import { callInProgress, callScreenVisible, callTimeout, makeCallSound, TIME_TO_SHOW_CONNECTING, TIME_TO_SHOW_END_CALL_FEEDBACK, timeCallStarted, usersAcceptedTheCall, usersDeniedTheCall, VoiceRTCInstance } from "$lib/media/Voice"
+    import {
+        callInProgress,
+        callScreenVisible,
+        callTimeout,
+        makeCallSound,
+        showCallPopUp,
+        TIME_TO_SHOW_CONNECTING,
+        TIME_TO_SHOW_END_CALL_FEEDBACK,
+        timeCallStarted,
+        usersAcceptedTheCall,
+        usersDeniedTheCall,
+        VoiceRTCInstance,
+    } from "$lib/media/Voice"
     import { log } from "$lib/utils/Logger"
     import { playSound, Sounds } from "../utils/SoundHandler"
     import { MultipassStoreInstance } from "$lib/wasm/MultipassStore"
@@ -196,6 +208,7 @@
 
     onMount(async () => {
         callScreenVisible.set(true)
+        showCallPopUp.set(false)
         if ($makeCallSound) {
             stopMakeCallSound()
         }
@@ -269,6 +282,12 @@
         if (get(Store.state.activeCall) === null && get(Store.state.devices.screenShare) === true) {
             Store.state.devices.screenShare.set(false)
         }
+
+        if ($callInProgress !== null) {
+            showCallPopUp.set(true)
+        } else {
+            showCallPopUp.set(false)
+        }
     })
 
     function updateUserListSplit() {
diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 7fbb47557..20b0a5214 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { callScreenVisible, usersDidInActiveCall } from "$lib/media/Voice"
+    import { showCallPopUp, usersDidInActiveCall } from "$lib/media/Voice"
     import { Store } from "$lib/state/Store"
     import { onMount } from "svelte"
     import { page } from "$app/stores"
@@ -11,7 +11,6 @@
     import Icon from "$lib/elements/Icon.svelte"
     import { _ } from "svelte-i18n"
 
-    let showVideoPreview = false
     let previewVideo: HTMLDivElement
     $: remoteStreams = Store.state.activeCallMeta
     $: gridTemplateColumns = `repeat(${Math.min(filteredUsers.length, 3)}, 1fr)`
@@ -58,22 +57,6 @@
         log.debug(`VideoPreview: Page: ${$page.route.id}. activeCall: ${activeCall}`)
         if (activeCall) {
             chat = activeCall.chat
-        } else {
-            chat = undefined
-            showVideoPreview = false
-        }
-    })
-
-    callScreenVisible.subscribe(visible => {
-        if (visible === true) {
-            showVideoPreview = false
-            return
-        }
-        if (visible === false && get(Store.state.activeCall) !== null) {
-            setTimeout(() => {
-                log.warn("Changing video preview visibility")
-                showVideoPreview = true
-            }, 100)
         }
     })
 
@@ -161,7 +144,7 @@
     })
 </script>
 
-<div id="video-preview" class={showVideoPreview ? "video-preview" : "hidden"}>
+<div id="video-preview" class={$showCallPopUp ? "video-preview" : "hidden"}>
     <div id="preview-video" bind:this={previewVideo}>
         <div class="users-in-call">
             <Icon icon={Shape.Users}></Icon>
diff --git a/src/lib/media/Voice.ts b/src/lib/media/Voice.ts
index 8173b606a..0a1bd7c64 100644
--- a/src/lib/media/Voice.ts
+++ b/src/lib/media/Voice.ts
@@ -29,6 +29,7 @@ export const callInProgress: Writable<string | null> = writable(null)
 export const makeCallSound = writable<SoundHandler | undefined>(undefined)
 export const callScreenVisible = writable(false)
 export const usersDidInActiveCall = writable<string[]>([])
+export const showCallPopUp = writable(false)
 
 const relaysToTest = [
     "wss://nostr-pub.wellorder.net",
@@ -815,6 +816,7 @@ export class VoiceRTC {
     async leaveCall(sendEndCallMessage = false) {
         callInProgress.set(null)
         timeCallStarted.set(null)
+        showCallPopUp.set(false)
         usersDeniedTheCall.set([])
         callTimeout.set(false)
         connectionOpened.set(false)

From f4be1613aaf873f3d3bd1a33bc9b04c19281321e Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Fri, 22 Nov 2024 08:26:12 -0300
Subject: [PATCH 10/11] fix(video-preview): update video container display
 logic for screen sharing and video enabled states

---
 src/lib/components/calling/VideoPreview.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index 20b0a5214..b52fc7309 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -154,8 +154,17 @@
             <div class="video-grid" style="grid-template-columns: {gridTemplateColumns};">
                 {#each filteredUsers.slice(0, 3) as user}
                     {#if $remoteStreams[user]}
-                        <div class="video-container {$userCache[user].media.is_playing_audio ? 'talking' : ''}" style={!$remoteStreams[user].user.videoEnabled ? "display: none" : ""} role="none">
-                            <video data-cy="remote-user-video" id="remote-user-video-{user}" class={$remoteStreams[user].user.videoEnabled ? "" : "disabled"} autoplay muted={false} use:attachStream={user}>
+                        <div
+                            class="video-container {$userCache[user].media.is_playing_audio ? 'talking' : ''}"
+                            style={!$remoteStreams[user].user.videoEnabled && !$remoteStreams[user].user.screenShareEnabled ? "display: none" : ""}
+                            role="none">
+                            <video
+                                data-cy="remote-user-video"
+                                id="remote-user-video-{user}"
+                                class={$remoteStreams[user].user.videoEnabled || $remoteStreams[user].user.screenShareEnabled ? "" : "disabled"}
+                                autoplay
+                                muted={false}
+                                use:attachStream={user}>
                                 <track kind="captions" src="" />
                             </video>
                             <div class="user-name">{$userCache[user].name}</div>
@@ -166,7 +175,7 @@
                             {/if}
                         </div>
 
-                        {#if !$remoteStreams[user].stream || !$remoteStreams[user].user.videoEnabled}
+                        {#if !$remoteStreams[user].stream || (!$remoteStreams[user].user.videoEnabled && !$remoteStreams[user].user.screenShareEnabled)}
                             <Participant
                                 participant={$userCache[user]}
                                 hasVideo={$userCache[user].media.is_streaming_video}

From 9b30d49477e9c6bddaaa79889f3ec8d1d6ed53b7 Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Fri, 22 Nov 2024 08:32:34 -0300
Subject: [PATCH 11/11] feat(call): create LiveLabel component for screen
 sharing indication and integrate it into CallScreen and VideoPreview

---
 src/lib/components/calling/CallScreen.svelte  | 30 ++--------------
 src/lib/components/calling/LiveLabel.svelte   | 36 +++++++++++++++++++
 .../components/calling/VideoPreview.svelte    |  2 ++
 3 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/components/calling/LiveLabel.svelte

diff --git a/src/lib/components/calling/CallScreen.svelte b/src/lib/components/calling/CallScreen.svelte
index 522c5814f..2cc87f2fe 100644
--- a/src/lib/components/calling/CallScreen.svelte
+++ b/src/lib/components/calling/CallScreen.svelte
@@ -30,6 +30,7 @@
     import { playSound, Sounds } from "../utils/SoundHandler"
     import { MultipassStoreInstance } from "$lib/wasm/MultipassStore"
     import { debounce } from "$lib/utils/Functions"
+    import LiveLabel from "./LiveLabel.svelte"
 
     const MIN_USER_SIZE = 250
     export let expanded: boolean = false
@@ -513,12 +514,7 @@
                                     <div class="user-name">
                                         {$userCache[user].name}
                                     </div>
-                                    {#if $remoteStreams[user].user.screenShareEnabled}
-                                        <div class="live-label">
-                                            <span class="red-dot"></span>
-                                            <span>{$_("settings.calling.live")}</span>
-                                        </div>
-                                    {/if}
+                                    <LiveLabel screenShareEnabled={$remoteStreams[user].user.screenShareEnabled} />
                                     {#if !$remoteStreams[user].user.audioEnabled}
                                         <div class="mute-status">
                                             <Icon icon={Shape.MicrophoneSlash}></Icon>
@@ -832,28 +828,6 @@
             z-index: 1;
         }
 
-        .live-label {
-            position: absolute;
-            top: 8px;
-            left: 12px;
-            display: inline-flex;
-            align-items: center;
-            background-color: rgba(0, 0, 0, 0.6);
-            color: white;
-            padding: 4px 8px;
-            border-radius: 8px;
-            font-size: 14px;
-            z-index: 1;
-        }
-
-        .red-dot {
-            width: 6px;
-            height: 6px;
-            background-color: red;
-            border-radius: 50%;
-            margin-right: 8px;
-        }
-
         .mute-status {
             position: absolute;
             display: flex;
diff --git a/src/lib/components/calling/LiveLabel.svelte b/src/lib/components/calling/LiveLabel.svelte
new file mode 100644
index 000000000..2ea0f3d91
--- /dev/null
+++ b/src/lib/components/calling/LiveLabel.svelte
@@ -0,0 +1,36 @@
+<script>
+    import { _ } from "svelte-i18n"
+
+    export let screenShareEnabled = false
+</script>
+
+{#if screenShareEnabled}
+    <div class="live-label">
+        <span class="red-dot"></span>
+        <span>{$_("settings.calling.live")}</span>
+    </div>
+{/if}
+
+<style>
+    .live-label {
+        position: absolute;
+        top: 8px;
+        left: 12px;
+        display: inline-flex;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.6);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 8px;
+        font-size: 14px;
+        z-index: 1;
+    }
+
+    .red-dot {
+        width: 6px;
+        height: 6px;
+        background-color: red;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+</style>
diff --git a/src/lib/components/calling/VideoPreview.svelte b/src/lib/components/calling/VideoPreview.svelte
index b52fc7309..ca2f6fcbd 100644
--- a/src/lib/components/calling/VideoPreview.svelte
+++ b/src/lib/components/calling/VideoPreview.svelte
@@ -10,6 +10,7 @@
     import { log } from "$lib/utils/Logger"
     import Icon from "$lib/elements/Icon.svelte"
     import { _ } from "svelte-i18n"
+    import LiveLabel from "./LiveLabel.svelte"
 
     let previewVideo: HTMLDivElement
     $: remoteStreams = Store.state.activeCallMeta
@@ -168,6 +169,7 @@
                                 <track kind="captions" src="" />
                             </video>
                             <div class="user-name">{$userCache[user].name}</div>
+                            <LiveLabel screenShareEnabled={$remoteStreams[user].user.screenShareEnabled} />
                             {#if !$remoteStreams[user].user.audioEnabled}
                                 <div class="mute-status">
                                     <Icon icon={Shape.MicrophoneSlash}></Icon>