From 187804f9a1c286988f6b5b83f0a5ea5b264248c2 Mon Sep 17 00:00:00 2001
From: kskarthik <11899221+kskarthik@users.noreply.github.com>
Date: Sat, 25 Jun 2022 16:30:45 +0530
Subject: [PATCH] Fix shorts Thumbnail scaling (#1153)

* handle shorts videos in trending page

* shorts label for video items if video length <= a minute

* fix translation

* fix: shorts thumbnail scaling

* Use tailwind classes and properly do localization.

* Add class for short videos.

Co-authored-by: Kavin <20838718+FireMasterK@users.noreply.github.com>
---
 src/components/VideoItem.vue | 27 ++++++++++++++++++++++++++-
 src/locales/en.json          |  3 ++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 56e8b499..90e27236 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -10,13 +10,26 @@
                 },
             }"
         >
-            <img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
+            <img
+                class="w-full"
+                :src="video.thumbnail"
+                :alt="video.title"
+                :class="{ 'shorts-img': short }"
+                loading="lazy"
+            />
             <div class="relative text-sm">
                 <span
                     class="thumbnail-overlay thumbnail-right"
                     v-if="video.duration > 0"
                     v-text="timeFormat(video.duration)"
                 />
+                <!-- shorts thumbnail -->
+                <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"
+                    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>
@@ -108,6 +121,13 @@
 .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;
+}
 </style>
 
 <script>
@@ -154,6 +174,11 @@ export default {
             }
         },
     },
+    computed: {
+        short() {
+            return this.video.duration > 0 && this.video.duration <= 60;
+        },
+    },
     components: { PlaylistAddModal },
 };
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 63d77357..bcb7574d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -105,7 +105,8 @@
         "sponsor_segments": "Sponsors Segments",
         "ratings_disabled": "Ratings Disabled",
         "chapters": "Chapters",
-        "live": "{0} Live"
+        "live": "{0} Live",
+        "shorts": "Shorts"
     },
     "search": {
         "did_you_mean": "Did you mean: {0}?",