From 28001879a9c6d195d4c46fcc46b78c264dd80737 Mon Sep 17 00:00:00 2001 From: SebClem Date: Thu, 23 Jun 2022 12:50:04 +0200 Subject: [PATCH] :hammer: Add disconnect --- package.json | 2 +- .../guild/home/AudioPreviewComponent.vue | 65 ++++++++--- src/data/music/Status.ts | 1 + src/services/audioService.ts | 110 ++++++++++-------- yarn.lock | 18 ++- 5 files changed, 122 insertions(+), 74 deletions(-) diff --git a/package.json b/package.json index a359b7c..8d873b4 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "uuid": "^8.3.2", "vue": "^3.2.33", "vue-router": "^4.0.14", - "vuetify": "^3.0.0-beta.3", + "vuetify": "^3.0.0-beta.4", "webfontloader": "^1.0.0" }, "devDependencies": { diff --git a/src/components/guild/home/AudioPreviewComponent.vue b/src/components/guild/home/AudioPreviewComponent.vue index 7ea1227..062d17a 100644 --- a/src/components/guild/home/AudioPreviewComponent.vue +++ b/src/components/guild/home/AudioPreviewComponent.vue @@ -11,6 +11,7 @@ :disabled="connectBtnDisable" size="small" v-bind="props" + :loading="voiceChannelConnecting" > {{ status.channel?.name }} @@ -172,16 +173,19 @@ :disabled="connectBtnDisable" :color="connectBtnDisable ? '' : 'primary'" class="elevation-10" + @click="onDisconnect" > + > + ({ connected: false }); const chanListMenuOpen = ref(false); const chanListLoading = ref(true); const voiceChannelList = ref([]); - -getAudioStatus(properties.guild.id).then((value) => { - status.value = value; - loading.value = false; -}); +const voiceChannelConnecting = ref(false); const progress = computed(() => { if ( @@ -324,12 +324,9 @@ const privateChan = computed(() => { return status.value.connected && !status.value.canView; }); -function timeToMMSS(time: number) { - let seconds = Math.floor(time / 1000); - const minutes = Math.floor(seconds / 60); - seconds = seconds % 60; - return `${minutes}:${("0" + seconds).slice(-2)}`; -} +const selectedListVoice = computed(() => { + return [status.value.channel?.id as string]; +}); watch(chanListMenuOpen, (value) => { if (value) { @@ -343,24 +340,56 @@ watch(chanListMenuOpen, (value) => { }); function voiceChannelSelected(value: string[]) { + voiceChannelConnecting.value = true; if (value[0] != status.value.channel?.id) { - connect(properties.guild.id, value[0]); + connect(properties.guild.id, value[0]).then((value) => { + if (value) { + status.value = value.data; + voiceChannelConnecting.value = false; + } + }); } } -const selectedListVoice = computed(() => { - return [status.value.channel?.id as string]; +function onDisconnect() { + disconnect(properties.guild.id) + .then((value) => { + if (value) { + status.value = value.data; + } + }) + .catch(); +} + +function timeToMMSS(time: number) { + let seconds = Math.floor(time / 1000); + const minutes = Math.floor(seconds / 60); + seconds = seconds % 60; + return `${minutes}:${("0" + seconds).slice(-2)}`; +} + +getAudioStatus(properties.guild.id).then((value) => { + if (value) { + status.value = value.data; + loading.value = false; + } }); let interval = setInterval(() => { getAudioStatus(properties.guild.id).then((value) => { - status.value = value; + if (value) { + status.value = value.data; + } }); }, 1000); onBeforeRouteUpdate(() => { clearInterval(interval); }); + +onBeforeRouteLeave(() => { + clearInterval(interval); +}); diff --git a/src/data/music/Status.ts b/src/data/music/Status.ts index 6fd0273..5d02ac4 100644 --- a/src/data/music/Status.ts +++ b/src/data/music/Status.ts @@ -4,6 +4,7 @@ import type { TrackInfo } from "./TrackInfo"; type Status = { connected: boolean; canView?: boolean; + connectionStatus?: string; canInteract?: boolean; channel?: Chanel; playBackInfo?: { diff --git a/src/services/audioService.ts b/src/services/audioService.ts index aae5189..8d8a576 100644 --- a/src/services/audioService.ts +++ b/src/services/audioService.ts @@ -3,62 +3,74 @@ import { useEventQueuStore } from "@/stores/eventQueu"; import { useUserStore } from "@/stores/user"; import axios from "axios"; -function getAudioStatus(guildId: string): Promise { - return new Promise((resolve, reject) => { - const userStore = useUserStore(); - axios - .get(`/audio/${guildId}/status`, { +function getAudioStatus(guildId: string) { + const userStore = useUserStore(); + return axios + .get(`/audio/${guildId}/status`, { + headers: { + authorization: `Bearer ${userStore.token}`, + }, + }) + .catch((reason) => { + console.error(`Fail to retrive audio status !`); + console.log(reason); + const eventQueuStore = useEventQueuStore(); + eventQueuStore.push({ + uuid: undefined, + type: "error", + text: "Fail to retrive audio status !", + }); + }); +} + +function connect(guildId: string, voiceChannelId: string) { + const userStore = useUserStore(); + return axios + .post( + `/audio/${guildId}/connect`, + { + channelId: voiceChannelId, + }, + { headers: { authorization: `Bearer ${userStore.token}`, }, - }) - .then((value) => { - resolve(value.data); - }) - .catch((reason) => { - console.error(`Fail to retrive audio status !`); - console.log(reason); - const eventQueuStore = useEventQueuStore(); - eventQueuStore.push({ - uuid: undefined, - type: "error", - text: "Fail to retrive audio status !", - }); - reject(reason); + } + ) + .catch((reason) => { + console.error(`Fail to connect to voice channel !`); + console.log(reason); + const eventQueuStore = useEventQueuStore(); + eventQueuStore.push({ + uuid: undefined, + type: "error", + text: "Fail to connect to voice channel !", }); - }); + }); } -function connect(guildId: string, voiceChannelId: string): Promise { - return new Promise((resolve, reject) => { - const userStore = useUserStore(); - axios - .post( - `/audio/${guildId}/connect`, - { - channelId: voiceChannelId, +function disconnect(guildId: string) { + const userStore = useUserStore(); + return axios + .post( + `/audio/${guildId}/disconnect`, + {}, + { + headers: { + authorization: `Bearer ${userStore.token}`, }, - { - headers: { - authorization: `Bearer ${userStore.token}`, - }, - } - ) - .then(() => { - resolve(); - }) - .catch((reason) => { - console.error(`Fail to connect to voice channel !`); - console.log(reason); - const eventQueuStore = useEventQueuStore(); - eventQueuStore.push({ - uuid: undefined, - type: "error", - text: "Fail to connect to voice channel !", - }); - reject(reason); + } + ) + .catch((reason) => { + console.error(`Fail to disconnect from voice channel !`); + console.log(reason); + const eventQueuStore = useEventQueuStore(); + eventQueuStore.push({ + uuid: undefined, + type: "error", + text: "Fail to disconnect from voice channel !", }); - }); + }); } -export { getAudioStatus, connect }; +export { getAudioStatus, connect, disconnect }; diff --git a/yarn.lock b/yarn.lock index fc10fc2..6700f32 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3648,7 +3648,7 @@ __metadata: vue-cli-plugin-vuetify: ~2.4.8 vue-router: ^4.0.14 vue-tsc: ^0.34.7 - vuetify: ^3.0.0-beta.3 + vuetify: ^3.0.0-beta.4 vuetify-loader: ^2.0.0-alpha.0 webfontloader: ^1.0.0 languageName: unknown @@ -10626,19 +10626,25 @@ __metadata: languageName: node linkType: hard -"vuetify@npm:^3.0.0-beta.3": - version: 3.0.0-beta.3 - resolution: "vuetify@npm:3.0.0-beta.3" +"vuetify@npm:^3.0.0-beta.4": + version: 3.0.0-beta.4 + resolution: "vuetify@npm:3.0.0-beta.4" peerDependencies: "@formatjs/intl": ^1.0.0 || ^2.0.0 - vue: ^3.2.36 + vite-plugin-vuetify: 1.0.0-alpha.12 + vue: ^3.2.0 vue-i18n: ^9.0.0 + webpack-plugin-vuetify: 2.0.0-alpha.11 peerDependenciesMeta: "@formatjs/intl": optional: true + vite-plugin-vuetify: + optional: true vue-i18n: optional: true - checksum: 2e1ef8f8ac1ba3bb0f60f275d0c07e747acff59cbae920f7c963bb786c0c726729e3a06a441f8817c540840a5c0f6175477334aa3f7393f62ee4b7dd583ad287 + webpack-plugin-vuetify: + optional: true + checksum: 7c6d67c2f25a1bc62b52a6c551e747f890e1f9362696781a5e6f16ad96e2c2d8be56eb0eeef338d6da511e18672f86dd2d9e97ca1bc7453bc9dd75abd93209d5 languageName: node linkType: hard