djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

get right day when day_start is short before current time, fix #50

Browse Source
This commit is contained in:
jb-alvarado 2021-01-28 15:53:18 +01:00
parent 872512a401
commit 42a8d3402a
2 changed files with 62 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
pages/player.vue
View File

@ -220,9 +220,6 @@
</b-col>
<b-col class="grabbing">
{{ item.source | filename }}
<div class="clip-progress">
<b-progress v-if="index === currentClipIndex" height="2px" :value="progressValue" />
</div>
</b-col>
<b-col cols="1" class="text-center playlist-input">
<b-link @click="showModal(item.source)">
@ -298,6 +295,21 @@
import { mapState } from 'vuex'
import Menu from '@/components/Menu.vue'
function scrollTo (t) {
let child
if (t.currentClipIndex === null) {
child = document.getElementById('clip_0')
} else {
child = document.getElementById(`clip_${t.currentClipIndex}`)
}
if (child) {
const parent = document.getElementById('scroll-container')
const topPos = child.offsetTop
parent.scrollTop = topPos - 50
}
}
export default {
name: 'Player',
@ -324,8 +336,7 @@ export default {
videoOptions: {},
previewOptions: {},
previewComp: null,
previewSource: '',
autoScroll: true
previewSource: ''
}
},
@ -347,6 +358,7 @@ export default {
watch: {
listDate (date) {
this.getPlaylist()
setTimeout(() => { scrollTo(this) }, 5000)
}
},
@ -371,25 +383,26 @@ export default {
]
}
const timeInSec = this.$timeToSeconds(this.$dayjs().format('HH:mm:ss'))
const listStartSec = this.$timeToSeconds(this.configPlayout.playlist.day_start)
if (listStartSec > timeInSec) {
this.listDate = this.$dayjs(this.listDate).subtract(1, 'day').format('YYYY-MM-DD')
}
await this.getPlaylist()
},
mounted () {
if (!process.env.DEV) {
if (process.env.NODE_ENV !== 'production') {
this.interval = setInterval(() => {
this.$store.dispatch('playlist/animClock')
const child = document.getElementById(`clip_${this.currentClipIndex}`)
if (child && this.autoScroll) {
const parent = document.getElementById('scroll-container')
const topPos = child.offsetTop
parent.scrollTop = topPos - 50
this.autoScroll = false
}
}, 5000)
} else {
this.$store.dispatch('playlist/animClock')
}
setTimeout(() => { scrollTo(this) }, 4000)
},
beforeDestroy () {
@ -707,7 +720,7 @@ export default {
}
.active-playlist-clip {
background-color: #49515c !important;
background-color: #565e6a !important;
}
</style>

50
store/playlist.js
View File

@ -49,15 +49,24 @@ export const mutations = {
}
export const actions = {
async getPlaylist ({ commit, dispatch, state }, { dayStart, date }) {
async getPlaylist ({ commit, dispatch, state, rootState }, { dayStart, date }) {
const timeInSec = this.$timeToSeconds(this.$dayjs().format('HH:mm:ss'))
let dateToday = this.$dayjs().format('YYYY-MM-DD')
if (rootState.config.startInSec > timeInSec) {
dateToday = this.$dayjs(dateToday).subtract(1, 'day').format('YYYY-MM-DD')
}
const response = await this.$axios.get(`api/player/playlist/?date=${date}`)
if (response.data && response.data.program) {
commit('UPDATE_PLAYLIST', this.$processPlaylist(dayStart, response.data.program))
if (date === this.$dayjs().format('YYYY-MM-DD')) {
if (date === dateToday) {
commit('UPDATE_TODAYS_PLAYLIST', JSON.parse(JSON.stringify(response.data.program)))
dispatch('setCurrentClip')
} else {
commit('SET_CURRENT_CLIP_INDEX', null)
}
} else {
commit('UPDATE_PLAYLIST', [])
@ -65,26 +74,30 @@ export const actions = {
},
setCurrentClip ({ commit, dispatch, state, rootState }) {
let start
if (rootState.config.configPlayout.playlist.day_start) {
start = this.$timeToSeconds(rootState.config.configPlayout.playlist.day_start)
let begin
let lastTime = this.$timeToSeconds(this.$dayjs().format('HH:mm:ss'))
if (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
const playTime = this.$timeToSeconds(this.$dayjs().format('HH:mm:ss')) - start
// animate the progress bar
if (playTime <= duration) {
const progValue = playTime * 100 / duration
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', start)
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)
@ -92,23 +105,28 @@ export const actions = {
break
}
start += duration
begin += duration
}
},
animClock ({ commit, dispatch, state }) {
animClock ({ commit, dispatch, state, rootState }) {
const time = this.$dayjs().format('HH:mm:ss')
const timeSec = this.$timeToSeconds(time)
const playTime = timeSec - state.currentClipStart
const progValue = playTime * 100 / state.currentClipDuration
let timeSec = this.$timeToSeconds(time)
commit('SET_TIME', time)
if (timeSec < rootState.config.startInSec) {
timeSec += rootState.config.playlistLength
}
if (timeSec < state.currentClipStart) {
return
}
// animate the progress bar
const playTime = timeSec - state.currentClipStart
const progValue = playTime * 100 / state.currentClipDuration
// set progress bar value
if (playTime <= state.currentClipDuration && progValue >= 0) {
commit('SET_PROGRESS_VALUE', progValue)
commit('SET_TIME_LEFT', this.$secToHMS(state.currentClipDuration - playTime))