From 5f0ed9e491f4f40142f87840d7a2f53c7864e9a3 Mon Sep 17 00:00:00 2001
From: carlssonemil <hello@emilcarlsson.se>
Date: Wed, 21 Jul 2021 08:47:23 +0200
Subject: [PATCH] Move video duration to thumbnail

---
 src/components/FeedPage.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 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>