✨ Voice Chat yo!

src/layouts/chat.vue

@@ -9,6 +9,23 @@
       <v-spacer />
 
       <div v-if="channels.current">
+        <v-btn
+          v-if="channels.call"
+          icon="mdi-phone-hangup"
+          size="small"
+          variant="text"
+          :loading="calling"
+          @click="endsCall"
+        />
+        <v-btn
+          v-else
+          icon="mdi-phone-plus"
+          size="small"
+          variant="text"
+          :loading="calling"
+          @click="makeCall"
+        />
+
         <channel-action :item="channels.current" />
       </div>
     </div>
@@ -24,6 +41,7 @@ import { onMounted, ref, watch } from "vue"
 import { useChannels } from "@/stores/channels"
 import ChannelAction from "@/components/chat/channels/ChannelAction.vue"
 import { useUI } from "@/stores/ui"
+import { getAtk } from "@/stores/userinfo"
 
 const { showErrorSnackbar } = useUI()
 
@@ -31,6 +49,7 @@ const route = useRoute()
 const channels = useChannels()
 
 const loading = ref(false)
+const calling = ref(false)
 
 async function readMetadata() {
   loading.value = true
@@ -43,6 +62,30 @@ async function readMetadata() {
   loading.value = false
 }
 
+async function makeCall() {
+  calling.value = true
+  const res = await request("messaging", `/api/channels/${route.params.channel}/calls`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${await getAtk()}` }
+  })
+  if (res.status !== 200) {
+    showErrorSnackbar(await res.text())
+  }
+  calling.value = false
+}
+
+async function endsCall() {
+  calling.value = true
+  const res = await request("messaging", `/api/channels/${route.params.channel}/calls/ongoing`, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${await getAtk()}` }
+  })
+  if (res.status !== 200) {
+    showErrorSnackbar(await res.text())
+  }
+  calling.value = false
+}
+
 watch(
   () => route.params.channel,
   (val) => {