From b30d7f2e9570ce82eabb75eecc9781683da55257 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Sat, 25 Jun 2022 11:56:02 +0100
Subject: [PATCH] Add class for short videos.

---
 src/components/VideoItem.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 542ecb5d..90e27236 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -11,10 +11,10 @@
             }"
         >
             <img
-                :style="`max-height: ${height}px; max-width: ${width}px; object-fit: contain`"
                 class="w-full"
                 :src="video.thumbnail"
                 :alt="video.title"
+                :class="{ 'shorts-img': short }"
                 loading="lazy"
             />
             <div class="relative text-sm">
@@ -24,7 +24,7 @@
                     v-text="timeFormat(video.duration)"
                 />
                 <!-- shorts thumbnail -->
-                <span class="thumbnail-overlay thumbnail-left" v-if="video.duration <= 60" v-t="'video.shorts'" />
+                <span class="thumbnail-overlay thumbnail-left" v-if="short" v-t="'video.shorts'" />
                 <span
                     class="thumbnail-overlay thumbnail-right"
                     v-else-if="video.duration >= 60"
@@ -124,6 +124,10 @@
 .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;
+}
 </style>
 
 <script>
@@ -170,6 +174,11 @@ export default {
             }
         },
     },
+    computed: {
+        short() {
+            return this.video.duration > 0 && this.video.duration <= 60;
+        },
+    },
     components: { PlaylistAddModal },
 };
 </script>