From 7add9c9d8e7a54cbbb24726bc2c883df9ef7279a Mon Sep 17 00:00:00 2001
From: carlssonemil <hello@emilcarlsson.se>
Date: Tue, 20 Jul 2021 23:28:29 +0200
Subject: [PATCH] Show video duration in thumbnail (#269)

---
 src/components/SearchResults.vue | 12 ++++++++----
 src/components/VideoItem.vue     | 29 ++++++++++++++++-------------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index c7ab748e..38721d06 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -27,7 +27,14 @@
         >
             <div class="uk-text-secondary">
                 <router-link class="uk-text-emphasis" v-bind:to="result.url">
-                    <img style="width: 100%" v-bind:src="result.thumbnail" loading="lazy" />
+                    <div class="uk-position-relative">
+                        <img style="width: 100%" v-bind:src="result.thumbnail" loading="lazy" />
+                        <span 
+                            v-if="result.duration"
+                            class="uk-label uk-border-rounded uk-position-absolute uk-dark" 
+                            style="bottom: 5px; right: 5px; opacity: .95;"
+                            >{{ timeFormat(result.duration) }}</span>
+                    </div>
                     <p>
                         {{ result.name }}&thinsp;<font-awesome-icon
                             v-if="result.verified"
@@ -44,9 +51,6 @@
                         ></font-awesome-icon>
                     </p>
                 </router-link>
-                <b v-if="result.duration" class="uk-text-small uk-align-right uk-text-align-right">
-                    {{ timeFormat(result.duration) }}
-                </b>
 
                 <b v-if="result.uploadDate">
                     {{ result.uploadDate }}
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index e4074f6c..76ca7975 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -1,14 +1,21 @@
 <template>
     <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
         <router-link class="uk-text-emphasis" v-bind:to="video.url">
-            <img
-                :height="height"
-                :width="width"
-                style="width: 100%"
-                v-bind:src="video.thumbnail"
-                alt="thumbnail"
-                loading="lazy"
-            />
+            <div class="uk-position-relative">
+                <img
+                    :height="height"
+                    :width="width"
+                    style="width: 100%"
+                    v-bind:src="video.thumbnail"
+                    alt="thumbnail"
+                    loading="lazy"
+                />
+                <span 
+                    v-if="video.duration"
+                    class="uk-label uk-border-rounded uk-position-absolute uk-dark" 
+                    style="bottom: 5px; right: 5px; opacity: .95;"
+                    >{{ timeFormat(video.duration) }}</span>
+            </div>
             <p>{{ video.title }}</p>
         </router-link>
 
@@ -32,10 +39,6 @@
             </div>
         </b>
         <div class="uk-align-right">
-            <b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
-
-            <br />
-
             <router-link :to="video.url + '&listen=1'">
                 <font-awesome-icon icon="headphones"></font-awesome-icon>
             </router-link>
@@ -52,4 +55,4 @@ export default {
         hideChannel: Boolean,
     },
 };
-</script>
+</script>
\ No newline at end of file