Replace duration by live info

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;