Mirrored_Repos/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2026-11-02 18:07:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/default.css
View File

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

15
src/invidious/helpers/utils.cr
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?

5
src/invidious/views/watch.ecr
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>