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

28
components/PlaylistTable.vue
View File

@ -20,7 +20,7 @@
{{ $t('player.file') }}
</div>
</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]">
{{ $t('player.play') }}
</div>
@ -45,7 +45,7 @@
{{ $t('player.ad') }}
</div>
</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]">
{{ $t('player.edit') }}
</div>
@ -76,9 +76,7 @@
class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
:class="{
'!bg-lime-500/30':
playlistStore.playoutIsRunning &&
listDate === todayDate &&
index === currentClipIndex,
playlistStore.playoutIsRunning && listDate === todayDate && index === currentClipIndex,
'!bg-amber-600/40': element.overtime,
}"
>
@ -185,7 +183,7 @@ function scrollTo(index: number) {
function classSwitcher() {
if (playlistStore.playlist.length === 0) {
sortContainer.value.sortable.el.classList.add('is-empty')
sortContainer.value?.sortable.el.classList.add('is-empty')
} else {
const lastItem = playlistStore.playlist[playlistStore.playlist.length - 1]
@ -193,11 +191,11 @@ function classSwitcher() {
configStore.playout.playlist.startInSec + configStore.playout.playlist.lengthInSec >
lastItem.begin + lastItem.out - lastItem.in
) {
sortContainer.value.sortable.el.classList.add('add-space')
sortContainer.value?.sortable.el.classList.add('add-space')
} 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
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)
} else {
scrollTo(0)
@ -324,7 +322,15 @@ function deletePlaylistItem(index: number) {
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;
}
@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>

2
pages/media.vue
View File

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