🔨 Prepare for add

This commit is contained in:
SebClem 2022-06-23 18:03:17 +02:00
parent 37fcf27aa2
commit b5707a7bca
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50

View File

@ -143,8 +143,49 @@
></v-progress-linear> ></v-progress-linear>
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row class="mt-2 px-lg-6 px-0">
<v-col class="d-flex justify-center mt-2"> <v-col class="d-flex justify-start">
<v-menu :close-on-content-click="false">
<template v-slot:activator="{ props }">
<v-btn
icon="mdi-plus"
class="mr-4 elevation-10"
variant="outlined"
:disabled="addBtnDisabled"
:color="addBtnDisabled ? '' : 'primary'"
v-bind="props"
></v-btn>
</template>
<v-card min-width="300" v-model="urlPopup">
<v-card-content>
<v-text-field
v-model="url"
density="compact"
variant="outlined"
label="Url"
hide-details="auto"
@change="add"
color="primary"
autofocus
:loading="urlLoading"
:disabled="urlLoading"
>
<template v-slot:append>
<v-icon
@click="add"
color="primary"
:style="urlLoading ? '' : 'opacity: 1'"
:disabled="urlLoading"
>
mdi-plus-circle
</v-icon>
</template>
</v-text-field>
</v-card-content>
</v-card>
</v-menu>
</v-col>
<v-col class="d-flex justify-center">
<v-btn <v-btn
:icon="playPauseIcon" :icon="playPauseIcon"
class="mr-4 elevation-10" class="mr-4 elevation-10"
@ -169,6 +210,8 @@
variant="outlined" variant="outlined"
@click="stop" @click="stop"
></v-btn> ></v-btn>
</v-col>
<v-col class="d-flex justify-end">
<v-btn <v-btn
v-if="status.connected" v-if="status.connected"
icon="mdi-eject" icon="mdi-eject"
@ -261,6 +304,9 @@ const chanListMenuOpen = ref(false);
const chanListLoading = ref(true); const chanListLoading = ref(true);
const voiceChannelList = ref<Chanel[]>([]); const voiceChannelList = ref<Chanel[]>([]);
const voiceChannelConnecting = ref(false); const voiceChannelConnecting = ref(false);
const url = ref("");
const urlPopup = ref(false);
const urlLoading = ref(false);
const progress = computed(() => { const progress = computed(() => {
if ( if (
@ -297,6 +343,10 @@ const connectBtnDisable = computed(() => {
return status.value.connected && !status.value.canInteract; return status.value.connected && !status.value.canInteract;
}); });
const addBtnDisabled = computed(() => {
return !status.value.connected && !status.value.canInteract;
});
const playPauseIcon = computed(() => { const playPauseIcon = computed(() => {
return status.value.playBackInfo?.paused ? "mdi-play" : "mdi-pause"; return status.value.playBackInfo?.paused ? "mdi-play" : "mdi-pause";
}); });
@ -409,6 +459,12 @@ function stop() {
.catch(); .catch();
} }
function add() {
if (url.value) {
urlLoading.value = true;
}
}
function timeToMMSS(time: number) { function timeToMMSS(time: number) {
let seconds = Math.floor(time / 1000); let seconds = Math.floor(time / 1000);
const minutes = Math.floor(seconds / 60); const minutes = Math.floor(seconds / 60);