🐛 Bug fixes of friends and voice chat

src/components/friends/FriendListItem.vue

@@ -42,8 +42,8 @@ const props = defineProps<{ item: any }>()
 const emits = defineEmits(["approve", "decline"])
 
 const canApprove = computed(() => {
-  return props.item.status !== 1 &&
+  return props.item.status === 2 ||
-    (props.item.status !== 0 && props.item.related_id !== id.userinfo.data?.id)
+    (props.item.status === 0 && props.item.related_id === id.userinfo.data?.id)
 })
 const canDecline = computed(() => {
   return props.item.status !== 2

src/views/chat/page.vue

@@ -21,7 +21,11 @@
           @group:selected="(val) => val && mountJitsi()"
         >
           <template #text>
-            <div class="call-container w-full h-[380px]">
+            <v-expand-transition>
+              <v-progress-linear v-show="joining" indeterminate />
+            </v-expand-transition>
+
+            <div class="call-container w-full h-[360px]">
               <div id="call" class="h-full w-full" v-if="channels.call"></div>
             </div>
           </template>
@@ -54,6 +58,7 @@ const chatList = ref<HTMLDivElement>()
 
 const { showErrorSnackbar } = useUI()
 const loading = ref(false)
+const joining = ref(false)
 
 const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
 
@@ -136,6 +141,10 @@ watch(
   () => channels.call,
   (val) => {
     if (!val) {
+      if (jitsiInstance) {
+        jitsiInstance.executeCommand("endConference")
+        jitsiInstance.executeCommand("hangup")
+      }
       unmountJitsi()
     }
   }
@@ -145,16 +154,17 @@ let mounted = false
 let jitsiInstance: any
 
 async function mountJitsi() {
+  joining.value = true
   if (mounted) return false
   if (!channels.call) return
   const tk = await channels.exchangeCallToken()
-  console.log(tk)
   if (!tk) return
   const domain = tk.endpoint.replace("http://", "").replace("https://", "")
   const options = {
     roomName: channels.call.external_id,
     parentNode: document.querySelector("#call"),
-    jwt: tk.token
+    onload: () => joining.value = false,
+    jwt: tk.token,
   }
   // This class imported by the script tag in index.html
   // @ts-ignore