feat: add minute badge to the watch page, right next to the title of the video (#6112)

* minute badge added to watch page

* replace time calculations with the stdlib's native functions

Co-authored-by: syeopite <70992037+syeopite@users.noreply.github.com>

* reordered duration badge to be before audio mode toggle

* abbreviated length logic abstracted into a helper function

* space added between badge and texts

* run ameba linter

* move it between the title and listen button

* use border radius of 3px, since that is the buttons of purecss uses

* chore: move the css element to a more appropiate place + add missing support for dark mode css

* chore: hide time indicator if length_seconds is less than 0 or nil

* chore: add TODO statement for the locales

---------

Co-authored-by: discollizard <discollizard@github.com>
Co-authored-by: discollizard <49206310+discollizard@users.noreply.github.com>
Co-authored-by: syeopite <70992037+syeopite@users.noreply.github.com>

assets/css/default.css

@@ -671,6 +671,11 @@ body.dark-theme {
   color: #f0f0f0;
 }
 
+.dark-theme .length-watch-page {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: #f0f0f0;
+}
+
 .dark-theme .pure-form legend {
   color: #f0f0f0;
 }
@@ -731,6 +736,11 @@ body.dark-theme {
     color: #f0f0f0;
   }
 
+  .no-theme .length-watch-page {
+    background-color: rgba(255, 255, 255, 0.12);
+    color: #f0f0f0;
+  }
+
   .no-theme .pure-form legend {
     color: #f0f0f0;
   }
@@ -927,3 +937,18 @@ h1, h2, h3, h4, h5, p,
 #comments-turned-off-on-video-message > p, #comments-disabled-message > p {
   text-align: center;
 }
+
+.length-watch-page{
+  position: relative;
+  background-color: rgba(35, 35, 35, 0.75);
+  color: #fff;
+  border-radius: 3px;
+  padding: 4px 10px;
+  font-size: 20px;
+  right: 0.25em;
+  bottom: 0.25em;
+  margin-left: 10px;
+  margin-right: 10px;
+  -webkit-user-select: none;
+  user-select: none;
+}

src/invidious/helpers/utils.cr

@@ -1,5 +1,20 @@
 PUBSUB_URL = URI.parse("https://pubsubhubbub.appspot.com")
 
+# 2026-11-01: Add support for locales!
+def video_length_abbreviated(length)
+  if length.days > 0
+    length_abbreviated = "#{length.days} d #{length.hours} hr #{length.minutes} min"
+  elsif length.hours > 0
+    length_abbreviated = "#{length.hours} h #{length.minutes} min"
+  elsif length.minutes > 0
+    length_abbreviated = "#{length.minutes} min"
+  else
+    length_abbreviated = "#{length.seconds} seconds"
+  end
+
+  length_abbreviated
+end
+
 def decode_length_seconds(string)
   length_seconds = string.gsub(/[^0-9:]/, "")
   return 0_i32 if length_seconds.empty?

src/invidious/views/watch.ecr

@@ -84,6 +84,11 @@ we're going to need to do it here in order to allow for translations.
 <div class="h-box">
     <h1>
         <%= title %>
+        <% if (length_seconds = video.length_seconds) && length_seconds > 0 %>
+        <span class="length-watch-page">
+            <%= video_length_abbreviated(length_seconds.seconds) %>
+        </span>
+        <% end %>
         <% if params.listen %>
             <a title="<%=I18n.translate(locale, "Video mode")%>" id="link-iv-listen" data-base-url="/watch?<%= env.params.query %>&listen=0" href="/watch?<%= env.params.query %>&listen=0">
                 <i class="icon ion-ios-videocam"></i>