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

use utcOffset from playout system, add custom_filter to playlist function, add edit button

Browse Source
This commit is contained in:
jb-alvarado 2022-09-04 17:05:40 +02:00
parent 2bc6ce9c32
commit 37ccb38b91
9 changed files with 83 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ffplayout-frontend",
"version": "5.1.2",
"version": "5.2.0",
"description": "Web GUI for ffplayout",
"author": "Jonathan Baecker",
"private": true,

2
pages/configure.vue
View File

@ -22,7 +22,7 @@
</div>
<div v-for="(prop, name, idx) in configGui[configID]" :key="idx">
<b-form-group
v-if="idx >= 1"
v-if="name !== 'id' && name !== 'utc_offset'"
label-cols-sm="2"
:label="name"
label-align-sm="right"

7
pages/logging.vue
View File

@ -53,7 +53,7 @@ export default {
data () {
return {
currentLog: null,
listDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'),
listDate: this.$dayjs().utcOffset(0).format('YYYY-MM-DD'),
scrollOP: {
wheelSpeed: 5,
minScrollbarLength: 30
@ -62,7 +62,7 @@ export default {
},
computed: {
...mapState('config', ['configID', 'timezone'])
...mapState('config', ['configID', 'utcOffset'])
},
watch: {
@ -76,6 +76,7 @@ export default {
},
async created () {
this.listDate = this.$dayjs().utcOffset(this.utcOffset).format('YYYY-MM-DD')
await this.getLog()
},
@ -83,7 +84,7 @@ export default {
async getLog () {
let date = this.listDate
if (date === this.$dayjs().tz(this.timezone).format('YYYY-MM-DD')) {
if (date === this.$dayjs().utcOffset(this.utcOffset).format('YYYY-MM-DD')) {
date = ''
}

59
pages/player.vue
View File

@ -229,6 +229,9 @@
<b-col cols="1" class="text-center playlist-input">
Ad
</b-col>
<b-col cols="1" class="text-center playlist-input">
Edit
</b-col>
<b-col cols="1" class="text-center playlist-input">
Delete
</b-col>
@ -287,6 +290,11 @@
unchecked-value=""
/>
</b-col>
<b-col cols="1" class="text-center playlist-input">
<b-link @click="editItem(index)">
<b-icon-pencil-square />
</b-link>
</b-col>
<b-col cols="1" class="text-center playlist-input">
<b-link @click="removeItemFromPlaylist(index)">
<b-icon-x-circle-fill />
@ -357,7 +365,7 @@
<b-modal
id="add-source-modal"
ref="add-source-modal"
title="Add (remote) Source"
title="Add/Edit Source"
@ok="handleSource"
>
<form ref="form" @submit.stop.prevent="addSource">
@ -376,6 +384,9 @@
<b-form-group label="Audio" label-for="audio-input">
<b-form-input id="audio-input" v-model="newSource.audio" />
</b-form-group>
<b-form-group label="Custom Filter" label-for="filter-input">
<b-form-input id="filter-input" v-model="newSource.custom_filter" />
</b-form-group>
<b-form-checkbox
id="ad-input"
v-model="newSource.category"
@ -430,8 +441,8 @@ export default {
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'),
listDate: this.$dayjs().format('YYYY-MM-DD'),
targetDate: this.$dayjs().format('YYYY-MM-DD'),
interval: null,
videoOptions: {
liveui: true,
@ -459,19 +470,21 @@ export default {
suppressScrollX: true,
minScrollbarLength: 30
},
editId: undefined,
newSource: {
begin: 0,
in: 0,
out: 0,
duration: 0,
category: '',
custom_filter: '',
source: ''
}
}
},
computed: {
...mapState('config', ['configID', 'configGui', 'configPlayout', 'timezone', 'startInSec']),
...mapState('config', ['configID', 'configGui', 'configPlayout', 'utcOffset', 'startInSec']),
...mapState('media', ['crumbs', 'folderTree']),
...mapState('playlist', [
'timeStr', 'timeLeft', 'currentClip', 'progressValue', 'currentClipIndex',
@ -509,6 +522,9 @@ export default {
},
async created () {
this.listDate = this.$dayjs().utcOffset(this.utcOffset).format('YYYY-MM-DD')
this.targetDate = this.listDate
this.videoOptions.sources = [
{
type: 'application/x-mpegURL',
@ -519,11 +535,11 @@ export default {
this.getStatus()
await this.getPath('')
const timeInSec = this.$timeToSeconds(this.$dayjs().tz(this.timezone).format('HH:mm:ss'))
const timeInSec = this.$timeToSeconds(this.$dayjs().utcOffset(this.utcOffset).format('HH:mm:ss'))
const listStartSec = this.$timeToSeconds(this.configPlayout.playlist.day_start)
if (listStartSec > timeInSec) {
this.listDate = this.$dayjs(this.listDate).tz(this.timezone).subtract(1, 'day').format('YYYY-MM-DD')
this.listDate = this.$dayjs(this.listDate).utcOffset(this.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
}
await this.getPlaylist()
@ -707,12 +723,11 @@ export default {
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/playlist/${this.configGui[this.configID].id}/`,
{ channel: this.$store.state.config.configGui.channel, date: saveDate, program: saveList }
{ channel: this.configGui[this.configID].name, date: saveDate, program: saveList }
)
if (postSave.status === 200 || postSave.status === 201) {
@ -765,9 +780,14 @@ export default {
},
addSource () {
const list = this.playlist
list.push(this.newSource)
this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, list))
if (this.editId === undefined) {
const list = this.playlist
list.push(this.newSource)
this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, list))
} else {
this.playlist[this.editId] = this.newSource
this.editId = undefined
}
this.newSource = {
begin: 0,
@ -775,12 +795,29 @@ export default {
out: 0,
duration: 0,
category: '',
custom_filter: '',
source: ''
}
this.$nextTick(() => {
this.$bvModal.hide('add-source-modal')
})
},
editItem (i) {
this.editId = i
this.newSource = {
begin: this.playlist[i].begin,
in: this.playlist[i].in,
out: this.playlist[i].out,
duration: this.playlist[i].duration,
category: this.playlist[i].category,
custom_filter: this.playlist[i].custom_filter,
source: this.playlist[i].source
}
this.$bvModal.show('add-source-modal')
}
}
}

10
plugins/helpers.js
View File

@ -9,8 +9,16 @@ export default ({ app }, inject) => {
for (const item of list) {
item.begin = begin
if (!item.audio) {
delete item.audio
}
if (!item.category) {
item.category = ''
delete item.category
}
if (!item.custom_filter) {
delete item.custom_filter
}
begin += (item.out - item.in)

4
store/auth.js
View File

@ -26,7 +26,7 @@ export const mutations = {
}
export const actions = {
async obtainToken ({ commit, state }, { username, password }) {
async obtainToken ({ commit }, { username, password }) {
const payload = {
username,
password
@ -45,7 +45,7 @@ export const actions = {
return code
},
inspectToken ({ commit, dispatch, state }) {
inspectToken ({ commit, state }) {
const token = this.$cookies.get('token')
if (token) {

21
store/config.js
View File

@ -10,7 +10,7 @@ export const state = () => ({
configPlayout: {},
currentUser: null,
configUser: null,
timezone: 'UTC'
utcOffset: 0
})
export const mutations = {
@ -41,13 +41,13 @@ export const mutations = {
UPDATE_USER_CONFIG (state, config) {
state.configUser = config
},
UPDATE_TIMEZONE (state, zone) {
state.timezone = zone
UPDATE_UTC_OFFSET (state, offset) {
state.utcOffset = offset
}
}
export const actions = {
async nuxtClientInit ({ commit, dispatch, rootState }) {
async nuxtClientInit ({ dispatch, rootState }) {
await dispatch('auth/inspectToken', null, { root: true })
if (rootState.auth.isLogin) {
await dispatch('getGuiConfig')
@ -56,7 +56,7 @@ export const actions = {
}
},
async getGuiConfig ({ commit, state }) {
async getGuiConfig ({ commit }) {
const response = await this.$axios.get('api/channels')
if (response.data) {
@ -68,7 +68,7 @@ export const actions = {
}
}
commit('UPDATE_TIMEZONE', response.data[0].timezone)
commit('UPDATE_UTC_OFFSET', response.data[0].utc_offset)
commit('UPDATE_GUI_CONFIG', response.data)
commit('UPDATE_GUI_CONFIG_RAW', _.cloneDeep(response.data))
commit('UPDATE_CONFIG_COUNT', response.data.length)
@ -78,7 +78,8 @@ export const actions = {
channel: '',
preview_url: '',
playout_config: '',
extra_extensions: []
extra_extensions: [],
utc_offset: 0
}])
}
},
@ -133,13 +134,13 @@ export const actions = {
}
},
async setPlayoutConfig ({ commit, state }, obj) {
async setPlayoutConfig ({ state }, obj) {
const channel = state.configGui[state.configID].id
const update = await this.$axios.put(`api/playout/config/${channel}`, obj)
return update
},
async getUserConfig ({ commit, state }) {
async getUserConfig ({ commit }) {
const user = await this.$axios.get('api/user')
if (user.data) {
@ -150,7 +151,7 @@ export const actions = {
}
},
async setUserConfig ({ commit, state }, obj) {
async setUserConfig (obj) {
const update = await this.$axios.put(`api/user/${obj.id}`, obj)
return update
}

2
store/media.js
View File

@ -17,7 +17,7 @@ export const mutations = {
}
export const actions = {
async getTree ({ commit, dispatch, state, rootState }, { path }) {
async getTree ({ commit, rootState }, { path }) {
const crumbs = []
let root = '/'
const channel = rootState.config.configGui[rootState.config.configID].id

12
store/playlist.js
View File

@ -51,13 +51,13 @@ export const mutations = {
}
export const actions = {
async getPlaylist ({ commit, dispatch, state, rootState }, { date }) {
const timeInSec = this.$timeToSeconds(this.$dayjs().tz(rootState.config.timezone).format('HH:mm:ss'))
async getPlaylist ({ commit, rootState }, { date }) {
const timeInSec = this.$timeToSeconds(this.$dayjs().utcOffset(rootState.config.utcOffset).format('HH:mm:ss'))
const channel = rootState.config.configGui[rootState.config.configID].id
let dateToday = this.$dayjs().tz(this.timezone).format('YYYY-MM-DD')
let dateToday = this.$dayjs().utcOffset(rootState.config.utcOffset).format('YYYY-MM-DD')
if (rootState.config.startInSec > timeInSec) {
dateToday = this.$dayjs(dateToday).tz(rootState.config.timezone).subtract(1, 'day').format('YYYY-MM-DD')
dateToday = this.$dayjs(dateToday).utcOffset(rootState.config.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
}
const response = await this.$axios.get(`api/playlist/${channel}?date=${date}`)
@ -75,9 +75,9 @@ export const actions = {
}
},
async playoutStat ({ commit, dispatch, state, rootState }) {
async playoutStat ({ commit, state, rootState }) {
const channel = rootState.config.configGui[rootState.config.configID].id
const time = this.$dayjs().tz(rootState.config.timezone).format('HH:mm:ss')
const time = this.$dayjs().utcOffset(rootState.config.utcOffset).format('HH:mm:ss')
let timeSec = this.$timeToSeconds(time)
commit('SET_TIME', time)