optional pagination in video list

video-db · Dec 13, 2024 · d40344e · d40344e
1 parent a4596bd
commit d40344e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/src/components/collection/VideoList.vue b/src/components/collection/VideoList.vue
@@ -6,7 +6,16 @@
       <div
         v-for="(item, index) in paginatedVideos"
         :key="`post-${item.id}`"
-        class="vdb-c-col-span-12 sm:vdb-c-col-span-6 md:vdb-c-col-span-4 lg:vdb-c-col-span-3"
+        class="vdb-c-col-span-12 sm:vdb-c-col-span-6"
+        :class="[
+          columns >= 4
+            ? 'md:vdb-c-col-span-4 lg:vdb-c-col-span-3'
+            : columns >= 3
+            ? 'md:vdb-c-col-span-4 lg:vdb-c-col-span-4'
+            : columns >= 2
+            ? 'md:vdb-c-col-span-6 lg:vdb-c-col-span-6'
+            : ''
+        ]"
       >
         <video-card
           :item="item"
@@ -17,7 +26,10 @@
         />
       </div>
     </div>
-    <div class="vdb-c-mt-24 vdb-c-flex vdb-c-justify-center">
+    <div
+      v-if="showPagination"
+      class="vdb-c-mt-24 vdb-c-flex vdb-c-justify-center"
+    >
       <PaginationButton
         :target-page="-1"
         :state="currentPage === 1 ? 'disabled' : 'default'"
@@ -60,6 +72,15 @@ const props = defineProps({
     type: Number,
     default: 8,
   },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  columns: {
+    type: Number,
+    default: 4,
+    validator: (value) => value >= 1 && value <= 4,
+  },
 });
 
 const currentPage = ref(1);
@@ -69,6 +90,9 @@ const totalPages = computed(() =>
 );
 
 const paginatedVideos = computed(() => {
+  if (!props.showPagination) {
+    return props.videoResults;
+  }
   const start = (currentPage.value - 1) * props.itemsPerPage;
   const end = start + props.itemsPerPage;
   return props.videoResults.slice(start, end);

diff --git a/src/components/message-handlers/ChatVideos.vue b/src/components/message-handlers/ChatVideos.vue
@@ -10,6 +10,8 @@
     <transition name="fade" mode="out-in">
       <div v-if="content.status === 'success' || content.status === 'progress'">
         <VideoList
+          :columns="3"
+          :show-pagination="false"
           :video-results="content.videos"
           @video-click="handleVideoClick"
         />
@@ -65,7 +67,9 @@ const handleVideoClick = (video) => {
   if (video.externalUrl) {
     window.open(video.url, "_blank");
   } else {
-    handleAddMessage(`@stream_video ${video.name}`);
+    if (video.stream_url) {
+      handleAddMessage(`@stream_video ${video.name}`);
+    }
   }
 };