From 9235c8b3d28a9ade523397b9445f2c3938afa210 Mon Sep 17 00:00:00 2001
From: Jonathan Baecker <jonbae77@gmail.com>
Date: Tue, 1 Oct 2024 21:33:18 +0200
Subject: [PATCH] show channels menu only when multiple channels exists, css
 tweaks, fix #777 #778 #779 #780 #782 #784 #785

---
 frontend/components/ConfigAdvanced.vue    |   4 +-
 frontend/components/ConfigChannel.vue     | 115 +++++++++-------------
 frontend/components/ConfigPlayout.vue     |   4 +-
 frontend/components/HeaderMenu.vue        |  16 ++-
 frontend/components/MediaBrowser.vue      |   4 +-
 frontend/components/PlayerControl.vue     |  24 ++---
 frontend/components/PlaylistGenerator.vue |   4 +-
 frontend/components/PlaylistTable.vue     |  10 +-
 frontend/components/SystemStats.vue       |   6 +-
 frontend/composables/variables.ts         |   4 +-
 frontend/pages/logging.vue                |   6 +-
 frontend/pages/media.vue                  |  18 ++--
 frontend/pages/message.vue                |  18 ++--
 frontend/pages/player.vue                 |  14 +--
 frontend/stores/config.ts                 |  22 ++---
 frontend/stores/media.ts                  |   2 +-
 frontend/stores/playlist.ts               |   2 +-
 17 files changed, 127 insertions(+), 146 deletions(-)

diff --git a/frontend/components/ConfigAdvanced.vue b/frontend/components/ConfigAdvanced.vue
index abb90d38..9f497575 100644
--- a/frontend/components/ConfigAdvanced.vue
+++ b/frontend/components/ConfigAdvanced.vue
@@ -72,7 +72,7 @@ async function onSubmitAdvanced() {
     if (update.status === 200) {
         indexStore.msgAlert('success', t('advanced.updateSuccess'), 2)
 
-        const channel = configStore.channels[configStore.id].id
+        const channel = configStore.channels[configStore.i].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.channels[configStore.id].id
+        const channel = configStore.channels[configStore.i].id
 
         await $fetch(`/api/control/${channel}/process/`, {
             method: 'POST',
diff --git a/frontend/components/ConfigChannel.vue b/frontend/components/ConfigChannel.vue
index 29d0b3a5..47b2b186 100644
--- a/frontend/components/ConfigChannel.vue
+++ b/frontend/components/ConfigChannel.vue
@@ -1,6 +1,6 @@
 <template>
-    <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 v-if="channel" class="w-full max-w-[800px]">
+        <h2 class="pt-3 text-3xl">{{ t('config.channelConf') }} ({{ channel.id }})</h2>
         <div class="w-full flex justify-end my-4">
             <button v-if="authStore.role === 'GlobalAdmin'" class="btn btn-sm btn-primary" @click="newChannel()">
                 {{ t('config.addChannel') }}
@@ -11,34 +11,21 @@
                 <div class="label">
                     <span class="label-text">{{ t('config.name') }}</span>
                 </div>
-                <input
-                    v-model="configStore.channels[configStore.id].name"
-                    type="text"
-                    placeholder="Type here"
-                    class="input input-bordered w-full"
-                />
+                <input v-model="channel.name" type="text" placeholder="Type here" class="input input-bordered w-full" />
             </label>
 
             <label class="form-control w-full mt-5">
                 <div class="label">
                     <span class="label-text">{{ t('config.previewUrl') }}</span>
                 </div>
-                <input
-                    v-model="configStore.channels[configStore.id].preview_url"
-                    type="text"
-                    class="input input-bordered w-full"
-                />
+                <input v-model="channel.preview_url" 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.extensions') }}</span>
                 </div>
-                <input
-                    v-model="configStore.channels[configStore.id].extra_extensions"
-                    type="text"
-                    class="input input-bordered w-full"
-                />
+                <input v-model="channel.extra_extensions" type="text" class="input input-bordered w-full" />
             </label>
 
             <template v-if="authStore.role === 'GlobalAdmin'">
@@ -52,51 +39,38 @@
                     <div class="label">
                         <span class="label-text">{{ t('config.publicPath') }}</span>
                     </div>
-                    <input
-                        v-model="configStore.channels[configStore.id].public"
-                        type="text"
-                        class="input input-bordered w-full"
-                    />
+                    <input v-model="channel.public" 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].playlists"
-                        type="text"
-                        class="input input-bordered w-full"
-                    />
+                    <input v-model="channel.playlists" 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"
-                        type="text"
-                        class="input input-bordered w-full"
-                    />
+                    <input v-model="channel.storage" type="text" class="input input-bordered w-full" />
                 </label>
             </template>
 
-            <div class="join my-4">
-                <button class="join-item btn btn-primary" :class="saved ? 'btn-primary' : 'btn-error'" @click="addUpdateChannel()">
+            <div class="my-4 flex gap-1">
+                <button class="btn" :class="saved ? 'btn-primary' : 'btn-error'" @click="addUpdateChannel()">
                     {{ t('config.save') }}
                 </button>
                 <button
-                    v-if="
-                        authStore.role === 'GlobalAdmin' &&
-                        configStore.channels.length > 1 &&
-                        configStore.channels[configStore.id].id > 1
-                    "
-                    class="join-item btn btn-primary"
+                    v-if="authStore.role === 'GlobalAdmin' && configStore.channels.length > 1 && channel.id > 1 && saved"
+                    class="btn btn-primary"
                     @click="deleteChannel()"
                 >
                     {{ t('config.delete') }}
                 </button>
+                <button v-if="!saved" class="btn btn-primary text-xl" @click="resetChannel()">
+                    <i class="bi-arrow-repeat" />
+                </button>
             </div>
         </div>
     </div>
@@ -110,27 +84,32 @@ const { t } = useI18n()
 const authStore = useAuth()
 const configStore = useConfig()
 const indexStore = useIndex()
+const { i } = storeToRefs(useConfig())
 
 const saved = ref(true)
+const channel = ref({} as Channel)
+
+onMounted(() => {
+    channel.value = cloneDeep(configStore.channels[i.value])
+})
+
+watch([i], () => {
+    if (configStore.channels[i.value]) {
+        channel.value = cloneDeep(configStore.channels[i.value])
+    }
+})
 
 function rmId(path: string) {
     return path.replace(/\/\d+$/, '')
 }
 
 function newChannel() {
-    const channels = cloneDeep(configStore.channels)
-    const newChannel = cloneDeep(configStore.channels[configStore.channels.length - 1])
-
-    newChannel.id = channels.length + 1
-    newChannel.name = `Channel ${newChannel.id}`
-    newChannel.preview_url = `${window.location.protocol}//${window.location.host}/${newChannel.id}/live/stream.m3u8`
-    newChannel.public = `${rmId(newChannel.public)}/${newChannel.id}`
-    newChannel.playlists = `${rmId(newChannel.playlists)}/${newChannel.id}`
-    newChannel.storage = `${rmId(newChannel.storage)}/${newChannel.id}`
-
-    channels.push(newChannel)
-    configStore.channels = channels
-    configStore.id = configStore.channels.length - 1
+    channel.value.id = configStore.channels.length + 1
+    channel.value.name = `Channel ${channel.value.id}`
+    channel.value.preview_url = `${window.location.protocol}//${window.location.host}/${channel.value.id}/live/stream.m3u8`
+    channel.value.public = `${rmId(channel.value.public)}/${channel.value.id}`
+    channel.value.playlists = `${rmId(channel.value.playlists)}/${channel.value.id}`
+    channel.value.storage = `${rmId(channel.value.storage)}/${channel.value.id}`
 
     saved.value = false
 }
@@ -139,35 +118,39 @@ async function addUpdateChannel() {
     /*
         Save channel settings.
     */
-    const update = await configStore.setChannelConfig(configStore.channels[configStore.id])
+    saved.value = true
+    i.value = channel.value.id - 1
+    configStore.channels.push(cloneDeep(channel.value))
+    const update = await configStore.setChannelConfig(channel.value)
 
     if (update.status && update.status < 400) {
         indexStore.msgAlert('success', t('config.updateChannelSuccess'), 2)
-        saved.value = true
+
+        await configStore.getPlayoutConfig()
+
     } else {
         indexStore.msgAlert('error', t('config.updateChannelFailed'), 2)
     }
 }
 
-async function deleteChannel() {
-    const config = cloneDeep(configStore.channels)
-    const id = config[configStore.id].id
+function resetChannel() {
+    channel.value = cloneDeep(configStore.channels[i.value])
+    saved.value = true
+}
 
-    if (id === 1) {
+async function deleteChannel() {
+    if (channel.value.id === 1) {
         indexStore.msgAlert('warning', t('config.errorChannelDelete'), 2)
         return
     }
 
-    const response = await fetch(`/api/channel/${id}`, {
+    const response = await fetch(`/api/channel/${channel.value.id}`, {
         method: 'DELETE',
         headers: authStore.authHeader,
     })
 
-    config.splice(configStore.id, 1)
-    configStore.channelsRaw.splice(configStore.id, 1)
-    configStore.channels = config
-    configStore.id = configStore.channels.length - 1
-
+    i.value = configStore.i - 1
+    await configStore.getChannelConfig()
     await configStore.getPlayoutConfig()
 
     if (response.status === 200) {
diff --git a/frontend/components/ConfigPlayout.vue b/frontend/components/ConfigPlayout.vue
index f4733530..07fc4717 100644
--- a/frontend/components/ConfigPlayout.vue
+++ b/frontend/components/ConfigPlayout.vue
@@ -178,7 +178,7 @@ async function onSubmitPlayout() {
     if (update.status === 200) {
         indexStore.msgAlert('success', t('config.updatePlayoutSuccess'), 2)
 
-        const channel = configStore.channels[configStore.id].id
+        const channel = configStore.channels[configStore.i].id
 
         await $fetch(`/api/control/${channel}/process/`, {
             method: 'POST',
@@ -198,7 +198,7 @@ async function onSubmitPlayout() {
 
 async function restart(res: boolean) {
     if (res) {
-        const channel = configStore.channels[configStore.id].id
+        const channel = configStore.channels[configStore.i].id
 
         await $fetch(`/api/control/${channel}/process/`, {
             method: 'POST',
diff --git a/frontend/components/HeaderMenu.vue b/frontend/components/HeaderMenu.vue
index 2d987f0d..ae9781f5 100644
--- a/frontend/components/HeaderMenu.vue
+++ b/frontend/components/HeaderMenu.vue
@@ -31,7 +31,7 @@
                         <details tabindex="0" @focusout="closeDropdown">
                             <summary>
                                 <div class="h-[19px] text-base">
-                                    <span> {{ configStore.channels[configStore.id].name }} </span>
+                                    <span> {{ configStore.channels[configStore.i].name }} </span>
                                 </div>
                             </summary>
                             <ul class="p-2">
@@ -68,7 +68,7 @@
                     <details tabindex="0" @focusout="closeDropdown">
                         <summary>
                             <div class="h-[19px] text-base">
-                                <span> {{ configStore.channels[configStore.id].name }} </span>
+                                <span> {{ configStore.channels[configStore.i].name }} </span>
                             </div>
                         </summary>
                         <ul class="p-2 bg-base-100 rounded-md !mt-1 w-36" tabindex="0">
@@ -127,17 +127,15 @@ if (colorMode.value === 'dark') {
 function closeMenu() {
     setTimeout(() => {
         isOpen.value = false
-        menuDropdown.value.removeAttribute('open')
-        console.log('close')
+        menuDropdown.value?.removeAttribute('open')
     }, 200)
 }
 
 function clickMenu() {
-    console.log('close')
     isOpen.value = !isOpen.value
 
     if (!isOpen.value) {
-        menuDropdown.value.removeAttribute('open')
+        menuDropdown.value?.removeAttribute('open')
     }
 }
 
@@ -146,14 +144,14 @@ function blurMenu() {
         isOpen.value = !isOpen.value
     } else {
         setTimeout(() => {
-            menuDropdown.value.removeAttribute('open')
+            menuDropdown.value?.removeAttribute('open')
         }, 200)
     }
 }
 
 function closeDropdown($event: any) {
     setTimeout(() => {
-        $event.target.parentNode.removeAttribute('open')
+        $event.target.parentNode?.removeAttribute('open')
     }, 200)
 }
 
@@ -163,7 +161,7 @@ function logout() {
 }
 
 function selectChannel(index: number) {
-    configStore.id = index
+    configStore.i = index
     configStore.getPlayoutConfig()
 }
 
diff --git a/frontend/components/MediaBrowser.vue b/frontend/components/MediaBrowser.vue
index 29045ad9..a33029de 100644
--- a/frontend/components/MediaBrowser.vue
+++ b/frontend/components/MediaBrowser.vue
@@ -79,7 +79,7 @@ const { secToHMS, mediaType } = stringFormatter()
 
 const configStore = useConfig()
 const mediaStore = useMedia()
-const { id } = storeToRefs(useConfig())
+const { i } = storeToRefs(useConfig())
 
 const browserSortOptions = {
     group: { name: 'playlist', pull: 'clone', put: false },
@@ -102,7 +102,7 @@ onMounted(async () => {
     }
 })
 
-watch([id], () => {
+watch([i], () => {
     mediaStore.getTree('')
 })
 </script>
diff --git a/frontend/components/PlayerControl.vue b/frontend/components/PlayerControl.vue
index b1e3edc0..eb9afef1 100644
--- a/frontend/components/PlayerControl.vue
+++ b/frontend/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.channels[configStore.id]"
-                            :key="configStore.id"
+                            v-else-if="configStore.showPlayer && configStore.channels[configStore.i]"
+                            :key="configStore.i"
                             class="live-player"
                             reference="httpStream"
                             :options="{
@@ -19,7 +19,7 @@
                                 sources: [
                                     {
                                         type: 'application/x-mpegURL',
-                                        src: configStore.channels[configStore.id].preview_url,
+                                        src: configStore.channels[configStore.i].preview_url,
                                     },
                                 ],
                             }"
@@ -180,7 +180,7 @@ const configStore = useConfig()
 const indexStore = useIndex()
 const playlistStore = usePlaylist()
 const { filename, secToHMS } = stringFormatter()
-const { id } = storeToRefs(useConfig())
+const { i } = storeToRefs(useConfig())
 
 const currentDefault = {
     uid: '',
@@ -196,19 +196,19 @@ playlistStore.current = currentDefault
 const timeStr = ref('00:00:00')
 const timer = ref()
 const errorCounter = ref(0)
-const streamExtension = ref(configStore.channels[configStore.id].preview_url.split('.').pop())
+const streamExtension = ref(configStore.channels[configStore.i].preview_url.split('.').pop())
 const httpStreamFlv = ref(null)
 const httpFlvSource = ref({
     type: 'flv',
     isLive: true,
-    url: configStore.channels[configStore.id].preview_url,
+    url: configStore.channels[configStore.i].preview_url,
 })
 const mpegtsOptions = ref({
     lazyLoadMaxDuration: 3 * 60,
     liveBufferLatencyChasing: true,
 })
 
-const streamUrl = ref(`/data/event/${configStore.channels[configStore.id].id}?endpoint=playout&uuid=${authStore.uuid}`)
+const streamUrl = ref(`/data/event/${configStore.channels[configStore.i].id}?endpoint=playout&uuid=${authStore.uuid}`)
 
 // 'http://127.0.0.1:8787/data/event/1?endpoint=playout&uuid=f2f8c29b-712a-48c5-8919-b535d3a05a3a'
 const { status, data, error, close } = useEventSource(streamUrl, [], {
@@ -259,7 +259,7 @@ watch([status, error], async () => {
 
         if (errorCounter.value > 11) {
             await authStore.obtainUuid()
-            streamUrl.value = `/data/event/${configStore.channels[configStore.id].id}?endpoint=playout&uuid=${
+            streamUrl.value = `/data/event/${configStore.channels[configStore.i].id}?endpoint=playout&uuid=${
                 authStore.uuid
             }`
             errorCounter.value = 0
@@ -280,10 +280,10 @@ watch([data], () => {
     }
 })
 
-watch([id], () => {
+watch([i], () => {
     resetStatus()
 
-    streamUrl.value = `/data/event/${configStore.channels[configStore.id].id}?endpoint=playout&uuid=${authStore.uuid}`
+    streamUrl.value = `/data/event/${configStore.channels[configStore.i].id}?endpoint=playout&uuid=${authStore.uuid}`
 
     if (timer.value) {
         clearTimeout(timer.value)
@@ -318,7 +318,7 @@ const controlProcess = throttle(async (state: string) => {
     /*
         Control playout (start, stop, restart)
     */
-    const channel = configStore.channels[configStore.id].id
+    const channel = configStore.channels[configStore.i].id
     await $fetch(`/api/control/${channel}/process/`, {
         method: 'POST',
         headers: { ...configStore.contentType, ...authStore.authHeader },
@@ -333,7 +333,7 @@ const controlPlayout = throttle(async (state: string) => {
         - jump to last clip
         - reset playout state
     */
-    const channel = configStore.channels[configStore.id].id
+    const channel = configStore.channels[configStore.i].id
 
     await $fetch(`/api/control/${channel}/playout/`, {
         method: 'POST',
diff --git a/frontend/components/PlaylistGenerator.vue b/frontend/components/PlaylistGenerator.vue
index d79b0e20..cf18a221 100644
--- a/frontend/components/PlaylistGenerator.vue
+++ b/frontend/components/PlaylistGenerator.vue
@@ -347,7 +347,7 @@ function addFolderToTemplate(event: any, item: TemplateItem) {
 
     event.item.remove()
 
-    const storagePath = configStore.channels[configStore.id].storage
+    const storagePath = configStore.channels[configStore.i].storage
     const navPath = mediaStore.folderCrumbs[mediaStore.folderCrumbs.length - 1].path
     const sourcePath = `${storagePath}/${navPath}/${mediaStore.folderList.folders[o].name}`.replace(/\/[/]+/g, '/')
 
@@ -402,7 +402,7 @@ async function generatePlaylist() {
         }
     }
 
-    await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/generate/${playlistStore.listDate}`, {
+    await $fetch(`/api/playlist/${configStore.channels[configStore.i].id}/generate/${playlistStore.listDate}`, {
         method: 'POST',
         headers: { ...configStore.contentType, ...authStore.authHeader },
         body,
diff --git a/frontend/components/PlaylistTable.vue b/frontend/components/PlaylistTable.vue
index 88475050..d47823d1 100644
--- a/frontend/components/PlaylistTable.vue
+++ b/frontend/components/PlaylistTable.vue
@@ -4,11 +4,11 @@
         ref="playlistContainer"
         class="relative w-full h-full !bg-base-300 rounded-e overflow-auto"
     >
-        <div v-if="playlistStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
+        <div v-if="playlistStore.isLoading" class="w-full h-full absolute z-2 flex justify-center bg-base-100/70">
             <span class="loading loading-spinner loading-lg" />
         </div>
         <table class="table table-zebra table-fixed">
-            <thead class="top-0 sticky z-10">
+            <thead class="top-0 sticky z-2">
                 <tr class="bg-base-100 rounded-tr-lg">
                     <th v-if="!configStore.playout.playlist.infinit" class="w-[85px] p-0 text-left">
                         <div class="border-b border-my-gray px-4 py-3">
@@ -139,7 +139,7 @@ const { processPlaylist, genUID } = playlistOperations()
 const playlistContainer = ref()
 const sortContainer = ref()
 const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
-const { id } = storeToRefs(useConfig())
+const { i } = storeToRefs(useConfig())
 const { currentIndex, listDate, playoutIsRunning } = storeToRefs(usePlaylist())
 
 const playlistSortOptions = {
@@ -169,7 +169,7 @@ onMounted(() => {
     }, 150)
 })
 
-watch([listDate, id], () => {
+watch([listDate, i], () => {
     setTimeout(() => {
         getPlaylist()
     }, 800)
@@ -259,7 +259,7 @@ function addClip(event: any) {
 
     event.item?.remove()
 
-    const storagePath = configStore.channels[configStore.id].storage
+    const storagePath = configStore.channels[configStore.i].storage
     const sourcePath = `${storagePath}/${mediaStore.folderTree.source}/${mediaStore.folderTree.files[o].name}`.replace(
         /\/[/]+/g,
         '/'
diff --git a/frontend/components/SystemStats.vue b/frontend/components/SystemStats.vue
index b453092b..8de8e013 100644
--- a/frontend/components/SystemStats.vue
+++ b/frontend/components/SystemStats.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[320px] md:min-w-[728px] max-w-[960px] mt-5 xs:mt-0">
+    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[320px] md:min-w-[728px] max-w-[960px] mt-5">
         <div class="p-4 bg-base-100">
             <span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
             <span v-if="sysStat.system.kernel">
@@ -96,7 +96,7 @@ const configStore = useConfig()
 const indexStore = useIndex()
 
 const streamUrl = ref(
-    `/data/event/${configStore.channels[configStore.id].id}?endpoint=system&uuid=${authStore.uuid}`
+    `/data/event/${configStore.channels[configStore.i].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.channels[configStore.id].id}?endpoint=system&uuid=${
+            streamUrl.value = `/data/event/${configStore.channels[configStore.i].id}?endpoint=system&uuid=${
                 authStore.uuid
             }`
             errorCounter.value = 0
diff --git a/frontend/composables/variables.ts b/frontend/composables/variables.ts
index bd7e77b2..ea868c4d 100644
--- a/frontend/composables/variables.ts
+++ b/frontend/composables/variables.ts
@@ -1,7 +1,7 @@
 export const useVariables = () => {
     const multiSelectClasses = {
-        container: 'relative input input-bordered w-full flex items-center justify-end px-0 min-h-[32px]',
-        containerDisabled: 'cursor-default !bg-base-100',
+        container: 'relative input input-bordered w-full h-auto flex items-center justify-end px-0 min-h-[32px]',
+        containerDisabled: '[&>div]:cursor-default !bg-base-100 [&>div>div]:pr-2',
         containerOpen: 'rounded-b-none',
         containerOpenTop: 'rounded-t-none',
         containerActive: 'ring ring-green-500 ring-opacity-30',
diff --git a/frontend/pages/logging.vue b/frontend/pages/logging.vue
index aa269e44..a5f7f3d9 100644
--- a/frontend/pages/logging.vue
+++ b/frontend/pages/logging.vue
@@ -51,7 +51,7 @@ useHead({
     title: `${t('button.logging')} | ffplayout`,
 })
 
-const { id } = storeToRefs(useConfig())
+const { i } = storeToRefs(useConfig())
 
 const { $dayjs } = useNuxtApp()
 const authStore = useAuth()
@@ -80,7 +80,7 @@ onMounted(async () => {
     await getLog()
 })
 
-watch([listDate, id], () => {
+watch([listDate, i], () => {
     getLog()
 })
 
@@ -111,7 +111,7 @@ async function getLog() {
         date = ''
     }
 
-    await fetch(`/api/log/${configStore.channels[configStore.id].id}?date=${date}`, {
+    await fetch(`/api/log/${configStore.channels[configStore.i].id}?date=${date}`, {
         method: 'GET',
         headers: authStore.authHeader,
     })
diff --git a/frontend/pages/media.vue b/frontend/pages/media.vue
index 6705e94b..b4007ec1 100644
--- a/frontend/pages/media.vue
+++ b/frontend/pages/media.vue
@@ -312,7 +312,7 @@ const configStore = useConfig()
 const indexStore = useIndex()
 const mediaStore = useMedia()
 const { toMin, mediaType, filename, parent } = stringFormatter()
-const { id } = storeToRefs(useConfig())
+const { i } = storeToRefs(useConfig())
 
 useHead({
     title: `${t('button.media')} | ffplayout`,
@@ -353,7 +353,7 @@ const xhr = ref(new XMLHttpRequest())
 
 onMounted(async () => {
     let config_extensions = configStore.playout.storage.extensions
-    let extra_extensions = configStore.channels[configStore.id].extra_extensions
+    let extra_extensions = configStore.channels[configStore.i].extra_extensions
 
     if (typeof config_extensions === 'string') {
         config_extensions = config_extensions.split(',')
@@ -374,7 +374,7 @@ onMounted(async () => {
     }
 })
 
-watch([id], () => {
+watch([i], () => {
     mediaStore.getTree('')
 })
 
@@ -426,7 +426,7 @@ async function handleDrop(event: any, targetFolder: any, isParent: boolean | nul
     }
 
     if (source !== target) {
-        await fetch(`/api/file/${configStore.channels[configStore.id].id}/rename/`, {
+        await fetch(`/api/file/${configStore.channels[configStore.i].id}/rename/`, {
             method: 'POST',
             headers: { ...configStore.contentType, ...authStore.authHeader },
             body: JSON.stringify({ source, target }),
@@ -454,7 +454,7 @@ function setPreviewData(path: string) {
     }
 
     previewName.value = fullPath.split('/').slice(-1)[0]
-    previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.id].id}${fullPath}`).replace(
+    previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.i].id}${fullPath}`).replace(
         /%2F/g,
         '/'
     )
@@ -494,7 +494,7 @@ async function deleteFileOrFolder(del: boolean) {
     showDeleteModal.value = false
 
     if (del) {
-        await fetch(`/api/file/${configStore.channels[configStore.id].id}/remove/`, {
+        await fetch(`/api/file/${configStore.channels[configStore.i].id}/remove/`, {
             method: 'POST',
             headers: { ...configStore.contentType, ...authStore.authHeader },
             body: JSON.stringify({ source: deleteName.value }),
@@ -530,7 +530,7 @@ async function renameFile(ren: boolean) {
     showRenameModal.value = false
 
     if (ren && renameOldName.value !== renameNewName.value) {
-        await fetch(`/api/file/${configStore.channels[configStore.id].id}/rename/`, {
+        await fetch(`/api/file/${configStore.channels[configStore.i].id}/rename/`, {
             method: 'POST',
             headers: { ...configStore.contentType, ...authStore.authHeader },
             body: JSON.stringify({
@@ -573,7 +573,7 @@ async function createFolder(create: boolean) {
             return
         }
 
-        await $fetch(`/api/file/${configStore.channels[configStore.id].id}/create-folder/`, {
+        await $fetch(`/api/file/${configStore.channels[configStore.i].id}/create-folder/`, {
             method: 'POST',
             headers: { ...configStore.contentType, ...authStore.authHeader },
             body: JSON.stringify({ source: path }),
@@ -610,7 +610,7 @@ async function upload(file: any): Promise<null | undefined> {
     return new Promise((resolve) => {
         xhr.value.open(
             'PUT',
-            `/api/file/${configStore.channels[configStore.id].id}/upload/?path=${encodeURIComponent(
+            `/api/file/${configStore.channels[configStore.i].id}/upload/?path=${encodeURIComponent(
                 mediaStore.crumbs[mediaStore.crumbs.length - 1].path
             )}`
         )
diff --git a/frontend/pages/message.vue b/frontend/pages/message.vue
index f5a97c20..25a3318b 100644
--- a/frontend/pages/message.vue
+++ b/frontend/pages/message.vue
@@ -227,7 +227,7 @@ const { t } = useI18n()
 const authStore = useAuth()
 const configStore = useConfig()
 const indexStore = useIndex()
-const { id } = storeToRefs(useConfig())
+const { i } = storeToRefs(useConfig())
 const { numberToHex, hexToNumber } = stringFormatter()
 
 useHead({
@@ -266,14 +266,14 @@ onMounted(() => {
     getPreset(-1)
 })
 
-watch([id], () => {
+watch([i], () => {
     nextTick(() => {
         getPreset(-1)
     })
 })
 
 async function getPreset(index: number) {
-    fetch(`/api/presets/${configStore.channels[configStore.id].id}`, {
+    fetch(`/api/presets/${configStore.channels[configStore.i].id}`, {
         method: 'GET',
         headers: authStore.authHeader,
     })
@@ -354,10 +354,10 @@ async function savePreset() {
                     : form.value.boxColor + '@' + numberToHex(form.value.boxAlpha),
             boxborderw: form.value.border,
             alpha: form.value.overallAlpha,
-            channel_id: configStore.channels[configStore.id].id,
+            channel_id: configStore.channels[configStore.i].id,
         }
 
-        const response = await fetch(`/api/presets/${configStore.channels[configStore.id].id}/${form.value.id}`, {
+        const response = await fetch(`/api/presets/${configStore.channels[configStore.i].id}/${form.value.id}`, {
             method: 'PUT',
             headers: { ...configStore.contentType, ...authStore.authHeader },
             body: JSON.stringify(preset),
@@ -393,10 +393,10 @@ 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.channels[configStore.id].id,
+            channel_id: configStore.channels[configStore.i].id,
         }
 
-        const response = await fetch(`/api/presets/${configStore.channels[configStore.id].id}/`, {
+        const response = await fetch(`/api/presets/${configStore.channels[configStore.i].id}/`, {
             method: 'POST',
             headers: { ...configStore.contentType, ...authStore.authHeader },
             body: JSON.stringify(preset),
@@ -417,7 +417,7 @@ async function deletePreset(del: boolean) {
     showDeleteModal.value = false
 
     if (del && selected.value && selected.value !== '') {
-        await fetch(`/api/presets/${configStore.channels[configStore.id].id}/${form.value.id}`, {
+        await fetch(`/api/presets/${configStore.channels[configStore.i].id}/${form.value.id}`, {
             method: 'DELETE',
             headers: authStore.authHeader,
         })
@@ -440,7 +440,7 @@ async function submitMessage() {
         boxborderw: form.value.border.toString(),
     }
 
-    const response = await fetch(`/api/control/${configStore.channels[configStore.id].id}/text/`, {
+    const response = await fetch(`/api/control/${configStore.channels[configStore.i].id}/text/`, {
         method: 'POST',
         headers: { ...configStore.contentType, ...authStore.authHeader },
         body: JSON.stringify(obj),
diff --git a/frontend/pages/player.vue b/frontend/pages/player.vue
index 3b78b6d1..93993df1 100644
--- a/frontend/pages/player.vue
+++ b/frontend/pages/player.vue
@@ -174,7 +174,7 @@
                         v-model="newSource.source"
                         type="text"
                         class="input input-sm input-bordered w-auto"
-                        :disabled="newSource.source.includes(configStore.channels[configStore.id].storage)"
+                        :disabled="newSource.source.includes(configStore.channels[configStore.i].storage)"
                     />
                 </label>
 
@@ -316,7 +316,7 @@ function closePlayer() {
 
 function setPreviewData(path: string) {
     let fullPath = path
-    const storagePath = configStore.channels[configStore.id].storage
+    const storagePath = configStore.channels[configStore.i].storage
     const lastIndex = storagePath.lastIndexOf('/')
 
     if (!path.includes('/')) {
@@ -332,7 +332,7 @@ function setPreviewData(path: string) {
     if (path.match(/^http/)) {
         previewUrl.value = path
     } else {
-        previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.id].id}${fullPath}`).replace(
+        previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.i].id}${fullPath}`).replace(
             /%2F/g,
             '/'
         )
@@ -464,7 +464,7 @@ async function importPlaylist(imp: boolean) {
 
         playlistStore.isLoading = true
         await $fetch(
-            `/api/file/${configStore.channels[configStore.id].id}/import/?file=${textFile.value[0].name}&date=${
+            `/api/file/${configStore.channels[configStore.i].id}/import/?file=${textFile.value[0].name}&date=${
                 listDate.value
             }`,
             {
@@ -497,11 +497,11 @@ async function savePlaylist(save: boolean) {
 
         const saveList = processPlaylist(listDate.value, cloneDeep(playlistStore.playlist), true)
 
-        await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/`, {
+        await $fetch(`/api/playlist/${configStore.channels[configStore.i].id}/`, {
             method: 'POST',
             headers: { ...configStore.contentType, ...authStore.authHeader },
             body: JSON.stringify({
-                channel: configStore.channels[configStore.id].name,
+                channel: configStore.channels[configStore.i].name,
                 date: targetDate.value,
                 program: saveList,
             }),
@@ -524,7 +524,7 @@ async function deletePlaylist(del: boolean) {
     showDeleteModal.value = false
 
     if (del) {
-        await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/${listDate.value}`, {
+        await $fetch(`/api/playlist/${configStore.channels[configStore.i].id}/${listDate.value}`, {
             method: 'DELETE',
             headers: { ...configStore.contentType, ...authStore.authHeader },
         }).then(() => {
diff --git a/frontend/stores/config.ts b/frontend/stores/config.ts
index 1659119f..894c7407 100644
--- a/frontend/stores/config.ts
+++ b/frontend/stores/config.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 
 export const useConfig = defineStore('config', {
     state: () => ({
-        id: 0,
+        i: 0,
         configCount: 0,
         contentType: { 'content-type': 'application/json;charset=UTF-8' },
         channels: [] as Channel[],
@@ -114,19 +114,19 @@ export const useConfig = defineStore('config', {
                 })
 
                 const json = await response.json()
-                const guiConfigs = []
+                const channelConfigs = []
 
                 for (const obj of this.channels) {
                     if (obj.name === stringObj.name) {
-                        guiConfigs.push(json)
+                        channelConfigs.push(json)
                     } else {
-                        guiConfigs.push(obj)
+                        channelConfigs.push(obj)
                     }
                 }
 
-                this.channels = guiConfigs
-                this.channelsRaw = cloneDeep(guiConfigs)
-                this.configCount = guiConfigs.length
+                this.channels = channelConfigs
+                this.channelsRaw = cloneDeep(channelConfigs)
+                this.configCount = channelConfigs.length
             }
 
             await this.getPlayoutConfig()
@@ -139,7 +139,7 @@ export const useConfig = defineStore('config', {
             const { timeToSeconds } = stringFormatter()
             const authStore = useAuth()
             const indexStore = useIndex()
-            const channel = this.channels[this.id].id
+            const channel = this.channels[this.i].id
 
             await fetch(`/api/playout/config/${channel}`, {
                 method: 'GET',
@@ -165,7 +165,7 @@ export const useConfig = defineStore('config', {
             const { $i18n } = useNuxtApp()
             const authStore = useAuth()
             const indexStore = useIndex()
-            const channel = this.channels[this.id].id
+            const channel = this.channels[this.i].id
 
             await $fetch(`/api/playout/advanced/${channel}`, {
                 method: 'GET',
@@ -182,7 +182,7 @@ export const useConfig = defineStore('config', {
         async setPlayoutConfig(obj: any) {
             const { timeToSeconds } = stringFormatter()
             const authStore = useAuth()
-            const channel = this.channels[this.id].id
+            const channel = this.channels[this.i].id
 
             this.playlistLength = timeToSeconds(obj.playlist.length)
             this.playout.playlist.startInSec = timeToSeconds(obj.playlist.day_start)
@@ -203,7 +203,7 @@ export const useConfig = defineStore('config', {
 
         async setAdvancedConfig() {
             const authStore = useAuth()
-            const channel = this.channels[this.id].id
+            const channel = this.channels[this.i].id
 
             const update = await fetch(`/api/playout/advanced/${channel}`, {
                 method: 'PUT',
diff --git a/frontend/stores/media.ts b/frontend/stores/media.ts
index a34bbefe..805c598d 100644
--- a/frontend/stores/media.ts
+++ b/frontend/stores/media.ts
@@ -23,7 +23,7 @@ export const useMedia = defineStore('media', {
             const authStore = useAuth()
             const configStore = useConfig()
             const indexStore = useIndex()
-            const channel = configStore.channels[configStore.id].id
+            const channel = configStore.channels[configStore.i].id
             const crumbs: Crumb[] = []
             let root = '/'
 
diff --git a/frontend/stores/playlist.ts b/frontend/stores/playlist.ts
index b3226d18..5c530341 100644
--- a/frontend/stores/playlist.ts
+++ b/frontend/stores/playlist.ts
@@ -33,7 +33,7 @@ export const usePlaylist = defineStore('playlist', {
             const authStore = useAuth()
             const configStore = useConfig()
             const indexStore = useIndex()
-            const channel = configStore.channels[configStore.id].id
+            const channel = configStore.channels[configStore.i].id
 
             await $fetch(`/api/playlist/${channel}?date=${date}`, {
                 method: 'GET',