From 1a67539d2caf81a6de846ae6e536ece78155116f Mon Sep 17 00:00:00 2001
From: Jonathan Baecker <jb@pixelcrusher.de>
Date: Fri, 17 Apr 2020 15:02:11 +0200
Subject: [PATCH] add time, work on responsive layout

---
 ffplayout/frontend/pages/control.vue | 124 +++++++++++++++++++++------
 ffplayout/frontend/store/playlist.js |  82 +++++++++++++++++-
 2 files changed, 177 insertions(+), 29 deletions(-)

diff --git a/ffplayout/frontend/pages/control.vue b/ffplayout/frontend/pages/control.vue
index 9f9d1d0e..07839c27 100644
--- a/ffplayout/frontend/pages/control.vue
+++ b/ffplayout/frontend/pages/control.vue
@@ -1,23 +1,37 @@
 <template>
-    <div>
+    <div style="height:99%;">
         <Menu />
         <b-container class="control-container">
-            <b-row>
+            <b-row class="control-row">
                 <b-col cols="3">
                     <b-aspect class="player-col" aspect="16:9">
                         <video-player v-if="videoOptions.sources" reference="videoPlayer" :options="videoOptions" />
                     </b-aspect>
                 </b-col>
                 <b-col cols="9" class="control-col">
-                    control
+                    <b-row style="height:100%;">
+                        <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-col>
+                            control
+                        </b-col>
+                    </b-row>
                 </b-col>
             </b-row>
-            <b-row>
+            <b-row class="date-row">
                 <b-col>
                     <b-datepicker v-model="today" size="sm" class="date-div" offset="-35px" />
                 </b-col>
             </b-row>
-            <splitpanes class="default-theme pane-row">
+            <splitpanes class="list-row default-theme pane-row">
                 <pane min-size="20" size="24">
                     <loading
                         :active.sync="isLoading"
@@ -58,19 +72,22 @@
                                     :key="file.key"
                                     class="browser-item"
                                 >
-                                    <b-link>
-                                        <b-row>
-                                            <b-col cols="1" class="browser-icons-col">
-                                                <b-icon-film class="browser-icons" />
-                                            </b-col>
-                                            <b-col class="browser-item-text">
-                                                {{ file.file }}
-                                            </b-col>
-                                            <b-col cols="1" class="browser-dur-col">
-                                                <span class="duration">{{ file.duration | toMin }}</span>
-                                            </b-col>
-                                        </b-row>
-                                    </b-link>
+                                    <b-row>
+                                        <b-col cols="1" class="browser-icons-col">
+                                            <b-icon-film class="browser-icons" />
+                                        </b-col>
+                                        <b-col class="browser-item-text">
+                                            {{ file.file }}
+                                        </b-col>
+                                        <b-col cols="1" class="browser-play-col">
+                                            <b-link @click="showModal(`/${folderTree.tree[0]}/${file.file}`)">
+                                                <b-icon-play-fill />
+                                            </b-link>
+                                        </b-col>
+                                        <b-col cols="1" class="browser-dur-col">
+                                            <span class="duration">{{ file.duration | toMin }}</span>
+                                        </b-col>
+                                    </b-row>
                                 </b-list-group-item>
                             </b-list-group>
                         </perfect-scrollbar>
@@ -108,7 +125,7 @@
                         <perfect-scrollbar>
                             <b-list-group>
                                 <b-list-group-item v-for="item in playlist" :key="item.key">
-                                    <b-row class="playlist-row">
+                                    <b-row class="playlist-row" :data-in="item.in" :data-out="item.out">
                                         <b-col cols="1">
                                             {{ item.begin | secondsToTime }}
                                         </b-col>
@@ -145,7 +162,7 @@
             ref="prev-modal"
             size="xl"
             centered
-            title="Preview"
+            :title="`Preview: ${previewSource}`"
             hide-footer
         >
             <video-player v-if="previewOptions" reference="previewPlayer" :options="previewOptions" />
@@ -189,7 +206,7 @@ export default {
     computed: {
         ...mapState('config', ['configGui', 'configPlayout']),
         ...mapState('media', ['crumbs', 'folderTree']),
-        ...mapState('playlist', ['playlist'])
+        ...mapState('playlist', ['playlist', 'timeStr', 'timeLeft'])
     },
 
     watch: {
@@ -200,7 +217,6 @@ export default {
 
     async created () {
         await this.getConfig()
-        await this.getPlaylist()
 
         this.extensions = this.configPlayout.storage.extensions.join(' ')
 
@@ -219,6 +235,8 @@ export default {
                 }
             ]
         }
+
+        await this.getPlaylist()
     },
 
     methods: {
@@ -238,6 +256,8 @@ export default {
             await this.$store.dispatch('playlist/getPlaylist', { dayStart: this.configPlayout.playlist.day_start, date: this.today })
         },
         showModal (src) {
+            console.log(src)
+            this.previewSource = src.split('/').slice(-1)[0]
             this.previewOptions = {
                 liveui: false,
                 controls: true,
@@ -261,6 +281,39 @@ export default {
 .control-container {
     width: auto;
     max-width: 100%;
+    height: 97%;
+}
+
+.control-row {
+    height: 25%;
+    min-height: 260px;
+    max-height: 280px;
+}
+
+.time-col {
+    position: relative;
+    height: 100%;
+    min-height: 260px;
+    max-height: 280px;
+    text-align: center;
+}
+
+.time-str {
+    position: relative;
+    top: 45%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    font-size: 8em;
+}
+
+.date-row {
+    height: 3%;
+    min-height: 32px;
+}
+
+.list-row {
+    height: 68%;
 }
 
 .player-col {
@@ -269,11 +322,12 @@ export default {
 }
 
 .pane-row {
-    margin: 8px 0 0 0;
+    margin: 0;
 }
 
 .browser-div {
     width: 100%;
+    max-height: 100%;
 }
 
 .date-div {
@@ -283,22 +337,36 @@ export default {
 
 .playlist-container {
     width: 100%;
+    height: 100%;
 }
 
 .browser-icons-col {
     max-width: 10px;
 }
 
-.browser-dur-col {
-    min-width: 110px;
+.browser-play-col {
+    max-width: 15px;
+    text-align: center;
+    margin: 0;
+    padding: 0;
 }
 
-.browser-div .ps, .playlist-container .ps {
-    height: 600px;
+.browser-dur-col {
+    min-width: 95px;
+    margin: 0;
+    padding: 0 10px 0 0;
+}
+
+.browser-div .ps {
+    height: 93.5%;
+}
+
+.playlist-container .ps {
+    height: 94.5%;
 }
 
 .browser-list {
-    max-height: 600px;
+    max-height: 93%;
     overflow-y: scroll;
 }
 
diff --git a/ffplayout/frontend/store/playlist.js b/ffplayout/frontend/store/playlist.js
index bcaaab13..b8e67391 100644
--- a/ffplayout/frontend/store/playlist.js
+++ b/ffplayout/frontend/store/playlist.js
@@ -1,10 +1,36 @@
+// convert time (00:00:00) string to seconds
+function timeToSeconds (time) {
+    const t = time.split(':')
+    return parseInt(t[0]) * 3600 + parseInt(t[1]) * 60 + parseInt(t[2])
+}
+
 export const state = () => ({
-    playlist: null
+    playlist: null,
+    clockStart: true,
+    progressValue: 0,
+    currentClip: null,
+    timeStr: null,
+    timeLeft: null
 })
 
 export const mutations = {
     UPDATE_PLAYLIST (state, list) {
         state.playlist = list
+    },
+    SET_CLOCK_START (state, bol) {
+        state.clockStart = bol
+    },
+    SET_PROGRESS_VALUE (state, value) {
+        state.clockStart = value
+    },
+    SET_CURRENT_CLIP (state, clip) {
+        state.currentClip = clip
+    },
+    SET_TIME (state, time) {
+        state.timeStr = time
+    },
+    SET_TIME_LEFT (state, time) {
+        state.timeLeft = time
     }
 }
 
@@ -23,6 +49,60 @@ export const actions = {
             }
 
             commit('UPDATE_PLAYLIST', response.data.program)
+            dispatch('animClock')
+        }
+    },
+
+    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
+
+        if (state.clockStart) {
+            commit('SET_CLOCK_START', false)
+
+            // 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
+
+                // animate the progress bar
+                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))
+                }
+
+                start += duration
+
+                if (breakOut) {
+                    break
+                }
+
+                // reset progress
+                commit('SET_PROGRESS_VALUE', 0)
+            }
         }
     }
+
 }