rename gui to channel, rename configChannel to channel, move path configuration to channel config

2024-08-22 10:59:11 +02:00 · 2024-08-22 10:59:11 +02:00 · e183320e13
commit e183320e13
parent 86b2b00e0e
25 changed files with 161 additions and 161 deletions
--- a/components/ConfigAdvanced.vue
+++ b/components/ConfigAdvanced.vue
@ -72,7 +72,7 @@ async function onSubmitAdvanced() {
    if (update.status === 200) {
        indexStore.msgAlert('success', t('advanced.updateSuccess'), 2)

-        const channel = configStore.configChannel[configStore.configID].id
+        const channel = configStore.channels[configStore.id].id

        await $fetch(`/api/control/${channel}/process/`, {
            method: 'POST',
@ -90,7 +90,7 @@ async function onSubmitAdvanced() {

 async function restart(res: boolean) {
    if (res) {
-        const channel = configStore.configChannel[configStore.configID].id
+        const channel = configStore.channels[configStore.id].id

        await $fetch(`/api/control/${channel}/process/`, {
            method: 'POST',
--- a/components/ConfigChannel.vue
+++ b/components/ConfigChannel.vue
@ -1,22 +1,21 @@
 <template>
-    <div class="w-full max-w-[800px]">
-        <h2 class="pt-3 text-3xl">{{ $t('config.channelConf') }}</h2>
+    <div v-if="configStore.channels && configStore.channels[configStore.id]" class="w-full max-w-[800px]">
+        <h2 class="pt-3 text-3xl">{{ $t('config.channelConf') }} ({{ configStore.channels[configStore.id].id }})</h2>
        <div class="w-full flex justify-end my-4">
            <button v-if="authStore.role === 'GlobalAdmin'" class="btn btn-sm btn-primary" @click="addChannel()">
                {{ $t('config.addChannel') }}
            </button>
        </div>
        <form
-            v-if="configStore.configChannel && configStore.configChannel[configStore.configID]"
            class="w-full"
-            @submit.prevent="onSubmitGui"
+            @submit.prevent="onSubmitChannel"
        >
            <label class="form-control w-full">
                <div class="label">
                    <span class="label-text">{{ $t('config.name') }}</span>
                </div>
                <input
-                    v-model="configStore.configChannel[configStore.configID].name"
+                    v-model="configStore.channels[configStore.id].name"
                    type="text"
                    placeholder="Type here"
                    class="input input-bordered w-full"
@ -28,7 +27,7 @@
                    <span class="label-text">{{ $t('config.previewUrl') }}</span>
                </div>
                <input
-                    v-model="configStore.configChannel[configStore.configID].preview_url"
+                    v-model="configStore.channels[configStore.id].preview_url"
                    type="text"
                    class="input input-bordered w-full"
                />
@ -39,19 +38,54 @@
                    <span class="label-text">{{ $t('config.extensions') }}</span>
                </div>
                <input
-                    v-model="configStore.configChannel[configStore.configID].extra_extensions"
+                    v-model="configStore.channels[configStore.id].extra_extensions"
                    type="text"
                    class="input input-bordered w-full"
                />
            </label>

+            <template v-if="authStore.role === 'GlobalAdmin'">
+                <label class="form-control w-full mt-5">
+                    <div class="label">
+                        <span class="label-text">{{ $t('config.hlsPath') }}</span>
+                    </div>
+                    <input
+                        v-model="configStore.channels[configStore.id].hls_path"
+                        type="text"
+                        class="input input-bordered w-full"
+                    />
+                </label>
+
+                <label class="form-control w-full mt-5">
+                    <div class="label">
+                        <span class="label-text">{{ $t('config.playlistPath') }}</span>
+                    </div>
+                    <input
+                        v-model="configStore.channels[configStore.id].playlist_path"
+                        type="text"
+                        class="input input-bordered w-full"
+                    />
+                </label>
+
+                <label class="form-control w-full mt-5">
+                    <div class="label">
+                        <span class="label-text">{{ $t('config.storagePath') }}</span>
+                    </div>
+                    <input
+                        v-model="configStore.channels[configStore.id].storage_path"
+                        type="text"
+                        class="input input-bordered w-full"
+                    />
+                </label>
+            </template>
+
            <div class="join my-4">
                <button class="join-item btn btn-primary" type="submit">{{ $t('config.save') }}</button>
                <button
                    v-if="
                        authStore.role === 'GlobalAdmin' &&
-                        configStore.configChannel.length > 1 &&
-                        configStore.configChannel[configStore.configID].id > 1
+                        configStore.channels.length > 1 &&
+                        configStore.channels[configStore.id].id > 1
                    "
                    class="join-item btn btn-primary"
                    @click="deleteChannel()"
@ -72,23 +106,26 @@ const configStore = useConfig()
 const indexStore = useIndex()

 async function addChannel() {
-    const channels = $_.cloneDeep(configStore.configChannel)
-    const newChannel = $_.cloneDeep(configStore.configChannel[configStore.configChannel.length - 1])
+    const channels = $_.cloneDeep(configStore.channels)
+    const newChannel = $_.cloneDeep(configStore.channels[configStore.channels.length - 1])

    newChannel.id = channels.length + 1
-    newChannel.name = `Channel ${Math.random().toString(36).substring(7)}`
+    newChannel.name = `Channel ${newChannel.id}`
    newChannel.preview_url = `${window.location.protocol}//${window.location.host}/live/${newChannel.id}/stream.m3u8`
+    newChannel.hls_path = `${newChannel.hls_path}/${newChannel.id}`
+    newChannel.playlist_path = `${newChannel.playlist_path}/${newChannel.id}`
+    newChannel.storage_path = `${newChannel.storage_path}/${newChannel.id}`

    channels.push(newChannel)
-    configStore.configChannel = channels
-    configStore.configID = configStore.configChannel.length - 1
+    configStore.channels = channels
+    configStore.id = configStore.channels.length - 1
 }

-async function onSubmitGui() {
+async function onSubmitChannel() {
    /*
-        Save GUI settings.
+        Save channel settings.
    */
-    const update = await configStore.setChannelConfig(configStore.configChannel[configStore.configID])
+    const update = await configStore.setChannelConfig(configStore.channels[configStore.id])

    if (update.status) {
        indexStore.msgAlert('success', t('config.updateChannelSuccess'), 2)
@ -98,8 +135,8 @@ async function onSubmitGui() {
 }

 async function deleteChannel() {
-    const config = $_.cloneDeep(configStore.configChannel)
-    const id = config[configStore.configID].id
+    const config = $_.cloneDeep(configStore.channels)
+    const id = config[configStore.id].id

    if (id === 1) {
        indexStore.msgAlert('warning', t('config.errorChannelDelete'), 2)
@ -111,9 +148,9 @@ async function deleteChannel() {
        headers: authStore.authHeader,
    })

-    config.splice(configStore.configID, 1)
-    configStore.configChannel = config
-    configStore.configID = configStore.configChannel.length - 1
+    config.splice(configStore.id, 1)
+    configStore.channels = config
+    configStore.id = configStore.channels.length - 1
    await configStore.getPlayoutConfig()

    if (response.status === 200) {
--- a/components/ConfigPlayout.vue
+++ b/components/ConfigPlayout.vue
@ -170,7 +170,7 @@ async function onSubmitPlayout() {
    if (update.status === 200) {
        indexStore.msgAlert('success', t('config.updatePlayoutSuccess'), 2)

-        const channel = configStore.configChannel[configStore.configID].id
+        const channel = configStore.channels[configStore.id].id

        await $fetch(`/api/control/${channel}/process/`, {
            method: 'POST',
@ -188,7 +188,7 @@ async function onSubmitPlayout() {

 async function restart(res: boolean) {
    if (res) {
-        const channel = configStore.configChannel[configStore.configID].id
+        const channel = configStore.channels[configStore.id].id

        await $fetch(`/api/control/${channel}/process/`, {
            method: 'POST',
--- a/components/ConfigUser.vue
+++ b/components/ConfigUser.vue
@ -53,7 +53,7 @@
            <div v-if="authStore.role === 'GlobalAdmin'" class="form-control w-full max-w-md mt-5">
                <Multiselect
                    v-model="configStore.configUser.channel_ids"
-                    :options="configStore.configChannel"
+                    :options="configStore.channels"
                    mode="tags"
                    :close-on-select="true"
                    :can-clear="false"
@ -103,7 +103,7 @@
            <div class="form-control mt-5">
                <Multiselect
                    v-model="user.channel_ids"
-                    :options="configStore.configChannel"
+                    :options="configStore.channels"
                    mode="tags"
                    :close-on-select="true"
                    :can-clear="false"
--- a/components/HeaderMenu.vue
+++ b/components/HeaderMenu.vue
@ -22,15 +22,15 @@
                            </span>
                        </NuxtLink>
                    </li>
-                    <li v-if="configStore.configChannel.length > 1">
+                    <li v-if="configStore.channels.length > 1">
                        <details tabindex="0" @focusout="closeDropdown">
                            <summary>
                                <div class="h-[19px] text-base">
-                                    <span> {{ configStore.configChannel[configStore.configID].name }} </span>
+                                    <span> {{ configStore.channels[configStore.id].name }} </span>
                                </div>
                            </summary>
                            <ul class="p-2">
-                                <li v-for="(channel, index) in configStore.configChannel" :key="index">
+                                <li v-for="(channel, index) in configStore.channels" :key="index">
                                    <span>
                                        <a class="dropdown-item" @click="selectChannel(index)">{{ channel.name }}</a>
                                    </span>
@ -59,15 +59,15 @@
                        </span>
                    </NuxtLink>
                </li>
-                <li v-if="configStore.configChannel.length > 1">
+                <li v-if="configStore.channels.length > 1">
                    <details tabindex="0" @focusout="closeDropdown">
                        <summary>
                            <div class="h-[19px] text-base">
-                                <span> {{ configStore.configChannel[configStore.configID].name }} </span>
+                                <span> {{ configStore.channels[configStore.id].name }} </span>
                            </div>
                        </summary>
                        <ul class="p-2 bg-base-100 rounded-md !mt-1 w-36" tabindex="0">
-                            <li v-for="(channel, index) in configStore.configChannel" :key="index">
+                            <li v-for="(channel, index) in configStore.channels" :key="index">
                                <a class="dropdown-item" @click="selectChannel(index)">
                                    {{ channel.name }}
                                </a>
@ -128,7 +128,7 @@ function logout() {
 }

 function selectChannel(index: number) {
-    configStore.configID = index
+    configStore.id = index
    configStore.getPlayoutConfig()
 }

--- a/components/MediaBrowser.vue
+++ b/components/MediaBrowser.vue
@ -79,7 +79,7 @@ const { secToHMS, mediaType } = stringFormatter()

 const configStore = useConfig()
 const mediaStore = useMedia()
-const { configID } = storeToRefs(useConfig())
+const { id } = storeToRefs(useConfig())

 const browserSortOptions = {
    group: { name: 'playlist', pull: 'clone', put: false },
@ -102,7 +102,7 @@ onMounted(() => {
    }
 })

-watch([configID], () => {
+watch([id], () => {
    mediaStore.getTree('')
 })
 </script>
--- a/components/PlayerControl.vue
+++ b/components/PlayerControl.vue
@ -6,8 +6,8 @@
                    <div class="w-full aspect-video">
                        <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
                        <VideoPlayer
-                            v-else-if="configStore.showPlayer && configStore.configChannel[configStore.configID]"
-                            :key="configStore.configID"
+                            v-else-if="configStore.showPlayer && configStore.channels[configStore.id]"
+                            :key="configStore.id"
                            class="live-player"
                            reference="httpStream"
                            :options="{
@ -19,7 +19,7 @@
                                sources: [
                                    {
                                        type: 'application/x-mpegURL',
-                                        src: configStore.configChannel[configStore.configID].preview_url,
+                                        src: configStore.channels[configStore.id].preview_url,
                                    },
                                ],
                            }"
@ -174,18 +174,18 @@ const configStore = useConfig()
 const indexStore = useIndex()
 const playlistStore = usePlaylist()
 const { filename, secToHMS } = stringFormatter()
-const { configID } = storeToRefs(useConfig())
+const { id } = storeToRefs(useConfig())

 playlistStore.currentClip = t('control.noClip')
 const timeStr = ref('00:00:00')
 const timer = ref()
 const errorCounter = ref(0)
-const streamExtension = ref(configStore.configChannel[configStore.configID].preview_url.split('.').pop())
+const streamExtension = ref(configStore.channels[configStore.id].preview_url.split('.').pop())
 const httpStreamFlv = ref(null)
 const httpFlvSource = ref({
    type: 'flv',
    isLive: true,
-    url: configStore.configChannel[configStore.configID].preview_url,
+    url: configStore.channels[configStore.id].preview_url,
 })
 const mpegtsOptions = ref({
    lazyLoadMaxDuration: 3 * 60,
@ -193,7 +193,7 @@ const mpegtsOptions = ref({
 })

 const streamUrl = ref(
-    `/data/event/${configStore.configChannel[configStore.configID].id}?endpoint=playout&uuid=${authStore.uuid}`
+    `/data/event/${configStore.channels[configStore.id].id}?endpoint=playout&uuid=${authStore.uuid}`
 )

 // 'http://127.0.0.1:8787/data/event/1?endpoint=playout&uuid=f2f8c29b-712a-48c5-8919-b535d3a05a3a'
@ -246,7 +246,7 @@ watch([status, error], async () => {
        if (errorCounter.value > 11) {
            await authStore.obtainUuid()
            streamUrl.value = `/data/event/${
-                configStore.configChannel[configStore.configID].id
+                configStore.channels[configStore.id].id
            }?endpoint=playout&uuid=${authStore.uuid}`
            errorCounter.value = 0
        }
@ -265,10 +265,10 @@ watch([data], () => {
    }
 })

-watch([configID], () => {
+watch([id], () => {
    resetStatus()

-    streamUrl.value = `/data/event/${configStore.configChannel[configStore.configID].id}?endpoint=playout&uuid=${
+    streamUrl.value = `/data/event/${configStore.channels[configStore.id].id}?endpoint=playout&uuid=${
        authStore.uuid
    }`

@ -311,7 +311,7 @@ async function controlProcess(state: string) {
    /*
        Control playout (start, stop, restart)
    */
-    const channel = configStore.configChannel[configStore.configID].id
+    const channel = configStore.channels[configStore.id].id

    await $fetch(`/api/control/${channel}/process/`, {
        method: 'POST',
@ -327,7 +327,7 @@ async function controlPlayout(state: string) {
        - jump to last clip
        - reset playout state
    */
-    const channel = configStore.configChannel[configStore.configID].id
+    const channel = configStore.channels[configStore.id].id

    await $fetch(`/api/control/${channel}/playout/`, {
        method: 'POST',
--- a/components/PlaylistGenerator.vue
+++ b/components/PlaylistGenerator.vue
@ -402,7 +402,7 @@ async function generatePlaylist() {
        }
    }

-    await $fetch(`/api/playlist/${configStore.configChannel[configStore.configID].id}/generate/${playlistStore.listDate}`, {
+    await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/generate/${playlistStore.listDate}`, {
        method: 'POST',
        headers: { ...configStore.contentType, ...authStore.authHeader },
        body,
--- a/components/PlaylistTable.vue
+++ b/components/PlaylistTable.vue
@ -137,7 +137,7 @@ const { processPlaylist, genUID } = playlistOperations()
 const playlistContainer = ref()
 const sortContainer = ref()
 const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
-const { configID } = storeToRefs(useConfig())
+const { id } = storeToRefs(useConfig())
 const { currentClipIndex, listDate } = storeToRefs(usePlaylist())

 const playlistSortOptions = {
@ -167,7 +167,7 @@ onMounted(() => {
    }, 150)
 })

-watch([listDate, configID], () => {
+watch([listDate, id], () => {
    setTimeout(() => {
        getPlaylist()
    }, 800)
--- a/components/SystemStats.vue
+++ b/components/SystemStats.vue
@ -96,7 +96,7 @@ const configStore = useConfig()
 const indexStore = useIndex()

 const streamUrl = ref(
-    `/data/event/${configStore.configChannel[configStore.configID].id}?endpoint=system&uuid=${authStore.uuid}`
+    `/data/event/${configStore.channels[configStore.id].id}?endpoint=system&uuid=${authStore.uuid}`
 )

 // 'http://127.0.0.1:8787/data/event/1?endpoint=system&uuid=f2f8c29b-712a-48c5-8919-b535d3a05a3a'
@ -139,7 +139,7 @@ watch([status, error], async () => {

        if (errorCounter.value > 15) {
            await authStore.obtainUuid()
-            streamUrl.value = `/data/event/${configStore.configChannel[configStore.configID].id}?endpoint=system&uuid=${
+            streamUrl.value = `/data/event/${configStore.channels[configStore.id].id}?endpoint=system&uuid=${
                authStore.uuid
            }`
            errorCounter.value = 0
--- a/i18n/locales/de-DE.js
+++ b/i18n/locales/de-DE.js
@ -161,8 +161,8 @@ export default {
        updateChannelSuccess: 'Kanal-Konfiguration erfolgreich aktualisiert!',
        updateChannelFailed: 'Fehler beim Aktualisieren der Kanal-Konfiguration!',
        errorChannelDelete: 'Der erste Kanal kann nicht gelöscht werden!',
-        deleteChannelSuccess: 'GUI-Konfiguration erfolgreich gelöscht!',
-        deleteChannelFailed: 'Fehler beim Löschen der GUI-Konfiguration!',
+        deleteChannelSuccess: 'Kanal-Konfiguration erfolgreich gelöscht!',
+        deleteChannelFailed: 'Fehler beim Löschen der Kanal-Konfiguration!',
        playoutConf: 'Playout-Konfiguration',
        general: 'Allgemein',
        rpcServer: 'RPC Server',
@ -200,6 +200,9 @@ export default {
        updatePlayoutFailed: 'Update playout config fehlgeschlagen!',
        forbiddenPlaylistPath: 'Zugriff untersagt: Playlist-Ordner kann nicht geöffnet werden.',
        noPlayoutConfig: 'Keine Playout-Konfiguration gefunden!',
+        hlsPath: 'HLS-Pfad',
+        playlistPath: 'Wiedergabelistenpfad',
+        storagePath: 'Speicherpfad',
    },
    user: {
        title: 'Benutzer-Konfiguration',
--- a/i18n/locales/en-US.js
+++ b/i18n/locales/en-US.js
@ -161,8 +161,8 @@ export default {
        updateChannelSuccess: 'Update channel config success!',
        updateChannelFailed: 'Update channel config failed!',
        errorChannelDelete: 'First channel can not be deleted!',
-        deleteChannelSuccess: 'Delete GUI config success!',
-        deleteChannelFailed: 'Delete GUI config failed!',
+        deleteChannelSuccess: 'Delete channel config success!',
+        deleteChannelFailed: 'Delete channel config failed!',
        playoutConf: 'Playout Configuration',
        general: 'General',
        rpcServer: 'RPC Server',
@ -199,6 +199,9 @@ export default {
        updatePlayoutFailed: 'Update playout config failed!',
        forbiddenPlaylistPath: 'Access forbidden: Playlist folder cannot be opened.',
        noPlayoutConfig: 'No playout config found!',
+        hlsPath: 'HLS Path',
+        playlistPath: 'Playlist Path',
+        storagePath: 'Storage Path',
    },
    user: {
        title: 'User Configuration',
--- a/i18n/locales/pt-BR.js
+++ b/i18n/locales/pt-BR.js
@ -161,8 +161,8 @@ export default {
        updateChannelSuccess: 'Atualização da configuração do canal bem-sucedida!',
        updateChannelFailed: 'Falha na atualização da configuração do canal!',
        errorChannelDelete: 'O primeiro canal não pode ser deletado!',
-        deleteChannelSuccess: 'Exclusão da configuração da GUI bem-sucedida!',
-        deleteChannelFailed: 'Falha na exclusão da configuração da GUI!',
+        deleteChannelSuccess: 'Exclusão da configuração da canal bem-sucedida!',
+        deleteChannelFailed: 'Falha na exclusão da configuração da canal!',
        playoutConf: 'Configuração de Playout',
        general: 'Geral',
        rpcServer: 'RPC Server',
@ -199,6 +199,9 @@ export default {
        updatePlayoutFailed: 'Falha na atualização da configuração do playout!',
        forbiddenPlaylistPath: 'Acesso proibido: A pasta da lista de reprodução não pode ser aberta',
        noPlayoutConfig: 'Nenhuma configuração de playout encontrada!',
+        hlsPath: 'HLS Path',
+        playlistPath: 'Playlist Path',
+        storagePath: 'Storage Path',
    },
    user: {
        title: 'Configuração de usuário',
--- a/i18n/locales/ru-RU.js
+++ b/i18n/locales/ru-RU.js
@ -199,6 +199,9 @@ export default {
        updatePlayoutFailed: 'Обновление конфигурации воспроизведения не удалось!',
        forbiddenPlaylistPath: 'Доступ запрещен: Папка плейлиста не может быть открыта.',
        noPlayoutConfig: 'Конфигурация воспроизведения не найдена!',
+        hlsPath: 'HLS Path',
+        playlistPath: 'Playlist Path',
+        storagePath: 'Storage Path',
    },
    user: {
        title: 'Конфигурация пользователя',
--- a/package-lock.json
+++ b/package-lock.json
@ -10,7 +10,7 @@
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/color-mode": "^3.4.4",
-        "@pinia/nuxt": "^0.5.3",
+        "@pinia/nuxt": "^0.5.4",
        "@vueform/multiselect": "^2.6.9",
        "@vuepic/vue-datepicker": "^9.0.2",
        "@vueuse/nuxt": "^11.0.1",
@ -3064,70 +3064,18 @@
      }
    },
    "node_modules/@pinia/nuxt": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.3.tgz",
-      "integrity": "sha512-AEuHEcaxZdAl73qUOco1TpOGjcmn83nJlYORZ63zhufSCVMj28lPq15ZnfhhofwBh5IjkT/lB7d8Ff958LajDQ==",
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.4.tgz",
+      "integrity": "sha512-nNEs2pq6+Ji5qIyRwmeD9LUdctL8aJ8QMVLTYxUc16cXEOcIIN+MSA8Xudsd0lVETYgEAROT5HiBHnOYRDY3yQ==",
      "license": "MIT",
      "dependencies": {
        "@nuxt/kit": "^3.9.0",
-        "pinia": "2.2.1"
+        "pinia": "^2.2.2"
      },
      "funding": {
        "url": "https://github.com/sponsors/posva"
      }
    },
-    "node_modules/@pinia/nuxt/node_modules/pinia": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.1.tgz",
-      "integrity": "sha512-ltEU3xwiz5ojVMizdP93AHi84Rtfz0+yKd8ud75hr9LVyWX2alxp7vLbY1kFm7MXFmHHr/9B08Xf8Jj6IHTEiQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/devtools-api": "^6.6.3",
-        "vue-demi": "^0.14.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/posva"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.4.0",
-        "typescript": ">=4.4.4",
-        "vue": "^2.6.14 || ^3.3.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@pinia/nuxt/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@ -14458,9 +14406,9 @@
      }
    },
    "node_modules/unimport": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.10.1.tgz",
-      "integrity": "sha512-gK0oqn2SyPEjmp5O0Epu13xmX1Pfn4MwpJNlntXUauV0wN8Hhod+BNjDjqQ4ZpOSCt17MCLjGqUXqUhAiJuhOw==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.11.0.tgz",
+      "integrity": "sha512-mPrvWwy+li8TLUeglC7CIREFAbeEMkJ8X2Bhxg4iLdh+HraxjFyxqWv8V+4lzekoGHChx9ofv1qGOfvHBJBl0A==",
      "license": "MIT",
      "dependencies": {
        "@rollup/pluginutils": "^5.1.0",
--- a/package.json
+++ b/package.json
@ -14,7 +14,7 @@
  },
  "dependencies": {
    "@nuxtjs/color-mode": "^3.4.4",
-    "@pinia/nuxt": "^0.5.3",
+    "@pinia/nuxt": "^0.5.4",
    "@vueform/multiselect": "^2.6.9",
    "@vuepic/vue-datepicker": "^9.0.2",
    "@vueuse/nuxt": "^11.0.1",
--- a/pages/index.vue
+++ b/pages/index.vue
@ -4,7 +4,7 @@
            <div class="absolute top-4 left-1">
                <EventStatus />
            </div>
-            <SystemStats v-if="configStore.configChannel.length > 0" />
+            <SystemStats v-if="configStore.channels.length > 0" />
            <div class="flex flex-wrap justify-center gap-1 md:gap-0 md:join mt-5">
                <NuxtLink :to="localePath({ name: 'player' })" class="btn join-item btn-primary px-2">
                    {{ $t('button.player') }}
--- a/pages/logging.vue
+++ b/pages/logging.vue
@ -49,7 +49,7 @@ useHead({
    title: `${t('button.logging')} | ffplayout`,
 })

-const { configID } = storeToRefs(useConfig())
+const { id } = storeToRefs(useConfig())

 const { $dayjs } = useNuxtApp()
 const authStore = useAuth()
@ -70,7 +70,7 @@ onMounted(() => {
    getLog()
 })

-watch([listDate, configID], () => {
+watch([listDate, id], () => {
    getLog()
 })

@ -101,7 +101,7 @@ async function getLog() {
        date = ''
    }

-    await fetch(`/api/log/${configStore.configChannel[configStore.configID].id}?date=${date}`, {
+    await fetch(`/api/log/${configStore.channels[configStore.id].id}?date=${date}`, {
        method: 'GET',
        headers: authStore.authHeader,
    })
--- a/pages/media.vue
+++ b/pages/media.vue
@ -312,7 +312,7 @@ const configStore = useConfig()
 const indexStore = useIndex()
 const mediaStore = useMedia()
 const { toMin, mediaType, filename, parent } = stringFormatter()
-const { configID } = storeToRefs(useConfig())
+const { id } = storeToRefs(useConfig())

 useHead({
    title: `${t('button.media')} | ffplayout`,
@ -352,7 +352,7 @@ const xhr = ref(new XMLHttpRequest())

 onMounted(async () => {
    let config_extensions = configStore.playout.storage.extensions
-    let extra_extensions = configStore.configChannel[configStore.configID].extra_extensions
+    let extra_extensions = configStore.channels[configStore.id].extra_extensions

    if (typeof config_extensions === 'string') {
        config_extensions = config_extensions.split(',')
@ -373,7 +373,7 @@ onMounted(async () => {
    }
 })

-watch([configID], () => {
+watch([id], () => {
    mediaStore.getTree('')
 })

@ -425,7 +425,7 @@ async function handleDrop(event: any, targetFolder: any, isParent: boolean | nul
    }

    if (source !== target) {
-        await fetch(`/api/file/${configStore.configChannel[configStore.configID].id}/rename/`, {
+        await fetch(`/api/file/${configStore.channels[configStore.id].id}/rename/`, {
            method: 'POST',
            headers: { ...configStore.contentType, ...authStore.authHeader },
            body: JSON.stringify({ source, target }),
@ -453,7 +453,7 @@ function setPreviewData(path: string) {
    }

    previewName.value = fullPath.split('/').slice(-1)[0]
-    previewUrl.value = encodeURIComponent(`/file/${configStore.configChannel[configStore.configID].id}${fullPath}`).replace(
+    previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.id].id}${fullPath}`).replace(
        /%2F/g,
        '/'
    )
@ -493,7 +493,7 @@ async function deleteFileOrFolder(del: boolean) {
    showDeleteModal.value = false

    if (del) {
-        await fetch(`/api/file/${configStore.configChannel[configStore.configID].id}/remove/`, {
+        await fetch(`/api/file/${configStore.channels[configStore.id].id}/remove/`, {
            method: 'POST',
            headers: { ...configStore.contentType, ...authStore.authHeader },
            body: JSON.stringify({ source: deleteName.value }),
@ -524,7 +524,7 @@ async function renameFile(ren: boolean) {
    showRenameModal.value = false

    if (ren && renameOldName.value !== renameNewName.value) {
-        await fetch(`/api/file/${configStore.configChannel[configStore.configID].id}/rename/`, {
+        await fetch(`/api/file/${configStore.channels[configStore.id].id}/rename/`, {
            method: 'POST',
            headers: { ...configStore.contentType, ...authStore.authHeader },
            body: JSON.stringify({ source: renameOldName.value, target: renameNewName.value }),
@ -563,7 +563,7 @@ async function createFolder(create: boolean) {
            return
        }

-        await $fetch(`/api/file/${configStore.configChannel[configStore.configID].id}/create-folder/`, {
+        await $fetch(`/api/file/${configStore.channels[configStore.id].id}/create-folder/`, {
            method: 'POST',
            headers: { ...configStore.contentType, ...authStore.authHeader },
            body: JSON.stringify({ source: path }),
@ -600,7 +600,7 @@ async function upload(file: any): Promise<null | undefined> {
    return new Promise((resolve) => {
        xhr.value.open(
            'PUT',
-            `/api/file/${configStore.configChannel[configStore.configID].id}/upload/?path=${encodeURIComponent(
+            `/api/file/${configStore.channels[configStore.id].id}/upload/?path=${encodeURIComponent(
                mediaStore.crumbs[mediaStore.crumbs.length - 1].path
            )}`
        )
--- a/pages/message.vue
+++ b/pages/message.vue
@ -266,7 +266,7 @@ onMounted(() => {
 })

 async function getPreset(index: number) {
-    fetch(`/api/presets/${configStore.configChannel[configStore.configID].id}`, {
+    fetch(`/api/presets/${configStore.channels[configStore.id].id}`, {
        method: 'GET',
        headers: authStore.authHeader,
    })
@ -347,7 +347,7 @@ async function savePreset() {
                    : form.value.boxColor + '@' + numberToHex(form.value.boxAlpha),
            boxborderw: form.value.border,
            alpha: form.value.overallAlpha,
-            channel_id: configStore.configChannel[configStore.configID].id,
+            channel_id: configStore.channels[configStore.id].id,
        }

        const response = await fetch(`/api/presets/${form.value.id}`, {
@ -386,7 +386,7 @@ async function createNewPreset(create: boolean) {
                    : form.value.boxColor + '@' + numberToHex(form.value.boxAlpha),
            boxborderw: form.value.border.toString(),
            alpha: form.value.overallAlpha.toString(),
-            channel_id: configStore.configChannel[configStore.configID].id,
+            channel_id: configStore.channels[configStore.id].id,
        }

        const response = await fetch('/api/presets/', {
@ -433,7 +433,7 @@ async function submitMessage() {
        boxborderw: form.value.border.toString(),
    }

-    const response = await fetch(`/api/control/${configStore.configChannel[configStore.configID].id}/text/`, {
+    const response = await fetch(`/api/control/${configStore.channels[configStore.id].id}/text/`, {
        method: 'POST',
        headers: { ...configStore.contentType, ...authStore.authHeader },
        body: JSON.stringify(obj),
--- a/pages/player.vue
+++ b/pages/player.vue
@ -326,7 +326,7 @@ function setPreviewData(path: string) {
        previewUrl.value = path
    } else {
        previewUrl.value = encodeURIComponent(
-            `/file/${configStore.configChannel[configStore.configID].id}${fullPath}`
+            `/file/${configStore.channels[configStore.id].id}${fullPath}`
        ).replace(/%2F/g, '/')
    }

@ -456,7 +456,7 @@ async function importPlaylist(imp: boolean) {

        playlistStore.isLoading = true
        await $fetch(
-            `/api/file/${configStore.configChannel[configStore.configID].id}/import/?file=${
+            `/api/file/${configStore.channels[configStore.id].id}/import/?file=${
                textFile.value[0].name
            }&date=${listDate.value}`,
            {
@ -489,11 +489,11 @@ async function savePlaylist(save: boolean) {

        const saveList = processPlaylist(listDate.value, $_.cloneDeep(playlistStore.playlist), true)

-        await $fetch(`/api/playlist/${configStore.configChannel[configStore.configID].id}/`, {
+        await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/`, {
            method: 'POST',
            headers: { ...configStore.contentType, ...authStore.authHeader },
            body: JSON.stringify({
-                channel: configStore.configChannel[configStore.configID].name,
+                channel: configStore.channels[configStore.id].name,
                date: targetDate.value,
                program: saveList,
            }),
@ -516,7 +516,7 @@ async function deletePlaylist(del: boolean) {
    showDeleteModal.value = false

    if (del) {
-        await $fetch(`/api/playlist/${configStore.configChannel[configStore.configID].id}/${listDate.value}`, {
+        await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/${listDate.value}`, {
            method: 'DELETE',
            headers: { ...configStore.contentType, ...authStore.authHeader },
        }).then(() => {
--- a/stores/config.ts
+++ b/stores/config.ts
@ -3,11 +3,11 @@ import { defineStore } from 'pinia'

 export const useConfig = defineStore('config', {
    state: () => ({
-        configID: 0,
+        id: 0,
        configCount: 0,
        contentType: { 'content-type': 'application/json;charset=UTF-8' },
-        configChannel: [] as GuiConfig[],
-        configChannelRaw: [] as GuiConfig[],
+        channels: [] as Channel[],
+        channelsRaw: [] as Channel[],
        playlistLength: 86400.0,
        advanced: {} as any,
        playout: {} as any,
@ -69,8 +69,8 @@ export const useConfig = defineStore('config', {
                    }

                    this.utcOffset = objs[0].utc_offset
-                    this.configChannel = objs
-                    this.configChannelRaw = _.cloneDeep(objs)
+                    this.channels = objs
+                    this.channelsRaw = _.cloneDeep(objs)
                    this.configCount = objs.length
                })
                .catch((e) => {
@ -78,7 +78,7 @@ export const useConfig = defineStore('config', {
                        this.logout()
                    }

-                    this.configChannel = [
+                    this.channels = [
                        {
                            id: 1,
                            extra_extensions: '',
@ -92,12 +92,12 @@ export const useConfig = defineStore('config', {
                })
        },

-        async setChannelConfig(obj: GuiConfig): Promise<any> {
+        async setChannelConfig(obj: Channel): Promise<any> {
            const authStore = useAuth()
            const stringObj = _.cloneDeep(obj)
            let response

-            if (this.configChannelRaw.some((e) => e.id === stringObj.id)) {
+            if (this.channelsRaw.some((e) => e.id === stringObj.id)) {
                response = await fetch(`/api/channel/${obj.id}`, {
                    method: 'PATCH',
                    headers: { ...this.contentType, ...authStore.authHeader },
@ -113,7 +113,7 @@ export const useConfig = defineStore('config', {
                const json = await response.json()
                const guiConfigs = []

-                for (const obj of this.configChannel) {
+                for (const obj of this.channels) {
                    if (obj.name === stringObj.name) {
                        guiConfigs.push(json)
                    } else {
@ -121,8 +121,8 @@ export const useConfig = defineStore('config', {
                    }
                }

-                this.configChannel = guiConfigs
-                this.configChannelRaw = _.cloneDeep(guiConfigs)
+                this.channels = guiConfigs
+                this.channelsRaw = _.cloneDeep(guiConfigs)
                this.configCount = guiConfigs.length
            }

@ -136,7 +136,7 @@ export const useConfig = defineStore('config', {
            const { timeToSeconds } = stringFormatter()
            const authStore = useAuth()
            const indexStore = useIndex()
-            const channel = this.configChannel[this.configID].id
+            const channel = this.channels[this.id].id

            await fetch(`/api/playout/config/${channel}`, {
                method: 'GET',
@ -162,7 +162,7 @@ export const useConfig = defineStore('config', {
            const { $i18n } = useNuxtApp()
            const authStore = useAuth()
            const indexStore = useIndex()
-            const channel = this.configChannel[this.configID].id
+            const channel = this.channels[this.id].id

            await $fetch(`/api/playout/advanced/${channel}`, {
                method: 'GET',
@ -179,7 +179,7 @@ export const useConfig = defineStore('config', {
        async setPlayoutConfig(obj: any) {
            const { timeToSeconds } = stringFormatter()
            const authStore = useAuth()
-            const channel = this.configChannel[this.configID].id
+            const channel = this.channels[this.id].id

            this.playlistLength = timeToSeconds(obj.playlist.length)
            this.playout.playlist.startInSec = timeToSeconds(obj.playlist.day_start)
@ -200,7 +200,7 @@ export const useConfig = defineStore('config', {

        async setAdvancedConfig() {
            const authStore = useAuth()
-            const channel = this.configChannel[this.configID].id
+            const channel = this.channels[this.id].id

            const update = await fetch(`/api/playout/advanced/${channel}`, {
                method: 'PUT',
--- a/stores/media.ts
+++ b/stores/media.ts
@ -23,7 +23,7 @@ export const useMedia = defineStore('media', {
            const authStore = useAuth()
            const configStore = useConfig()
            const indexStore = useIndex()
-            const channel = configStore.configChannel[configStore.configID].id
+            const channel = configStore.channels[configStore.id].id
            const crumbs: Crumb[] = []
            let root = '/'

--- a/stores/playlist.ts
+++ b/stores/playlist.ts
@ -37,7 +37,7 @@ export const usePlaylist = defineStore('playlist', {
            const authStore = useAuth()
            const configStore = useConfig()
            const indexStore = useIndex()
-            const channel = configStore.configChannel[configStore.configID].id
+            const channel = configStore.channels[configStore.id].id

            await $fetch<Playlist>(`/api/playlist/${channel}?date=${date}`, {
                method: 'GET',
--- a/types/index.d.ts
+++ b/types/index.d.ts
@ -23,11 +23,14 @@ declare global {
        uuid: string
    }

-    interface GuiConfig {
+    interface Channel {
        id: number
        extra_extensions: string | string[]
        name: string
        preview_url: string
+        hls_path: string
+        playlist_path: string
+        storage_path: string
        uts_offset?: number
    }