From 325e5f01f0adcc3db273e5889404c59e17666b3a Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Sat, 18 Jun 2022 00:03:47 +0530
Subject: [PATCH] handle shorts videos in trending page

---
 src/components/VideoItem.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 56e8b499..e4330e7a 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -10,13 +10,25 @@
                 },
             }"
         >
-            <img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
+            <img
+                :style="`max-height: ${height}px; max-width: ${width}px`"
+                class="w-full"
+                :src="video.thumbnail"
+                :alt="video.title"
+                loading="lazy"
+            />
             <div class="relative text-sm">
                 <span
                     class="thumbnail-overlay thumbnail-right"
                     v-if="video.duration > 0"
                     v-text="timeFormat(video.duration)"
                 />
+                <span class="thumbnail-overlay thumbnail-right" v-if="video.duration <= 60" v-text="`SHORTS`" />
+                <span
+                    class="thumbnail-overlay thumbnail-right"
+                    v-else-if="video.duration >= 60"
+                    v-text="timeFormat(video.duration)"
+                />
                 <i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
                     <font-awesome-icon class="!w-3" :icon="['fas', 'broadcast-tower']" />
                 </i18n-t>