use utcOffset from playout system, add custom_filter to playlist function, add edit button

package.json

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

pages/configure.vue

@@ -22,7 +22,7 @@
                                 </div>
                                 <div v-for="(prop, name, idx) in configGui[configID]" :key="idx">
                                     <b-form-group
-                                        v-if="idx >= 1"
+                                        v-if="name !== 'id' && name !== 'utc_offset'"
                                         label-cols-sm="2"
                                         :label="name"
                                         label-align-sm="right"

pages/logging.vue

@@ -53,7 +53,7 @@ export default {
     data () {
         return {
             currentLog: null,
-            listDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'),
+            listDate: this.$dayjs().utcOffset(0).format('YYYY-MM-DD'),
             scrollOP: {
                 wheelSpeed: 5,
                 minScrollbarLength: 30
@@ -62,7 +62,7 @@ export default {
     },
 
     computed: {
-        ...mapState('config', ['configID', 'timezone'])
+        ...mapState('config', ['configID', 'utcOffset'])
     },
 
     watch: {
@@ -76,6 +76,7 @@ export default {
     },
 
     async created () {
+        this.listDate = this.$dayjs().utcOffset(this.utcOffset).format('YYYY-MM-DD')
         await this.getLog()
     },
 
@@ -83,7 +84,7 @@ export default {
         async getLog () {
             let date = this.listDate
 
-            if (date === this.$dayjs().tz(this.timezone).format('YYYY-MM-DD')) {
+            if (date === this.$dayjs().utcOffset(this.utcOffset).format('YYYY-MM-DD')) {
                 date = ''
             }
 

pages/player.vue

@@ -229,6 +229,9 @@
                                     <b-col cols="1" class="text-center playlist-input">
                                         Ad
                                     </b-col>
+                                    <b-col cols="1" class="text-center playlist-input">
+                                        Edit
+                                    </b-col>
                                     <b-col cols="1" class="text-center playlist-input">
                                         Delete
                                     </b-col>
@@ -287,6 +290,11 @@
                                                     unchecked-value=""
                                                 />
                                             </b-col>
+                                            <b-col cols="1" class="text-center playlist-input">
+                                                <b-link @click="editItem(index)">
+                                                    <b-icon-pencil-square />
+                                                </b-link>
+                                            </b-col>
                                             <b-col cols="1" class="text-center playlist-input">
                                                 <b-link @click="removeItemFromPlaylist(index)">
                                                     <b-icon-x-circle-fill />
@@ -357,7 +365,7 @@
         <b-modal
             id="add-source-modal"
             ref="add-source-modal"
-            title="Add (remote) Source"
+            title="Add/Edit Source"
             @ok="handleSource"
         >
             <form ref="form" @submit.stop.prevent="addSource">
@@ -376,6 +384,9 @@
                 <b-form-group label="Audio" label-for="audio-input">
                     <b-form-input id="audio-input" v-model="newSource.audio" />
                 </b-form-group>
+                <b-form-group label="Custom Filter" label-for="filter-input">
+                    <b-form-input id="filter-input" v-model="newSource.custom_filter" />
+                </b-form-group>
                 <b-form-checkbox
                     id="ad-input"
                     v-model="newSource.category"
@@ -430,8 +441,8 @@ export default {
             browserIsLoading: false,
             playlistIsLoading: false,
             isPlaying: '',
-            listDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'),
+            listDate: this.$dayjs().format('YYYY-MM-DD'),
-            targetDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'),
+            targetDate: this.$dayjs().format('YYYY-MM-DD'),
             interval: null,
             videoOptions: {
                 liveui: true,
@@ -459,19 +470,21 @@ export default {
                 suppressScrollX: true,
                 minScrollbarLength: 30
             },
+            editId: undefined,
             newSource: {
                 begin: 0,
                 in: 0,
                 out: 0,
                 duration: 0,
                 category: '',
+                custom_filter: '',
                 source: ''
             }
         }
     },
 
     computed: {
-        ...mapState('config', ['configID', 'configGui', 'configPlayout', 'timezone', 'startInSec']),
+        ...mapState('config', ['configID', 'configGui', 'configPlayout', 'utcOffset', 'startInSec']),
         ...mapState('media', ['crumbs', 'folderTree']),
         ...mapState('playlist', [
             'timeStr', 'timeLeft', 'currentClip', 'progressValue', 'currentClipIndex',
@@ -509,6 +522,9 @@ export default {
     },
 
     async created () {
+        this.listDate = this.$dayjs().utcOffset(this.utcOffset).format('YYYY-MM-DD')
+        this.targetDate = this.listDate
+
         this.videoOptions.sources = [
             {
                 type: 'application/x-mpegURL',
@@ -519,11 +535,11 @@ export default {
         this.getStatus()
         await this.getPath('')
 
-        const timeInSec = this.$timeToSeconds(this.$dayjs().tz(this.timezone).format('HH:mm:ss'))
+        const timeInSec = this.$timeToSeconds(this.$dayjs().utcOffset(this.utcOffset).format('HH:mm:ss'))
         const listStartSec = this.$timeToSeconds(this.configPlayout.playlist.day_start)
 
         if (listStartSec > timeInSec) {
-            this.listDate = this.$dayjs(this.listDate).tz(this.timezone).subtract(1, 'day').format('YYYY-MM-DD')
+            this.listDate = this.$dayjs(this.listDate).utcOffset(this.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
         }
 
         await this.getPlaylist()
@@ -707,12 +723,11 @@ export default {
 
         async savePlaylist (saveDate) {
             this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, this.playlist))
-
             const saveList = this.playlist.map(({ begin, ...item }) => item)
 
             const postSave = await this.$axios.post(
                 `api/playlist/${this.configGui[this.configID].id}/`,
-                { channel: this.$store.state.config.configGui.channel, date: saveDate, program: saveList }
+                { channel: this.configGui[this.configID].name, date: saveDate, program: saveList }
             )
 
             if (postSave.status === 200 || postSave.status === 201) {
@@ -765,9 +780,14 @@ export default {
         },
 
         addSource () {
+            if (this.editId === undefined) {
                 const list = this.playlist
                 list.push(this.newSource)
                 this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, list))
+            } else {
+                this.playlist[this.editId] = this.newSource
+                this.editId = undefined
+            }
 
             this.newSource = {
                 begin: 0,
@@ -775,12 +795,29 @@ export default {
                 out: 0,
                 duration: 0,
                 category: '',
+                custom_filter: '',
                 source: ''
             }
 
             this.$nextTick(() => {
                 this.$bvModal.hide('add-source-modal')
             })
+        },
+
+        editItem (i) {
+            this.editId = i
+
+            this.newSource = {
+                begin: this.playlist[i].begin,
+                in: this.playlist[i].in,
+                out: this.playlist[i].out,
+                duration: this.playlist[i].duration,
+                category: this.playlist[i].category,
+                custom_filter: this.playlist[i].custom_filter,
+                source: this.playlist[i].source
+            }
+
+            this.$bvModal.show('add-source-modal')
         }
     }
 }

plugins/helpers.js

@@ -9,8 +9,16 @@ export default ({ app }, inject) => {
         for (const item of list) {
             item.begin = begin
 
+            if (!item.audio) {
+                delete item.audio
+            }
+
             if (!item.category) {
-                item.category = ''
+                delete item.category
+            }
+
+            if (!item.custom_filter) {
+                delete item.custom_filter
             }
 
             begin += (item.out - item.in)

store/auth.js

@@ -26,7 +26,7 @@ export const mutations = {
 }
 
 export const actions = {
-    async obtainToken ({ commit, state }, { username, password }) {
+    async obtainToken ({ commit }, { username, password }) {
         const payload = {
             username,
             password
@@ -45,7 +45,7 @@ export const actions = {
         return code
     },
 
-    inspectToken ({ commit, dispatch, state }) {
+    inspectToken ({ commit, state }) {
         const token = this.$cookies.get('token')
 
         if (token) {

store/config.js

@@ -10,7 +10,7 @@ export const state = () => ({
     configPlayout: {},
     currentUser: null,
     configUser: null,
-    timezone: 'UTC'
+    utcOffset: 0
 })
 
 export const mutations = {
@@ -41,13 +41,13 @@ export const mutations = {
     UPDATE_USER_CONFIG (state, config) {
         state.configUser = config
     },
-    UPDATE_TIMEZONE (state, zone) {
+    UPDATE_UTC_OFFSET (state, offset) {
-        state.timezone = zone
+        state.utcOffset = offset
     }
 }
 
 export const actions = {
-    async nuxtClientInit ({ commit, dispatch, rootState }) {
+    async nuxtClientInit ({ dispatch, rootState }) {
         await dispatch('auth/inspectToken', null, { root: true })
         if (rootState.auth.isLogin) {
             await dispatch('getGuiConfig')
@@ -56,7 +56,7 @@ export const actions = {
         }
     },
 
-    async getGuiConfig ({ commit, state }) {
+    async getGuiConfig ({ commit }) {
         const response = await this.$axios.get('api/channels')
 
         if (response.data) {
@@ -68,7 +68,7 @@ export const actions = {
                 }
             }
 
-            commit('UPDATE_TIMEZONE', response.data[0].timezone)
+            commit('UPDATE_UTC_OFFSET', response.data[0].utc_offset)
             commit('UPDATE_GUI_CONFIG', response.data)
             commit('UPDATE_GUI_CONFIG_RAW', _.cloneDeep(response.data))
             commit('UPDATE_CONFIG_COUNT', response.data.length)
@@ -78,7 +78,8 @@ export const actions = {
                 channel: '',
                 preview_url: '',
                 playout_config: '',
-                extra_extensions: []
+                extra_extensions: [],
+                utc_offset: 0
             }])
         }
     },
@@ -133,13 +134,13 @@ export const actions = {
         }
     },
 
-    async setPlayoutConfig ({ commit, state }, obj) {
+    async setPlayoutConfig ({ state }, obj) {
         const channel = state.configGui[state.configID].id
         const update = await this.$axios.put(`api/playout/config/${channel}`, obj)
         return update
     },
 
-    async getUserConfig ({ commit, state }) {
+    async getUserConfig ({ commit }) {
         const user = await this.$axios.get('api/user')
 
         if (user.data) {
@@ -150,7 +151,7 @@ export const actions = {
         }
     },
 
-    async setUserConfig ({ commit, state }, obj) {
+    async setUserConfig (obj) {
         const update = await this.$axios.put(`api/user/${obj.id}`, obj)
         return update
     }

store/media.js

@@ -17,7 +17,7 @@ export const mutations = {
 }
 
 export const actions = {
-    async getTree ({ commit, dispatch, state, rootState }, { path }) {
+    async getTree ({ commit, rootState }, { path }) {
         const crumbs = []
         let root = '/'
         const channel = rootState.config.configGui[rootState.config.configID].id

store/playlist.js

@@ -51,13 +51,13 @@ export const mutations = {
 }
 
 export const actions = {
-    async getPlaylist ({ commit, dispatch, state, rootState }, { date }) {
+    async getPlaylist ({ commit, rootState }, { date }) {
-        const timeInSec = this.$timeToSeconds(this.$dayjs().tz(rootState.config.timezone).format('HH:mm:ss'))
+        const timeInSec = this.$timeToSeconds(this.$dayjs().utcOffset(rootState.config.utcOffset).format('HH:mm:ss'))
         const channel = rootState.config.configGui[rootState.config.configID].id
-        let dateToday = this.$dayjs().tz(this.timezone).format('YYYY-MM-DD')
+        let dateToday = this.$dayjs().utcOffset(rootState.config.utcOffset).format('YYYY-MM-DD')
 
         if (rootState.config.startInSec > timeInSec) {
-            dateToday = this.$dayjs(dateToday).tz(rootState.config.timezone).subtract(1, 'day').format('YYYY-MM-DD')
+            dateToday = this.$dayjs(dateToday).utcOffset(rootState.config.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
         }
 
         const response = await this.$axios.get(`api/playlist/${channel}?date=${date}`)
@@ -75,9 +75,9 @@ export const actions = {
         }
     },
 
-    async playoutStat ({ commit, dispatch, state, rootState }) {
+    async playoutStat ({ commit, state, rootState }) {
         const channel = rootState.config.configGui[rootState.config.configID].id
-        const time = this.$dayjs().tz(rootState.config.timezone).format('HH:mm:ss')
+        const time = this.$dayjs().utcOffset(rootState.config.utcOffset).format('HH:mm:ss')
         let timeSec = this.$timeToSeconds(time)
 
         commit('SET_TIME', time)