Merge branch 'fix-video-not-appearing' into add-feedback-when-there-i…

…s-no-answer-from-other-user
Satellite-im · Oct 11, 2024 · 05423d0 · 05423d0
2 parents 45ba859 + 7fdba74
commit 05423d0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/src/lib/components/calling/CallScreen.svelte b/src/lib/components/calling/CallScreen.svelte
@@ -13,7 +13,7 @@
     import type { Chat } from "$lib/types"
     import VolumeMixer from "./VolumeMixer.svelte"
     import { onDestroy, onMount } from "svelte"
-    import { callTimeout, VoiceRTCInstance, type VoiceRTCUser } from "$lib/media/Voice"
+    import { callTimeout, VoiceRTCInstance } from "$lib/media/Voice"
     import { log } from "$lib/utils/Logger"
 
     export let expanded: boolean = false
@@ -113,7 +113,9 @@
     }
 
     let showAnimation = true
-    let message = "Connecting..."
+    let message = $_("settings.calling.connecting")
+
+    let timeout: NodeJS.Timeout | undefined
 
     onMount(async () => {
         document.addEventListener("mousedown", handleClickOutside)
@@ -122,9 +124,9 @@
         if (VoiceRTCInstance.localVideoCurrentSrc && VoiceRTCInstance.remoteVideoCreator) {
             if (VoiceRTCInstance.toCall && VoiceRTCInstance.toCall.find(did => did !== "") !== undefined) {
                 await VoiceRTCInstance.makeCall()
-                setTimeout(() => {
+                timeout = setTimeout(() => {
                     showAnimation = false
-                    message = "No response"
+                    message = $_("settings.calling.noResponse")
                 }, 15000)
             }
         }
@@ -140,6 +142,9 @@
         subscribeTwo()
         subscribeThree()
         subscribeFour()
+        if (timeout) {
+            clearTimeout(timeout)
+        }
     })
 </script>
 
@@ -362,11 +367,11 @@
             justify-content: center;
             flex-direction: column;
             text-align: center;
-            animation: shake 0.5s ease-in-out infinite;
+            animation: shake 0.4s ease-in-out infinite;
         }
 
         .shaking-participant {
-            animation: shake 0.5s ease-in-out infinite;
+            animation: shake 0.4s ease-in-out infinite;
         }
 
         @keyframes shake {
@@ -375,13 +380,13 @@
                 transform: translateX(0);
             }
             25% {
-                transform: translateX(-2px);
+                transform: translateX(-0.75px);
             }
             50% {
-                transform: translateX(2px);
+                transform: translateX(0.75px);
             }
             75% {
-                transform: translateX(-2px);
+                transform: translateX(-0.75px);
             }
         }
 

diff --git a/src/lib/lang/en.json b/src/lib/lang/en.json
@@ -337,7 +337,9 @@
             "startCallMessage": "📞 A call started at {value}.",
             "endCallMessage": "📴 The call ended at {formattedEndTime}. Duration: {duration}.",
             "callMissed": "📞 Missed call",
-            "noAnswer": "No answer, leaving the call..."
+            "noAnswer": "No answer, leaving the call...",
+            "connecting": "Connecting...",
+            "noResponse": "No response"
         },
         "notifications": {
             "name": "Notifications",

diff --git a/src/lib/media/Voice.ts b/src/lib/media/Voice.ts
@@ -12,6 +12,8 @@ import { joinRoom } from "trystero/ipfs"
 
 const CALL_ACK = "CALL_ACCEPT"
 
+let timeOuts: NodeJS.Timeout[] = []
+
 export enum VoiceRTCMessageType {
     UpdateUser = "UPDATE_USER",
     None = "NONE",
@@ -428,15 +430,18 @@ export class VoiceRTC {
             if (call) {
                 this.inviteToCall(this.toCall)
             }
-            setTimeout(() => {
+            const timeoutWhenCallIsNull = setTimeout(() => {
                 if (this.call === null || this.call.empty) {
                     log.debug("No one joined the call, leaving")
                     callTimeout.set(true)
-                    setTimeout(() => {
-                        this.leaveCall(true)
-                    }, 3500)
+                    timeOuts.push(
+                        setTimeout(() => {
+                            this.leaveCall(true)
+                        }, 3500)
+                    )
                 }
             }, 20000)
+            timeOuts.push(timeoutWhenCallIsNull)
             Store.setActiveCall(Store.getCallingChat(this.channel!)!, CallDirection.Outbound)
         } catch (error) {
             log.error(`Error making call: ${error}`)
@@ -505,10 +510,10 @@ export class VoiceRTC {
                         }
                     })
                 }
-                await new Promise(resolve => setTimeout(resolve, 5000))
+                await new Promise(resolve => timeOuts.push(setTimeout(resolve, 5000)))
                 if (connected) {
                     // If connection has been made let it ring for 30 sec.
-                    await new Promise(resolve => setTimeout(resolve, 30000))
+                    await new Promise(resolve => timeOuts.push(setTimeout(resolve, 30000)))
                     conn.close()
                     break
                 }
@@ -567,6 +572,7 @@ export class VoiceRTC {
     }
 
     async leaveCall(sendEndCallMessage = false) {
+        timeOuts.forEach(t => clearTimeout(t))
         sendEndCallMessage = sendEndCallMessage && this.channel !== undefined && this.call != null
         if (sendEndCallMessage && this.call?.start) {
             const now = new Date()