fix(CallPopUp): Enable call pop up when user is out of active call ch…

…at (#855)
Satellite-im · Nov 22, 2024 · b6ee5ce · b6ee5ce
1 parent bd15bcb
commit b6ee5ce
Show file tree

Hide file tree

Showing 6 changed files with 305 additions and 80 deletions.
diff --git a/src/lib/components/calling/CallScreen.svelte b/src/lib/components/calling/CallScreen.svelte
@@ -13,11 +13,24 @@
     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"
     import { debounce } from "$lib/utils/Functions"
+    import LiveLabel from "./LiveLabel.svelte"
 
     const MIN_USER_SIZE = 250
     export let expanded: boolean = false
@@ -196,6 +209,7 @@
 
     onMount(async () => {
         callScreenVisible.set(true)
+        showCallPopUp.set(false)
         if ($makeCallSound) {
             stopMakeCallSound()
         }
@@ -269,6 +283,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() {
@@ -494,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>
@@ -813,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
@@ -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>