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