fix adit alert, get status from playout stat

components/Control.vue

@@ -228,8 +228,9 @@ async function status() {
         - animate timers
         - when clip end is reached call API again and set new values
     */
+
+    await playlistStore.playoutStat()
     playoutStatus()
-    playlistStore.playoutStat()
 
     async function setStatus(resolve: any) {
         /*
@@ -245,8 +246,8 @@ async function status() {
             return
         } else if ((playlistStore.playoutIsRunning && playlistStore.remainingSec < 0) || timeInSec % 30 === 0) {
             // When 30 seconds a passed, get new status.
+            await playlistStore.playoutStat()
             playoutStatus()
-            playlistStore.playoutStat()
         } else if (!playlistStore.playoutIsRunning) {
             playlistStore.remainingSec = 0
         }
@@ -256,28 +257,15 @@ async function status() {
     return new Promise((resolve) => setStatus(resolve))
 }
 
-async function playoutStatus() {
+function playoutStatus() {
     /*
-        Check if playout is running, when yes set css class.
+        When playout is running, set css class.
     */
-    const channel = configStore.configGui[configStore.configID].id
-
-    await $fetch(`/api/control/${channel}/process/`, {
-        method: 'POST',
-        headers: { ...contentType, ...authStore.authHeader },
-        body: JSON.stringify({ command: 'status' }),
-    })
-        .then((response: any) => {
-            if (response === 'active') {
+    if (playlistStore.playoutIsRunning) {
         isPlaying.value = 'is-playing'
     } else {
-                playlistStore.playoutIsRunning = false
         isPlaying.value = ''
     }
-        })
-        .catch(() => {
-            isPlaying.value = ''
-        })
 }
 
 async function controlProcess(state: string) {
@@ -292,9 +280,9 @@ async function controlProcess(state: string) {
         body: JSON.stringify({ command: state }),
     })
 
-    setTimeout(() => {
+    setTimeout(async () => {
+        await playlistStore.playoutStat()
         playoutStatus()
-        playlistStore.playoutStat()
     }, 1000)
 }
 
@@ -313,9 +301,9 @@ async function controlPlayout(state: string) {
         body: JSON.stringify({ control: state }),
     })
 
-    setTimeout(() => {
+    setTimeout(async () => {
+        await playlistStore.playoutStat()
         playoutStatus()
-        playlistStore.playoutStat()
     }, 1000)
 }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,
@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@nuxt/types": "^2.17.1",
-    "@pinia/nuxt": "^0.4.11",
+    "@pinia/nuxt": "^0.5.1",
     "@popperjs/core": "^2.11.8",
-    "@vueuse/core": "^10.4.1",
+    "@vueuse/core": "^10.5.0",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
     "cookie-universal-nuxt": "^2.2.2",
@@ -24,26 +24,26 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "mpegts.js": "^1.7.3",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
     "sortablejs": "^1.15.0",
     "sortablejs-vue3": "^1.2.9",
     "splitpanes": "^3.1.5",
-    "video.js": "^8.5.2",
+    "video.js": "^8.6.0",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^12.0.0",
-    "@types/bootstrap": "^5.2.7",
-    "@types/lodash": "^4.14.199",
-    "@types/splitpanes": "^2.2.2",
-    "@types/video.js": "^7.3.52",
-    "eslint": "^8.50.0",
+    "@types/bootstrap": "^5.2.8",
+    "@types/lodash": "^4.14.200",
+    "@types/splitpanes": "^2.2.4",
+    "@types/video.js": "^7.3.55",
+    "eslint": "^8.51.0",
     "eslint-plugin-nuxt": "^4.0.0",
     "fibers": "^5.0.3",
-    "nuxt": "3.7.4",
-    "postcss": "^8.4.30",
+    "nuxt": "3.8.0",
+    "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
-    "sass": "^1.68.0",
+    "sass": "^1.69.4",
     "sass-loader": "^13.3.2"
   }
 }

stores/playlist.ts

@@ -25,7 +25,7 @@ export const usePlaylist = defineStore('playlist', {
         currentClipOut: 0,
         ingestRuns: false,
         remainingSec: 0,
-        playoutIsRunning: true,
+        playoutIsRunning: false,
     }),
 
     getters: {},
@@ -81,6 +81,7 @@ export const usePlaylist = defineStore('playlist', {
                         this.currentClipDuration = data.current_media.duration
                         this.currentClipIn = data.current_media.seek
                         this.currentClipOut = data.current_media.out
+                        this.remainingSec = data.remaining_sec
                         this.ingestRuns = data.ingest_runs
                     }
                 })