From b6b532033f1907e8ea29116e1f9365563a3b9730 Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Thu, 18 Apr 2024 11:49:39 +0200
Subject: [PATCH] rename lang routes, add zebra to media browser, fix width

---
 components/MediaBrowser.vue  |  92 +++++------
 components/PlaylistTable.vue |  21 +++
 nuxt.config.ts               |  12 +-
 pages/logging.vue            |   2 +-
 pages/media.vue              | 294 ++++++++++++++++++++---------------
 pages/player.vue             |  20 ---
 6 files changed, 242 insertions(+), 199 deletions(-)

diff --git a/components/MediaBrowser.vue b/components/MediaBrowser.vue
index 1bbc033f..1b4ae1f5 100644
--- a/components/MediaBrowser.vue
+++ b/components/MediaBrowser.vue
@@ -4,69 +4,73 @@
     </div>
     <div class="bg-base-100 border-b border-my-gray">
         <div v-if="mediaStore.folderTree.parent && mediaStore.crumbs">
-            <nav class="breadcrumbs px-3">
+            <nav class="breadcrumbs px-2">
                 <ul>
                     <li v-for="(crumb, index) in mediaStore.crumbs" :key="index">
                         <button
                             v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
+                            class="flex items-center"
                             @click="mediaStore.getTree(crumb.path)"
                         >
                             <i class="bi-folder-fill me-1" />
-                            {{ crumb.text }}
+                            <span class="text-xs font-bold text-base-content/60 leading-tight">{{ crumb.text }}</span>
                         </button>
-                        <span v-else><i class="bi-folder-fill me-1" />{{ crumb.text }}</span>
+                        <div v-else class="flex items-center">
+                            <i class="bi-folder-fill me-1" />
+                            <span class="text-xs font-bold text-base-content/60">{{ crumb.text }}</span>
+                        </div>
                     </li>
                 </ul>
             </nav>
         </div>
     </div>
 
-    <div class="w-full h-[calc(100%-48px)] overflow-auto m-1">
-        <div v-for="folder in mediaStore.folderTree.folders" :key="folder.uid" class="flex px-1">
+    <div class="w-full h-[calc(100%-40px)] overflow-auto">
+        <div
+            v-for="folder in mediaStore.folderTree.folders"
+            :key="folder.uid"
+            class="flex px-2 py-[2px] bg-base-200"
+        >
             <button class="truncate" @click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)">
                 <i class="bi-folder-fill" />
                 {{ folder.name }}
             </button>
         </div>
-        <Sortable
-            :list="mediaStore.folderTree.files"
-            :options="browserSortOptions"
-            item-key="name"
-            tag="table"
-            class="w-full table table-fixed"
-        >
-            <template #item="{ element, index }">
-                <tr
-                    :id="`file-${index}`"
-                    :key="element.name"
-                    class="w-full"
-                    :class="{ 'grabbing cursor-grab': width > 768 }"
-                >
-                    <td class="ps-1 py-1 w-[20px]">
-                        <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" />
-                    </td>
-                    <td class="px-[1px] py-1 truncate">
-                        {{ element.name }}
-                    </td>
-                    <td class="px-1 py-1 w-[30px] text-center leading-3">
-                        <button @click="preview(element.name)">
-                            <i class="bi-play-fill" />
-                        </button>
-                    </td>
-                    <td class="px-0 py-1 w-[65px] text-nowrap">
-                        {{ secToHMS(element.duration) }}
-                    </td>
-                    <td class="py-1 hidden">00:00:00</td>
-                    <td class="py-1 hidden">{{ secToHMS(element.duration) }}</td>
-                    <td class="py-1 hidden">&nbsp;</td>
-                    <td class="py-1 hidden">&nbsp;</td>
-                    <td class="py-1 hidden">&nbsp;</td>
-                </tr>
-            </template>
-        </Sortable>
+        <table class="w-full table table-zebra table-fixed">
+            <Sortable :list="mediaStore.folderTree.files" :options="browserSortOptions" item-key="name" tag="tbody">
+                <template #item="{ element, index }">
+                    <tr
+                        :id="`file-${index}`"
+                        :key="element.name"
+                        class="w-full border-b border-t border-base-content/20"
+                        :class="{ 'grabbing cursor-grab': width > 768 }"
+                    >
+                        <td class="ps-2 py-1 w-[20px]">
+                            <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" />
+                        </td>
+                        <td class="px-[1px] py-1 truncate">
+                            {{ element.name }}
+                        </td>
+                        <td class="px-1 py-1 w-[30px] text-center leading-3">
+                            <button @click="preview(element.name)">
+                                <i class="bi-play-fill" />
+                            </button>
+                        </td>
+                        <td class="px-0 py-1 w-[65px] text-nowrap">
+                            {{ secToHMS(element.duration) }}
+                        </td>
+                        <td class="py-1 hidden">00:00:00</td>
+                        <td class="py-1 hidden">{{ secToHMS(element.duration) }}</td>
+                        <td class="py-1 hidden">&nbsp;</td>
+                        <td class="py-1 hidden">&nbsp;</td>
+                        <td class="py-1 hidden">&nbsp;</td>
+                    </tr>
+                </template>
+            </Sortable>
+        </table>
     </div>
 </template>
 <script setup lang="ts">
diff --git a/components/PlaylistTable.vue b/components/PlaylistTable.vue
index be718f1a..b9802b6c 100644
--- a/components/PlaylistTable.vue
+++ b/components/PlaylistTable.vue
@@ -230,3 +230,24 @@ function deletePlaylistItem(index: number) {
     playlistStore.playlist.splice(index, 1)
 }
 </script>
+<style>
+/*
+    format dragging element
+*/
+#playlist-container .sortable-ghost {
+    background-color: #701a754b !important;
+    min-height: 37px !important;
+    height: 37px !important;
+}
+
+#playlist-container .sortable-ghost td {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+#playlist-container .sortable-ghost td:nth-last-child(-n + 5) {
+    display: table-cell !important;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 91edd1f5..a3f30e68 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -81,7 +81,7 @@ export default defineNuxtConfig({
             },
             {
                 code: 'pt-br',
-                name: 'Português BR',
+                name: 'Português (BR)',
                 file: 'pt-BR.js',
             },
         ],
@@ -90,27 +90,27 @@ export default defineNuxtConfig({
             player: {
                 de: '/wiedergabe',
                 en: '/player',
-                pt: '/playout',
+                'pt-br': '/playout',
             },
             media: {
                 de: '/medien',
                 en: '/media',
-                pt: '/mídias',
+                'pt-br': '/mídias',
             },
             message: {
                 de: '/nachrichten',
                 en: '/message',
-                pt: '/mensagens',
+                'pt-br': '/mensagens',
             },
             logging: {
                 de: '/protokollierung',
                 en: '/logging',
-                pt: '/registros',
+                'pt-br': '/registros',
             },
             configure: {
                 de: '/einstellungen',
                 en: '/configure',
-                pt: '/configuração',
+                'pt-br': '/configuração',
             },
         },
         detectBrowserLanguage: {
diff --git a/pages/logging.vue b/pages/logging.vue
index ba8168d3..a20fae42 100644
--- a/pages/logging.vue
+++ b/pages/logging.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="w-full flex flex-col">
         <div class="flex justify-end p-3 h-14">
             <div>
                 <VueDatePicker
diff --git a/pages/media.vue b/pages/media.vue
index 6c480667..b39df865 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -26,147 +26,184 @@
                 <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">
+                <splitpanes :horizontal="horizontal" class="h-full border border-my-gray rounded shadow">
                     <pane
                         min-size="14"
                         max-size="80"
                         size="20"
-                        class="h-full pb-1 !bg-base-300"
+                        class="h-full 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"
-                                >
-                                    <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>
+                        <div class="relative h-full overflow-y-auto">
+                            <table
+                                v-if="mediaStore.folderTree.parent"
+                                class="table table-zebra table-fixed"
+                                @dragover.prevent
+                            >
+                                <tbody>
+                                    <template v-if="mediaStore.folderTree.parent_folders.length > 0">
+                                        <tr
+                                            v-for="folder in mediaStore.folderTree.parent_folders"
+                                            :key="folder.uid"
+                                            class="grid grid-cols-[auto_30px] border-b border-base-content/20"
+                                            :class="
+                                                filename(mediaStore.folderTree.source) === folder.name &&
+                                                'bg-base-300 rounded'
+                                            "
+                                            @drop="handleDrop($event, folder, true)"
+                                            @dragover="handleDragOver"
+                                            @dragleave="handleDragLeave"
+                                        >
+                                            <td class="px-2 py-1.5 truncate">
+                                                <span
+                                                    class="cursor-pointer"
+                                                    @click="
+                                                        mediaStore.getTree(
+                                                            `/${parent(mediaStore.folderTree.source)}/${folder.name}`
+                                                        )
+                                                    "
+                                                >
+                                                    <i class="bi-folder-fill" />
+                                                    {{ folder.name }}
+                                                </span>
+                                            </td>
 
-                            <li v-else class="px-2">
-                                <div class="truncate text-left">
-                                    <i class="bi-folder-fill" />
-                                    {{ mediaStore.folderTree.parent }}
-                                </div>
-                            </li>
-                        </ul>
+                                            <td class="px-2 py-1.5 text-center">
+                                                <button
+                                                    class="opacity-30 hover:opacity-100"
+                                                    @click="
+                                                        ;(showDeleteModal = true),
+                                                            (deleteName = `/${parent(mediaStore.folderTree.source)}/${
+                                                                folder.name
+                                                            }`.replace(/\/[/]+/g, '/'))
+                                                    "
+                                                >
+                                                    <i class="bi-x-circle-fill" />
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    </template>
+
+                                    <tr v-else>
+                                        <td class="px-2 py-1.5 border-b border-base-content/20">
+                                            <i class="bi-folder-fill" />
+                                            {{ mediaStore.folderTree.parent }}
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </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"
+                    <pane class="h-full !bg-base-300" :class="horizontal ? 'rounded-b' : 'rounded-e'">
+                        <div class="relative h-full overflow-y-auto">
+                            <table
+                                v-if="mediaStore.folderTree.parent"
+                                class="table table-zebra table-fixed"
+                                @dragover.prevent
                             >
-                                <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}`"
-                                :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" />
-
-                                    {{ element.name }}
-                                </div>
-                                <div>
-                                    <button
-                                        class="w-7"
-                                        @click=";(showPreviewModal = true), setPreviewData(element.name)"
+                                <tbody>
+                                    <tr
+                                        v-for="folder in mediaStore.folderTree.folders"
+                                        :key="folder.uid"
+                                        class="grid grid-cols-[auto_170px] border-b border-base-content/20"
+                                        @drop="handleDrop($event, folder, false)"
+                                        @dragover="handleDragOver"
+                                        @dragleave="handleDragLeave"
                                     >
-                                        <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,
-                                                        '/'
+                                        <td class="px-2 py-1.5">
+                                            <button
+                                                class="truncate"
+                                                @click="
+                                                    mediaStore.getTree(
+                                                        `/${mediaStore.folderTree.source}/${folder.name}`
                                                     )
-                                                )
-                                        "
+                                                "
+                                            >
+                                                <i class="bi-folder-fill" />
+                                                {{ folder.name }}
+                                            </button>
+                                        </td>
+                                        <td class="ps-2 pe-[14px] py-1.5 text-right">
+                                            <button
+                                                class="opacity-30 hover:opacity-100"
+                                                @click="
+                                                    ;(showDeleteModal = true),
+                                                        (deleteName =
+                                                            `/${mediaStore.folderTree.source}/${folder.name}`.replace(
+                                                                /\/[/]+/g,
+                                                                '/'
+                                                            ))
+                                                "
+                                            >
+                                                <i class="bi-x-circle-fill" />
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <tr
+                                        v-for="(element, index) in mediaStore.folderTree.files"
+                                        :id="`file_${index}`"
+                                        :key="element.name"
+                                        class="grid grid-cols-[auto_170px] border-b border-base-content/20"
+                                        draggable="true"
+                                        @dragstart="handleDragStart($event, element)"
                                     >
-                                        <i class="bi-pencil-square" />
-                                    </button>
+                                        <td class="px-2 py-1.5 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" />
 
-                                    <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>
+                                            {{ element.name }}
+                                        </td>
+                                        <td class="px-2 py-1.5 flex">
+                                            <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>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </pane>
                 </splitpanes>
             </div>
@@ -202,6 +239,7 @@
             :show="showPreviewModal"
             :title="`${$t('media.preview')}: ${previewName}`"
             :modal-action="closePlayer"
+            :hide-buttons="true"
         >
             <div class="w-[1024px] max-w-full aspect-video">
                 <VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
diff --git a/pages/player.vue b/pages/player.vue
index 45fc13d4..c8e1665e 100644
--- a/pages/player.vue
+++ b/pages/player.vue
@@ -489,24 +489,4 @@ async function deletePlaylist(del: boolean) {
     }
 }
 </script>
-<style>
-/*
-    format dragging element
-*/
-#playlist-container .sortable-ghost {
-    background-color: #701a754b !important;
-    min-height: 37px !important;
-    height: 37px !important;
-}
 
-#playlist-container .sortable-ghost td {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
-#playlist-container .sortable-ghost td:nth-last-child(-n + 5) {
-    display: table-cell !important;
-}
-</style>