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

center player, hide columns on small screens, highlight selected folder

Browse Source
This commit is contained in:
jb-alvarado 2024-05-05 20:47:43 +02:00
parent 05d0ada8e1
commit c9166d6413
3 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/PlayerControl.vue
View File

@ -2,8 +2,8 @@
<div class="w-full"> <div class="w-full">
<div class="grid grid-cols-1 md:grid-cols-[auto_512px] xl:grid-cols-[512px_auto_450px]"> <div class="grid grid-cols-1 md:grid-cols-[auto_512px] xl:grid-cols-[512px_auto_450px]">
<div class="order-1 p-1"> <div class="order-1 p-1">
<div class="bg-base-100 w-full h-full rounded shadow"> <div class="bg-base-100 w-full h-full rounded shadow flex items-center p-2">
<div class="w-full h-full p-2"> <div class="w-full aspect-video">
<video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls /> <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
<VideoPlayer <VideoPlayer
v-else-if="configStore.configGui[configStore.configID]" v-else-if="configStore.configGui[configStore.configID]"
@ -58,7 +58,11 @@
class="h-1/3 font-bold text truncate" class="h-1/3 font-bold text truncate"
:title="playlistStore.currentClipTitle || filename(playlistStore.currentClip)" :title="playlistStore.currentClipTitle || filename(playlistStore.currentClip)"
> >
{{ playlistStore.currentClipTitle || filename(playlistStore.currentClip) || $t('control.noClip') }} {{
playlistStore.currentClipTitle ||
filename(playlistStore.currentClip) ||
$t('control.noClip')
}}
</div> </div>
<div class="grow"> <div class="grow">
<strong>{{ $t('player.duration') }}:</strong> <strong>{{ $t('player.duration') }}:</strong>

28
components/PlaylistTable.vue
View File

@ -20,7 +20,7 @@
{{ $t('player.file') }} {{ $t('player.file') }}
</div> </div>
</th> </th>
<th class="w-[90px] p-0 text-center"> <th class="w-[85px] p-0 text-center">
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]"> <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
{{ $t('player.play') }} {{ $t('player.play') }}
</div> </div>
@ -45,7 +45,7 @@
{{ $t('player.ad') }} {{ $t('player.ad') }}
</div> </div>
</th> </th>
<th class="w-[95px] p-0 text-center"> <th class="w-[85px] p-0 text-center">
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]"> <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
{{ $t('player.edit') }} {{ $t('player.edit') }}
</div> </div>
@ -76,9 +76,7 @@
class="draggable border-t border-b border-base-content/20 duration-1000 transition-all" class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
:class="{ :class="{
'!bg-lime-500/30': '!bg-lime-500/30':
playlistStore.playoutIsRunning && playlistStore.playoutIsRunning && listDate === todayDate && index === currentClipIndex,
listDate === todayDate &&
index === currentClipIndex,
'!bg-amber-600/40': element.overtime, '!bg-amber-600/40': element.overtime,
}" }"
> >
@ -185,7 +183,7 @@ function scrollTo(index: number) {
function classSwitcher() { function classSwitcher() {
if (playlistStore.playlist.length === 0) { if (playlistStore.playlist.length === 0) {
sortContainer.value.sortable.el.classList.add('is-empty') sortContainer.value?.sortable.el.classList.add('is-empty')
} else { } else {
const lastItem = playlistStore.playlist[playlistStore.playlist.length - 1] const lastItem = playlistStore.playlist[playlistStore.playlist.length - 1]
@ -193,11 +191,11 @@ function classSwitcher() {
configStore.playout.playlist.startInSec + configStore.playout.playlist.lengthInSec > configStore.playout.playlist.startInSec + configStore.playout.playlist.lengthInSec >
lastItem.begin + lastItem.out - lastItem.in lastItem.begin + lastItem.out - lastItem.in
) { ) {
sortContainer.value.sortable.el.classList.add('add-space') sortContainer.value?.sortable.el.classList.add('add-space')
} else { } else {
sortContainer.value.sortable.el.classList.remove('add-space') sortContainer.value?.sortable.el.classList.remove('add-space')
} }
sortContainer.value.sortable.el.classList.remove('is-empty') sortContainer.value?.sortable.el.classList.remove('is-empty')
} }
} }
@ -207,7 +205,7 @@ async function getPlaylist() {
playlistStore.isLoading = false playlistStore.isLoading = false
if (listDate.value === todayDate.value) { if (listDate.value === todayDate.value) {
await until(currentClipIndex).toMatch(v => v > 0, { timeout: 1500 }) await until(currentClipIndex).toMatch((v) => v > 0, { timeout: 1500 })
scrollTo(currentClipIndex.value) scrollTo(currentClipIndex.value)
} else { } else {
scrollTo(0) scrollTo(0)
@ -324,7 +322,15 @@ function deletePlaylistItem(index: number) {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
#playlist-container .sortable-ghost td:nth-last-child(-n + 5) { #playlist-container .sortable-ghost td:nth-last-child(3) {
display: table-cell !important; display: table-cell !important;
} }
@media (min-width: 1280px) {
#playlist-container .sortable-ghost td:nth-last-child(5),
#playlist-container .sortable-ghost td:nth-last-child(4),
#playlist-container .sortable-ghost td:nth-last-child(-n + 2) {
display: table-cell !important;
}
}
</style> </style>

2
pages/media.vue
View File

@ -48,7 +48,7 @@
class="grid grid-cols-[auto_30px] border-b border-base-content/20" class="grid grid-cols-[auto_30px] border-b border-base-content/20"
:class=" :class="
filename(mediaStore.folderTree.source) === folder.name && filename(mediaStore.folderTree.source) === folder.name &&
'bg-base-300 rounded' '!bg-secondary text-black'
" "
@drop="handleDrop($event, folder, true)" @drop="handleDrop($event, folder, true)"
@dragover="handleDragOver" @dragover="handleDragOver"