Add better indicator for livestreams

src/invidious/views/components/item.ecr

@@ -53,14 +53,15 @@
             <% else %>
             <div class="thumbnail">
                 <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
+                <% if item.responds_to?(:live_now) && item.live_now %>
+                <p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
+                <% else %>
                 <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
+                <% end %>
             </div>
             <% end %>
             <p><%= item.title %></p>
         </a>
-        <% if item.responds_to?(:live_now) && item.live_now %>
-        <p><%= translate(locale, "LIVE") %></p>
-        <% end %>
         <p>
             <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
         </p>
@@ -87,14 +88,15 @@
                     </a>
                 </p>
                 <% end %>
+                <% if item.responds_to?(:live_now) && item.live_now %>
+                <p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
+                <% else %>
                 <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
+                <% end %>
             </div>
         </a>
         <% end %>
         <p><a href="/watch?v=<%= item.id %>"><%= item.title %></a></p>
-        <% if item.responds_to?(:live_now) && item.live_now %>
-        <p><%= translate(locale, "LIVE") %></p>
-        <% end %>
         <p>
             <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
         </p>