djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test table

Browse Source
This commit is contained in:
jb-alvarado 2024-04-14 21:52:31 +02:00
parent 044fab637b
commit 552bc2a4bf
2 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
pages/player.vue
View File

@ -95,42 +95,40 @@
</ul> </ul>
</pane> </pane>
<pane> <pane>
<div class="relative w-full h-full !bg-base-300 rounded-e"> <div class="relative w-full h-full !bg-base-300 rounded-e overflow-auto">
<div <div
v-if="playlistStore.isLoading" v-if="playlistStore.isLoading"
class="w-full h-full absolute z-10 flex justify-center bg-base-100/70" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
> >
<span class="loading loading-spinner loading-lg" /> <span class="loading loading-spinner loading-lg" />
</div> </div>
<div <table class="table table-zebra">
class="grid grid-cols-[70px_auto_75px_70px_70px] md:grid-cols-[70px_auto_75px_70px_70px_70px_70px_80px_60px] bg-base-100 rounded-tr-lg py-2 px-3 border-b border-my-gray" <thead>
> <tr class="bg-base-100 rounded-tr-lg border-b border-my-gray">
<div>{{ $t('player.start') }}</div> <th class="text-left">{{ $t('player.start') }}</th>
<div>{{ $t('player.file') }}</div> <th class="text-left w-full">{{ $t('player.file') }}</th>
<div class="text-center">{{ $t('player.play') }}</div> <th class="text-center">{{ $t('player.play') }}</th>
<div class="">{{ $t('player.duration') }}</div> <th class="text-left">{{ $t('player.duration') }}</th>
<div class="hidden md:flex">{{ $t('player.in') }}</div> <th class="text-left hidden md:table-cell">{{ $t('player.in') }}</th>
<div class="hidden md:flex">{{ $t('player.out') }}</div> <th class="text-left hidden md:table-cell">{{ $t('player.out') }}</th>
<div class="hidden md:flex justify-center">{{ $t('player.ad') }}</div> <th class="text-left hidden md:table-cell justify-center">{{ $t('player.ad') }}</th>
<div class="text-center">{{ $t('player.edit') }}</div> <th class="text-center">{{ $t('player.edit') }}</th>
<div class="hidden md:flex justify-center">{{ $t('player.delete') }}</div> <th class="text-center hidden md:table-cell justify-center">{{ $t('player.delete') }}</th>
</div> </tr>
<div id="scroll-container" class="h-[calc(100%-44px)] overflow-auto"> </thead>
<Sortable <Sortable
:list="playlistStore.playlist" :list="playlistStore.playlist"
item-key="uid" item-key="uid"
:style="`height: ${ id="scroll-container"
playlistStore.playlist ? playlistStore.playlist.length * 38 + 38 : 300 tag="tbody"
}px`"
tag="ul"
:options="playlistSortOptions" :options="playlistSortOptions"
@add="cloneClip" @add="cloneClip"
@end="moveItemInArray" @end="moveItemInArray"
> >
<template #item="{ element, index }"> <template #item="{ element, index }">
<li <tr
:id="`clip_${index}`" :id="`clip_${index}`"
class="draggable grid grid-cols-[70px_auto_75px_70px_70px] md:grid-cols-[70px_auto_75px_70px_70px_70px_70px_80px_60px] h-[38px] px-3 py-[8px]" class="draggable"
:class=" :class="
index === playlistStore.currentClipIndex && listDate === todayDate index === playlistStore.currentClipIndex && listDate === todayDate
? 'bg-lime-500/30' ? 'bg-lime-500/30'
@ -138,19 +136,19 @@
" "
:key="element.uid" :key="element.uid"
> >
<div>{{ secondsToTime(element.begin) }}</div> <td class="text-left ps-4">{{ secondsToTime(element.begin) }}</td>
<div class="truncate" :class="{ 'grabbing cursor-grab': width > 768 }"> <td class="text-left truncate w-full" :class="{ 'grabbing cursor-grab': width > 768 }">
{{ filename(element.source) }} {{ filename(element.source) }}
</div> </td>
<div class="text-center"> <td class="text-center">
<button @click=";(showPreviewModal = true), setPreviewData(element.source)"> <button @click=";(showPreviewModal = true), setPreviewData(element.source)">
<i class="bi-play-fill" /> <i class="bi-play-fill" />
</button> </button>
</div> </td>
<div>{{ secToHMS(element.duration) }}</div> <td class="text-center">{{ secToHMS(element.duration) }}</td>
<div class="hidden md:flex">{{ secToHMS(element.in) }}</div> <td class="text-left hidden md:table-cell">{{ secToHMS(element.in) }}</td>
<div class="hidden md:flex">{{ secToHMS(element.out) }}</div> <td class="text-left hidden md:table-cell">{{ secToHMS(element.out) }}</td>
<div class="hidden md:flex justify-center pt-[3px]"> <td class="text-center hidden md:table-cell leading-3">
<input <input
class="checkbox checkbox-xs rounded" class="checkbox checkbox-xs rounded"
type="checkbox" type="checkbox"
@ -161,23 +159,23 @@
" "
@change="setCategory($event, element)" @change="setCategory($event, element)"
/> />
</div> </td>
<div class="text-center"> <td class="text-center">
<button @click=";(showSourceModal = true), editPlaylistItem(index)"> <button @click=";(showSourceModal = true), editPlaylistItem(index)">
<i class="bi-pencil-square" /> <i class="bi-pencil-square" />
</button> </button>
</div> </td>
<div <td
class="text-center hidden md:flex justify-center hover:text-base-content/70" class="text-center hidden md:table-cell justify-center hover:text-base-content/70"
> >
<button @click="deletePlaylistItem(index)"> <button @click="deletePlaylistItem(index)">
<i class="bi-x-circle-fill" /> <i class="bi-x-circle-fill" />
</button> </button>
</div> </td>
</li> </tr>
</template> </template>
</Sortable> </Sortable>
</div> </table>
</div> </div>
</pane> </pane>
</splitpanes> </splitpanes>
@ -226,7 +224,11 @@
> >
<i class="bi-download" /> <i class="bi-download" />
</button> </button>
<button class="btn btn-sm btn-primary join-item" :title="$t('player.deletePlaylist')" @click="showDeleteModal = true"> <button
class="btn btn-sm btn-primary join-item"
:title="$t('player.deletePlaylist')"
@click="showDeleteModal = true"
>
<i class="bi-trash" /> <i class="bi-trash" />
</button> </button>
</div> </div>

4
stores/media.ts
View File

@ -10,6 +10,7 @@ export const useMedia = defineStore('media', {
folderList: {} as FolderObject, folderList: {} as FolderObject,
folderCrumbs: [] as Crumb[], folderCrumbs: [] as Crumb[],
isLoading: false, isLoading: false,
notExist: useNuxtApp().$i18n.t('media.notExists'),
}), }),
getters: {}, getters: {},
@ -19,7 +20,6 @@ export const useMedia = defineStore('media', {
this.isLoading = true this.isLoading = true
} }
const { t } = useI18n()
const authStore = useAuth() const authStore = useAuth()
const configStore = useConfig() const configStore = useConfig()
const indexStore = useIndex() const indexStore = useIndex()
@ -37,7 +37,7 @@ export const useMedia = defineStore('media', {
if (response.status === 200) { if (response.status === 200) {
return response.json() return response.json()
} else { } else {
indexStore.msgAlert('error', t('media.notExists'), 3) indexStore.msgAlert('error', this.notExist, 3)
return { return {
source: '', source: '',