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

reactivate multi channel support

Browse Source
This commit is contained in:
jb-alvarado 2022-07-19 11:33:15 +02:00
parent 9b4aa44217
commit 9868d27b19
5 changed files with 56 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Menu.vue
View File

@ -20,15 +20,15 @@
<b-nav-item to="/configure" exact-active-class="active-menu-item"> <b-nav-item to="/configure" exact-active-class="active-menu-item">
Configure Configure
</b-nav-item> </b-nav-item>
<b-nav-text v-if="multiChannel"> <b-nav-text v-if="configGui.length > 1">
&nbsp;&nbsp; &nbsp;&nbsp;
</b-nav-text> </b-nav-text>
<b-nav-item-dropdown v-if="multiChannel" :text="configGui[configID].channel" right> <b-nav-item-dropdown v-if="configGui.length > 1" :text="configGui[configID].name" right>
<b-dropdown-item v-for="(channel, index) in configGui" :key="channel.key" @click="selectChannel(index)"> <b-dropdown-item v-for="(channel, index) in configGui" :key="index" @click="selectChannel(index)">
{{ channel.channel }} {{ channel.name }}
</b-dropdown-item> </b-dropdown-item>
</b-nav-item-dropdown> </b-nav-item-dropdown>
<b-nav-text v-if="multiChannel"> <b-nav-text v-if="configGui.length > 1">
&nbsp;&nbsp; &nbsp;&nbsp;
</b-nav-text> </b-nav-text>
<b-nav-item to="/" @click="logout()"> <b-nav-item to="/" @click="logout()">
@ -46,7 +46,7 @@ export default {
name: 'Menu', name: 'Menu',
computed: { computed: {
...mapState('config', ['configID', 'configGui', 'multiChannel']) ...mapState('config', ['configID', 'configGui'])
}, },
methods: { methods: {

32
package-lock.json generated
View File

@ -1,11 +1,11 @@
{ {
"name": "ffplayout", "name": "ffplayout-frontend",
"version": "5.0.0", "version": "5.0.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ffplayout", "name": "ffplayout-frontend",
"version": "5.0.0", "version": "5.0.0",
"dependencies": { "dependencies": {
"@nuxtjs/axios": "^5.13.6", "@nuxtjs/axios": "^5.13.6",
@ -19,13 +19,13 @@
"mpegts.js": "^1.6.10", "mpegts.js": "^1.6.10",
"nuxt": "^2.15.8", "nuxt": "^2.15.8",
"splitpanes": "^2.3.8", "splitpanes": "^2.3.8",
"video.js": "^7.19.2", "video.js": "^7.20.1",
"vue-loading-overlay": "^3.4.2", "vue-loading-overlay": "^3.4.2",
"vue2-perfect-scrollbar": "^1.5.5", "vue2-perfect-scrollbar": "^1.5.5",
"vuedraggable": "^2.24.3" "vuedraggable": "^2.24.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.18.2", "@babel/eslint-parser": "^7.18.9",
"@babel/preset-react": "^7.18.6", "@babel/preset-react": "^7.18.6",
"@nuxtjs/eslint-config": "^5.0.0", "@nuxtjs/eslint-config": "^5.0.0",
"@nuxtjs/eslint-module": "^3.1.0", "@nuxtjs/eslint-module": "^3.1.0",
@ -85,9 +85,9 @@
} }
}, },
"node_modules/@babel/eslint-parser": { "node_modules/@babel/eslint-parser": {
"version": "7.18.2", "version": "7.18.9",
"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.2.tgz", "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz",
"integrity": "sha512-oFQYkE8SuH14+uR51JVAmdqwKYXGRjEXx7s+WiagVjqQ+HPE+nnwyF2qlVG8evUsUHmPcA+6YXMEDbIhEyQc5A==", "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"eslint-scope": "^5.1.1", "eslint-scope": "^5.1.1",
@ -14917,9 +14917,9 @@
} }
}, },
"node_modules/video.js": { "node_modules/video.js": {
"version": "7.19.2", "version": "7.20.1",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.19.2.tgz", "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.1.tgz",
"integrity": "sha512-+rV/lJ1bDoMW3SbYlRp0eC9//RgvfBpEQ0USOyx44tHVxVyMjq+G9jZoiulsDXaIp4BX9q5+/y87TbZUysXBHA==", "integrity": "sha512-QMuj+bjwvLId9SY8uBAjO9sw7pCDhdVzJtwsAwg1MdVLXgVuxhhSYswdsdsRk+YMssHtReopINclvDlTGTxMLA==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "2.14.2", "@videojs/http-streaming": "2.14.2",
@ -16735,9 +16735,9 @@
} }
}, },
"@babel/eslint-parser": { "@babel/eslint-parser": {
"version": "7.18.2", "version": "7.18.9",
"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.2.tgz", "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz",
"integrity": "sha512-oFQYkE8SuH14+uR51JVAmdqwKYXGRjEXx7s+WiagVjqQ+HPE+nnwyF2qlVG8evUsUHmPcA+6YXMEDbIhEyQc5A==", "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"eslint-scope": "^5.1.1", "eslint-scope": "^5.1.1",
@ -28145,9 +28145,9 @@
"integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==" "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w=="
}, },
"video.js": { "video.js": {
"version": "7.19.2", "version": "7.20.1",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.19.2.tgz", "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.1.tgz",
"integrity": "sha512-+rV/lJ1bDoMW3SbYlRp0eC9//RgvfBpEQ0USOyx44tHVxVyMjq+G9jZoiulsDXaIp4BX9q5+/y87TbZUysXBHA==", "integrity": "sha512-QMuj+bjwvLId9SY8uBAjO9sw7pCDhdVzJtwsAwg1MdVLXgVuxhhSYswdsdsRk+YMssHtReopINclvDlTGTxMLA==",
"requires": { "requires": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "2.14.2", "@videojs/http-streaming": "2.14.2",

6
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ffplayout-frontend", "name": "ffplayout-frontend",
"version": "5.0.0", "version": "5.1.0",
"description": "Web GUI for ffplayout", "description": "Web GUI for ffplayout",
"author": "Jonathan Baecker", "author": "Jonathan Baecker",
"private": true, "private": true,
@ -23,13 +23,13 @@
"mpegts.js": "^1.6.10", "mpegts.js": "^1.6.10",
"nuxt": "^2.15.8", "nuxt": "^2.15.8",
"splitpanes": "^2.3.8", "splitpanes": "^2.3.8",
"video.js": "^7.19.2", "video.js": "^7.20.1",
"vue-loading-overlay": "^3.4.2", "vue-loading-overlay": "^3.4.2",
"vue2-perfect-scrollbar": "^1.5.5", "vue2-perfect-scrollbar": "^1.5.5",
"vuedraggable": "^2.24.3" "vuedraggable": "^2.24.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.18.2", "@babel/eslint-parser": "^7.18.9",
"@babel/preset-react": "^7.18.6", "@babel/preset-react": "^7.18.6",
"@nuxtjs/eslint-config": "^5.0.0", "@nuxtjs/eslint-config": "^5.0.0",
"@nuxtjs/eslint-module": "^3.1.0", "@nuxtjs/eslint-module": "^3.1.0",

48
pages/configure.vue
View File

@ -8,21 +8,21 @@
<b-form v-if="configGui" @submit="onSubmitGui"> <b-form v-if="configGui" @submit="onSubmitGui">
<b-form-group <b-form-group
label-cols-lg="2" label-cols-lg="2"
label="GUI Configuration" label="Channel Configuration"
label-size="lg" label-size="lg"
label-class="font-weight-bold pt-0" label-class="font-weight-bold pt-0"
class="config-group" class="config-group"
> >
<div style="width: 100%; height: 43px;"> <div style="width: 100%; height: 43px;">
<div class="float-right"> <div class="float-right">
<b-button v-if="multiChannel" size="sm" variant="primary" class="m-md-2" @click="addChannel()"> <b-button size="sm" variant="primary" class="m-md-2" @click="addChannel()">
Add new Channel Add new Channel
</b-button> </b-button>
</div> </div>
</div> </div>
<div v-for="(prop, name, idx) in configGui[configID]" :key="idx"> <div v-for="(prop, name, idx) in configGui[configID]" :key="idx">
<b-form-group <b-form-group
v-if="idx >= 1 && name !== 'engine_service'" v-if="idx >= 1"
label-cols-sm="2" label-cols-sm="2"
:label="name" :label="name"
label-align-sm="right" label-align-sm="right"
@ -40,6 +40,13 @@
Visible extensions only for the GUI and not the playout Visible extensions only for the GUI and not the playout
</b-form-text> </b-form-text>
<b-form-select v-else-if="name === 'net_interface'" :id="name" v-model="configGui[configID][name]" :options="netChoices" :value="prop" /> <b-form-select v-else-if="name === 'net_interface'" :id="name" v-model="configGui[configID][name]" :options="netChoices" :value="prop" />
<b-form-input
v-else-if="name === 'service' || name === 'config_path'"
:id="name"
v-model="configGui[configID][name]"
:value="prop"
readonly
/>
<b-form-input <b-form-input
v-else v-else
:id="name" :id="name"
@ -55,7 +62,7 @@
<b-button type="submit" variant="primary"> <b-button type="submit" variant="primary">
Save Save
</b-button> </b-button>
<b-button v-if="multiChannel && configGui[configID].id > 1" variant="danger" @click="deleteChannel()"> <b-button v-if="configGui.length > 1 && configGui[configID].id > 1" variant="danger" @click="deleteChannel()">
Delete Delete
</b-button> </b-button>
</b-button-group> </b-button-group>
@ -252,7 +259,7 @@ export default {
}, },
computed: { computed: {
...mapState('config', ['configID', 'netChoices', 'multiChannel']), ...mapState('config', ['configID', 'netChoices']),
configGui: { configGui: {
get () { get () {
return this.$store.state.config.configGui return this.$store.state.config.configGui
@ -281,27 +288,24 @@ export default {
methods: { methods: {
addChannel () { addChannel () {
const config = this.$_.cloneDeep(this.configGui) const channels = this.$_.cloneDeep(this.configGui)
const newConf = this.$_.cloneDeep(this.configGui[this.configGui.length - 1]) const newChannel = this.$_.cloneDeep(this.configGui[this.configGui.length - 1])
const playoutConfigPath = newConf.playout_config.match(/.*\//) const playoutConfigPath = newChannel.config_path.match(/.*\//)
const playoutConfigFile = newConf.playout_config.replace(/(.*\/|\.yml)/g, '').split('-') const confName = `channel${String(channels.length + 1).padStart(3, '0')}`
const engineService = newConf.engine_service.split('-') newChannel.id = channels.length + 1
newChannel.name = `Channel ${Math.random().toString(36).substring(7)}`
newChannel.config_path = `${playoutConfigPath}${confName}.yml`
newChannel.service = `ffplayout@${confName}.service`
newConf.id = config.length + 1 channels.push(newChannel)
newConf.channel = `Channel ${Math.random().toString(36).substring(7)}`
newConf.playout_config = `${playoutConfigPath}${playoutConfigFile[0]}-${String(parseInt(playoutConfigFile[1]) + 1).padStart(3, '0')}.yml`
newConf.engine_service = `${engineService[0]}-${String(parseInt(engineService[1]) + 1).padStart(3, '0')}`
config.push(newConf) this.$store.commit('config/UPDATE_GUI_CONFIG', channels)
this.$store.commit('config/UPDATE_GUI_CONFIG', config)
this.$store.commit('config/UPDATE_CONFIG_ID', this.configGui.length - 1) this.$store.commit('config/UPDATE_CONFIG_ID', this.configGui.length - 1)
}, },
async onSubmitGui (evt) { async onSubmitGui (evt) {
evt.preventDefault() evt.preventDefault()
await this.$store.dispatch('auth/inspectToken')
const update = await this.$store.dispatch('config/setGuiConfig', this.configGui[this.configID]) const update = await this.$store.dispatch('config/setGuiConfig', this.configGui[this.configID])
if (update.status === 200 || update.status === 201) { if (update.status === 200 || update.status === 201) {
@ -324,7 +328,7 @@ export default {
this.showAlert = true this.showAlert = true
return return
} }
const response = await this.$axios.delete(`api/player/guisettings/${id}/`) const response = await this.$axios.delete(`api/channel/${id}`)
config.splice(this.configID, 1) config.splice(this.configID, 1)
@ -332,7 +336,7 @@ export default {
this.$store.commit('config/UPDATE_CONFIG_ID', this.configGui.length - 1) this.$store.commit('config/UPDATE_CONFIG_ID', this.configGui.length - 1)
await this.$store.dispatch('config/getPlayoutConfig') await this.$store.dispatch('config/getPlayoutConfig')
if (response.status === 204) { if (response.status === 200) {
this.alertVariant = 'success' this.alertVariant = 'success'
this.alertMsg = 'Delete GUI config success!' this.alertMsg = 'Delete GUI config success!'
} else { } else {
@ -367,10 +371,10 @@ export default {
if (update.status === 200) { if (update.status === 200) {
this.alertVariant = 'success' this.alertVariant = 'success'
this.alertMsg = 'Update user profil success!' this.alertMsg = 'Update user profile success!'
} else { } else {
this.alertVariant = 'danger' this.alertVariant = 'danger'
this.alertMsg = 'Update user profil failed!' this.alertMsg = 'Update user profile failed!'
} }
this.showAlert = true this.showAlert = true

11
store/config.js
View File

@ -10,8 +10,7 @@ export const state = () => ({
configPlayout: {}, configPlayout: {},
currentUser: null, currentUser: null,
configUser: null, configUser: null,
timezone: 'UTC', timezone: 'UTC'
multiChannel: false
}) })
export const mutations = { export const mutations = {
@ -58,7 +57,7 @@ export const actions = {
}, },
async getGuiConfig ({ commit, state }) { async getGuiConfig ({ commit, state }) {
const response = await this.$axios.get('api/settings') const response = await this.$axios.get('api/channels')
if (response.data) { if (response.data) {
for (const data of response.data) { for (const data of response.data) {
@ -90,13 +89,13 @@ export const actions = {
let response let response
if (state.configGuiRaw.some(e => e.id === stringObj.id)) { if (state.configGuiRaw.some(e => e.id === stringObj.id)) {
response = await this.$axios.patch(`api/settings/${obj.id}`, stringObj) response = await this.$axios.patch(`api/channel/${obj.id}`, stringObj)
} else { } else {
response = await this.$axios.post('api/settings/', stringObj) response = await this.$axios.post('api/channel/', stringObj)
const guiConfigs = [] const guiConfigs = []
for (const obj of state.configGui) { for (const obj of state.configGui) {
if (obj.channel === stringObj.channel) { if (obj.name === stringObj.name) {
response.data.extra_extensions = response.data.extra_extensions.split(',') response.data.extra_extensions = response.data.extra_extensions.split(',')
guiConfigs.push(response.data) guiConfigs.push(response.data)
} else { } else {