🔨 Add disconnect

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": {

src/components/guild/home/AudioPreviewComponent.vue

@@ -11,6 +11,7 @@
             :disabled="connectBtnDisable"
             size="small"
             v-bind="props"
+            :loading="voiceChannelConnecting"
           >
             {{ status.channel?.name }}
           </v-btn>
@@ -172,16 +173,19 @@
             :disabled="connectBtnDisable"
             :color="connectBtnDisable ? '' : 'primary'"
             class="elevation-10"
+            @click="onDisconnect"
           ></v-btn>
           <v-btn
             v-else
             icon="mdi-connection"
+            :loading="voiceChannelConnecting"
             variant="outlined"
             :disabled="connectBtnDisable"
             :color="connectBtnDisable ? '' : 'primary'"
             class="elevation-10"
             id="connectBtn"
-          ></v-btn>
+          >
+          </v-btn>
         </v-col>
       </v-row>
       <v-overlay
@@ -236,11 +240,11 @@
 import type { Chanel } from "@/data/guild/Channel";
 import type { Guild } from "@/data/guild/Guild";
 import type { Status } from "@/data/music/Status";
-import { connect, getAudioStatus } from "@/services/audioService";
+import { connect, getAudioStatus, disconnect } from "@/services/audioService";
 import { getVoiceChannels } from "@/services/guildService";
 import { computed } from "@vue/reactivity";
 import { ref, watch } from "vue";
-import { onBeforeRouteUpdate } from "vue-router";
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
 const properties = defineProps<{
   guild: Guild;
@@ -253,11 +257,7 @@ const status = ref<Status>({ connected: false });
 const chanListMenuOpen = ref(false);
 const chanListLoading = ref(true);
 const voiceChannelList = ref<Chanel[]>([]);
-
-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);
+});
 </script>
 
 <style scoped></style>

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?: {

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<Status> {
-  return new Promise((resolve, reject) => {
-    const userStore = useUserStore();
-    axios
-      .get<Status>(`/audio/${guildId}/status`, {
+function getAudioStatus(guildId: string) {
+  const userStore = useUserStore();
+  return axios
+    .get<Status>(`/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<Status>(
+      `/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<void> {
-  return new Promise((resolve, reject) => {
-    const userStore = useUserStore();
-    axios
-      .post<Status>(
-        `/audio/${guildId}/connect`,
-        {
-          channelId: voiceChannelId,
+function disconnect(guildId: string) {
+  const userStore = useUserStore();
+  return axios
+    .post<Status>(
+      `/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 };

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