diff --git a/.gitignore b/.gitignore index d0210244..bb719803 100644 --- a/.gitignore +++ b/.gitignore @@ -96,3 +96,5 @@ tv-media tv-media/ Videos Videos/ +live +live/ diff --git a/assets/scss/globals.scss b/assets/scss/globals.scss index 261a3298..bfc0a723 100644 --- a/assets/scss/globals.scss +++ b/assets/scss/globals.scss @@ -13,7 +13,7 @@ .date-row { height: 40px; width: 100%; - padding-top: 5px; + padding-top: 7px; margin: 0; } diff --git a/nuxt.config.js b/nuxt.config.js index e2b7ad90..ef451a3a 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,5 +1,3 @@ -require('dotenv').config() - export default { ssr: false, /* @@ -79,7 +77,7 @@ export default { ** See https://axios.nuxtjs.org/options */ axios: { - baseURL: process.env.API_URL + baseURL: '/' }, dayjs: { diff --git a/pages/message.vue b/pages/message.vue index 02711139..557fe340 100644 --- a/pages/message.vue +++ b/pages/message.vue @@ -99,6 +99,21 @@ /> + + + + + @@ -123,6 +138,21 @@ /> + + + + + - + - + @@ -52,7 +52,7 @@ class="control-button control-button-play" :class="isPlaying" variant="primary" - @click="playoutControl('start')" + @click="controlProcess('start')" > @@ -64,25 +64,61 @@ title="Stop Playout Service" class="control-button control-button-stop" variant="primary" - @click="playoutControl('stop')" + @click="controlProcess('stop')" > -
+
+ +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ @@ -102,7 +138,7 @@ + + + + @@ -346,7 +392,8 @@ export default { data () { return { - isLoading: false, + browserIsLoading: false, + playlistIsLoading: false, isPlaying: '', listDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'), targetDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'), @@ -399,7 +446,9 @@ export default { watch: { listDate () { + this.playlistIsLoading = true this.getPlaylist() + this.playlistIsLoading = false setTimeout(() => { scrollTo(this) }, 5000) }, @@ -440,14 +489,20 @@ export default { }, mounted () { - if (process.env.NODE_ENV === 'production') { - this.interval = setInterval(() => { - this.$store.dispatch('playlist/animClock') - this.getStatus() - }, 5000) - } else { - this.$store.dispatch('playlist/animClock') - } + // if (process.env.NODE_ENV === 'production') { + // this.interval = setInterval(() => { + // this.$store.dispatch('playlist/animClock') + // this.getStatus() + // }, 5000) + // } else { + // this.$store.dispatch('playlist/animClock') + // } + + this.interval = setInterval(() => { + this.$store.dispatch('playlist/playoutStat') + this.getStatus() + }, 5000) + this.$store.dispatch('playlist/playoutStat') const streamExtension = this.configGui[this.configID].preview_url.split('.').pop() let player @@ -479,25 +534,32 @@ export default { methods: { async getPath (extensions, path) { - this.isLoading = true + this.browserIsLoading = true await this.$store.dispatch('media/getTree', { extensions, path }) - this.isLoading = false + this.browserIsLoading = false }, async getStatus () { const channel = this.configGui[this.configID].id const status = await this.$axios.post(`api/control/${channel}/process/`, { command: 'status' }) - if (status.data.data && (status.data.data === 'RUNNING' || status.data.data === 'active')) { + if (status.data && status.data === 'active') { this.isPlaying = 'is-playing' } else { this.isPlaying = '' } }, - async playoutControl (state) { + async controlProcess (state) { const channel = this.configGui[this.configID].id - await this.$axios.post(`api/control/${channel}/process/`, { run: state }) + await this.$axios.post(`api/control/${channel}/process/`, { command: state }) + + setTimeout(() => { this.getStatus() }, 1000) + }, + + async controlPlayout (state) { + const channel = this.configGui[this.configID].id + await this.$axios.post(`api/control/${channel}/playout/`, { command: state }) setTimeout(() => { this.getStatus() }, 1000) }, @@ -592,39 +654,50 @@ export default { this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, tempList)) }, + async generatePlaylist (listDate) { + this.playlistIsLoading = true + const generate = await this.$axios.get( + `api/playlist/${this.configGui[this.configID].id}/generate/${listDate}` + ) + this.playlistIsLoading = false + + if (generate.status === 200 || generate.status === 201) { + this.$store.commit('UPDATE_VARIANT', 'success') + this.$store.commit('UPDATE_SHOW_ERROR_ALERT', true) + this.$store.commit('UPDATE_ERROR_ALERT_MESSAGE', 'Generate Playlist done...') + this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, generate.data.program)) + + setTimeout(() => { this.$store.commit('UPDATE_SHOW_ERROR_ALERT', false) }, 2000) + } + }, + 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/player/playlist/', - { - data: { channel: this.$store.state.config.configGui.channel, date: saveDate, program: saveList }, - channel: this.configGui[this.configID].id - } + `api/playlist/${this.configGui[this.configID].id}/`, + { channel: this.$store.state.config.configGui.channel, date: saveDate, program: saveList } ) if (postSave.status === 200 || postSave.status === 201) { this.$store.commit('UPDATE_VARIANT', 'success') this.$store.commit('UPDATE_SHOW_ERROR_ALERT', true) - this.$store.commit('UPDATE_ERROR_AERT_MESSAGE', 'Playlist saved...') + this.$store.commit('UPDATE_ERROR_ALERT_MESSAGE', 'Playlist saved...') setTimeout(() => { this.$store.commit('UPDATE_SHOW_ERROR_ALERT', false) }, 2000) } }, async deletePlaylist (playlistDate) { - this.$store.commit('playlist/UPDATE_PLAYLIST', []) - const date = playlistDate.split('-') - const playlistPath = `${this.configPlayout.playlist.path}/${date[0]}/${date[1]}/${playlistDate}.json` - - const postDelete = await this.$axios.post('api/player/playlist/', { data: { delete: playlistPath } }) + const postDelete = await this.$axios.delete(`api/playlist/${this.configGui[this.configID].id}/${playlistDate}`) if (postDelete.status === 200 || postDelete.status === 201) { + this.$store.commit('playlist/UPDATE_PLAYLIST', []) this.$store.commit('UPDATE_VARIANT', 'success') this.$store.commit('UPDATE_SHOW_ERROR_ALERT', true) - this.$store.commit('UPDATE_ERROR_AERT_MESSAGE', 'Playlist deleted...') + this.$store.commit('UPDATE_ERROR_ALERT_MESSAGE', 'Playlist deleted...') setTimeout(() => { this.$store.commit('UPDATE_SHOW_ERROR_ALERT', false) }, 2000) } @@ -655,7 +728,6 @@ export default { .player-col { max-width: 542px; min-width: 380px; - margin-bottom: 6px; } .control-col { @@ -696,6 +768,10 @@ export default { height: 100%; } +.control-button-control { + color: #06aad3; +} + .status-row { height: 100%; min-width: 370px; diff --git a/plugins/axios.js b/plugins/axios.js index 18366ceb..86d2baa2 100644 --- a/plugins/axios.js +++ b/plugins/axios.js @@ -6,7 +6,7 @@ export default function ({ $axios, store, redirect, route }) { } // disable progress on auth - if (config.url.includes('auth') || config.url.includes('system')) { + if (config.url.includes('auth') || config.url.includes('process') || config.url.includes('current')) { config.progress = false } }) @@ -41,7 +41,7 @@ export default function ({ $axios, store, redirect, route }) { } else if (code !== 401) { store.commit('UPDATE_VARIANT', 'danger') store.commit('UPDATE_SHOW_ERROR_ALERT', true) - store.commit('UPDATE_ERROR_AERT_MESSAGE', error) + store.commit('UPDATE_ERROR_ALERT_MESSAGE', error) } }) } diff --git a/store/index.js b/store/index.js index 3004c386..ab0cd4ec 100644 --- a/store/index.js +++ b/store/index.js @@ -13,7 +13,7 @@ export const mutations = { UPDATE_VARIANT (state, variant) { state.variant = variant }, - UPDATE_ERROR_AERT_MESSAGE (state, message) { + UPDATE_ERROR_ALERT_MESSAGE (state, message) { state.ErrorAlertMessage = message } } diff --git a/store/playlist.js b/store/playlist.js index e79577e8..2b8b7b17 100644 --- a/store/playlist.js +++ b/store/playlist.js @@ -67,7 +67,6 @@ export const actions = { if (date === dateToday) { commit('UPDATE_TODAYS_PLAYLIST', _.cloneDeep(response.data.program)) - dispatch('setCurrentClip') } else { commit('SET_CURRENT_CLIP_INDEX', null) } @@ -76,43 +75,8 @@ export const actions = { } }, - setCurrentClip ({ commit, dispatch, state, rootState }) { - let begin - let lastTime = this.$timeToSeconds(this.$dayjs().tz(rootState.config.timezone).format('HH:mm:ss')) - - if (Number.isFinite(rootState.config.startInSec)) { - begin = rootState.config.startInSec - } else { - commit('SET_CURRENT_CLIP', 'day_start is not set, cannot calculate current clip') - return - } - - if (lastTime < begin) { - lastTime += rootState.config.playlistLength - } - - for (let i = 0; i < state.playlistToday.length; i++) { - const duration = state.playlistToday[i].out - state.playlistToday[i].in - - // animate the progress bar - if (lastTime < begin + duration) { - const progValue = (lastTime - begin) * 100 / duration - commit('SET_PROGRESS_VALUE', progValue) - commit('SET_CURRENT_CLIP', state.playlistToday[i].source) - commit('SET_CURRENT_CLIP_INDEX', i) - commit('SET_CURRENT_CLIP_START', begin) - commit('SET_CURRENT_CLIP_DURATION', duration) - commit('SET_CURRENT_CLIP_IN', state.playlistToday[i].in) - commit('SET_CURRENT_CLIP_OUT', state.playlistToday[i].out) - - break - } - - begin += duration - } - }, - - animClock ({ commit, dispatch, state, rootState }) { + async playoutStat ({ commit, dispatch, state, rootState }) { + const channel = rootState.config.configGui[rootState.config.configID].id const time = this.$dayjs().tz(rootState.config.timezone).format('HH:mm:ss') let timeSec = this.$timeToSeconds(time) @@ -126,16 +90,19 @@ export const actions = { return } - const playTime = timeSec - state.currentClipStart - const progValue = playTime * 100 / state.currentClipDuration + const response = await this.$axios.get(`api/control/${channel}/media/current`) - // set progress bar value - if (playTime <= state.currentClipDuration && progValue >= 0) { + if (response.data) { + const obj = response.data.result + const progValue = obj.played_sec * 100 / obj.current_media.out commit('SET_PROGRESS_VALUE', progValue) - commit('SET_TIME_LEFT', this.$secToHMS(state.currentClipDuration - playTime)) - } else { - commit('SET_PROGRESS_VALUE', 0) - dispatch('setCurrentClip') + commit('SET_CURRENT_CLIP', obj.current_media.source) + commit('SET_CURRENT_CLIP_INDEX', obj.index) + commit('SET_CURRENT_CLIP_START', obj.start_sec) + commit('SET_CURRENT_CLIP_DURATION', obj.current_media.duration) + commit('SET_CURRENT_CLIP_IN', obj.current_media.seek) + commit('SET_CURRENT_CLIP_OUT', obj.current_media.out) + commit('SET_TIME_LEFT', this.$secToHMS(obj.remaining_sec)) } } }