reactivate multi channel support
This commit is contained in:
jb-alvarado
parent
9b4aa44217
commit
9868d27b19
@ -20,15 +20,15 @@
|
||||
<b-nav-item to="/configure" exact-active-class="active-menu-item">
|
||||
Configure
|
||||
</b-nav-item>
|
||||
<b-nav-text v-if="multiChannel">
|
||||
<b-nav-text v-if="configGui.length > 1">
|
||||
|
||||
</b-nav-text>
|
||||
<b-nav-item-dropdown v-if="multiChannel" :text="configGui[configID].channel" right>
|
||||
<b-dropdown-item v-for="(channel, index) in configGui" :key="channel.key" @click="selectChannel(index)">
|
||||
{{ channel.channel }}
|
||||
<b-nav-item-dropdown v-if="configGui.length > 1" :text="configGui[configID].name" right>
|
||||
<b-dropdown-item v-for="(channel, index) in configGui" :key="index" @click="selectChannel(index)">
|
||||
{{ channel.name }}
|
||||
</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
<b-nav-text v-if="multiChannel">
|
||||
<b-nav-text v-if="configGui.length > 1">
|
||||
|
||||
</b-nav-text>
|
||||
<b-nav-item to="/" @click="logout()">
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
name: 'Menu',
|
||||
|
||||
computed: {
|
||||
...mapState('config', ['configID', 'configGui', 'multiChannel'])
|
||||
...mapState('config', ['configID', 'configGui'])
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
32
package-lock.json
generated
32
package-lock.json
generated
@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "ffplayout",
|
||||
"name": "ffplayout-frontend",
|
||||
"version": "5.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "ffplayout",
|
||||
"name": "ffplayout-frontend",
|
||||
"version": "5.0.0",
|
||||
"dependencies": {
|
||||
"@nuxtjs/axios": "^5.13.6",
|
||||
@ -19,13 +19,13 @@
|
||||
"mpegts.js": "^1.6.10",
|
||||
"nuxt": "^2.15.8",
|
||||
"splitpanes": "^2.3.8",
|
||||
"video.js": "^7.19.2",
|
||||
"video.js": "^7.20.1",
|
||||
"vue-loading-overlay": "^3.4.2",
|
||||
"vue2-perfect-scrollbar": "^1.5.5",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "^7.18.2",
|
||||
"@babel/eslint-parser": "^7.18.9",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@nuxtjs/eslint-config": "^5.0.0",
|
||||
"@nuxtjs/eslint-module": "^3.1.0",
|
||||
@ -85,9 +85,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/eslint-parser": {
|
||||
"version": "7.18.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.2.tgz",
|
||||
"integrity": "sha512-oFQYkE8SuH14+uR51JVAmdqwKYXGRjEXx7s+WiagVjqQ+HPE+nnwyF2qlVG8evUsUHmPcA+6YXMEDbIhEyQc5A==",
|
||||
"version": "7.18.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz",
|
||||
"integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"eslint-scope": "^5.1.1",
|
||||
@ -14917,9 +14917,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/video.js": {
|
||||
"version": "7.19.2",
|
||||
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.19.2.tgz",
|
||||
"integrity": "sha512-+rV/lJ1bDoMW3SbYlRp0eC9//RgvfBpEQ0USOyx44tHVxVyMjq+G9jZoiulsDXaIp4BX9q5+/y87TbZUysXBHA==",
|
||||
"version": "7.20.1",
|
||||
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.1.tgz",
|
||||
"integrity": "sha512-QMuj+bjwvLId9SY8uBAjO9sw7pCDhdVzJtwsAwg1MdVLXgVuxhhSYswdsdsRk+YMssHtReopINclvDlTGTxMLA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@videojs/http-streaming": "2.14.2",
|
||||
@ -16735,9 +16735,9 @@
|
||||
}
|
||||
},
|
||||
"@babel/eslint-parser": {
|
||||
"version": "7.18.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.2.tgz",
|
||||
"integrity": "sha512-oFQYkE8SuH14+uR51JVAmdqwKYXGRjEXx7s+WiagVjqQ+HPE+nnwyF2qlVG8evUsUHmPcA+6YXMEDbIhEyQc5A==",
|
||||
"version": "7.18.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz",
|
||||
"integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"eslint-scope": "^5.1.1",
|
||||
@ -28145,9 +28145,9 @@
|
||||
"integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w=="
|
||||
},
|
||||
"video.js": {
|
||||
"version": "7.19.2",
|
||||
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.19.2.tgz",
|
||||
"integrity": "sha512-+rV/lJ1bDoMW3SbYlRp0eC9//RgvfBpEQ0USOyx44tHVxVyMjq+G9jZoiulsDXaIp4BX9q5+/y87TbZUysXBHA==",
|
||||
"version": "7.20.1",
|
||||
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.1.tgz",
|
||||
"integrity": "sha512-QMuj+bjwvLId9SY8uBAjO9sw7pCDhdVzJtwsAwg1MdVLXgVuxhhSYswdsdsRk+YMssHtReopINclvDlTGTxMLA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@videojs/http-streaming": "2.14.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ffplayout-frontend",
|
||||
"version": "5.0.0",
|
||||
"version": "5.1.0",
|
||||
"description": "Web GUI for ffplayout",
|
||||
"author": "Jonathan Baecker",
|
||||
"private": true,
|
||||
@ -23,13 +23,13 @@
|
||||
"mpegts.js": "^1.6.10",
|
||||
"nuxt": "^2.15.8",
|
||||
"splitpanes": "^2.3.8",
|
||||
"video.js": "^7.19.2",
|
||||
"video.js": "^7.20.1",
|
||||
"vue-loading-overlay": "^3.4.2",
|
||||
"vue2-perfect-scrollbar": "^1.5.5",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "^7.18.2",
|
||||
"@babel/eslint-parser": "^7.18.9",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@nuxtjs/eslint-config": "^5.0.0",
|
||||
"@nuxtjs/eslint-module": "^3.1.0",
|
||||
|
||||
@ -8,21 +8,21 @@
|
||||
<b-form v-if="configGui" @submit="onSubmitGui">
|
||||
<b-form-group
|
||||
label-cols-lg="2"
|
||||
label="GUI Configuration"
|
||||
label="Channel Configuration"
|
||||
label-size="lg"
|
||||
label-class="font-weight-bold pt-0"
|
||||
class="config-group"
|
||||
>
|
||||
<div style="width: 100%; height: 43px;">
|
||||
<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
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(prop, name, idx) in configGui[configID]" :key="idx">
|
||||
<b-form-group
|
||||
v-if="idx >= 1 && name !== 'engine_service'"
|
||||
v-if="idx >= 1"
|
||||
label-cols-sm="2"
|
||||
:label="name"
|
||||
label-align-sm="right"
|
||||
@ -40,6 +40,13 @@
|
||||
Visible extensions only for the GUI and not the playout
|
||||
</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-input
|
||||
v-else-if="name === 'service' || name === 'config_path'"
|
||||
:id="name"
|
||||
v-model="configGui[configID][name]"
|
||||
:value="prop"
|
||||
readonly
|
||||
/>
|
||||
<b-form-input
|
||||
v-else
|
||||
:id="name"
|
||||
@ -55,7 +62,7 @@
|
||||
<b-button type="submit" variant="primary">
|
||||
Save
|
||||
</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
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
@ -252,7 +259,7 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState('config', ['configID', 'netChoices', 'multiChannel']),
|
||||
...mapState('config', ['configID', 'netChoices']),
|
||||
configGui: {
|
||||
get () {
|
||||
return this.$store.state.config.configGui
|
||||
@ -281,27 +288,24 @@ export default {
|
||||
|
||||
methods: {
|
||||
addChannel () {
|
||||
const config = this.$_.cloneDeep(this.configGui)
|
||||
const newConf = this.$_.cloneDeep(this.configGui[this.configGui.length - 1])
|
||||
const channels = this.$_.cloneDeep(this.configGui)
|
||||
const newChannel = this.$_.cloneDeep(this.configGui[this.configGui.length - 1])
|
||||
|
||||
const playoutConfigPath = newConf.playout_config.match(/.*\//)
|
||||
const playoutConfigFile = newConf.playout_config.replace(/(.*\/|\.yml)/g, '').split('-')
|
||||
const playoutConfigPath = newChannel.config_path.match(/.*\//)
|
||||
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
|
||||
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')}`
|
||||
channels.push(newChannel)
|
||||
|
||||
config.push(newConf)
|
||||
|
||||
this.$store.commit('config/UPDATE_GUI_CONFIG', config)
|
||||
this.$store.commit('config/UPDATE_GUI_CONFIG', channels)
|
||||
this.$store.commit('config/UPDATE_CONFIG_ID', this.configGui.length - 1)
|
||||
},
|
||||
async onSubmitGui (evt) {
|
||||
evt.preventDefault()
|
||||
await this.$store.dispatch('auth/inspectToken')
|
||||
const update = await this.$store.dispatch('config/setGuiConfig', this.configGui[this.configID])
|
||||
|
||||
if (update.status === 200 || update.status === 201) {
|
||||
@ -324,7 +328,7 @@ export default {
|
||||
this.showAlert = true
|
||||
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)
|
||||
|
||||
@ -332,7 +336,7 @@ export default {
|
||||
this.$store.commit('config/UPDATE_CONFIG_ID', this.configGui.length - 1)
|
||||
await this.$store.dispatch('config/getPlayoutConfig')
|
||||
|
||||
if (response.status === 204) {
|
||||
if (response.status === 200) {
|
||||
this.alertVariant = 'success'
|
||||
this.alertMsg = 'Delete GUI config success!'
|
||||
} else {
|
||||
@ -367,10 +371,10 @@ export default {
|
||||
|
||||
if (update.status === 200) {
|
||||
this.alertVariant = 'success'
|
||||
this.alertMsg = 'Update user profil success!'
|
||||
this.alertMsg = 'Update user profile success!'
|
||||
} else {
|
||||
this.alertVariant = 'danger'
|
||||
this.alertMsg = 'Update user profil failed!'
|
||||
this.alertMsg = 'Update user profile failed!'
|
||||
}
|
||||
|
||||
this.showAlert = true
|
||||
|
||||
@ -10,8 +10,7 @@ export const state = () => ({
|
||||
configPlayout: {},
|
||||
currentUser: null,
|
||||
configUser: null,
|
||||
timezone: 'UTC',
|
||||
multiChannel: false
|
||||
timezone: 'UTC'
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
@ -58,7 +57,7 @@ export const actions = {
|
||||
},
|
||||
|
||||
async getGuiConfig ({ commit, state }) {
|
||||
const response = await this.$axios.get('api/settings')
|
||||
const response = await this.$axios.get('api/channels')
|
||||
|
||||
if (response.data) {
|
||||
for (const data of response.data) {
|
||||
@ -90,13 +89,13 @@ export const actions = {
|
||||
let response
|
||||
|
||||
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 {
|
||||
response = await this.$axios.post('api/settings/', stringObj)
|
||||
response = await this.$axios.post('api/channel/', stringObj)
|
||||
const guiConfigs = []
|
||||
|
||||
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(',')
|
||||
guiConfigs.push(response.data)
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user