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

@@ -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>

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}?",