From aab8cb089165a1c436496b1bc479bef8f82d5ced Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 5 May 2021 11:30:16 +0200
Subject: [PATCH] Replace duration by live info

---
 client/src/components/VideoResult.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/components/VideoResult.vue b/client/src/components/VideoResult.vue
index f76cb39..8adb806 100644
--- a/client/src/components/VideoResult.vue
+++ b/client/src/components/VideoResult.vue
@@ -5,7 +5,8 @@
       <a class="img" :title="watchVideoMessage" target="_blank" rel="nofollow noreferrer noopener" v-bind:href="video.url">
         <img v-bind:src="getVideoThumbnailUrl()" alt="">
 
-        <span class="duration">{{ formattedDuration }}</span>
+        <span v-if="video.isLive" class="live-info" v-translate>LIVE</span>
+        <span v-else class="duration">{{ formattedDuration }}</span>
       </a>
     </div>
 
@@ -80,18 +81,27 @@
         border-radius: 3px;
       }
 
-      .duration {
+      .duration,
+      .live-info {
         position: absolute;
         padding: 2px 5px;
         right: 5px;
         bottom: 5px;
         display: inline-block;
-        background-color: rgba(0, 0, 0, 0.7);
         color: #fff;
         font-size: 11px;
         border-radius: 3px;
       }
 
+      .duration {
+        background-color: rgba(0, 0, 0, 0.7);
+      }
+
+      .live-info {
+        background-color: rgba(224, 8, 8 ,.8);
+        font-weight: $font-semibold;
+      }
+
       @media screen and (max-width: $small-view) {
         --thumbnail-width: calc(100% + 10px);
         --thumbnail-height: auto;