feat(Call): Show other users in call for users that accepted the call (…

…#739)

src/lib/components/calling/CallScreen.svelte

@@ -13,7 +13,7 @@
     import type { Chat } from "$lib/types"
     import VolumeMixer from "./VolumeMixer.svelte"
     import { createEventDispatcher, onDestroy, onMount } from "svelte"
-    import { callTimeout, TIME_TO_SHOW_CONNECTING, TIME_TO_SHOW_END_CALL_FEEDBACK, usersAcceptedTheCall, usersDeniedTheCall, VoiceRTCInstance } from "$lib/media/Voice"
+    import { callTimeout, 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, SoundHandler, Sounds } from "../utils/SoundHandler"
 
@@ -127,10 +127,18 @@
     }
 
     let showAnimation = true
+    let noResponseVisible = false
     let message = $_("settings.calling.connecting")
     let timeout: NodeJS.Timeout | undefined
+    let hideNoResponseUsersTimeout: NodeJS.Timeout | undefined
     let callSound: SoundHandler | undefined = undefined
 
+    function hideNoResponseUsersAfterAPeriodOfTime() {
+        hideNoResponseUsersTimeout = setTimeout(() => {
+            noResponseVisible = false
+        }, 10000)
+    }
+
     $: if ($usersAcceptedTheCall.length > 0) {
         callSound?.stop()
         callSound = undefined
@@ -152,9 +160,24 @@
                     callSound = undefined
                     showAnimation = false
                     message = $_("settings.calling.noResponse")
+                    noResponseVisible = true
+                    hideNoResponseUsersAfterAPeriodOfTime()
                 }, TIME_TO_SHOW_CONNECTING)
             }
         }
+        if ($timeCallStarted) {
+            let timeCallStartedInterval = setInterval(() => {
+                let now = new Date()
+                let timeDifference = now.getTime() - $timeCallStarted.getTime()
+                if (timeDifference > TIME_TO_SHOW_CONNECTING) {
+                    showAnimation = false
+                    noResponseVisible = true
+                    message = $_("settings.calling.noResponse")
+                    clearInterval(timeCallStartedInterval)
+                    hideNoResponseUsersAfterAPeriodOfTime()
+                }
+            }, 1000)
+        }
 
         if (VoiceRTCInstance.localVideoCurrentSrc) {
             await VoiceRTCInstance.getLocalStream(true)
@@ -174,6 +197,9 @@
         if (timeout) {
             clearTimeout(timeout)
         }
+        if (hideNoResponseUsersTimeout) {
+            clearTimeout(hideNoResponseUsersTimeout)
+        }
         callSound?.stop()
         callSound = undefined
     })
@@ -214,7 +240,7 @@
                 {#each chat.users as user (user)}
                     {#if user === get(Store.state.user).key && !userCallOptions.video.enabled}
                         <Participant participant={$userCache[user]} hasVideo={$userCache[user].media.is_streaming_video} isMuted={muted} isDeafened={userCallOptions.audio.deafened} isTalking={$userCache[user].media.is_playing_audio} />
-                    {:else if $userCache[user] && $userCache[user].key !== get(Store.state.user).key && VoiceRTCInstance.toCall && !$remoteStreams[user]}
+                    {:else if $userCache[user] && $userCache[user].key !== get(Store.state.user).key && !$remoteStreams[user]}
                         {#if showAnimation && !$usersAcceptedTheCall.includes(user)}
                             <div class="calling-animation">
                                 <div class="shaking-participant">
@@ -227,7 +253,7 @@
                                 <Participant participant={$userCache[user]} hasVideo={false} isMuted={true} isDeafened={true} isTalking={false} />
                                 <p>{$_("settings.calling.acceptedCall")}</p>
                             </div>
-                        {:else}
+                        {:else if noResponseVisible}
                             <div class="no-response">
                                 <Participant participant={$userCache[user]} hasVideo={false} isMuted={true} isDeafened={true} isTalking={false} />
                                 <p>{message}</p>

src/lib/media/Voice.ts

@@ -16,16 +16,17 @@ export const TIME_TO_SHOW_END_CALL_FEEDBACK = 3500
 export const TIME_TO_SHOW_CONNECTING = 30000
 
 let timeOuts: NodeJS.Timeout[] = []
+
 export const usersDeniedTheCall: Writable<string[]> = writable([])
 export const usersAcceptedTheCall: Writable<string[]> = writable([])
+export const connectionOpened = writable(false)
+export const timeCallStarted: Writable<Date | null> = writable(null)
 
 export enum VoiceRTCMessageType {
     UpdateUser = "UPDATE_USER",
     None = "NONE",
 }
 
-export const connectionOpened = writable(false)
-
 export type RemoteStream = {
     user: VoiceRTCUser
     stream: MediaStream | null
@@ -215,6 +216,7 @@ export class CallRoom {
                 participant[1].handleRemoteStream(stream)
             }
         })
+        room.onPeerTrack((stream, peer, _meta) => {})
         // room.onPeerTrack((stream, peer, meta) => {})
     }
 
@@ -397,6 +399,7 @@ export class VoiceRTC {
                     log.info(`Receiving connection on channel: ${conn.metadata.channel} from ${conn.metadata.id}, username: ${conn.metadata.username}`)
                     this.incomingConnections.push(conn)
                     this.incomingCallFrom = [conn.metadata.channel, conn]
+                    timeCallStarted.set(new Date(conn.metadata.timeCallStarted))
                     Store.setPendingCall(Store.getCallingChat(this.channel!)!, CallDirection.Inbound)
                 })
 
@@ -505,6 +508,7 @@ export class VoiceRTC {
                             did: get(Store.state.user).key,
                             username: get(Store.state.user).name,
                             channel: this.channel,
+                            timeCallStarted: new Date().toISOString(),
                         },
                     })
                     conn.on("open", () => {