From 31f3c2eb581700e2e82816c63c9888e9b4d9db4f Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 11 Oct 2022 06:00:51 +0100
Subject: [PATCH] Show video count per playlist.

Closes #1524
---
 src/App.vue                      | 11 +++++++++++
 src/components/PlaylistsPage.vue |  6 ++++++
 src/components/VideoItem.vue     | 11 -----------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a6079368..c5dce7a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -209,4 +209,15 @@ h2 {
 .dark .line {
     @apply bg-white;
 }
+
+.thumbnail-overlay {
+    @apply rounded-md absolute bg-black text-white bg-opacity-75 px-5px;
+}
+
+.thumbnail-right {
+    @apply bottom-5px right-5px;
+}
+.thumbnail-left {
+    @apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase;
+}
 </style>
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index ccfb7d58..716524b5 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -9,6 +9,12 @@
         <div v-for="playlist in playlists" :key="playlist.id">
             <router-link :to="`/playlist?list=${playlist.id}`">
                 <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
+                <div class="relative text-sm">
+                    <span
+                        class="thumbnail-overlay thumbnail-right"
+                        v-text="`${playlist.videos} ${$t('video.videos')}`"
+                    />
+                </div>
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
                     class="my-2 overflow-hidden flex link"
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 1c71b1e4..d71cd724 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -114,17 +114,6 @@
 </template>
 
 <style>
-.thumbnail-overlay {
-    @apply rounded-md absolute bg-black text-white bg-opacity-75 px-5px;
-}
-
-.thumbnail-right {
-    @apply bottom-5px right-5px;
-}
-.thumbnail-left {
-    @apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase;
-}
-
 .shorts-img {
     @apply max-h-[17.5vh] w-full object-contain;
 }