Add better UI to show if user is inviting for a group call

Satellite-im · Oct 11, 2024 · b69fd3c · b69fd3c
1 parent e0ba6b1
commit b69fd3c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/src/lib/components/calling/IncomingCall.svelte b/src/lib/components/calling/IncomingCall.svelte
@@ -1,18 +1,23 @@
 <script lang="ts">
     import { Button, Icon, Text, Spacer } from "$lib/elements"
-    import { Appearance, Route, Shape, Size } from "$lib/enums"
+    import { Appearance, ChatType, Route, Shape, Size } from "$lib/enums"
     import { Controls } from "$lib/layouts"
-    import { defaultUser } from "$lib/types"
+    import { defaultChat, defaultUser } from "$lib/types"
     import ProfilePicture from "../profile/ProfilePicture.svelte"
     import { playSound, SoundHandler, Sounds } from "../utils/SoundHandler"
     import { Store } from "$lib/state/Store"
+    import { _ } from "svelte-i18n"
     import { VoiceRTCInstance } from "$lib/media/Voice"
     import { goto } from "$app/navigation"
     import { writable } from "svelte/store"
+    import { UIStore } from "$lib/state/ui/index.js"
+    import ProfilePictureMany from "../profile/ProfilePictureMany.svelte"
 
     let callSound: SoundHandler | undefined = undefined
     let pending = false
     let user = writable(defaultUser)
+    const callChat = writable(defaultChat)
+    $: users = Store.getUsers($callChat.users)
 
     Store.state.pendingCall.subscribe(async _ => {
         if (VoiceRTCInstance.incomingCallFrom && !VoiceRTCInstance.toCall) {
@@ -21,6 +26,12 @@
                 callSound.play()
             }
             pending = true
+            let chat = UIStore.getChat(VoiceRTCInstance.incomingCallFrom[1].metadata.channel)
+            if (chat) {
+                callChat.set(chat)
+                users = Store.getUsers($callChat.users)
+            }
+
             user = Store.getUser(VoiceRTCInstance.incomingCallFrom[1].metadata.did)
         } else {
             pending = false
@@ -50,9 +61,18 @@
     <div id="incoming-call">
         <div class="body">
             <div class="content">
-                <ProfilePicture id={$user.key} hook="friend-profile-picture" size={Size.Large} image={$user.profile.photo.image} status={$user.profile.status} />
-                <Text>{$user.name}</Text>
-                <Text muted>{$user.profile.status_message}</Text>
+                {#if $callChat.kind === ChatType.DirectMessage}
+                    <ProfilePicture id={$user.key} hook="friend-profile-picture" size={Size.Large} image={$user.profile.photo.image} status={$user.profile.status} />
+                    <Text>{$user.name}</Text>
+                    <Text muted>{$user.profile.status_message}</Text>
+                {:else}
+                    <ProfilePicture id={$user.key} hook="friend-profile-picture" size={Size.Large} image={$user.profile.photo.image} status={$user.profile.status} />
+                    <Text>{$user.name}</Text>
+                    <Text>{$_("settings.calling.userInviteToAGroupCall")}</Text>
+                    <ProfilePictureMany users={$users} />
+                    <Text>{$callChat.name}</Text>
+                {/if}
+
                 <Spacer />
                 <Controls>
                     <Button appearance={Appearance.Success} text="Answer" on:click={answerCall}>

diff --git a/src/lib/lang/en.json b/src/lib/lang/en.json
@@ -338,7 +338,8 @@
             "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",
+            "userInviteToAGroupCall": "is inviting you to join a group call"
         },
         "notifications": {
             "name": "Notifications",