From 691cb6d86b69f3651fcbb697962f92ef0c41cbf3 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Wed, 22 Jan 2025 15:14:00 +0100
Subject: [PATCH] refactor: merge duration/live/shorts indicator to
 VideoThumbnail component

---
 src/components/PlaylistVideos.vue | 32 +++++--------------------------
 src/components/VideoItem.vue      | 14 --------------
 src/components/VideoThumbnail.vue | 20 +++++++++++++++++++
 3 files changed, 25 insertions(+), 41 deletions(-)

diff --git a/src/components/PlaylistVideos.vue b/src/components/PlaylistVideos.vue
index ccad60ac74..ab3ff38ca3 100644
--- a/src/components/PlaylistVideos.vue
+++ b/src/components/PlaylistVideos.vue
@@ -22,7 +22,7 @@
             :prefer-listen="preferListen"
         >
             <router-link
-                class="flex hover:bg-gray-50 .dark:hover:bg-neutral-800"
+                class="flex rounded px-2 py-1 hover:bg-gray-50 .dark:hover:bg-neutral-800"
                 :class="{ 'bg-gray-200 .dark:bg-neutral-700': index === selectedIndex - 1 }"
                 :to="{
                     path: '/watch',
@@ -35,34 +35,12 @@
                 }"
             >
                 <span class="min-w-5 flex-none text-xs" v-text="index + 1" />
-                <div class="w-24 flex-none pb-1">
-                    <VideoThumbnail :item="related" />
-
-                    <div class="relative text-xs">
-                        <!-- shorts thumbnail -->
-                        <span v-if="related.isShort" v-t="'video.shorts'" class="thumbnail-overlay thumbnail-left" />
-                        <span
-                            v-if="related.duration > 0 || (related.duration == 0 && related.isShort)"
-                            class="thumbnail-overlay thumbnail-right px-0.5"
-                            v-text="timeFormat(related.duration)"
-                        />
-                        <i18n-t
-                            v-else
-                            keypath="video.live"
-                            class="thumbnail-overlay thumbnail-right !bg-red-600"
-                            tag="div"
-                        >
-                            <i class="i-fa6-solid:tower-broadcast w-3" />
-                        </i18n-t>
-                        <span
-                            v-if="related.watched"
-                            v-t="'video.watched'"
-                            class="thumbnail-overlay bottom-5px left-5px px-0.5"
-                        />
-                    </div>
+                <div class="w-24 flex-none">
+                    <VideoThumbnail :item="related" :small="true" />
                 </div>
+
                 <div class="ml-2 flex flex-col">
-                    <span class="text-sm font-semibold leading-4" :title="related.title" v-text="related.title" />
+                    <span class="link" :title="related.title" v-text="related.title" />
                     <div class="flex-1">
                         <router-link
                             v-if="related.uploaderUrl && related.uploaderName && !hideChannel"
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index d63261f842..19d76a7d0a 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -14,20 +14,6 @@
         >
             <VideoThumbnail :item="item" />
 
-            <div class="relative text-sm">
-                <!-- shorts thumbnail -->
-                <span v-if="item.isShort" v-t="'video.shorts'" class="thumbnail-overlay thumbnail-left" />
-                <span
-                    v-if="item.duration > 0 || (item.duration == 0 && item.isShort)"
-                    class="thumbnail-overlay thumbnail-right px-0.5"
-                    v-text="timeFormat(item.duration)"
-                />
-                <i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
-                    <i class="i-fa6-solid:tower-broadcast w-3" />
-                </i18n-t>
-                <span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
-            </div>
-
             <div>
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
diff --git a/src/components/VideoThumbnail.vue b/src/components/VideoThumbnail.vue
index 5d4ccdd9fc..6341da6d69 100644
--- a/src/components/VideoThumbnail.vue
+++ b/src/components/VideoThumbnail.vue
@@ -16,6 +16,20 @@
             />
         </div>
     </div>
+
+    <div class="relative" :class="small ? 'text-xs' : 'text-sm'">
+        <!-- shorts thumbnail -->
+        <span v-if="item.isShort" v-t="'video.shorts'" class="thumbnail-overlay thumbnail-left" />
+        <span
+            v-if="item.duration > 0 || (item.duration == 0 && item.isShort)"
+            class="thumbnail-overlay thumbnail-right px-0.5"
+            v-text="timeFormat(item.duration)"
+        />
+        <i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
+            <i class="i-fa6-solid:tower-broadcast w-3" />
+        </i18n-t>
+        <span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
+    </div>
 </template>
 <script>
 export default {
@@ -26,6 +40,12 @@ export default {
                 return {};
             },
         },
+        small: {
+            type: Boolean,
+            default: () => {
+                return false;
+            },
+        },
     },
     computed: {
         title() {