125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
<template>
|
|
<v-app-bar :order="5" scroll-behavior="hide" color="grey-lighten-3">
|
|
<div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center max-w-full">
|
|
<v-app-bar-nav-icon icon="mdi-chat" :loading="loading" :to="{ name: 'explore' }" />
|
|
|
|
<h2 class="ml-2 text-lg font-500 overflow-hidden ws-nowrap text-clip">{{ channels.current?.name }}</h2>
|
|
<p class="ml-3 text-xs opacity-80 overflow-hidden ws-nowrap text-clip">{{ channels.current?.description }}</p>
|
|
|
|
<v-spacer />
|
|
</div>
|
|
|
|
<template v-if="channels.current" #append>
|
|
<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"
|
|
variant="text"
|
|
size="small"
|
|
:loading="calling"
|
|
@click="makeCall"
|
|
/>
|
|
|
|
<div class="me-5">
|
|
<channel-action :item="channels.current" />
|
|
</div>
|
|
</template>
|
|
</v-app-bar>
|
|
|
|
<router-view />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { request } from "@/scripts/request"
|
|
import { useRoute } from "vue-router"
|
|
import { onMounted, onUnmounted, 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()
|
|
|
|
const ui = useUI()
|
|
const route = useRoute()
|
|
const channels = useChannels()
|
|
|
|
const loading = ref(false)
|
|
const calling = ref(false)
|
|
|
|
async function readMetadata() {
|
|
loading.value = true
|
|
const res = await request("messaging", `/api/channels/${route.params.channel}`)
|
|
if (res.status !== 200) {
|
|
showErrorSnackbar(await res.text())
|
|
} else {
|
|
channels.current = await res.json()
|
|
}
|
|
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) => {
|
|
if (val) {
|
|
channels.messages = []
|
|
readMetadata()
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
watch(() => channels.done, (val) => {
|
|
if (val) {
|
|
readMetadata().then(() => {
|
|
channels.messages = []
|
|
channels.done = false
|
|
})
|
|
}
|
|
}, { immediate: true })
|
|
|
|
watch(
|
|
() => channels.current,
|
|
(val) => {
|
|
ui.appbar.show = !val
|
|
}
|
|
)
|
|
|
|
onMounted(() => {
|
|
channels.current = null
|
|
channels.messages = []
|
|
})
|
|
|
|
onUnmounted(() => ui.appbar.show = true)
|
|
</script> |