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

get status from api, fix routes, add alpha back again

Browse Source
This commit is contained in:
jb-alvarado 2022-07-05 18:08:51 +02:00
parent 8511c4cdff
commit b3a7839535
8 changed files with 214 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -96,3 +96,5 @@ tv-media
tv-media/ tv-media/
Videos Videos
Videos/ Videos/
live
live/

2
assets/scss/globals.scss
View File

@ -13,7 +13,7 @@
.date-row { .date-row {
height: 40px; height: 40px;
width: 100%; width: 100%;
padding-top: 5px; padding-top: 7px;
margin: 0; margin: 0;
} }

4
nuxt.config.js
View File

@ -1,5 +1,3 @@
require('dotenv').config()
export default { export default {
ssr: false, ssr: false,
/* /*
@ -79,7 +77,7 @@ export default {
** See https://axios.nuxtjs.org/options ** See https://axios.nuxtjs.org/options
*/ */
axios: { axios: {
baseURL: process.env.API_URL baseURL: '/'
}, },
dayjs: { dayjs: {

131
pages/message.vue
View File

@ -99,6 +99,21 @@
/> />
</b-form-group> </b-form-group>
</b-col> </b-col>
<b-col>
<b-form-group
label="Font Alpha"
label-for="input-6"
>
<b-form-input
id="input-6"
v-model="form.fontAlpha"
type="number"
min="0"
max="1"
step="0.01"
/>
</b-form-group>
</b-col>
</b-row> </b-row>
</b-col> </b-col>
<b-col> <b-col>
@ -123,6 +138,21 @@
/> />
</b-form-group> </b-form-group>
</b-col> </b-col>
<b-col>
<b-form-group
label="Box Alpha"
label-for="input-8"
>
<b-form-input
id="input-8"
v-model="form.boxAlpha"
type="number"
min="0"
max="1"
step="0.01"
/>
</b-form-group>
</b-col>
</b-row> </b-row>
<b-form-group <b-form-group
label="Border Width" label="Border Width"
@ -246,25 +276,40 @@ export default {
}, },
methods: { methods: {
decToHex (num) {
return '0x' + Math.round(num * 255).toString(16)
},
hexToDec (num) {
return (parseFloat(parseInt(num, 16)) / 255).toFixed(2)
},
async getPreset (id) { async getPreset (id) {
const response = await this.$axios.get(`api/presets/${this.configGui[this.configID].id}`) const response = await this.$axios.get(`api/presets/${this.configGui[this.configID].id}`)
if (response.data && !id) { if (response.data && !id) {
this.presets = []
for (const item of response.data) { for (const item of response.data) {
this.presets.push({ value: item.id, text: item.name }) this.presets.push({ value: item.id, text: item.name })
} }
} else if (response.data) { } else if (response.data) {
id -= 1
const fColor = response.data[id].fontcolor.split('@')
const bColor = response.data[id].boxcolor.split('@')
this.form = { this.form = {
id: response.data[id].id, id: response.data[id].id,
name: response.data[id].name, name: response.data[id].name,
text: response.data[id].text, text: response.data[id].text,
x: response.data[id].x, x: response.data[id].x,
y: response.data[id].y, y: response.data[id].y,
fontSize: response.data[id].font_size, fontSize: response.data[id].fontsize,
fontSpacing: response.data[id].line_spacing, fontSpacing: response.data[id].line_spacing,
fontColor: response.data[id].fontcolor, fontColor: fColor[0],
fontAlpha: (fColor[1]) ? this.hexToDec(fColor[1]) : 1.0,
showBox: response.data[id].box, showBox: response.data[id].box,
boxColor: response.data[id].boxcolor, boxColor: bColor[0],
boxAlpha: (bColor[1]) ? this.hexToDec(bColor[1]) : 1.0,
border: response.data[id].boxborderw, border: response.data[id].boxborderw,
overallAlpha: response.data[id].alpha overallAlpha: response.data[id].alpha
} }
@ -282,24 +327,24 @@ export default {
async createPreset () { async createPreset () {
const preset = { const preset = {
name: this.newPresetName, name: this.newPresetName,
message: this.form.text, text: this.form.text,
x: this.form.x, x: this.form.x.toString(),
y: this.form.y, y: this.form.y.toString(),
font_size: this.form.fontSize, fontsize: this.form.fontSize.toString(),
font_spacing: this.form.fontSpacing, line_spacing: this.form.fontSpacing.toString(),
font_color: this.form.fontColor, fontcolor: (this.form.fontAlpha === 1) ? this.form.fontColor : this.form.fontColor + '@' + this.decToHex(this.form.fontAlpha),
font_alpha: this.form.fontAlpha, box: (this.form.showBox) ? '1' : '0',
show_box: this.form.showBox, boxcolor: (this.form.boxAlpha === 1) ? this.form.boxColor : this.form.boxColor + '@' + this.decToHex(this.form.boxAlpha),
box_color: this.form.boxColor, boxborderw: this.form.border.toString(),
box_alpha: this.form.boxAlpha, alpha: this.form.overallAlpha.toString(),
border_width: this.form.border, channel_id: this.configGui[this.configID].id
overall_alpha: this.form.overallAlpha
} }
const response = await this.$axios.post('api/player/messenger/', preset) const response = await this.$axios.post('api/presets/', preset)
if (response.status === 201) { if (response.status === 200) {
this.success = true this.success = true
this.getPreset('')
} else { } else {
this.failed = true this.failed = true
} }
@ -313,21 +358,20 @@ export default {
const preset = { const preset = {
id: this.form.id, id: this.form.id,
name: this.form.name, name: this.form.name,
message: this.form.text, text: this.form.text,
x: this.form.x, x: this.form.x,
y: this.form.y, y: this.form.y,
font_size: this.form.fontSize, fontsize: this.form.fontSize,
font_spacing: this.form.fontSpacing, line_spacing: this.form.fontSpacing,
font_color: this.form.fontColor, fontcolor: (this.form.fontAlpha === 1) ? this.form.fontColor : this.form.fontColor + '@' + this.decToHex(this.form.fontAlpha),
font_alpha: this.form.fontAlpha, box: (this.form.showBox) ? '1' : '0',
show_box: this.form.showBox, boxcolor: (this.form.boxAlpha === 1) ? this.form.boxColor : this.form.boxColor + '@' + this.decToHex(this.form.boxAlpha),
box_color: this.form.boxColor, boxborderw: this.form.border,
box_alpha: this.form.boxAlpha, alpha: this.form.overallAlpha,
border_width: this.form.border, channel_id: this.configGui[this.configID].id
overall_alpha: this.form.overallAlpha
} }
const response = await this.$axios.put(`api/player/messenger/${this.form.id}/`, preset) const response = await this.$axios.put(`api/presets/${this.form.id}`, preset)
if (response.status === 200) { if (response.status === 200) {
this.success = true this.success = true
@ -346,7 +390,7 @@ export default {
}, },
async deletePreset () { async deletePreset () {
if (this.selected) { if (this.selected) {
await this.$axios.delete(`api/player/messenger/${this.form.id}/`) await this.$axios.delete(`api/presets/${this.form.id}`)
} }
this.$bvModal.hide('delete-modal') this.$bvModal.hide('delete-modal')
@ -354,29 +398,22 @@ export default {
}, },
async submitMessage () { async submitMessage () {
function aToHex (num) {
return '0x' + Math.round(num * 255).toString(16)
}
const obj = { const obj = {
text: this.form.text, text: this.form.text,
x: this.form.x, x: this.form.x.toString(),
y: this.form.y, y: this.form.y.toString(),
fontsize: this.form.fontSize, fontsize: this.form.fontSize.toString(),
line_spacing: this.form.fontSpacing, line_spacing: this.form.fontSpacing.toString(),
fontcolor: this.form.fontColor + '@' + aToHex(this.form.fontAlpha), fontcolor: this.form.fontColor + '@' + this.decToHex(this.form.fontAlpha),
alpha: this.form.overallAlpha, alpha: this.form.overallAlpha.toString(),
box: (this.form.showBox) ? 1 : 0, box: (this.form.showBox) ? '1' : '0',
boxcolor: this.form.boxColor + '@' + aToHex(this.form.boxAlpha), boxcolor: this.form.boxColor + '@' + this.decToHex(this.form.boxAlpha),
boxborderw: this.form.border boxborderw: this.form.border.toString()
} }
const response = await this.$axios.post('api/player/send/message/', { const response = await this.$axios.post(`api/control/${this.configGui[this.configID].id}/text/`, obj)
data: obj,
channel: this.configGui[this.configID].id
})
if (response.data && response.data.status.Success && response.data.status.Success.split(' ')[0] === '0') { if (response.data && response.status === 200) {
this.success = true this.success = true
} else { } else {
this.failed = true this.failed = true

138
pages/player.vue
View File

@ -2,7 +2,7 @@
<div style="height:100%;"> <div style="height:100%;">
<Menu /> <Menu />
<b-container class="control-container"> <b-container class="control-container">
<b-row class="control-row"> <b-row class="control-row" align-v="stretch">
<b-col cols="3" class="player-col"> <b-col cols="3" class="player-col">
<b-aspect aspect="16:9"> <b-aspect aspect="16:9">
<video <video
@ -15,7 +15,7 @@
<video-player v-else-if="videoOptions.sources" :key="configID" reference="videoPlayer" :options="videoOptions" /> <video-player v-else-if="videoOptions.sources" :key="configID" reference="videoPlayer" :options="videoOptions" />
</b-aspect> </b-aspect>
</b-col> </b-col>
<b-col class="control-col"> <b-col>
<b-row class="control-col"> <b-row class="control-col">
<b-col cols="8" class="status-col"> <b-col cols="8" class="status-col">
<b-row class="status-row"> <b-row class="status-row">
@ -52,7 +52,7 @@
class="control-button control-button-play" class="control-button control-button-play"
:class="isPlaying" :class="isPlaying"
variant="primary" variant="primary"
@click="playoutControl('start')" @click="controlProcess('start')"
> >
<b-icon-play /> <b-icon-play />
</b-button> </b-button>
@ -64,25 +64,61 @@
title="Stop Playout Service" title="Stop Playout Service"
class="control-button control-button-stop" class="control-button control-button-stop"
variant="primary" variant="primary"
@click="playoutControl('stop')" @click="controlProcess('stop')"
> >
<b-icon-stop /> <b-icon-stop />
</b-button> </b-button>
</div> </div>
</b-col> </b-col>
<!-- <div class="w-100" />-->
<b-col> <b-col>
<div> <div>
<b-button <b-button
title="Restart Playout Service" title="Restart Playout Service"
class="control-button control-button-restart" class="control-button control-button-restart"
variant="primary" variant="primary"
@click="playoutControl('restart')" @click="controlProcess('restart')"
> >
<b-icon-arrow-clockwise /> <b-icon-arrow-clockwise />
</b-button> </b-button>
</div> </div>
</b-col> </b-col>
<div class="w-100" />
<b-col>
<div>
<b-button
title="Jump to last Clip"
class="control-button control-button-control"
variant="primary"
@click="controlPlayout('back')"
>
<b-icon-skip-start />
</b-button>
</div>
</b-col>
<b-col>
<div>
<b-button
title="Reset Playout State"
class="control-button control-button-control"
variant="primary"
@click="controlPlayout('reset')"
>
<b-icon-arrow-repeat />
</b-button>
</div>
</b-col>
<b-col>
<div>
<b-button
title="Jump to next Clip"
class="control-button control-button-control"
variant="primary"
@click="controlPlayout('next')"
>
<b-icon-skip-end />
</b-button>
</div>
</b-col>
</b-row> </b-row>
</b-col> </b-col>
</b-row> </b-row>
@ -102,7 +138,7 @@
<splitpanes class="list-row default-theme pane-row"> <splitpanes class="list-row default-theme pane-row">
<pane min-size="20" size="24"> <pane min-size="20" size="24">
<loading <loading
:active.sync="isLoading" :active.sync="browserIsLoading"
:can-cancel="false" :can-cancel="false"
:is-full-page="false" :is-full-page="false"
background-color="#485159" background-color="#485159"
@ -200,6 +236,13 @@
</b-list-group-item> </b-list-group-item>
</b-list-group> </b-list-group>
<perfect-scrollbar id="scroll-container" :options="scrollOP"> <perfect-scrollbar id="scroll-container" :options="scrollOP">
<loading
:active.sync="playlistIsLoading"
:can-cancel="false"
:is-full-page="false"
background-color="#485159"
color="#ff9c36"
/>
<b-list-group class="playlist-list-group" :style="`height: ${(playlist) ? playlist.length * 52 + 52 : 300}px`"> <b-list-group class="playlist-list-group" :style="`height: ${(playlist) ? playlist.length * 52 + 52 : 300}px`">
<draggable <draggable
id="playlist-group" id="playlist-group"
@ -267,6 +310,9 @@
<b-button v-if="!configPlayout.playlist.loop" v-b-tooltip.hover title="Loop Clips in Playlist" variant="primary" @click="loopClips()"> <b-button v-if="!configPlayout.playlist.loop" v-b-tooltip.hover title="Loop Clips in Playlist" variant="primary" @click="loopClips()">
<b-icon-view-stacked /> <b-icon-view-stacked />
</b-button> </b-button>
<b-button v-b-tooltip.hover title="Generate a randomized Playlist" variant="primary" @click="generatePlaylist(listDate)">
<b-icon-sort-down-alt />
</b-button>
<b-button v-b-tooltip.hover title="Save Playlist" variant="primary" @click="savePlaylist(listDate)"> <b-button v-b-tooltip.hover title="Save Playlist" variant="primary" @click="savePlaylist(listDate)">
<b-icon-download /> <b-icon-download />
</b-button> </b-button>
@ -346,7 +392,8 @@ export default {
data () { data () {
return { return {
isLoading: false, browserIsLoading: false,
playlistIsLoading: false,
isPlaying: '', isPlaying: '',
listDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'), listDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'),
targetDate: 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: { watch: {
listDate () { listDate () {
this.playlistIsLoading = true
this.getPlaylist() this.getPlaylist()
this.playlistIsLoading = false
setTimeout(() => { scrollTo(this) }, 5000) setTimeout(() => { scrollTo(this) }, 5000)
}, },
@ -440,14 +489,20 @@ export default {
}, },
mounted () { mounted () {
if (process.env.NODE_ENV === 'production') { // 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.interval = setInterval(() => {
this.$store.dispatch('playlist/animClock') this.$store.dispatch('playlist/playoutStat')
this.getStatus() this.getStatus()
}, 5000) }, 5000)
} else { this.$store.dispatch('playlist/playoutStat')
this.$store.dispatch('playlist/animClock')
}
const streamExtension = this.configGui[this.configID].preview_url.split('.').pop() const streamExtension = this.configGui[this.configID].preview_url.split('.').pop()
let player let player
@ -479,25 +534,32 @@ export default {
methods: { methods: {
async getPath (extensions, path) { async getPath (extensions, path) {
this.isLoading = true this.browserIsLoading = true
await this.$store.dispatch('media/getTree', { extensions, path }) await this.$store.dispatch('media/getTree', { extensions, path })
this.isLoading = false this.browserIsLoading = false
}, },
async getStatus () { async getStatus () {
const channel = this.configGui[this.configID].id const channel = this.configGui[this.configID].id
const status = await this.$axios.post(`api/control/${channel}/process/`, { command: 'status' }) 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' this.isPlaying = 'is-playing'
} else { } else {
this.isPlaying = '' this.isPlaying = ''
} }
}, },
async playoutControl (state) { async controlProcess (state) {
const channel = this.configGui[this.configID].id 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) setTimeout(() => { this.getStatus() }, 1000)
}, },
@ -592,39 +654,50 @@ export default {
this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, tempList)) 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) { async savePlaylist (saveDate) {
this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, this.playlist)) this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, this.playlist))
const saveList = this.playlist.map(({ begin, ...item }) => item) const saveList = this.playlist.map(({ begin, ...item }) => item)
const postSave = await this.$axios.post( const postSave = await this.$axios.post(
'api/player/playlist/', `api/playlist/${this.configGui[this.configID].id}/`,
{ { channel: this.$store.state.config.configGui.channel, date: saveDate, program: saveList }
data: { channel: this.$store.state.config.configGui.channel, date: saveDate, program: saveList },
channel: this.configGui[this.configID].id
}
) )
if (postSave.status === 200 || postSave.status === 201) { if (postSave.status === 200 || postSave.status === 201) {
this.$store.commit('UPDATE_VARIANT', 'success') this.$store.commit('UPDATE_VARIANT', 'success')
this.$store.commit('UPDATE_SHOW_ERROR_ALERT', true) 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) setTimeout(() => { this.$store.commit('UPDATE_SHOW_ERROR_ALERT', false) }, 2000)
} }
}, },
async deletePlaylist (playlistDate) { async deletePlaylist (playlistDate) {
this.$store.commit('playlist/UPDATE_PLAYLIST', []) const postDelete = await this.$axios.delete(`api/playlist/${this.configGui[this.configID].id}/${playlistDate}`)
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 } })
if (postDelete.status === 200 || postDelete.status === 201) { if (postDelete.status === 200 || postDelete.status === 201) {
this.$store.commit('playlist/UPDATE_PLAYLIST', [])
this.$store.commit('UPDATE_VARIANT', 'success') this.$store.commit('UPDATE_VARIANT', 'success')
this.$store.commit('UPDATE_SHOW_ERROR_ALERT', true) 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) setTimeout(() => { this.$store.commit('UPDATE_SHOW_ERROR_ALERT', false) }, 2000)
} }
@ -655,7 +728,6 @@ export default {
.player-col { .player-col {
max-width: 542px; max-width: 542px;
min-width: 380px; min-width: 380px;
margin-bottom: 6px;
} }
.control-col { .control-col {
@ -696,6 +768,10 @@ export default {
height: 100%; height: 100%;
} }
.control-button-control {
color: #06aad3;
}
.status-row { .status-row {
height: 100%; height: 100%;
min-width: 370px; min-width: 370px;

4
plugins/axios.js
View File

@ -6,7 +6,7 @@ export default function ({ $axios, store, redirect, route }) {
} }
// disable progress on auth // 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 config.progress = false
} }
}) })
@ -41,7 +41,7 @@ export default function ({ $axios, store, redirect, route }) {
} else if (code !== 401) { } else if (code !== 401) {
store.commit('UPDATE_VARIANT', 'danger') store.commit('UPDATE_VARIANT', 'danger')
store.commit('UPDATE_SHOW_ERROR_ALERT', true) store.commit('UPDATE_SHOW_ERROR_ALERT', true)
store.commit('UPDATE_ERROR_AERT_MESSAGE', error) store.commit('UPDATE_ERROR_ALERT_MESSAGE', error)
} }
}) })
} }

2
store/index.js
View File

@ -13,7 +13,7 @@ export const mutations = {
UPDATE_VARIANT (state, variant) { UPDATE_VARIANT (state, variant) {
state.variant = variant state.variant = variant
}, },
UPDATE_ERROR_AERT_MESSAGE (state, message) { UPDATE_ERROR_ALERT_MESSAGE (state, message) {
state.ErrorAlertMessage = message state.ErrorAlertMessage = message
} }
} }

59
store/playlist.js
View File

@ -67,7 +67,6 @@ export const actions = {
if (date === dateToday) { if (date === dateToday) {
commit('UPDATE_TODAYS_PLAYLIST', _.cloneDeep(response.data.program)) commit('UPDATE_TODAYS_PLAYLIST', _.cloneDeep(response.data.program))
dispatch('setCurrentClip')
} else { } else {
commit('SET_CURRENT_CLIP_INDEX', null) commit('SET_CURRENT_CLIP_INDEX', null)
} }
@ -76,43 +75,8 @@ export const actions = {
} }
}, },
setCurrentClip ({ commit, dispatch, state, rootState }) { async playoutStat ({ commit, dispatch, state, rootState }) {
let begin const channel = rootState.config.configGui[rootState.config.configID].id
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 }) {
const time = this.$dayjs().tz(rootState.config.timezone).format('HH:mm:ss') const time = this.$dayjs().tz(rootState.config.timezone).format('HH:mm:ss')
let timeSec = this.$timeToSeconds(time) let timeSec = this.$timeToSeconds(time)
@ -126,16 +90,19 @@ export const actions = {
return return
} }
const playTime = timeSec - state.currentClipStart const response = await this.$axios.get(`api/control/${channel}/media/current`)
const progValue = playTime * 100 / state.currentClipDuration
// set progress bar value if (response.data) {
if (playTime <= state.currentClipDuration && progValue >= 0) { const obj = response.data.result
const progValue = obj.played_sec * 100 / obj.current_media.out
commit('SET_PROGRESS_VALUE', progValue) commit('SET_PROGRESS_VALUE', progValue)
commit('SET_TIME_LEFT', this.$secToHMS(state.currentClipDuration - playTime)) commit('SET_CURRENT_CLIP', obj.current_media.source)
} else { commit('SET_CURRENT_CLIP_INDEX', obj.index)
commit('SET_PROGRESS_VALUE', 0) commit('SET_CURRENT_CLIP_START', obj.start_sec)
dispatch('setCurrentClip') 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))
} }
} }
} }