add advanced config

components/ConfigAdvanced.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="min-w-[200px] pe-8 w-[768px]">
+        <h2 class="pt-3 text-3xl">{{ $t('advanced.title') }}</h2>
+        <form
+            v-if="configStore.advanced"
+            class="mt-10 grid md:grid-cols-[180px_auto] gap-5"
+            @submit.prevent="onSubmitAdvanced"
+        >
+            <template v-for="(item, key) in configStore.advanced" :key="key">
+                <div class="text-xl pt-3 text-right">{{ setTitle(key.toString()) }}:</div>
+                <div class="md:pt-4">
+                    <label
+                        v-for="(_, name) in (item as Record<string, any>)"
+                        :key="name"
+                        class="form-control w-full"
+                    >
+                        <div class="label">
+                            <span class="label-text !text-md font-bold">{{ name }}</span>
+                        </div>
+                        <input
+                            :id="name"
+                            v-model="item[name]"
+                            type="text"
+                            class="input input-sm input-bordered w-full"
+                        />
+                    </label>
+                </div>
+            </template>
+            <div class="mt-5 mb-10">
+                <button class="btn btn-primary" type="submit">{{ $t('config.save') }}</button>
+            </div>
+        </form>
+    </div>
+
+    <GenericModal
+        :title="$t('config.restartTile')"
+        :text="$t('config.restartText')"
+        :show="showModal"
+        :modal-action="restart"
+    />
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const authStore = useAuth()
+const configStore = useConfig()
+const indexStore = useIndex()
+
+const showModal = ref(false)
+
+function setTitle(input: string): string {
+    switch (input) {
+        case 'decoder':
+            return t('advanced.decoder')
+        case 'encoder':
+            return t('advanced.encoder')
+        case 'filter':
+            return t('advanced.filter')
+        case 'ingest':
+            return t('advanced.ingest')
+        default:
+            return input
+    }
+}
+
+async function onSubmitAdvanced() {
+    const update = await configStore.setPlayoutConfig(configStore.playout)
+    configStore.onetimeInfo = true
+
+    if (update.status === 200) {
+        indexStore.msgAlert('success', t('config.updatePlayoutSuccess'), 2)
+
+        const channel = configStore.configChannel[configStore.configID].id
+
+        await $fetch(`/api/control/${channel}/process/`, {
+            method: 'POST',
+            headers: { ...configStore.contentType, ...authStore.authHeader },
+            body: JSON.stringify({ command: 'status' }),
+        }).then((response: any) => {
+            if (response === 'active') {
+                showModal.value = true
+            }
+        })
+    } else {
+        indexStore.msgAlert('error', t('config.updatePlayoutFailed'), 2)
+    }
+}
+
+async function restart(res: boolean) {
+    if (res) {
+        const channel = configStore.configChannel[configStore.configID].id
+
+        await $fetch(`/api/control/${channel}/process/`, {
+            method: 'POST',
+            headers: { ...configStore.contentType, ...authStore.authHeader },
+            body: JSON.stringify({ command: 'restart' }),
+        })
+    }
+
+    showModal.value = false
+}
+</script>

components/ConfigChannel.vue

@@ -81,7 +81,7 @@ async function onSubmitGui() {
     /*
         Save GUI settings.
     */
-    const update = await configStore.setGuiConfig(configStore.configChannel[configStore.configID])
+    const update = await configStore.setChannelConfig(configStore.configChannel[configStore.configID])
 
     if (update.status) {
         indexStore.msgAlert('success', t('config.updateChannelSuccess'), 2)

lang/de-DE.js

@@ -137,6 +137,13 @@ export default {
     log: {
         download: 'Protokoll herunterladen',
     },
+    advanced: {
+        title: 'Advanced Configuration',
+        decoder: 'Decoder',
+        encoder: 'Encoder',
+        filter: 'Filter',
+        ingest: 'Ingest',
+    },
     config: {
         channel: 'Kanal',
         user: 'Benutzer',

lang/en-US.js

@@ -137,6 +137,13 @@ export default {
     log: {
         download: 'Download log file',
     },
+    advanced: {
+        title: 'Advanced Configuration',
+        decoder: 'Decoder',
+        encoder: 'Encoder',
+        filter: 'Filter',
+        ingest: 'Ingest',
+    },
     config: {
         channel: 'Channel',
         user: 'User',

lang/pt-BR.js

@@ -137,6 +137,13 @@ export default {
     log: {
         download: 'Baixar arquivo de registro',
     },
+    advanced: {
+        title: 'Advanced Configuration',
+        decoder: 'Decoder',
+        encoder: 'Encoder',
+        filter: 'Filter',
+        ingest: 'Ingest',
+    },
     config: {
         channel: 'Canal',
         user: 'Usuário',

lang/ru-RU.js

@@ -137,6 +137,13 @@ export default {
     log: {
         download: 'Скачать лог файл',
     },
+    advanced: {
+        title: 'Advanced Configuration',
+        decoder: 'Decoder',
+        encoder: 'Encoder',
+        filter: 'Filter',
+        ingest: 'Ingest',
+    },
     config: {
         channel: 'Канал',
         user: 'Юзер',

package.json

@@ -16,13 +16,13 @@
     "@nuxtjs/color-mode": "^3.4.1",
     "@pinia/nuxt": "^0.5.1",
     "@vuepic/vue-datepicker": "^8.8.0",
-    "@vueuse/nuxt": "^10.10.1",
+    "@vueuse/nuxt": "^10.11.0",
     "bootstrap-icons": "^1.11.3",
     "dayjs": "^1.11.11",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "mpegts.js": "^1.7.3",
-    "nuxt": "3.12.1",
+    "nuxt": "3.12.2",
     "pinia": "^2.1.7",
     "sortablejs-vue3": "^1.2.11",
     "splitpanes": "^3.1.5",
@@ -39,7 +39,7 @@
     "postcss-loader": "^8.1.1",
     "sass": "^1.77.5",
     "sass-loader": "^14.2.1",
-    "vue": "^3.4.27",
+    "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   }
 }

pages/configure.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="flex w-full h-full">
+    <div class="flex w-full h-full ps-1">
-        <div class="flex-none w-[70px] join join-vertical me-3 px-1 pt-7">
+        <div class="flex-none w-[70px] join join-vertical me-3 pt-7">
             <button
                 class="join-item w-full btn btn-sm btn-primary duration-500"
                 :class="activeConf === 1 && 'btn-secondary'"
@@ -9,16 +9,23 @@
                 {{ $t('config.channel') }}
             </button>
             <button
-                class="join-item w-full btn btn-sm btn-primary mt-1 duration-500"
+                class="join-item w-full btn btn-sm btn-primary duration-500"
                 :class="activeConf === 2 && 'btn-secondary'"
                 @click="activeConf = 2"
             >
-                Playout
+                Advanced
             </button>
             <button
                 class="join-item w-full btn btn-sm btn-primary mt-1 duration-500"
                 :class="activeConf === 3 && 'btn-secondary'"
                 @click="activeConf = 3"
+            >
+                Playout
+            </button>
+            <button
+                class="join-item w-full btn btn-sm btn-primary mt-1 duration-500"
+                :class="activeConf === 4 && 'btn-secondary'"
+                @click="activeConf = 4"
             >
                 {{ $t('config.user') }}
             </button>
@@ -28,11 +35,15 @@
                 <ConfigChannel />
             </div>
 
-            <div v-else-if="activeConf === 2" class="w-full flex justify-center">
+            <div v-if="activeConf === 2" class="w-full flex justify-center">
-                <ConfigPlayout />
+                <ConfigAdvanced />
             </div>
 
             <div v-else-if="activeConf === 3" class="w-full flex justify-center">
+                <ConfigPlayout />
+            </div>
+
+            <div v-else-if="activeConf === 4" class="w-full flex justify-center">
                 <ConfigUser />
             </div>
         </div>

stores/config.ts

@@ -9,6 +9,7 @@ export const useConfig = defineStore('config', {
         configChannel: [] as GuiConfig[],
         configChannelRaw: [] as GuiConfig[],
         playlistLength: 86400.0,
+        advanced: {} as any,
         playout: {} as any,
         currentUser: 0,
         configUser: {} as User,
@@ -25,13 +26,18 @@ export const useConfig = defineStore('config', {
 
             if (authStore.isLogin) {
                 await authStore.obtainUuid()
-                await this.getGuiConfig()
+                await this.getChannelConfig()
                 await this.getPlayoutConfig()
                 await this.getUserConfig()
+
+
+                if (this.configUser.id === 1) {
+                    await this.getAdvancedConfig()
+                }
             }
         },
 
-        async getGuiConfig() {
+        async getChannelConfig() {
             const authStore = useAuth()
             const indexStore = useIndex()
 
@@ -75,7 +81,7 @@ export const useConfig = defineStore('config', {
                 })
         },
 
-        async setGuiConfig(obj: GuiConfig): Promise<any> {
+        async setChannelConfig(obj: GuiConfig): Promise<any> {
             const authStore = useAuth()
             const stringObj = _.cloneDeep(obj)
             let response
@@ -141,6 +147,24 @@ export const useConfig = defineStore('config', {
                 })
         },
 
+        async getAdvancedConfig() {
+            const { $i18n } = useNuxtApp()
+            const authStore = useAuth()
+            const indexStore = useIndex()
+            const channel = this.configChannel[this.configID].id
+
+            await $fetch(`/api/playout/advanced/${channel}`, {
+                method: 'GET',
+                headers: authStore.authHeader,
+            })
+                .then((data) => {
+                    this.advanced = data
+                })
+                .catch(() => {
+                    indexStore.msgAlert('error', $i18n.t('config.noAdvancedConfig'), 3)
+                })
+        },
+
         async setPlayoutConfig(obj: any) {
             const { timeToSeconds } = stringFormatter()
             const authStore = useAuth()