cleanup, start clock animation in page component, clone fist playlist

This commit is contained in:
Jonathan Baecker 2020-04-30 17:16:27 +02:00
parent a6d87ae49c
commit caad2ebe78

View File

@ -10,15 +10,10 @@ function secToHMS (sec) {
return hours + ':' + minutes + ':' + seconds return hours + ':' + minutes + ':' + seconds
} }
// sleep timer
function sleep (ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
export const state = () => ({ export const state = () => ({
playlist: null, playlist: null,
playlistToday: [],
playlistChannel: 'Channel 1', playlistChannel: 'Channel 1',
clockStart: true,
progressValue: 0, progressValue: 0,
currentClip: 'No clips is playing', currentClip: 'No clips is playing',
timeStr: '00:00:00', timeStr: '00:00:00',
@ -29,12 +24,12 @@ export const mutations = {
UPDATE_PLAYLIST (state, list) { UPDATE_PLAYLIST (state, list) {
state.playlist = list state.playlist = list
}, },
UPDATE_TODAYS_PLAYLIST (state, list) {
state.playlistToday = list
},
UPDATE_PLAYLIST_CHANNEL (state, channel) { UPDATE_PLAYLIST_CHANNEL (state, channel) {
state.playlistChannel = channel state.playlistChannel = channel
}, },
SET_CLOCK_START (state, bol) {
state.clockStart = bol
},
SET_PROGRESS_VALUE (state, value) { SET_PROGRESS_VALUE (state, value) {
state.progressValue = value state.progressValue = value
}, },
@ -57,50 +52,44 @@ export const actions = {
commit('UPDATE_PLAYLIST_CHANNEL', response.data.channel) commit('UPDATE_PLAYLIST_CHANNEL', response.data.channel)
commit('UPDATE_PLAYLIST', this.$processPlaylist(dayStart, response.data.program)) commit('UPDATE_PLAYLIST', this.$processPlaylist(dayStart, response.data.program))
if (process.browser) { if (date === this.$dayjs().format('YYYY-MM-DD')) {
// dispatch('animClock') commit('UPDATE_TODAYS_PLAYLIST', JSON.parse(JSON.stringify(response.data.program)))
} }
} else { } else {
commit('UPDATE_PLAYLIST', []) commit('UPDATE_PLAYLIST', [])
} }
}, },
async animClock ({ commit, dispatch, state, rootState }) { animClock ({ commit, dispatch, state }, { dayStart }) {
let start = this.$timeToSeconds(rootState.config.configPlayout.playlist.day_start) let start = this.$timeToSeconds(dayStart)
let time let time
if (state.clockStart) { // loop over clips in program list from today
commit('SET_CLOCK_START', false) for (let i = 0; i < state.playlistToday.length; i++) {
const duration = state.playlistToday[i].out - state.playlistToday[i].in
const playTime = this.$timeToSeconds(this.$dayjs().format('HH:mm:ss')) - start
let updateSrc = true
// loop over clips in program list from today // animate the progress bar
for (let i = 0; i < state.playlist.length; i++) { if (playTime <= duration) {
const duration = state.playlist[i].out - state.playlist[i].in if (updateSrc) {
let playTime = this.$timeToSeconds(this.$dayjs().format('HH:mm:ss')) - start commit('SET_CURRENT_CLIP', state.playlistToday[i].source)
let updateSrc = true updateSrc = false
// animate the progress bar
while (playTime <= duration) {
if (updateSrc) {
commit('SET_CURRENT_CLIP', state.playlist[i].source)
updateSrc = false
}
const pValue = playTime * 100 / duration
time = this.$dayjs().format('HH:mm:ss')
commit('SET_PROGRESS_VALUE', pValue)
commit('SET_TIME', time)
playTime += 5
commit('SET_TIME_LEFT', secToHMS(duration - playTime))
await sleep(5000)
} }
start += duration const pValue = playTime * 100 / duration
// reset progress time = this.$dayjs().add(1, 'seconds').format('HH:mm:ss')
commit('SET_PROGRESS_VALUE', 0) commit('SET_PROGRESS_VALUE', pValue)
commit('SET_TIME', time)
commit('SET_TIME_LEFT', secToHMS(duration - playTime))
break
} }
start += duration
// reset progress
commit('SET_PROGRESS_VALUE', 0)
} }
} }
} }