Improve animation when connecting

Satellite-im · Oct 11, 2024 · 7fdba74 · 7fdba74
1 parent 828a410
commit 7fdba74
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/lib/components/calling/CallScreen.svelte b/src/lib/components/calling/CallScreen.svelte
@@ -7,16 +7,14 @@
     import Participant from "./Participant.svelte"
     import Text from "$lib/elements/Text.svelte"
     import CallSettings from "./CallSettings.svelte"
-    import { get, writable, type Writable } from "svelte/store"
+    import { get } from "svelte/store"
     import { Store } from "$lib/state/Store"
     import { _ } from "svelte-i18n"
     import type { Chat } from "$lib/types"
-    import { UIStore } from "$lib/state/ui"
     import VolumeMixer from "./VolumeMixer.svelte"
     import { onDestroy, onMount } from "svelte"
-    import { VoiceRTCInstance, type VoiceRTCUser } from "$lib/media/Voice"
+    import { VoiceRTCInstance } from "$lib/media/Voice"
     import { log } from "$lib/utils/Logger"
-    import { debounce } from "$lib/utils/Functions"
 
     export let expanded: boolean = false
     function toggleExanded() {
@@ -114,7 +112,9 @@
         }
     }
     let showAnimation = true
-    let message = "Connecting..."
+    let message = $_("settings.calling.connecting")
+
+    let timeout: NodeJS.Timeout | undefined
 
     onMount(async () => {
         document.addEventListener("mousedown", handleClickOutside)
@@ -124,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)
             }
         }
@@ -142,6 +142,9 @@
         subscribeTwo()
         subscribeThree()
         subscribeFour()
+        if (timeout) {
+            clearTimeout(timeout)
+        }
     })
 </script>
 
@@ -356,11 +359,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 {
@@ -369,13 +372,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
@@ -336,7 +336,9 @@
             "minimalCallingAlertsDescription": "Instead of displaying a full screen alert when a call is incoming, with this mode enabled the call dialog will show within the sidebar.",
             "startCallMessage": "📞 A call started at {value}.",
             "endCallMessage": "📴 The call ended at {formattedEndTime}. Duration: {duration}.",
-            "callMissed": "📞 Missed call"
+            "callMissed": "📞 Missed 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",
@@ -426,11 +428,12 @@ export class VoiceRTC {
             if (call) {
                 this.inviteToCall(this.toCall)
             }
-            setTimeout(() => {
+            const timeoutWhenCallIsNull = setTimeout(() => {
                 if (this.call === null || this.call.empty) {
                     this.leaveCall(true)
                 }
             }, 100000)
+            timeOuts.push(timeoutWhenCallIsNull)
             Store.setActiveCall(Store.getCallingChat(this.channel!)!, CallDirection.Outbound)
         } catch (error) {
             log.error(`Error making call: ${error}`)
@@ -499,10 +502,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
                 }
@@ -561,6 +564,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()