From cbc2633a1503dc20cc61bc944edff76acd4f891a Mon Sep 17 00:00:00 2001
From: Dan Niles <56271899+dan-niles@users.noreply.github.com>
Date: Fri, 28 Jun 2024 14:50:14 +0530
Subject: [PATCH] Display playlist panel for videos played from homepage

---
 zimui/src/components/channel/tabs/VideosTab.vue | 2 +-
 zimui/src/components/video/VideoCard.vue        | 9 ++++++++-
 zimui/src/components/video/VideoGrid.vue        | 3 ++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/zimui/src/components/channel/tabs/VideosTab.vue b/zimui/src/components/channel/tabs/VideosTab.vue
index ac3d14d6..71533f98 100644
--- a/zimui/src/components/channel/tabs/VideosTab.vue
+++ b/zimui/src/components/channel/tabs/VideosTab.vue
@@ -48,5 +48,5 @@ onMounted(() => {
     :count-text="playlist?.videos.length === 1 ? 'video' : 'videos'"
     icon="mdi-video-outline"
   />
-  <video-grid v-if="videos" :videos="videos" />
+  <video-grid v-if="videos" :videos="videos" :playlist-slug="main.channel?.mainPlaylist" />
 </template>
diff --git a/zimui/src/components/video/VideoCard.vue b/zimui/src/components/video/VideoCard.vue
index f64745cf..d3ea9472 100644
--- a/zimui/src/components/video/VideoCard.vue
+++ b/zimui/src/components/video/VideoCard.vue
@@ -11,6 +11,7 @@ const { smAndDown } = useDisplay()
 
 const props = defineProps<{
   video: VideoPreview
+  playlistSlug?: string
 }>()
 
 // Set the maximum length of the title based on the screen size
@@ -34,7 +35,13 @@ const duration = computed<string>(() => {
 </script>
 
 <template>
-  <router-link :to="{ name: 'watch-video', params: { slug: props.video.slug } }">
+  <router-link
+    :to="{
+      name: 'watch-video',
+      params: { slug: props.video.slug },
+      query: { list: props.playlistSlug }
+    }"
+  >
     <v-card flat class="mx-4">
       <v-row no-gutters>
         <v-col cols="5" md="12">
diff --git a/zimui/src/components/video/VideoGrid.vue b/zimui/src/components/video/VideoGrid.vue
index a52e4071..163132cb 100644
--- a/zimui/src/components/video/VideoGrid.vue
+++ b/zimui/src/components/video/VideoGrid.vue
@@ -7,6 +7,7 @@ const { mdAndDown } = useDisplay()
 
 const props = defineProps<{
   videos: VideoPreview[]
+  playlistSlug?: string
 }>()
 </script>
 
@@ -23,7 +24,7 @@ const props = defineProps<{
         xxl="1"
         class="mb-2 mb-md-6"
       >
-        <video-card :video="video" />
+        <video-card :video="video" :playlist-slug="playlistSlug" />
       </v-col>
     </v-row>
   </v-container>