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/
Videos
Videos/
live
live/

2
assets/scss/globals.scss
View File

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

4
nuxt.config.js
View File

@ -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: {

131
pages/message.vue
View File

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

138
pages/player.vue
View File

@ -2,7 +2,7 @@
<div style="height:100%;">
<Menu />
<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-aspect aspect="16:9">
<video
@ -15,7 +15,7 @@
<video-player v-else-if="videoOptions.sources" :key="configID" reference="videoPlayer" :options="videoOptions" />
</b-aspect>
</b-col>
<b-col class="control-col">
<b-col>
<b-row class="control-col">
<b-col cols="8" class="status-col">
<b-row class="status-row">
@ -52,7 +52,7 @@
class="control-button control-button-play"
:class="isPlaying"
variant="primary"
@click="playoutControl('start')"
@click="controlProcess('start')"
>
<b-icon-play />
</b-button>
@ -64,25 +64,61 @@
title="Stop Playout Service"
class="control-button control-button-stop"
variant="primary"
@click="playoutControl('stop')"
@click="controlProcess('stop')"
>
<b-icon-stop />
</b-button>
</div>
</b-col>
<!-- <div class="w-100" />-->
<b-col>
<div>
<b-button
title="Restart Playout Service"
class="control-button control-button-restart"
variant="primary"
@click="playoutControl('restart')"
@click="controlProcess('restart')"
>
<b-icon-arrow-clockwise />
</b-button>
</div>
</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-col>
</b-row>
@ -102,7 +138,7 @@
<splitpanes class="list-row default-theme pane-row">
<pane min-size="20" size="24">
<loading
:active.sync="isLoading"
:active.sync="browserIsLoading"
:can-cancel="false"
:is-full-page="false"
background-color="#485159"
@ -200,6 +236,13 @@
</b-list-group-item>
</b-list-group>
<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`">
<draggable
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-icon-view-stacked />
</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-icon-download />
</b-button>
@ -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') {
// 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/animClock')
this.$store.dispatch('playlist/playoutStat')
this.getStatus()
}, 5000)
} else {
this.$store.dispatch('playlist/animClock')
}
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;

4
plugins/axios.js
View File

@ -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)
}
})
}

2
store/index.js
View File

@ -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
}
}

59
store/playlist.js
View File

@ -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))
}
}
}