🔨 Add disconnect

This commit is contained in:
SebClem 2022-06-23 12:50:04 +02:00
parent 271228c1b9
commit 28001879a9
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
5 changed files with 122 additions and 74 deletions

View File

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

View File

@ -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>

View File

@ -4,6 +4,7 @@ import type { TrackInfo } from "./TrackInfo";
type Status = {
connected: boolean;
canView?: boolean;
connectionStatus?: string;
canInteract?: boolean;
channel?: Chanel;
playBackInfo?: {

View File

@ -3,18 +3,14 @@ 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) => {
function getAudioStatus(guildId: string) {
const userStore = useUserStore();
axios
return axios
.get<Status>(`/audio/${guildId}/status`, {
headers: {
authorization: `Bearer ${userStore.token}`,
},
})
.then((value) => {
resolve(value.data);
})
.catch((reason) => {
console.error(`Fail to retrive audio status !`);
console.log(reason);
@ -24,15 +20,12 @@ function getAudioStatus(guildId: string): Promise<Status> {
type: "error",
text: "Fail to retrive audio status !",
});
reject(reason);
});
});
}
function connect(guildId: string, voiceChannelId: string): Promise<void> {
return new Promise((resolve, reject) => {
function connect(guildId: string, voiceChannelId: string) {
const userStore = useUserStore();
axios
return axios
.post<Status>(
`/audio/${guildId}/connect`,
{
@ -44,9 +37,6 @@ function connect(guildId: string, voiceChannelId: string): Promise<void> {
},
}
)
.then(() => {
resolve();
})
.catch((reason) => {
console.error(`Fail to connect to voice channel !`);
console.log(reason);
@ -56,9 +46,31 @@ function connect(guildId: string, voiceChannelId: string): Promise<void> {
type: "error",
text: "Fail to connect to voice channel !",
});
reject(reason);
});
}
function disconnect(guildId: string) {
const userStore = useUserStore();
return axios
.post<Status>(
`/audio/${guildId}/disconnect`,
{},
{
headers: {
authorization: `Bearer ${userStore.token}`,
},
}
)
.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 };

View File

@ -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