From 86f188b630fee27972ca83e8bcfc0942a8f9f1cc Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Sun, 19 Apr 2020 21:41:14 +0200
Subject: [PATCH] working on timer

---
 ffplayout/frontend/pages/control.vue | 62 ++++++++++++++++++----------
 ffplayout/frontend/store/playlist.js | 50 +++++++++++++---------
 2 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/ffplayout/frontend/pages/control.vue b/ffplayout/frontend/pages/control.vue
index 07839c27..56a8b405 100644
--- a/ffplayout/frontend/pages/control.vue
+++ b/ffplayout/frontend/pages/control.vue
@@ -10,17 +10,29 @@
                 </b-col>
                 <b-col cols="9" class="control-col">
                     <b-row style="height:100%;">
-                        <b-col class="time-col">
-                            <div class="time-str">
-                                {{ timeStr }}
+                        <b-col cols="8">
+                            <b-row>
+                                <b-col class="time-col">
+                                    <div class="time-str">
+                                        {{ timeStr }}
+                                    </div>
+                                </b-col>
+                                <b-col class="time-col">
+                                    <div class="time-str">
+                                        {{ timeLeft }}
+                                    </div>
+                                </b-col>
+                            </b-row>
+                            <div class="current-clip">
+                                <div class="current-clip-text">
+                                    {{ currentClip | filename }}
+                                </div>
+                                <div class="current-clip-progress">
+                                    <b-progress :value="progressValue" variant="warning" />
+                                </div>
                             </div>
                         </b-col>
-                        <b-col class="time-col">
-                            <div class="time-str">
-                                {{ timeLeft }}
-                            </div>
-                        </b-col>
-                        <b-col>
+                        <b-col cols="4">
                             control
                         </b-col>
                     </b-row>
@@ -183,8 +195,10 @@ export default {
 
     filters: {
         filename (path) {
-            const pathArr = path.split('/')
-            return pathArr[pathArr.length - 1]
+            if (path) {
+                const pathArr = path.split('/')
+                return pathArr[pathArr.length - 1]
+            }
         },
         secondsToTime (sec) {
             return new Date(sec * 1000).toISOString().substr(11, 8)
@@ -206,7 +220,7 @@ export default {
     computed: {
         ...mapState('config', ['configGui', 'configPlayout']),
         ...mapState('media', ['crumbs', 'folderTree']),
-        ...mapState('playlist', ['playlist', 'timeStr', 'timeLeft'])
+        ...mapState('playlist', ['playlist', 'timeStr', 'timeLeft', 'currentClip', 'progressValue'])
     },
 
     watch: {
@@ -291,20 +305,24 @@ export default {
 }
 
 .time-col {
-    position: relative;
-    height: 100%;
-    min-height: 260px;
-    max-height: 280px;
+    background: #32383E;
+    margin-right: .5em;
     text-align: center;
+    border-radius: 0.25rem;
 }
 
 .time-str {
-    position: relative;
-    top: 45%;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-    font-size: 8em;
+    font-family: 'DigitalNumbers-Regular';
+    font-size: 5em;
+    letter-spacing: -.15em;
+}
+
+.current-clip {
+    background: #32383E;
+    height: 40%;
+    margin: .5em .5em 0 0;
+    padding: 15px;
+    border-radius: 0.25rem;
 }
 
 .date-row {
diff --git a/ffplayout/frontend/store/playlist.js b/ffplayout/frontend/store/playlist.js
index b8e67391..39844367 100644
--- a/ffplayout/frontend/store/playlist.js
+++ b/ffplayout/frontend/store/playlist.js
@@ -4,6 +4,32 @@ function timeToSeconds (time) {
     return parseInt(t[0]) * 3600 + parseInt(t[1]) * 60 + parseInt(t[2])
 }
 
+function secToHMS (sec) {
+    let hours = Math.floor(sec / 3600)
+    sec %= 3600
+    let minutes = Math.floor(sec / 60)
+    let seconds = sec % 60
+
+    minutes = String(minutes).padStart(2, '0')
+    hours = String(hours).padStart(2, '0')
+    seconds = String(parseInt(seconds)).padStart(2, '0')
+    return hours + ':' + minutes + ':' + seconds
+}
+
+// sleep timer
+function sleep (ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+/*
+const counte = (function main (counter) {
+    console.log(counter)
+
+    if (counter < 20) {
+        setTimeout(main, 1000, counter + 1)
+    }
+})(0)
+*/
 export const state = () => ({
     playlist: null,
     clockStart: true,
@@ -21,7 +47,7 @@ export const mutations = {
         state.clockStart = bol
     },
     SET_PROGRESS_VALUE (state, value) {
-        state.clockStart = value
+        state.progressValue = value
     },
     SET_CURRENT_CLIP (state, clip) {
         state.currentClip = clip
@@ -54,11 +80,6 @@ export const actions = {
     },
 
     async animClock ({ commit, dispatch, state, rootState }) {
-        // sleep timer
-        function sleep (ms) {
-            return new Promise(resolve => setTimeout(resolve, ms))
-        }
-
         let start = timeToSeconds(rootState.config.configPlayout.playlist.day_start)
         let time
 
@@ -67,7 +88,6 @@ export const actions = {
 
             // loop over clips in program list from today
             for (let i = 0; i < state.playlist.length; i++) {
-                let breakOut = false
                 const duration = state.playlist[i].out - state.playlist[i].in
                 let playTime = timeToSeconds(this.$dayjs().format('HH:mm:ss')) - start
                 let updateSrc = true
@@ -76,29 +96,21 @@ export const actions = {
                 while (playTime <= duration) {
                     if (updateSrc) {
                         commit('SET_CURRENT_CLIP', state.playlist[i].source)
-                        console.log(state.currentClip)
                         updateSrc = false
                     }
-                    await sleep(1000)
+
                     const pValue = playTime * 100 / duration
-                    if (pValue < state.progressValue) {
-                        breakOut = true
-                        break
-                    }
 
                     time = this.$dayjs().format('HH:mm:ss')
                     commit('SET_PROGRESS_VALUE', pValue)
                     commit('SET_TIME', time)
-                    playTime = timeToSeconds(time) - start
-                    commit('SET_TIME_LEFT', new Date((duration - playTime) * 1000).toISOString().substr(11, 8))
+                    playTime += 1
+                    commit('SET_TIME_LEFT', secToHMS(duration - playTime))
+                    await sleep(1000)
                 }
 
                 start += duration
 
-                if (breakOut) {
-                    break
-                }
-
                 // reset progress
                 commit('SET_PROGRESS_VALUE', 0)
             }