Added backendState for playing and canWatch.

Signed-off-by: Pavel Kirilin <win10@list.ru>

anime/routes.py

@@ -51,8 +51,6 @@ def start_watching(request: Request) -> None:
         cwd=anime_dir,
     )
     request.app.state.pid = ret.pid
-    ret.wait()
-    request.app.state.pid = None
 
 
 @router.post("/player/offset")

frontend/src/components/PlayerComponent.vue

@@ -1,40 +1,29 @@
 <script setup>
 import { ActionBar, ActionBarButton } from 'vant';
 import { postRequest } from '@/utils'
-import { ref } from 'vue'
+import { useBackendStateStore } from '@/stores/backendState';
 
-const is_playing = ref(false);
+const backendStore = useBackendStateStore();
 
 async function offsetRequest(offset, forward) {
     await postRequest(`/api/player/offset`, {
         offset,
         forward,
     })
+    await backendStore.updatePlaying()
 }
 
 async function playPauseRequest() {
     await postRequest(`/api/player/play-pause`)
-    update_state()
+    await backendStore.updatePlaying()
 }
-
-function update_state() {
-    fetch('/api/player/playing').then((response) => {
-        if (response.ok) {
-            response.json().then((resp_json) => {
-                is_playing.value = resp_json.playing
-            })
-        }
-    })
-}
-
-update_state()
 </script>
 
 <template>
     <ActionBar>
         <ActionBarButton icon="arrow-double-left" @click="offsetRequest(85, false)"></ActionBarButton>
         <ActionBarButton icon="arrow-left" @click="offsetRequest(10, false)"></ActionBarButton>
-        <ActionBarButton :icon="is_playing ? 'pause' : 'play'" @click="playPauseRequest()"></ActionBarButton>
+        <ActionBarButton :icon="backendStore.backendState.playing ? 'pause' : 'play'" @click="playPauseRequest()"></ActionBarButton>
         <ActionBarButton icon="arrow" @click="offsetRequest(10, true)"></ActionBarButton>
         <ActionBarButton icon="arrow-double-right" @click="offsetRequest(85, true)"></ActionBarButton>
     </ActionBar>

frontend/src/stores/backendState.js

@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+import { ref } from 'vue'
+
+export const useBackendStateStore = defineStore('backendState', () => {
+    const backendState = ref({
+        canWatch: false,
+        playing: false
+    })
+
+    async function updateCanWatch() {
+        const response = await fetch("/api/can-start-watching");
+        backendState.value.canWatch = response.ok;
+    }
+
+
+    async function updatePlaying() {
+        const response = await fetch('/api/player/playing');
+        if (response.ok) {
+            let resp_json = await response.json()
+            backendState.value.playing = resp_json.playing
+        }
+    }
+
+    return { backendState, updateCanWatch, updatePlaying }
+});

frontend/src/stores/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

frontend/src/utils/index.js

@@ -1,4 +1,5 @@
 import { showFailToast } from 'vant';
+import { usePlayingStore } from '@/stores/playing';
 
 async function postRequest(url, data) {
     const response = await fetch(url, {
@@ -17,7 +18,6 @@ async function postRequest(url, data) {
     return resp_data
 }
 
-
 export {
-    postRequest
+    postRequest,
 }

frontend/src/views/HomeView.vue

@@ -1,21 +1,23 @@
 <script setup>
 import PlayerComponent from '@/components/PlayerComponent.vue';
 import { Space, Button } from 'vant';
-import { ref } from 'vue';
 import { postRequest } from '@/utils';
+import { useBackendStateStore } from '@/stores/backendState'
 
-const can_watch = ref(false);
+const backendStateStore = useBackendStateStore()
 
-fetch("/api/can-start-watching").then((response) => {
-  can_watch.value = response.ok
+backendStateStore.updateCanWatch()
+
+function kill(...names) {
+  postRequest("/api/kill", { names }).then(() => {
+    setTimeout(() => backendStateStore.updatePlaying(), 500)
   })
-
-async function kill(...names) {
-  postRequest("/api/kill", { names })
 }
 
-async function startWatching() {
-  await postRequest("/api/start-watching")
+function startWatching() {
+  postRequest("/api/start-watching").then(() => {
+    setTimeout(() => backendStateStore.updatePlaying(), 500)
+  })
 }
 </script>
 
@@ -23,7 +25,8 @@ async function startWatching() {
   <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="!can_watch" @click="startWatching">Начать потребление
+    <Button type="primary" round size="large" :disabled="!backendStateStore.backendState.canWatch"
+      @click="startWatching">Начать потребление
       анимы</Button>
   </Space>
   <PlayerComponent />