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>
This commit is contained in:
Fijxu
2026-11-02 00:58:01 -03:00
committed by GitHub
parent cbaca26f24
commit 4a618775e4
3 changed files with 45 additions and 0 deletions

View File

@@ -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?

View File

@@ -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>