From b69fd3cf973a4d109d7d68e8514ff4ec5f05826b Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Fri, 11 Oct 2024 17:34:16 -0300
Subject: [PATCH] Add better UI to show if user is inviting for a group call

---
 .../components/calling/IncomingCall.svelte    | 30 +++++++++++++++----
 src/lib/lang/en.json                          |  3 +-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/calling/IncomingCall.svelte b/src/lib/components/calling/IncomingCall.svelte
index abbc061f8..014384afe 100644
--- 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
index d189b08f3..c6c195c75 100644
--- 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",