Show video count per playlist.

Closes #1524

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>

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"

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