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;
}