Udded player progress, updated UI.

Signed-off-by: Pavel Kirilin <win10@list.ru>
This commit is contained in:
2024-05-12 11:59:00 +02:00
parent 1b9a6ee0da
commit 0ca224fe50
23 changed files with 597 additions and 169 deletions

View File

@ -3,30 +3,59 @@ import PlayerComponent from '@/components/PlayerComponent.vue';
import { Space, Button } from 'vant';
import { postRequest } from '@/utils';
import { useBackendStateStore } from '@/stores/backendState'
import { onMounted } from 'vue';
import { usePlayerStateStore } from '@/stores/playersState';
import { QButton } from '@qvant/qui-max'
const backendStateStore = useBackendStateStore()
const playerStateStore = usePlayerStateStore()
backendStateStore.updateCanWatch()
function kill(...names) {
postRequest("/api/kill", { names }).then(() => {
setTimeout(() => backendStateStore.updatePlaying(), 500)
})
postRequest("/api/commands/kill", { names })
playerStateStore.refreshPlayers()
}
function startWatching() {
postRequest("/api/start-watching").then(() => {
setTimeout(() => backendStateStore.updatePlaying(), 500)
})
postRequest("/api/commands/start-watching")
playerStateStore.refreshPlayers()
}
onMounted(() => {
backendStateStore.updateCanWatch()
})
</script>
<template>
<Space fill direction="vertical" :size="20">
<Button type="warning" round size="large" @click="kill('mpv')">Убить MPV</Button>
<Button type="danger" round size="large" @click="kill('awatch', 'mpv')">Убить awatch</Button>
<Button type="primary" round size="large" :disabled="!backendStateStore.backendState.canWatch"
@click="startWatching">Начать потребление анимы</Button>
</Space>
<div id="controls">
<QButton class="btn-ctrl" @click="kill('mpv')" theme="secondary" :full-width="true">
Следующая серия
</QButton>
<QButton class="btn-ctrl" @click="kill('awatch', 'mpv')" theme="secondary" :full-width="true">
Закончить потребление
</QButton>
<QButton class="btn-ctrl" @click="startWatching()" theme="secondary"
:disabled="!backendStateStore.backendState.canWatch" :full-width="true">
Начать потребление
</QButton>
</div>
<PlayerComponent />
</template>
<style>
#controls {
position: relative;
top: calc(50% - var(--van-action-bar-height));
margin-top: calc(-50px - var(--van-action-bar-height));
width: 100%;
}
.btn-ctrl {
margin-bottom: 10px;
height: 60px;
margin-left: 0 !important;
border-radius: 10px !important;
}
</style>