no negative remaining time

components/Control.vue

@@ -26,12 +26,12 @@
                             <div class="row status-row">
                                 <div class="col time-col clock-col">
                                     <div class="time-str">
-                                        {{ playlistStore.timeStr }}
+                                        {{ timeStr }}
                                     </div>
                                 </div>
                                 <div class="col time-col counter-col">
                                     <div class="time-str">
-                                        {{ secToHMS(playlistStore.remainingSec) }}
+                                        {{ secToHMS((playlistStore.remainingSec >= 0) ? playlistStore.remainingSec : 0) }}
                                     </div>
                                 </div>
                                 <div class="col current-clip">
@@ -147,6 +147,7 @@ const contentType = { 'content-type': 'application/json;charset=UTF-8' }
 
 const isPlaying = ref('')
 const breakStatusCheck = ref(false)
+const timeStr = ref('00:00:00')
 const timer = ref()
 const streamExtension = ref(configStore.configGui[configStore.configID].preview_url.split('.').pop())
 const httpStream = ref()
@@ -222,8 +223,8 @@ async function status() {
         /*
             recursive function as a endless loop
         */
-        playlistStore.timeStr = $dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss')
-        const timeInSec = timeToSeconds(playlistStore.timeStr)
+        timeStr.value = $dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss')
+        const timeInSec = timeToSeconds(timeStr.value)
         playlistStore.remainingSec = playlistStore.currentClipStart + playlistStore.currentClipOut - timeInSec
         const playedSec = playlistStore.currentClipOut - playlistStore.remainingSec
         playlistStore.progressValue = (playedSec * 100) / playlistStore.currentClipOut

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ffplayout-frontend",
-      "version": "0.1.1",
+      "version": "0.1.3",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/types": "^2.15.8",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,

stores/playlist.ts

@@ -25,7 +25,6 @@ export const usePlaylist = defineStore('playlist', {
         currentClipDuration: 0,
         currentClipIn: 0,
         currentClipOut: 0,
-        timeStr: '00:00:00',
         remainingSec: 0,
         playoutIsRunning: true,
     }),