From 1dbfb14230f7df6559ad52c6d7f7ebb3409bbea9 Mon Sep 17 00:00:00 2001
From: Emil Carlsson <emil-carlsson@live.se>
Date: Wed, 21 Jul 2021 12:15:07 +0200
Subject: [PATCH] Show video duration in thumbnail (#269) (#291)

* Show video duration in thumbnail (#269)

* Inverse color theme and reduce horizontal padding

* Move video duration to thumbnail
---
 src/components/FeedPage.vue      | 13 ++++++++-----
 src/components/SearchResults.vue | 12 ++++++++----
 src/components/VideoItem.vue     | 29 ++++++++++++++++-------------
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 5b95ce8e..2ce13ffd 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -18,7 +18,14 @@
         >
             <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
                 <router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
-                    <img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
+                    <div class="uk-position-relative">
+                        <img 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 video-duration" 
+                            style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
+                            >{{ timeFormat(video.duration) }}</span>
+                    </div>
                     <p>{{ video.title }}</p>
                 </router-link>
 
@@ -42,10 +49,6 @@
                     </div>
                 </b>
                 <div class="uk-align-right">
-                    <b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
-
-                    <br />
-
                     <router-link :to="'/watch?v=' + video.id + '&listen=1'">
                         <font-awesome-icon icon="headphones"></font-awesome-icon>
                     </router-link>
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..b843bc6e 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 video-duration" 
+                    style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
+                    >{{ 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