From 6c574feda10632468197be846cd7a548327df344 Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Tue, 16 Apr 2024 18:13:28 +0200
Subject: [PATCH] fix eslint

---
 components/{Alert.vue => AlertMsg.vue}        |   0
 components/ConfigGui.vue                      |  24 +-
 components/ConfigPlayout.vue                  |  41 +-
 components/ConfigUser.vue                     |   4 +-
 components/{Modal.vue => GenericModal.vue}    |   2 +-
 components/{Menu.vue => HeaderMenu.vue}       |  10 +-
 components/MediaBrowser.vue                   |   4 +-
 components/{Control.vue => PlayerControl.vue} |   4 +-
 components/PlaylistGenerator.vue              |  40 +-
 components/PlaylistTable.vue                  |   4 +-
 components/SystemStats.vue                    |   4 +-
 error.vue                                     |   5 +-
 eslint.config.mjs                             |  18 +-
 layouts/default.vue                           |   4 +-
 middleware/auth.global.ts                     |   2 +-
 pages/index.vue                               |  12 +-
 pages/logging.vue                             |  14 +-
 pages/media.vue                               | 463 +++++++++---------
 pages/message.vue                             | 388 +++++++--------
 pages/player.vue                              |  46 +-
 plugins/lodash.client.ts                      |   2 +-
 stores/playlist.ts                            |  12 +-
 types/index.d.ts                              |  18 +-
 23 files changed, 580 insertions(+), 541 deletions(-)
 rename components/{Alert.vue => AlertMsg.vue} (100%)
 rename components/{Modal.vue => GenericModal.vue} (97%)
 rename components/{Menu.vue => HeaderMenu.vue} (94%)
 rename components/{Control.vue => PlayerControl.vue} (99%)

diff --git a/components/Alert.vue b/components/AlertMsg.vue
similarity index 100%
rename from components/Alert.vue
rename to components/AlertMsg.vue
diff --git a/components/ConfigGui.vue b/components/ConfigGui.vue
index a8c1fcbb..070cb34f 100644
--- a/components/ConfigGui.vue
+++ b/components/ConfigGui.vue
@@ -6,19 +6,19 @@
         </div>
         <form
             v-if="configStore.configGui && configStore.configGui[configStore.configID]"
-            @submit.prevent="onSubmitGui"
             class="w-full"
+            @submit.prevent="onSubmitGui"
         >
             <label class="form-control w-full">
                 <div class="label">
                     <span class="label-text">{{ $t('config.name') }}</span>
                 </div>
                 <input
+                    v-model="configStore.configGui[configStore.configID].name"
                     type="text"
                     placeholder="Type here"
                     class="input input-bordered w-full"
-                    v-model="configStore.configGui[configStore.configID].name"
-                />
+                >
             </label>
 
             <label class="form-control w-full mt-5">
@@ -26,10 +26,10 @@
                     <span class="label-text">{{ $t('config.previewUrl') }}</span>
                 </div>
                 <input
+                    v-model="configStore.configGui[configStore.configID].preview_url"
                     type="text"
                     class="input input-bordered w-full"
-                    v-model="configStore.configGui[configStore.configID].preview_url"
-                />
+                >
             </label>
 
             <label class="form-control w-full mt-5">
@@ -37,10 +37,10 @@
                     <span class="label-text">{{ $t('config.configPath') }}</span>
                 </div>
                 <input
+                    v-model="configStore.configGui[configStore.configID].config_path"
                     type="text"
                     class="input input-bordered w-full"
-                    v-model="configStore.configGui[configStore.configID].config_path"
-                />
+                >
             </label>
 
             <label class="form-control w-full mt-5">
@@ -48,10 +48,10 @@
                     <span class="label-text">{{ $t('config.extensions') }}</span>
                 </div>
                 <input
+                    v-model="configStore.configGui[configStore.configID].extra_extensions"
                     type="text"
                     class="input input-bordered w-full"
-                    v-model="configStore.configGui[configStore.configID].extra_extensions"
-                />
+                >
             </label>
 
             <label class="form-control w-full mt-5">
@@ -59,18 +59,18 @@
                     <span class="label-text">{{ $t('config.service') }}</span>
                 </div>
                 <input
+                    v-model="configStore.configGui[configStore.configID].service"
                     type="text"
                     class="input input-bordered w-full !bg-base-100"
-                    v-model="configStore.configGui[configStore.configID].service"
                     disabled
-                />
+                >
             </label>
 
             <div class="join my-4">
                 <button class="join-item btn btn-primary" type="submit">{{ $t('config.save') }}</button>
                 <button
-                    class="join-item btn btn-primary"
                     v-if="configStore.configGui.length > 1 && configStore.configGui[configStore.configID].id > 1"
+                    class="join-item btn btn-primary"
                     @click="deleteChannel()"
                 >
                     {{ $t('config.delete') }}
diff --git a/components/ConfigPlayout.vue b/components/ConfigPlayout.vue
index fb01b39e..401e533a 100644
--- a/components/ConfigPlayout.vue
+++ b/components/ConfigPlayout.vue
@@ -3,14 +3,15 @@
         <h2 class="pt-3 text-3xl">{{ $t('config.playoutConf') }}</h2>
         <form
             v-if="configStore.configPlayout"
-            @submit.prevent="onSubmitPlayout"
             class="mt-10 grid md:grid-cols-[180px_auto] gap-5"
+            @submit.prevent="onSubmitPlayout"
         >
-            <template v-for="(item, key, _) in configStore.configPlayout" :key="key">
+            <template v-for="(item, key) in configStore.configPlayout" :key="key">
                 <div class="text-xl pt-3 text-right">{{ setTitle(key.toString()) }}:</div>
                 <div class="md:pt-4">
                     <label
                         v-for="(prop, name) in (item as Record<string, any>)"
+                        :key="name"
                         class="form-control w-full"
                         :class="[typeof prop === 'boolean' && 'flex-row', name.toString() !== 'help_text' && 'mt-2']"
                     >
@@ -22,50 +23,50 @@
                         </div>
                         <input
                             v-else-if="name.toString() === 'sender_pass'"
+                            v-model="item[name]"
                             type="password"
                             :placeholder="$t('config.placeholderPass')"
                             class="input input-sm input-bordered w-full"
-                            v-model="item[name]"
-                        />
+                        >
                         <textarea
                             v-else-if="name.toString() === 'output_param' || name.toString() === 'custom_filter'"
-                            class="textarea textarea-bordered"
                             v-model="item[name]"
+                            class="textarea textarea-bordered"
                             rows="3"
                         />
                         <input
                             v-else-if="typeof prop === 'number' && prop % 1 === 0"
+                            v-model="item[name]"
                             type="number"
                             class="input input-sm input-bordered w-full"
-                            v-model="item[name]"
-                        />
+                        >
                         <input
                             v-else-if="typeof prop === 'number'"
+                            v-model="item[name]"
                             type="number"
                             class="input input-sm input-bordered w-full"
-                            v-model="item[name]"
                             step="0.0001"
                             style="max-width: 250px"
-                        />
+                        >
                         <input
                             v-else-if="typeof prop === 'boolean'"
+                            v-model="item[name]"
                             type="checkbox"
                             class="checkbox checkbox-sm ms-2 mt-2"
-                            v-model="item[name]"
-                        />
+                        >
                         <input
                             v-else-if="name === 'ignore_lines'"
+                            v-model="formatIgnoreLines"
                             type="text"
                             class="input input-sm input-bordered w-full"
-                            v-model="formatIgnoreLines"
-                        />
+                        >
                         <input
                             v-else
-                            type="text"
-                            class="input input-sm input-bordered w-full"
                             :id="name"
                             v-model="item[name]"
-                        />
+                            type="text"
+                            class="input input-sm input-bordered w-full"
+                        >
                     </label>
                 </div>
             </template>
@@ -75,11 +76,11 @@
         </form>
     </div>
 
-    <Modal
+    <GenericModal
         :title="$t('config.restartTile')"
         :text="$t('config.restartText')"
         :show="showModal"
-        :modalAction="restart"
+        :modal-action="restart"
     />
 </template>
 
@@ -102,7 +103,7 @@ const formatIgnoreLines = computed({
     },
 })
 
-function setTitle(input: string): String {
+function setTitle(input: string): string {
     switch (input) {
         case 'general':
             return t('config.general')
@@ -131,7 +132,7 @@ function setTitle(input: string): String {
     }
 }
 
-function setHelp(key: string, text: string): String {
+function setHelp(key: string, text: string): string {
     switch (key) {
         case 'general':
             return t('config.generalText')
diff --git a/components/ConfigUser.vue b/components/ConfigUser.vue
index 8f716fcd..8471a086 100644
--- a/components/ConfigUser.vue
+++ b/components/ConfigUser.vue
@@ -68,7 +68,7 @@
         </form>
     </div>
 
-    <Modal :show="showUserModal" title="Add user" :modal-action="addUser">
+    <GenericModal :show="showUserModal" title="Add user" :modal-action="addUser">
         <div class="w-full max-w-[500px] h-[420px]">
             <label class="form-control w-full">
                 <div class="label">
@@ -113,7 +113,7 @@
                 </label>
             </div>
         </div>
-    </Modal>
+    </GenericModal>
 </template>
 
 <script setup lang="ts">
diff --git a/components/Modal.vue b/components/GenericModal.vue
similarity index 97%
rename from components/Modal.vue
rename to components/GenericModal.vue
index 44096cb9..56cac411 100644
--- a/components/Modal.vue
+++ b/components/GenericModal.vue
@@ -5,7 +5,7 @@
                 <div class="flex gap-2">
                     <div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
                     <button v-if="hideButtons" class="btn btn-sm w-8 h-8 rounded-full" @click="modalAction(false)">
-                        <i class="bi bi-x-lg"></i>
+                        <i class="bi bi-x-lg"/>
                     </button>
                 </div>
 
diff --git a/components/Menu.vue b/components/HeaderMenu.vue
similarity index 94%
rename from components/Menu.vue
rename to components/HeaderMenu.vue
index 0d67a584..dbbbf0a9 100644
--- a/components/Menu.vue
+++ b/components/HeaderMenu.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="navbar bg-base-100 min-h-[52px] p-0 shadow">
         <NuxtLink class="navbar-brand min-w-[46px] p-2" href="/">
-            <img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
+            <img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" >
         </NuxtLink>
         <div class="navbar-end w-1/5 grow">
             <label class="swap swap-rotate me-2 md:hidden">
-                <input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
+                <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
                 <SvgIcon name="swap-on" classes="w-5 h-5" />
                 <SvgIcon name="swap-off" classes="w-5 h-5" />
             </label>
@@ -15,7 +15,7 @@
                 </div>
                 <ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                     <li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md">
-                        <NuxtLink :to="item.link" class="h-[27px] text-base" exactActiveClass="is-active">
+                        <NuxtLink :to="item.link" class="h-[27px] text-base" exact-active-class="is-active">
                             <span>
                                 {{ item.name }}
                             </span>
@@ -51,7 +51,7 @@
                     <NuxtLink
                         :to="item.link"
                         class="px-2 h-[27px] relative text-base text-base-content"
-                        activeClass="is-active"
+                        active-class="is-active"
                     >
                         <span>
                             {{ item.name }}
@@ -81,7 +81,7 @@
                 </li>
                 <li class="p-0">
                     <label class="swap swap-rotate">
-                        <input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
+                        <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
                         <SvgIcon name="swap-on" classes="w-5 h-5" />
                         <SvgIcon name="swap-off" classes="w-5 h-5" />
                     </label>
diff --git a/components/MediaBrowser.vue b/components/MediaBrowser.vue
index 0cb8581c..1bbc033f 100644
--- a/components/MediaBrowser.vue
+++ b/components/MediaBrowser.vue
@@ -22,7 +22,7 @@
     </div>
 
     <div class="w-full h-[calc(100%-48px)] overflow-auto m-1">
-        <div class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
+        <div v-for="folder in mediaStore.folderTree.folders" :key="folder.uid" class="flex px-1">
             <button class="truncate" @click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)">
                 <i class="bi-folder-fill" />
                 {{ folder.name }}
@@ -38,9 +38,9 @@
             <template #item="{ element, index }">
                 <tr
                     :id="`file-${index}`"
+                    :key="element.name"
                     class="w-full"
                     :class="{ 'grabbing cursor-grab': width > 768 }"
-                    :key="element.name"
                 >
                     <td class="ps-1 py-1 w-[20px]">
                         <i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
diff --git a/components/Control.vue b/components/PlayerControl.vue
similarity index 99%
rename from components/Control.vue
rename to components/PlayerControl.vue
index 864e70f6..910f5abf 100644
--- a/components/Control.vue
+++ b/components/PlayerControl.vue
@@ -6,9 +6,9 @@
                     <div class="w-full h-full p-2">
                         <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
                         <VideoPlayer
-                            class="live-player"
                             v-else-if="configStore.configGui[configStore.configID]"
                             :key="configStore.configID"
+                            class="live-player"
                             reference="httpStream"
                             :options="{
                                 liveui: true,
@@ -70,7 +70,7 @@
                                     class="progress progress-accent w-full"
                                     :value="playlistStore.progressValue"
                                     max="100"
-                                ></progress>
+                                />
                             </div>
                         </div>
                     </div>
diff --git a/components/PlaylistGenerator.vue b/components/PlaylistGenerator.vue
index 06cb50d4..103fe2fc 100644
--- a/components/PlaylistGenerator.vue
+++ b/components/PlaylistGenerator.vue
@@ -15,9 +15,9 @@
                         role="tab"
                         class="tab"
                         aria-label="Simple"
-                        @change="advancedGenerator = false"
                         checked
-                    />
+                        @change="advancedGenerator = false"
+                    >
                     <div role="tabpanel" class="tab-content w-full pt-3">
                         <div class="w-full">
                             <div class="grid">
@@ -42,9 +42,9 @@
 
                             <ul class="h-[475px] border border-my-gray rounded overflow-auto bg-base-300 m-1 py-1">
                                 <li
-                                    class="even:bg-base-200 px-2 w-full"
                                     v-for="folder in mediaStore.folderList.folders"
                                     :key="folder.uid"
+                                    class="even:bg-base-200 px-2 w-full"
                                 >
                                     <div class="grid grid-cols-[auto_24px]">
                                         <button
@@ -78,7 +78,7 @@
                                                         )
                                                     )
                                                 "
-                                            />
+                                            >
                                         </div>
                                     </div>
                                 </li>
@@ -93,7 +93,7 @@
                         class="tab"
                         aria-label="Advanced"
                         @change=";(advancedGenerator = true), resetCheckboxes()"
-                    />
+                    >
                     <div role="tabpanel" class="tab-content pt-3">
                         <div class="w-full">
                             <div class="grid grid-cols-[auto_48px] px-3 pt-0">
@@ -121,7 +121,7 @@
                                         title="Add time block"
                                         @click="addTemplate()"
                                     >
-                                        <i class="bi bi-folder-plus"></i>
+                                        <i class="bi bi-folder-plus"/>
                                     </button>
                                 </div>
                             </div>
@@ -140,8 +140,8 @@
                                     <template #item="{ element, index }">
                                         <li
                                             :id="`adv_folder_${index}`"
-                                            class="even:bg-base-200 draggable px-2 w-full"
                                             :key="element.uid"
+                                            class="even:bg-base-200 draggable px-2 w-full"
                                         >
                                             <button
                                                 class="w-full truncate text-left"
@@ -177,20 +177,20 @@
                                                 Start:
                                             </div>
                                             <input
+                                                v-model="item.start"
                                                 type="text"
                                                 class="input input-sm input-bordered join-item px-2 text-center"
-                                                v-model="item.start"
-                                            />
+                                            >
                                             <div
                                                 class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
                                             >
                                                 Duration:
                                             </div>
                                             <input
+                                                v-model="item.duration"
                                                 type="text"
                                                 class="input input-sm input-bordered join-item px-2 text-center"
-                                                v-model="item.duration"
-                                            />
+                                            >
                                             <button
                                                 class="btn btn-sm input-bordered join-item"
                                                 :class="item.shuffle ? 'bg-base-100' : 'bg-base-300'"
@@ -212,8 +212,8 @@
                                             <template #item="{ element, index }">
                                                 <li
                                                     :id="`path_${index}`"
-                                                    class="draggable grabbing py-0 even:bg-base-200 px-2"
                                                     :key="index"
+                                                    class="draggable grabbing py-0 even:bg-base-200 px-2"
                                                 >
                                                     <i class="bi-folder-fill" />
                                                     {{ element.split(/[\\/]+/).pop() }}
@@ -243,11 +243,11 @@
                     <label class="label cursor-pointer w-12">
                         <span class="label-text">All</span>
                         <input
-                            type="checkbox"
                             v-model="generateFromAll"
+                            type="checkbox"
                             class="checkbox checkbox-xs rounded"
                             @change="resetCheckboxes()"
-                        />
+                        >
                     </label>
                 </div>
                 <div class="join ms-2">
@@ -364,11 +364,10 @@ function setSelectedFolder(event: any, folder: string) {
 
 function resetCheckboxes() {
     selectedFolders.value = []
-    const checkboxes = document.getElementsByClassName('folder-check')
+    const checkboxes = document.getElementsByClassName('folder-check') as HTMLCollectionOf<HTMLInputElement>
 
     if (checkboxes) {
         for (const box of checkboxes) {
-            // @ts-ignore
             box.checked = false
         }
     }
@@ -401,14 +400,11 @@ function removeTemplate(item: TemplateItem) {
 
 function addTemplate() {
     const last = template.value.sources[template.value.sources.length - 1]
-    // @ts-ignore
-    let start = $dayjs('00:00:00', 'HH:mm:ss')
+    let start = $dayjs('2000-01-01T00:00:00')
 
     if (last) {
-        // @ts-ignore
-        const t = $dayjs(last.duration, 'HH:mm:ss')
-        // @ts-ignore
-        start = $dayjs(last.start, 'HH:mm:ss').add(t.hour(), 'hour').add(t.minute(), 'minute').add(t.second(), 'second')
+        const t = $dayjs(`2000-01-01T${last.duration}`)
+        start = $dayjs(`2000-01-01T${last.start}`).add(t.hour(), 'hour').add(t.minute(), 'minute').add(t.second(), 'second')
     }
 
     template.value.sources.push({
diff --git a/components/PlaylistTable.vue b/components/PlaylistTable.vue
index 056ca780..e1ec5d50 100644
--- a/components/PlaylistTable.vue
+++ b/components/PlaylistTable.vue
@@ -65,6 +65,7 @@
                 <template #item="{ element, index }">
                     <tr
                         :id="`clip-${index}`"
+                        :key="element.uid"
                         class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
                         :class="{
                             '!bg-lime-500/30':
@@ -72,7 +73,6 @@
                                 listDate === todayDate &&
                                 index === playlistStore.currentClipIndex,
                         }"
-                        :key="element.uid"
                     >
                         <td class="ps-4 py-2 text-left">{{ secondsToTime(element.begin) }}</td>
                         <td class="py-2 text-left truncate" :class="{ 'grabbing cursor-grab': width > 768 }">
@@ -96,7 +96,7 @@
                                 type="checkbox"
                                 :checked="element.category && element.category === 'advertisement' ? true : false"
                                 @change="setCategory($event, element)"
-                            />
+                            >
                         </td>
                         <td class="py-2 text-center hover:text-base-content/70">
                             <button @click="editItem(index)">
diff --git a/components/SystemStats.vue b/components/SystemStats.vue
index ed2ecff7..f84d8a06 100644
--- a/components/SystemStats.vue
+++ b/components/SystemStats.vue
@@ -3,7 +3,7 @@
         <div class="p-4 bg-base-100">
             <span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
             <span v-if="sysStat.system.kernel">
-                <br />
+                <br >
                 {{ sysStat.system.kernel }}
             </span>
         </div>
@@ -57,7 +57,7 @@
             <div class="text-xl">{{ $t('system.storage') }}</div>
             <div v-if="sysStat.storage"><strong>{{ $t('system.device') }}:</strong> {{ sysStat.storage?.path }}</div>
 
-            <div class="grid grid-cols-2" v-if="sysStat.storage">
+            <div v-if="sysStat.storage" class="grid grid-cols-2">
                 <div><strong>{{ $t('system.size') }}:</strong> {{ fileSize(sysStat.storage?.total) }}</div>
                 <div><strong>{{ $t('system.used') }}:</strong> {{ fileSize(sysStat.storage?.used) }}</div>
             </div>
diff --git a/error.vue b/error.vue
index b3387fe6..76885869 100644
--- a/error.vue
+++ b/error.vue
@@ -22,7 +22,10 @@ import type { NuxtError } from '#app'
 const localePath = useLocalePath()
 
 const props = defineProps({
-    error: Object as () => NuxtError,
+    error: {
+        type: Object,
+        default: {} as NuxtError,
+    },
 })
 
 onMounted(() => {
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 934c3a1d..2876666b 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,6 +1,20 @@
-// @ts-check
 import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt(
-  // Your custom configs here
+    // your custom flat configs go here, for example:
+    // {
+    //   files: ['**/*.ts', '**/*.tsx'],
+    //   rules: {
+    //     'no-console': 'off' // allow console.log in TypeScript files
+    //   }
+    // },
+    // {
+    //   ...
+    // }
+    {
+        rules: {
+            "@typescript-eslint/no-explicit-any": "off",
+            "vue/no-v-html": "off",
+        },
+    }
 )
diff --git a/layouts/default.vue b/layouts/default.vue
index e6b25284..7dcc6c79 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="min-h-screen bg-base-200">
         <div v-if="authStore.isLogin && !String(route.name).includes('index')" class="sticky top-0 z-10">
-            <Menu />
+            <HeaderMenu />
         </div>
 
         <main :class="authStore.isLogin && !String(route.name).includes('index') ? 'h-[calc(100%-52px)]' : 'h-full'">
             <slot />
         </main>
 
-        <Alert />
+        <AlertMsg />
     </div>
 </template>
 
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index bce8cb34..a1feb5e3 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -1,4 +1,4 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware((to) => {
     const auth = useAuth()
     const localePath = useLocalePath()
 
diff --git a/pages/index.vue b/pages/index.vue
index 5be8be36..0145d277 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -26,8 +26,8 @@
                     {{ $t('button.logout') }}
                 </button>
                 <select
-                    class="select select-primary select-bordered join-item max-w-xs ps-2"
                     v-model="selectedLang"
+                    class="select select-primary select-bordered join-item max-w-xs ps-2"
                     @change="changeLang(selectedLang)"
                 >
                     <option v-for="(loc, index) in locales" :key="index" :value="/* @ts-ignore */ loc.code">
@@ -38,7 +38,7 @@
                     </option>
                 </select>
                 <label class="join-item btn btn-primary swap swap-rotate me-2">
-                    <input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
+                    <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
                     <SvgIcon name="swap-on" classes="w-5 h-5" />
                     <SvgIcon name="swap-off" classes="w-5 h-5" />
                 </label>
@@ -49,20 +49,20 @@
 
             <form class="mt-10" @submit.prevent="login">
                 <input
-                    type="text"
                     v-model="formUsername"
+                    type="text"
                     :placeholder="$t('input.username')"
                     class="input input-bordered w-full"
                     required
-                />
+                >
 
                 <input
-                    type="password"
                     v-model="formPassword"
+                    type="password"
                     :placeholder="$t('input.password')"
                     class="input input-bordered w-full mt-5"
                     required
-                />
+                >
 
                 <div class="w-full mt-4 grid grid-flow-row-dense grid-cols-12 grid-rows-1 gap-2">
                     <div class="col-span-3">
diff --git a/pages/logging.vue b/pages/logging.vue
index 96903358..af5be114 100644
--- a/pages/logging.vue
+++ b/pages/logging.vue
@@ -1,7 +1,8 @@
 <template>
-    <div class="flex justify-end p-3 h-14">
-        <div>
-            <VueDatePicker
+    <div>
+        <div class="flex justify-end p-3 h-14">
+            <div>
+                <VueDatePicker
                     v-model="listDate"
                     :clearable="false"
                     :hide-navigation="['time']"
@@ -14,10 +15,11 @@
                     input-class-name="input input-sm !input-bordered !w-[250px] text-right !pe-3"
                     required
                 />
+            </div>
+        </div>
+        <div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
+            <div class="bg-base-300 whitespace-pre h-full font-mono overflow-auto p-3" v-html="formatLog(currentLog)" />
         </div>
-    </div>
-    <div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
-        <div class="bg-base-300 whitespace-pre h-full font-mono overflow-auto p-3" v-html="formatLog(currentLog)" />
     </div>
 </template>
 
diff --git a/pages/media.vue b/pages/media.vue
index 58a97c66..49dcf596 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -1,150 +1,107 @@
 <template>
-    <div class="h-[calc(100vh-140px)] px-2">
-        <nav class="text-sm breadcrumbs px-3">
-            <ul v-on:dragover.prevent>
-                <li
-                    v-for="(crumb, index) in mediaStore.crumbs"
-                    :key="index"
-                    v-on:drop="handleDrop($event, crumb.path, null)"
-                    v-on:dragover="handleDragOver"
-                    v-on:dragleave="handleDragLeave"
-                >
-                    <button
-                        v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
-                        @click="mediaStore.getTree(crumb.path)"
+    <div>
+        <div class="h-[calc(100vh-140px)] px-2">
+            <nav class="text-sm breadcrumbs px-3">
+                <ul @dragover.prevent>
+                    <li
+                        v-for="(crumb, index) in mediaStore.crumbs"
+                        :key="index"
+                        @drop="handleDrop($event, crumb.path, null)"
+                        @dragover="handleDragOver"
+                        @dragleave="handleDragLeave"
                     >
-                        <i class="bi-folder-fill me-1" />
-                        {{ crumb.text }}
-                    </button>
-                    <span v-else><i class="bi-folder-fill me-1" /> {{ crumb.text }}</span>
-                </li>
-            </ul>
-        </nav>
-
-        <div class="relative h-[calc(100%-34px)] min-h-[300px] bg-base-100">
-            <div v-if="mediaStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
-                <span class="loading loading-spinner loading-lg"></span>
-            </div>
-            <splitpanes :horizontal="horizontal" class="border border-my-gray rounded shadow">
-                <pane
-                    min-size="14"
-                    max-size="80"
-                    size="20"
-                    class="h-full pb-1 !bg-base-300"
-                    :class="horizontal ? 'rounded-t' : 'rounded-s'"
-                >
-                    <ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" v-on:dragover.prevent>
-                        <li
-                            v-if="mediaStore.folderTree.parent_folders.length > 0"
-                            v-for="folder in mediaStore.folderTree.parent_folders"
-                            class="grid grid-cols-[auto_28px] gap-1 px-2"
-                            :class="filename(mediaStore.folderTree.source) === folder.name && 'bg-base-300 rounded'"
-                            :key="folder.uid"
-                            v-on:drop="handleDrop($event, folder, true)"
-                            v-on:dragover="handleDragOver"
-                            v-on:dragleave="handleDragLeave"
+                        <button
+                            v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
+                            @click="mediaStore.getTree(crumb.path)"
                         >
-                            <button
-                                class="truncate text-left"
-                                @click="mediaStore.getTree(`/${parent(mediaStore.folderTree.source)}/${folder.name}`)"
-                            >
-                                <i class="bi-folder-fill" />
-                                {{ folder.name }}
-                            </button>
-                            <button
-                                class="w-7 opacity-30 hover:opacity-100"
-                                @click="
-                                    ;(showDeleteModal = true),
-                                        (deleteName = `/${parent(mediaStore.folderTree.source)}/${folder.name}`.replace(
-                                            /\/[/]+/g,
-                                            '/'
-                                        ))
-                                "
-                            >
-                                <i class="bi-x-circle-fill" />
-                            </button>
-                        </li>
-                        <li v-else class="px-2">
-                            <div class="truncate text-left">
-                                <i class="bi-folder-fill" />
-                                {{ mediaStore.folderTree.parent }}
-                            </div>
-                        </li>
-                    </ul>
-                </pane>
-                <pane class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-b' : 'rounded-e'">
-                    <ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" v-on:dragover.prevent>
-                        <li
-                            class="grid grid-cols-[auto_28px] px-2 gap-1"
-                            v-for="folder in mediaStore.folderTree.folders"
-                            :key="folder.uid"
-                            v-on:drop="handleDrop($event, folder, false)"
-                            v-on:dragover="handleDragOver"
-                            v-on:dragleave="handleDragLeave"
-                        >
-                            <button
-                                class="truncate text-left"
-                                @click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)"
-                            >
-                                <i class="bi-folder-fill" />
-                                {{ folder.name }}
-                            </button>
-                            <button
-                                class="w-7 opacity-30 hover:opacity-100"
-                                @click="
-                                    ;(showDeleteModal = true),
-                                        (deleteName = `/${mediaStore.folderTree.source}/${folder.name}`.replace(
-                                            /\/[/]+/g,
-                                            '/'
-                                        ))
-                                "
-                            >
-                                <i class="bi-x-circle-fill" />
-                            </button>
-                        </li>
-                        <li
-                            v-for="(element, index) in mediaStore.folderTree.files"
-                            :id="`file_${index}`"
-                            class="grid grid-cols-[auto_166px] px-2"
-                            :key="element.name"
-                            draggable="true"
-                            v-on:dragstart="handleDragStart($event, element)"
-                        >
-                            <div class="truncate cursor-grab">
-                                <i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
-                                <i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
-                                <i v-else-if="mediaType(element.name) === 'image'" class="bi-file-earmark-image" />
-                                <i v-else class="bi-file-binary" />
+                            <i class="bi-folder-fill me-1" />
+                            {{ crumb.text }}
+                        </button>
+                        <span v-else><i class="bi-folder-fill me-1" /> {{ crumb.text }}</span>
+                    </li>
+                </ul>
+            </nav>
 
-                                {{ element.name }}
-                            </div>
-                            <div>
-                                <button class="w-7" @click=";(showPreviewModal = true), setPreviewData(element.name)">
-                                    <i class="bi-play-fill" />
-                                </button>
-
-                                <div class="inline-block w-[82px]">{{ toMin(element.duration) }}</div>
-
-                                <button
-                                    class="w-7"
-                                    @click="
-                                        ;(showRenameModal = true),
-                                            setRenameValues(
-                                                `/${mediaStore.folderTree.source}/${element.name}`.replace(
-                                                    /\/[/]+/g,
-                                                    '/'
-                                                )
-                                            )
+            <div class="relative h-[calc(100%-34px)] min-h-[300px] bg-base-100">
+                <div v-if="mediaStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
+                    <span class="loading loading-spinner loading-lg" />
+                </div>
+                <splitpanes :horizontal="horizontal" class="border border-my-gray rounded shadow">
+                    <pane
+                        min-size="14"
+                        max-size="80"
+                        size="20"
+                        class="h-full pb-1 !bg-base-300"
+                        :class="horizontal ? 'rounded-t' : 'rounded-s'"
+                    >
+                        <ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" @dragover.prevent>
+                            <template v-if="mediaStore.folderTree.parent_folders.length > 0">
+                                <li
+                                    v-for="folder in mediaStore.folderTree.parent_folders"
+                                    :key="folder.uid"
+                                    class="grid grid-cols-[auto_28px] gap-1 px-2"
+                                    :class="
+                                        filename(mediaStore.folderTree.source) === folder.name && 'bg-base-300 rounded'
                                     "
+                                    @drop="handleDrop($event, folder, true)"
+                                    @dragover="handleDragOver"
+                                    @dragleave="handleDragLeave"
                                 >
-                                    <i class="bi-pencil-square" />
-                                </button>
+                                    <button
+                                        class="truncate text-left"
+                                        @click="
+                                            mediaStore.getTree(
+                                                `/${parent(mediaStore.folderTree.source)}/${folder.name}`
+                                            )
+                                        "
+                                    >
+                                        <i class="bi-folder-fill" />
+                                        {{ folder.name }}
+                                    </button>
+                                    <button
+                                        class="w-7 opacity-30 hover:opacity-100"
+                                        @click="
+                                            ;(showDeleteModal = true),
+                                                (deleteName = `/${parent(mediaStore.folderTree.source)}/${
+                                                    folder.name
+                                                }`.replace(/\/[/]+/g, '/'))
+                                        "
+                                    >
+                                        <i class="bi-x-circle-fill" />
+                                    </button>
+                                </li>
+                            </template>
 
+                            <li v-else class="px-2">
+                                <div class="truncate text-left">
+                                    <i class="bi-folder-fill" />
+                                    {{ mediaStore.folderTree.parent }}
+                                </div>
+                            </li>
+                        </ul>
+                    </pane>
+                    <pane class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-b' : 'rounded-e'">
+                        <ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" @dragover.prevent>
+                            <li
+                                v-for="folder in mediaStore.folderTree.folders"
+                                :key="folder.uid"
+                                class="grid grid-cols-[auto_28px] px-2 gap-1"
+                                @drop="handleDrop($event, folder, false)"
+                                @dragover="handleDragOver"
+                                @dragleave="handleDragLeave"
+                            >
+                                <button
+                                    class="truncate text-left"
+                                    @click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)"
+                                >
+                                    <i class="bi-folder-fill" />
+                                    {{ folder.name }}
+                                </button>
                                 <button
                                     class="w-7 opacity-30 hover:opacity-100"
                                     @click="
                                         ;(showDeleteModal = true),
-                                            (deleteName = `/${mediaStore.folderTree.source}/${element.name}`.replace(
+                                            (deleteName = `/${mediaStore.folderTree.source}/${folder.name}`.replace(
                                                 /\/[/]+/g,
                                                 '/'
                                             ))
@@ -152,99 +109,159 @@
                                 >
                                     <i class="bi-x-circle-fill" />
                                 </button>
-                            </div>
-                        </li>
-                    </ul>
-                </pane>
-            </splitpanes>
-        </div>
+                            </li>
+                            <li
+                                v-for="(element, index) in mediaStore.folderTree.files"
+                                :id="`file_${index}`"
+                                :key="element.name"
+                                class="grid grid-cols-[auto_166px] px-2"
+                                draggable="true"
+                                @dragstart="handleDragStart($event, element)"
+                            >
+                                <div class="truncate cursor-grab">
+                                    <i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
+                                    <i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
+                                    <i v-else-if="mediaType(element.name) === 'image'" class="bi-file-earmark-image" />
+                                    <i v-else class="bi-file-binary" />
 
-        <div class="flex justify-end py-4 pe-2">
-            <div class="join">
-                <button
-                    class="btn btn-sm btn-primary join-item"
-                    :title="$t('media.create')"
-                    @click="showCreateModal = true"
-                >
-                    <i class="bi-folder-plus" />
-                </button>
-                <button
-                    class="btn btn-sm btn-primary join-item"
-                    :title="$t('media.upload')"
-                    @click="showUploadModal = true"
-                >
-                    <i class="bi-upload" />
-                </button>
+                                    {{ element.name }}
+                                </div>
+                                <div>
+                                    <button
+                                        class="w-7"
+                                        @click=";(showPreviewModal = true), setPreviewData(element.name)"
+                                    >
+                                        <i class="bi-play-fill" />
+                                    </button>
+
+                                    <div class="inline-block w-[82px]">{{ toMin(element.duration) }}</div>
+
+                                    <button
+                                        class="w-7"
+                                        @click="
+                                            ;(showRenameModal = true),
+                                                setRenameValues(
+                                                    `/${mediaStore.folderTree.source}/${element.name}`.replace(
+                                                        /\/[/]+/g,
+                                                        '/'
+                                                    )
+                                                )
+                                        "
+                                    >
+                                        <i class="bi-pencil-square" />
+                                    </button>
+
+                                    <button
+                                        class="w-7 opacity-30 hover:opacity-100"
+                                        @click="
+                                            ;(showDeleteModal = true),
+                                                (deleteName =
+                                                    `/${mediaStore.folderTree.source}/${element.name}`.replace(
+                                                        /\/[/]+/g,
+                                                        '/'
+                                                    ))
+                                        "
+                                    >
+                                        <i class="bi-x-circle-fill" />
+                                    </button>
+                                </div>
+                            </li>
+                        </ul>
+                    </pane>
+                </splitpanes>
             </div>
-        </div>
-    </div>
 
-    <Modal
-        :show="showDeleteModal"
-        :title="$t('media.deleteTitle')"
-        :text="`${$t('media.deleteQuestion')}:<br /><strong>${deleteName}</strong>`"
-        :modal-action="deleteFileOrFolder"
-    />
-
-    <Modal :show="showPreviewModal" :title="`${$t('media.preview')}: ${previewName}`" :modal-action="closePlayer">
-        <div class="w-[1024px] max-w-full aspect-video">
-            <VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
-            <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
-        </div>
-    </Modal>
-
-    <Modal :show="showRenameModal" :title="$t('media.rename')" :modal-action="renameFile">
-        <label class="form-control w-full max-w-md">
-            <div class="label">
-                <span class="label-text">{{ $t('media.newFile') }}</span>
-            </div>
-            <input type="text" class="input input-bordered w-full" v-model="renameNewName" />
-        </label>
-    </Modal>
-
-    <Modal :show="showCreateModal" :title="$t('media.createFolder')" :modal-action="createFolder">
-        <label class="form-control w-full max-w-md">
-            <div class="label">
-                <span class="label-text">{{ $t('media.foldername') }}</span>
-            </div>
-            <input type="text" class="input input-bordered w-full" v-model="folderName.name" />
-        </label>
-    </Modal>
-
-    <Modal :show="showUploadModal" :title="$t('media.upload')" :modal-action="uploadFiles">
-        <div class="w-[700px] max-w-full">
-            <input
-                type="file"
-                class="file-input file-input-bordered w-full"
-                ref="fileInputName"
-                :accept="extensions"
-                v-on:change="onFileChange"
-                multiple
-            />
-
-            <label class="form-control w-full mt-3">
-                <div class="label">
-                    <span class="label-text">{{ $t('media.current') }}:</span>
-                </div>
-                <progress class="progress progress-accent" :value="currentProgress" max="100" />
-            </label>
-
-            <label class="form-control w-full mt-1">
-                <div class="label">
-                    <span class="label-text"
-                        >{{ $t('media.overall') }} ({{ currentNumber }}/{{ inputFiles.length }}):</span
+            <div class="flex justify-end py-4 pe-2">
+                <div class="join">
+                    <button
+                        class="btn btn-sm btn-primary join-item"
+                        :title="$t('media.create')"
+                        @click="showCreateModal = true"
                     >
+                        <i class="bi-folder-plus" />
+                    </button>
+                    <button
+                        class="btn btn-sm btn-primary join-item"
+                        :title="$t('media.upload')"
+                        @click="showUploadModal = true"
+                    >
+                        <i class="bi-upload" />
+                    </button>
                 </div>
-                <progress class="progress progress-accent" :value="overallProgress" max="100" />
-            </label>
-            <label class="form-control w-full mt-1">
-                <div class="label">
-                    <span class="label-text">{{ $t('media.uploading') }}:</span>
-                </div>
-                <input type="text" class="input input-sm input-bordered w-full" v-model="uploadTask" disabled />
-            </label>
+            </div>
         </div>
-    </Modal>
+
+        <GenericModal
+            :show="showDeleteModal"
+            :title="$t('media.deleteTitle')"
+            :text="`${$t('media.deleteQuestion')}:<br /><strong>${deleteName}</strong>`"
+            :modal-action="deleteFileOrFolder"
+        />
+
+        <GenericModal
+            :show="showPreviewModal"
+            :title="`${$t('media.preview')}: ${previewName}`"
+            :modal-action="closePlayer"
+        >
+            <div class="w-[1024px] max-w-full aspect-video">
+                <VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
+                <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" >
+            </div>
+        </GenericModal>
+
+        <GenericModal :show="showRenameModal" :title="$t('media.rename')" :modal-action="renameFile">
+            <label class="form-control w-full max-w-md">
+                <div class="label">
+                    <span class="label-text">{{ $t('media.newFile') }}</span>
+                </div>
+                <input v-model="renameNewName" type="text" class="input input-bordered w-full" >
+            </label>
+        </GenericModal>
+
+        <GenericModal :show="showCreateModal" :title="$t('media.createFolder')" :modal-action="createFolder">
+            <label class="form-control w-full max-w-md">
+                <div class="label">
+                    <span class="label-text">{{ $t('media.foldername') }}</span>
+                </div>
+                <input v-model="folderName.name" type="text" class="input input-bordered w-full" >
+            </label>
+        </GenericModal>
+
+        <GenericModal :show="showUploadModal" :title="$t('media.upload')" :modal-action="uploadFiles">
+            <div class="w-[700px] max-w-full">
+                <input
+                    ref="fileInputName"
+                    type="file"
+                    class="file-input file-input-bordered w-full"
+                    :accept="extensions"
+                    multiple
+                    @change="onFileChange"
+                >
+
+                <label class="form-control w-full mt-3">
+                    <div class="label">
+                        <span class="label-text">{{ $t('media.current') }}:</span>
+                    </div>
+                    <progress class="progress progress-accent" :value="currentProgress" max="100" />
+                </label>
+
+                <label class="form-control w-full mt-1">
+                    <div class="label">
+                        <span class="label-text"
+                            >{{ $t('media.overall') }} ({{ currentNumber }}/{{ inputFiles.length }}):</span
+                        >
+                    </div>
+                    <progress class="progress progress-accent" :value="overallProgress" max="100" />
+                </label>
+                <label class="form-control w-full mt-1">
+                    <div class="label">
+                        <span class="label-text">{{ $t('media.uploading') }}:</span>
+                    </div>
+                    <input v-model="uploadTask" type="text" class="input input-sm input-bordered w-full" disabled >
+                </label>
+            </div>
+        </GenericModal>
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/message.vue b/pages/message.vue
index c629be54..ec4a800c 100644
--- a/pages/message.vue
+++ b/pages/message.vue
@@ -1,219 +1,225 @@
 <template>
-    <div class="flex flex-col items-center pt-10 px-8">
-        <div class="mt-2 w-full max-w-4xl">
-            <div class="flex flex-col xs:flex-row w-full gap-4">
-                <div class="grow xs:max-w-72">
-                    <select
-                        class="select select-sm select-bordered w-full"
-                        v-model="selected"
-                        @change="onChange($event)"
-                    >
-                        <option v-for="item in presets">{{ item.name }}</option>
-                    </select>
+    <div>
+        <div class="flex flex-col items-center pt-10 px-8">
+            <div class="mt-2 w-full max-w-4xl">
+                <div class="flex flex-col xs:flex-row w-full gap-4">
+                    <div class="grow xs:max-w-72">
+                        <select
+                            v-model="selected"
+                            class="select select-sm select-bordered w-full"
+                            @change="onChange($event)"
+                        >
+                            <option v-for="item in presets" :key="item.name">{{ item.name }}</option>
+                        </select>
+                    </div>
+                    <div class="join">
+                        <button
+                            class="btn btn-sm join-item btn-primary"
+                            :title="$t('message.savePreset')"
+                            @click="savePreset()"
+                        >
+                            <i class="bi-cloud-upload" />
+                        </button>
+                        <button
+                            class="btn btn-sm join-item btn-primary"
+                            :title="$t('message.newPreset')"
+                            @click="showCreateModal = true"
+                        >
+                            <i class="bi-file-plus" />
+                        </button>
+                        <button
+                            class="btn btn-sm join-item btn-primary"
+                            :title="$t('message.delPreset')"
+                            @click="showDeleteModal = true"
+                        >
+                            <i class="bi-file-minus" />
+                        </button>
+                    </div>
                 </div>
-                <div class="join">
-                    <button
-                        class="btn btn-sm join-item btn-primary"
-                        :title="$t('message.savePreset')"
-                        @click="savePreset()"
-                    >
-                        <i class="bi-cloud-upload" />
-                    </button>
-                    <button
-                        class="btn btn-sm join-item btn-primary"
-                        :title="$t('message.newPreset')"
-                        @click="showCreateModal = true"
-                    >
-                        <i class="bi-file-plus" />
-                    </button>
-                    <button
-                        class="btn btn-sm join-item btn-primary"
-                        :title="$t('message.delPreset')"
-                        @click="showDeleteModal = true"
-                    >
-                        <i class="bi-file-minus" />
-                    </button>
-                </div>
-            </div>
 
-            <form @submit.prevent="submitMessage" class="my-6 w-full">
-                <textarea
-                    class="textarea textarea-bordered w-full"
-                    v-model="form.text"
-                    rows="4"
-                    :placeholder="$t('message.placeholder')"
-                />
+                <form class="my-6 w-full" @submit.prevent="submitMessage">
+                    <textarea
+                        v-model="form.text"
+                        class="textarea textarea-bordered w-full"
+                        rows="4"
+                        :placeholder="$t('message.placeholder')"
+                    />
 
-                <div class="mt-2 grid xs:grid-cols-[auto_150px_150px] gap-4">
-                    <div class="grow">
-                        <div class="form-control">
-                            <label class="cursor-pointer p-0">
+                    <div class="mt-2 grid xs:grid-cols-[auto_150px_150px] gap-4">
+                        <div class="grow">
+                            <div class="form-control">
+                                <label class="cursor-pointer p-0">
+                                    <div class="label">
+                                        <span class="label-text">{{ $t('message.xAxis') }}</span>
+                                    </div>
+                                    <input
+                                        v-model="form.x"
+                                        class="input input-sm input-bordered w-full"
+                                        type="text"
+                                        placeholder="X"
+                                        required
+                                    >
+                                </label>
+                            </div>
+
+                            <div class="form-control">
+                                <label class="cursor-pointer p-0">
+                                    <div class="label">
+                                        <span class="label-text">{{ $t('message.yAxis') }}</span>
+                                    </div>
+                                    <input
+                                        v-model="form.y"
+                                        class="input input-sm input-bordered w-full"
+                                        type="text"
+                                        placeholder="Y"
+                                        required
+                                    >
+                                </label>
+                            </div>
+                        </div>
+
+                        <div class="xs:mt-10">
+                            <div class="form-control">
+                                <label class="label cursor-pointer p-0">
+                                    <span class="label-text">{{ $t('message.showBox') }}</span>
+                                    <input
+                                        v-model="form.showBox"
+                                        type="checkbox"
+                                        class="checkbox checkbox-xs rounded-sm"
+                                    >
+                                </label>
+                            </div>
+
+                            <label class="mt-2 form-control w-full">
                                 <div class="label">
-                                    <span class="label-text">{{ $t('message.xAxis') }}</span>
+                                    <span class="label-text">{{ $t('message.boxColor') }}</span>
                                 </div>
                                 <input
-                                    class="input input-sm input-bordered w-full"
-                                    v-model="form.x"
-                                    type="text"
-                                    placeholder="X"
+                                    v-model="form.boxColor"
+                                    type="color"
+                                    class="input input-sm input-bordered w-full p-1"
                                     required
-                                />
+                                >
                             </label>
                         </div>
-
-                        <div class="form-control">
-                            <label class="cursor-pointer p-0">
-                                <div class="label">
-                                    <span class="label-text">{{ $t('message.yAxis') }}</span>
-                                </div>
-                                <input
-                                    class="input input-sm input-bordered w-full"
-                                    v-model="form.y"
-                                    type="text"
-                                    placeholder="Y"
-                                    required
-                                />
-                            </label>
-                        </div>
-                    </div>
-
-                    <div class="xs:mt-10">
-                        <div class="form-control">
-                            <label class="label cursor-pointer p-0">
-                                <span class="label-text">{{ $t('message.showBox') }}</span>
-                                <input type="checkbox" v-model="form.showBox" class="checkbox checkbox-xs rounded-sm" />
-                            </label>
-                        </div>
-
-                        <label class="mt-2 form-control w-full">
+                        <label class="form-control w-full xs:mt-[68px]">
                             <div class="label">
-                                <span class="label-text">{{ $t('message.boxColor') }}</span>
-                            </div>
-                            <input
-                                type="color"
-                                class="input input-sm input-bordered w-full p-1"
-                                v-model="form.boxColor"
-                                required
-                            />
-                        </label>
-                    </div>
-                    <label class="form-control w-full xs:mt-[68px]">
-                        <div class="label">
-                            <span class="label-text">{{ $t('message.boxAlpha') }}</span>
-                        </div>
-                        <input
-                            type="number"
-                            min="0"
-                            max="1"
-                            step="0.01"
-                            class="input input-sm input-bordered w-full"
-                            v-model="form.boxAlpha"
-                            required
-                        />
-                    </label>
-                </div>
-                <div class="grid xs:grid-cols-[150px_150px_auto] gap-4 mt-2">
-                    <div>
-                        <label class="form-control w-full">
-                            <div class="label">
-                                <span class="label-text">{{ $t('message.size') }}</span>
+                                <span class="label-text">{{ $t('message.boxAlpha') }}</span>
                             </div>
                             <input
+                                v-model="form.boxAlpha"
                                 type="number"
-                                class="input input-sm input-bordered w-full"
-                                v-model="form.fontSize"
-                                required
-                            />
-                        </label>
-
-                        <label class="form-control w-full mt-2">
-                            <div class="label">
-                                <span class="label-text">{{ $t('message.fontColor') }}</span>
-                            </div>
-                            <input
-                                type="color"
-                                class="input input-sm input-bordered w-full p-1"
-                                v-model="form.fontColor"
-                                required
-                            />
-                        </label>
-                    </div>
-                    <div>
-                        <label class="form-control w-full">
-                            <div class="label">
-                                <span class="label-text">{{ $t('message.spacing') }}</span>
-                            </div>
-                            <input
-                                type="number"
-                                class="input input-sm input-bordered w-full"
-                                v-model="form.fontSpacing"
-                                required
-                            />
-                        </label>
-                        <label class="form-control w-full mt-2">
-                            <div class="label">
-                                <span class="label-text">{{ $t('message.fontAlpha') }}</span>
-                            </div>
-                            <input
-                                type="number"
-                                class="input input-sm input-bordered w-full"
-                                v-model="form.fontAlpha"
                                 min="0"
                                 max="1"
                                 step="0.01"
+                                class="input input-sm input-bordered w-full"
                                 required
-                            />
+                            >
                         </label>
                     </div>
+                    <div class="grid xs:grid-cols-[150px_150px_auto] gap-4 mt-2">
+                        <div>
+                            <label class="form-control w-full">
+                                <div class="label">
+                                    <span class="label-text">{{ $t('message.size') }}</span>
+                                </div>
+                                <input
+                                    v-model="form.fontSize"
+                                    type="number"
+                                    class="input input-sm input-bordered w-full"
+                                    required
+                                >
+                            </label>
 
-                    <div class="grow">
-                        <label class="form-control w-full">
-                            <div class="label">
-                                <span class="label-text">{{ $t('message.overallAlpha') }}</span>
-                            </div>
-                            <input
-                                type="text"
-                                class="input input-sm input-bordered w-full"
-                                v-model="form.overallAlpha"
-                                required
-                            />
-                        </label>
-                        <label class="form-control w-full xs:max-w-[150px] mt-2">
-                            <div class="label">
-                                <span class="label-text">{{ $t('message.borderWidth') }}</span>
-                            </div>
-                            <input
-                                type="number"
-                                class="input input-sm input-bordered w-full"
-                                v-model="form.border"
-                                required
-                            />
-                        </label>
+                            <label class="form-control w-full mt-2">
+                                <div class="label">
+                                    <span class="label-text">{{ $t('message.fontColor') }}</span>
+                                </div>
+                                <input
+                                    v-model="form.fontColor"
+                                    type="color"
+                                    class="input input-sm input-bordered w-full p-1"
+                                    required
+                                >
+                            </label>
+                        </div>
+                        <div>
+                            <label class="form-control w-full">
+                                <div class="label">
+                                    <span class="label-text">{{ $t('message.spacing') }}</span>
+                                </div>
+                                <input
+                                    v-model="form.fontSpacing"
+                                    type="number"
+                                    class="input input-sm input-bordered w-full"
+                                    required
+                                >
+                            </label>
+                            <label class="form-control w-full mt-2">
+                                <div class="label">
+                                    <span class="label-text">{{ $t('message.fontAlpha') }}</span>
+                                </div>
+                                <input
+                                    v-model="form.fontAlpha"
+                                    type="number"
+                                    class="input input-sm input-bordered w-full"
+                                    min="0"
+                                    max="1"
+                                    step="0.01"
+                                    required
+                                >
+                            </label>
+                        </div>
+
+                        <div class="grow">
+                            <label class="form-control w-full">
+                                <div class="label">
+                                    <span class="label-text">{{ $t('message.overallAlpha') }}</span>
+                                </div>
+                                <input
+                                    v-model="form.overallAlpha"
+                                    type="text"
+                                    class="input input-sm input-bordered w-full"
+                                    required
+                                >
+                            </label>
+                            <label class="form-control w-full xs:max-w-[150px] mt-2">
+                                <div class="label">
+                                    <span class="label-text">{{ $t('message.borderWidth') }}</span>
+                                </div>
+                                <input
+                                    v-model="form.border"
+                                    type="number"
+                                    class="input input-sm input-bordered w-full"
+                                    required
+                                >
+                            </label>
+                        </div>
                     </div>
-                </div>
 
-                <div class="mt-5">
-                    <button class="btn btn-primary send-btn" type="submit">{{ $t('message.send') }}</button>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <Modal :show="showCreateModal" :title="$t('message.newPreset')" :modalAction="createNewPreset">
-        <label class="form-control w-full">
-            <div class="label">
-                <span class="label-text">{{ $t('message.name') }}</span>
+                    <div class="mt-5">
+                        <button class="btn btn-primary send-btn" type="submit">{{ $t('message.send') }}</button>
+                    </div>
+                </form>
             </div>
-            <input type="text" class="input input-bordered w-full" v-model="newPresetName" />
-        </label>
-    </Modal>
+        </div>
 
-    <Modal
-        :show="showDeleteModal"
-        :title="$t('message.delPreset')"
-        :text="`${$t('message.delText')}: <strong> ${selected}</strong>?`"
-        :modalAction="deletePreset"
-    />
+        <GenericModal :show="showCreateModal" :title="$t('message.newPreset')" :modal-action="createNewPreset">
+            <label class="form-control w-full">
+                <div class="label">
+                    <span class="label-text">{{ $t('message.name') }}</span>
+                </div>
+                <input v-model="newPresetName" type="text" class="input input-bordered w-full" >
+            </label>
+        </GenericModal>
+
+        <GenericModal
+            :show="showDeleteModal"
+            :title="$t('message.delPreset')"
+            :text="`${$t('message.delText')}: <strong> ${selected}</strong>?`"
+            :modal-action="deletePreset"
+        />
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/player.vue b/pages/player.vue
index 58688fdd..d0e88392 100644
--- a/pages/player.vue
+++ b/pages/player.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="h-full">
-        <Control />
+        <PlayerControl />
         <div class="flex justify-end p-1">
             <div>
                 <VueDatePicker
@@ -91,7 +91,7 @@
             </button>
         </div>
 
-        <Modal
+        <GenericModal
             :show="showPreviewModal"
             :title="`Preview: ${previewName}`"
             :hide-buttons="true"
@@ -99,24 +99,24 @@
         >
             <div class="w-[1024px] max-w-full aspect-video">
                 <VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
-                <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
+                <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" >
             </div>
-        </Modal>
+        </GenericModal>
 
-        <Modal :show="showSourceModal" title="Add/Edit Source" :modal-action="processSource">
+        <GenericModal :show="showSourceModal" title="Add/Edit Source" :modal-action="processSource">
             <div>
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">In</span>
                     </div>
-                    <input type="number" class="input input-sm input-bordered w-full" v-model.number="newSource.in" />
+                    <input v-model.number="newSource.in" type="number" class="input input-sm input-bordered w-full" >
                 </label>
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">Out</span>
                     </div>
-                    <input type="number" class="input input-sm input-bordered w-full" v-model.number="newSource.out" />
+                    <input v-model.number="newSource.out" type="number" class="input input-sm input-bordered w-full" >
                 </label>
 
                 <label class="form-control w-full mt-3">
@@ -124,60 +124,60 @@
                         <span class="label-text">Duration</span>
                     </div>
                     <input
+                        v-model.number="newSource.duration"
                         type="number"
                         class="input input-sm input-bordered w-full"
-                        v-model.number="newSource.duration"
-                    />
+                    >
                 </label>
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">Source</span>
                     </div>
-                    <input type="text" class="input input-sm input-bordered w-full" v-model="newSource.source" />
+                    <input v-model="newSource.source" type="text" class="input input-sm input-bordered w-full" >
                 </label>
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">Audio</span>
                     </div>
-                    <input type="text" class="input input-sm input-bordered w-full" v-model="newSource.audio" />
+                    <input v-model="newSource.audio" type="text" class="input input-sm input-bordered w-full" >
                 </label>
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">Custom Filter</span>
                     </div>
-                    <input type="text" class="input input-sm input-bordered w-full" v-model="newSource.custom_filter" />
+                    <input v-model="newSource.custom_filter" type="text" class="input input-sm input-bordered w-full" >
                 </label>
 
                 <div class="form-control">
                     <label class="cursor-pointer label">
                         <span class="label-text">Advertisement</span>
-                        <input type="checkbox" class="checkbox checkbox-sm" @click="isAd" />
+                        <input type="checkbox" class="checkbox checkbox-sm" @click="isAd" >
                     </label>
                 </div>
             </div>
-        </Modal>
+        </GenericModal>
 
-        <Modal :show="showImportModal" title="Import Playlist" :modal-action="importPlaylist">
+        <GenericModal :show="showImportModal" title="Import Playlist" :modal-action="importPlaylist">
             <input
                 type="file"
                 class="file-input file-input-sm file-input-bordered w-full"
-                v-on:change="onFileChange"
                 multiple
-            />
-        </Modal>
+                @change="onFileChange"
+            >
+        </GenericModal>
 
-        <Modal :show="showCopyModal" :title="`Copy Program ${listDate}`" :modal-action="savePlaylist">
-            <input type="date" class="input input-sm input-bordered w-full" v-model="targetDate" />
-        </Modal>
+        <GenericModal :show="showCopyModal" :title="`Copy Program ${listDate}`" :modal-action="savePlaylist">
+            <input v-model="targetDate" type="date" class="input input-sm input-bordered w-full" >
+        </GenericModal>
 
-        <Modal :show="showDeleteModal" title="Delete Program" :modal-action="deletePlaylist">
+        <GenericModal :show="showDeleteModal" title="Delete Program" :modal-action="deletePlaylist">
             <span>
                 Delete program from <strong>{{ listDate }}</strong>
             </span>
-        </Modal>
+        </GenericModal>
 
         <PlaylistGenerator v-if="showPlaylistGenerator" :close="closeGenerator" />
     </div>
diff --git a/plugins/lodash.client.ts b/plugins/lodash.client.ts
index 4d2c3ba0..28a17cbf 100644
--- a/plugins/lodash.client.ts
+++ b/plugins/lodash.client.ts
@@ -1,5 +1,5 @@
 import lodash from 'lodash'
-import { LoDashStatic } from 'lodash'
+import type { LoDashStatic } from 'lodash'
 
 declare module '#app' {
 	interface NuxtApp {
diff --git a/stores/playlist.ts b/stores/playlist.ts
index 017e65f5..4e45ce16 100644
--- a/stores/playlist.ts
+++ b/stores/playlist.ts
@@ -7,7 +7,7 @@ import { defineStore } from 'pinia'
 dayjs.extend(utc)
 dayjs.extend(timezone)
 
-const { timeToSeconds } = stringFormatter()
+// const { timeToSeconds } = stringFormatter()
 const { processPlaylist } = playlistOperations()
 
 export const usePlaylist = defineStore('playlist', {
@@ -36,13 +36,13 @@ export const usePlaylist = defineStore('playlist', {
             const indexStore = useIndex()
             let statusCode = 0
 
-            const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
+            // const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
             const channel = configStore.configGui[configStore.configID].id
-            let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
+            // let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
 
-            if (configStore.startInSec > timeInSec) {
-                dateToday = dayjs(dateToday).utcOffset(configStore.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
-            }
+            // if (configStore.startInSec > timeInSec) {
+            //     dateToday = dayjs(dateToday).utcOffset(configStore.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
+            // }
 
             await fetch(`/api/playlist/${channel}?date=${date}`, {
                 method: 'GET',
diff --git a/types/index.d.ts b/types/index.d.ts
index ca6f42ff..50105d60 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -28,12 +28,12 @@ declare global {
     }
 
     interface User {
-        username: String
-        mail?: String
-        password?: String
-        confirm?: String
-        admin?: Boolean
-        role_id?: Number
+        username: string
+        mail?: string
+        password?: string
+        confirm?: string
+        admin?: boolean
+        role_id?: number
     }
 
     interface Crumb {
@@ -109,9 +109,9 @@ declare global {
         cpu: { cores: number; usage: number }
         load: { one: number; five: number; fifteen: number }
         memory: { total: number; used: number; free: number }
-        network?: { name: String; current_in: number; current_out: number; total_in: number; total_out: number }
-        storage?: { path: String; total: number; used: number }
+        network?: { name: string; current_in: number; current_out: number; total_in: number; total_out: number }
+        storage?: { path: string; total: number; used: number }
         swap: { total: number; used: number; free: number }
-        system: { name?: String; kernel?: String; version?: String, ffp_version?: string }
+        system: { name?: string; kernel?: string; version?: string, ffp_version?: string }
     }
 }