feat: add loading state and voice channel validation to queue restoration and update uploads panel header
This commit is contained in:
2 files changed
+44
-5
No files matched your search
@@ -79,12 +79,25 @@ const setPlays = (id: string, plays: number) =>
|
|||||||
|
|
||||||
const warnInvalidPlays = () => notify('Wartość musi być z przedziału 1-999', 'error')
|
const warnInvalidPlays = () => notify('Wartość musi być z przedziału 1-999', 'error')
|
||||||
|
|
||||||
const restoreQueue = () =>
|
const restoring = ref(false)
|
||||||
run(
|
|
||||||
|
async function restoreQueue() {
|
||||||
|
if (restoring.value) return
|
||||||
|
if (!props.status?.active_voice_channel) {
|
||||||
|
notify('Bot musi być połączony z kanałem głosowym!', 'error')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
restoring.value = true
|
||||||
|
try {
|
||||||
|
await run(
|
||||||
() => api.restoreQueue(),
|
() => api.restoreQueue(),
|
||||||
'Przywrócono ostatnią kolejkę',
|
'Przywrócono ostatnią kolejkę',
|
||||||
'Nie udało się przywrócić ostatniej kolejki',
|
'Nie udało się przywrócić ostatniej kolejki',
|
||||||
)
|
)
|
||||||
|
} finally {
|
||||||
|
restoring.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -146,11 +159,14 @@ const restoreQueue = () =>
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="btn btn-secondary btn-block restore-queue-button"
|
class="btn btn-secondary btn-block restore-queue-button"
|
||||||
:disabled="!savedQueueAvailable"
|
:class="{ loading: restoring }"
|
||||||
|
:disabled="!savedQueueAvailable || restoring"
|
||||||
title="Przywróć kolejkę zapisaną przed ostatnim zatrzymaniem lub rozłączeniem"
|
title="Przywróć kolejkę zapisaną przed ostatnim zatrzymaniem lub rozłączeniem"
|
||||||
@click="restoreQueue"
|
@click="restoreQueue"
|
||||||
>
|
>
|
||||||
<RotateCcw /> Przywróć ostatnią kolejkę
|
<LoaderCircle v-if="restoring" class="restore-spinner" />
|
||||||
|
<RotateCcw v-else />
|
||||||
|
<span>{{ restoring ? 'Przywracanie kolejki…' : 'Przywróć ostatnią kolejkę' }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -158,6 +174,29 @@ const restoreQueue = () =>
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.restore-queue-button {
|
.restore-queue-button {
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.restore-queue-button.loading {
|
||||||
|
opacity: 0.9;
|
||||||
|
cursor: wait;
|
||||||
|
border-color: var(--primary, #f59e0b);
|
||||||
|
color: var(--primary, #f59e0b);
|
||||||
|
box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.restore-queue-button:disabled:not(.loading) {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.restore-spinner {
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.queue-item-pending {
|
.queue-item-pending {
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ function play(filename: string) {
|
|||||||
<div class="glass-card uploads-panel">
|
<div class="glass-card uploads-panel">
|
||||||
<div class="queue-header">
|
<div class="queue-header">
|
||||||
<h2 class="card-title">
|
<h2 class="card-title">
|
||||||
<FolderUp /> Serwerowa baza plików
|
<FolderUp /> Pliki serwera
|
||||||
</h2>
|
</h2>
|
||||||
<span class="queue-count">{{ filesLabel(files.length) }}</span>
|
<span class="queue-count">{{ filesLabel(files.length) }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user