From 3763af9d40d2bfd1dfc3ccbd6beab35e885a5954 Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Sat, 27 Apr 2024 22:44:52 +0200
Subject: [PATCH] add drop area after last clip until playtime is complete

---
 components/PlaylistTable.vue | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/components/PlaylistTable.vue b/components/PlaylistTable.vue
index b89e6641..fbd4bde7 100644
--- a/components/PlaylistTable.vue
+++ b/components/PlaylistTable.vue
@@ -1,5 +1,9 @@
 <template>
-    <div id="playlist-container" class="relative w-full h-full !bg-base-300 rounded-e overflow-auto">
+    <div
+        id="playlist-container"
+        ref="playlistContainer"
+        class="relative w-full h-full !bg-base-300 rounded-e overflow-auto"
+    >
         <div v-if="playlistStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
             <span class="loading loading-spinner loading-lg" />
         </div>
@@ -130,6 +134,7 @@ const playlistStore = usePlaylist()
 const { secToHMS, filename, secondsToTime } = stringFormatter()
 const { processPlaylist, genUID } = playlistOperations()
 
+const playlistContainer = ref()
 const sortContainer = ref()
 const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const { listDate } = storeToRefs(usePlaylist())
@@ -174,9 +179,19 @@ defineExpose({
 })
 
 function classSwitcher() {
-    if (playlistStore.playlist.length === 0 && sortContainer.value) {
+    if (playlistStore.playlist.length === 0) {
         sortContainer.value.sortable.el.classList.add('is-empty')
     } else {
+        const lastItem = playlistStore.playlist[playlistStore.playlist.length - 1]
+
+        if (
+            configStore.playout.playlist.startInSec + configStore.playout.playlist.lengthInSec >
+            lastItem.begin + lastItem.out - lastItem.in
+        ) {
+            sortContainer.value.sortable.el.classList.add('add-space')
+        } else {
+            sortContainer.value.sortable.el.classList.remove('add-space')
+        }
         sortContainer.value.sortable.el.classList.remove('is-empty')
     }
 }
@@ -225,13 +240,15 @@ function addClip(event: any) {
         duration: mediaStore.folderTree.files[o].duration,
     })
 
-    classSwitcher()
     processPlaylist(listDate.value, playlistStore.playlist, false)
+    classSwitcher()
 
     nextTick(() => {
         const newNode = document.getElementById(`clip-${n}`)
         addBG(newNode)
         removeBG(newNode)
+
+        playlistContainer.value.scroll({ top: playlistContainer.value.scrollHeight, behavior: 'smooth' })
     })
 }
 
@@ -262,6 +279,14 @@ function deletePlaylistItem(index: number) {
     align-items: center;
 }
 
+#sort-container.add-space:after {
+    content: ' ';
+    width: 100%;
+    height: 37px;
+    display: flex;
+    position: absolute;
+}
+
 /*
     format dragging element
 */