diff --git a/components/Menu.vue b/components/Menu.vue index 2baaab54..84d1b4e3 100644 --- a/components/Menu.vue +++ b/components/Menu.vue @@ -20,15 +20,15 @@ Configure - +    - - - {{ channel.channel }} + + + {{ channel.name }} - +    @@ -46,7 +46,7 @@ export default { name: 'Menu', computed: { - ...mapState('config', ['configID', 'configGui', 'multiChannel']) + ...mapState('config', ['configID', 'configGui']) }, methods: { diff --git a/package-lock.json b/package-lock.json index 3233eab3..a034bca6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 17a196e7..928d58ac 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pages/configure.vue b/pages/configure.vue index cc8324dd..27604663 100644 --- a/pages/configure.vue +++ b/pages/configure.vue @@ -8,21 +8,21 @@
- + Add new Channel
+ Save - + Delete @@ -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 diff --git a/store/config.js b/store/config.js index f8d22845..06482e17 100644 --- a/store/config.js +++ b/store/config.js @@ -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 {