diff --git a/ffplayout/frontend/pages/control.vue b/ffplayout/frontend/pages/control.vue
index 26138c4c..23ba99ce 100644
--- a/ffplayout/frontend/pages/control.vue
+++ b/ffplayout/frontend/pages/control.vue
@@ -110,28 +110,35 @@
{{ folder }}
-
-
-
-
-
-
- {{ file.file }}
-
-
-
-
-
-
-
- {{ file.duration | toMin }}
-
-
-
+
+
+
+
+
+
+ {{ file.file }}
+
+
+
+
+
+
+
+ {{ file.duration | toMin }}
+
+
+
+
@@ -144,10 +151,10 @@
Start
-
+
File
-
+
Play
@@ -159,7 +166,10 @@
Out
-
+
+ Ad
+
+
Delete
@@ -167,33 +177,49 @@
-
-
-
- {{ item.begin | secondsToTime }}
-
-
- {{ item.source | filename }}
-
-
-
-
-
-
-
- {{ item.duration | secondsToTime }}
-
-
- {{ item.in | secondsToTime }}
-
-
- {{ item.out | secondsToTime }}
-
-
-
-
-
-
+
+
+
+
+ {{ item.begin | secondsToTime }}
+
+
+ {{ item.source | filename }}
+
+
+
+
+
+
+
+ {{ item.duration | secondsToTime }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -240,7 +266,15 @@ export default {
}
},
secondsToTime (sec) {
- return new Date(sec * 1000).toISOString().substr(11, 8)
+ 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
}
},
@@ -259,7 +293,16 @@ export default {
computed: {
...mapState('config', ['configGui', 'configPlayout']),
...mapState('media', ['crumbs', 'folderTree']),
- ...mapState('playlist', ['playlist', 'timeStr', 'timeLeft', 'currentClip', 'progressValue'])
+ ...mapState('playlist', ['timeStr', 'timeLeft', 'currentClip', 'progressValue']),
+ playlist: {
+ get () {
+ return this.$store.state.playlist.playlist
+ },
+ set (list) {
+ this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(
+ this.configPlayout.playlist.day_start, list))
+ }
+ }
},
watch: {
@@ -326,11 +369,38 @@ export default {
}
this.$root.$emit('bv::show::modal', 'preview-modal')
},
- resetPlaylist () {
- console.log('reset playlist')
+ cloneClip ({ file, duration }) {
+ return {
+ source: `/${this.folderTree.tree[0]}/${file}`,
+ in: 0,
+ out: duration,
+ duration
+ }
+ },
+ changeTime (pos, index, input) {
+ if (input.match(/(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)/gm)) {
+ const sec = this.$timeToSeconds(input)
+
+ if (pos === 'in') {
+ this.playlist[index].in = sec
+ } else if (pos === 'out') {
+ this.playlist[index].out = sec
+ }
+
+ this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(
+ this.configPlayout.playlist.day_start, this.playlist))
+ }
+ },
+ removeItemFromPlaylist (index) {
+ this.playlist.splice(index, 1)
+ },
+ async resetPlaylist () {
+ await this.$store.dispatch('playlist/getPlaylist', { dayStart: this.configPlayout.playlist.day_start, date: this.today })
},
savePlaylist () {
- console.log('save playlist')
+ console.log(this.playlist)
+ this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(
+ this.configPlayout.playlist.day_start, this.playlist))
}
}
}
@@ -394,6 +464,8 @@ export default {
.current-clip-text {
height: 70%;
+ padding-top: 1em;
+ font-weight: bold;
}
.current-clip-progress {
@@ -536,6 +608,24 @@ export default {
.timecode {
min-width: 56px;
+ max-width: 90px;
+}
+
+.playlist-input {
+ min-width: 35px;
+ max-width: 60px;
+}
+
+.timecode input {
+ border-color: #515763;
+}
+
+.playlist-item:nth-of-type(even), .playlist-item:nth-of-type(even) div .timecode input {
+ background-color: #3b424a;
+}
+
+.playlist-item:nth-of-type(even):hover {
+ background-color: #1C1E22;
}