rename lang routes, add zebra to media browser, fix width
This commit is contained in:
jb-alvarado
parent
72d878d890
commit
b6b532033f
@ -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"> </td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
<td class="py-1 hidden"> </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"> </td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
</tr>
|
||||
</template>
|
||||
</Sortable>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="flex justify-end p-3 h-14">
|
||||
<div>
|
||||
<VueDatePicker
|
||||
|
||||
294
pages/media.vue
294
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" />
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user