Merge 3f64e3f439 into 53e8a5d62d

assets/css/default.css

@@ -9,6 +9,36 @@ body {
     Arial, sans-serif;
 }
 
+.length-watch-page{
+  position: relative;
+  background-color: rgba(35, 35, 35, 0.75);
+  color: #fff;
+  border-radius: 2px;
+  padding: 4px;
+  font-size: 20px;
+  right: 0.25em;
+  bottom: 0.25em;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.dark-theme .length-watch-page{
+  background-color: #fff;
+  color: rgba(35, 35, 35, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .length-watch-page{
+    background-color: #fff;
+    color: rgba(35, 35, 35, 1);
+  }
+  
+  .light-theme .length-watch-page {
+    background-color: rgba(35, 35, 35, 0.75);
+    color: #fff;
+  }
+}
+
 #contents {
   display: flex;
   flex-direction: column;

locales/en-US.json

@@ -388,10 +388,13 @@
   "generic_count_weeks_plural": "{{count}} weeks",
   "generic_count_days": "{{count}} day",
   "generic_count_days_plural": "{{count}} days",
+  "generic_count_days_short": "{{count}} d",
   "generic_count_hours": "{{count}} hour",
   "generic_count_hours_plural": "{{count}} hours",
+  "generic_count_hours_short": "{{count}} hr",
   "generic_count_minutes": "{{count}} minute",
   "generic_count_minutes_plural": "{{count}} minutes",
+  "generic_count_minutes_short": "{{count}} min",
   "generic_count_seconds": "{{count}} second",
   "generic_count_seconds_plural": "{{count}} seconds",
   "Fallback comments: ": "Fallback comments: ",

src/invidious/helpers/utils.cr

@@ -11,6 +11,21 @@ def ci_lower_bound(pos, n)
   return (phat + z*z/(2*n) - z * Math.sqrt((phat*(1 - phat) + z*z/(4*n))/n))/(1 + z*z/n)
 end
 
+def video_length_abbreviated(locale, length)
+  length_abbreviated = ""
+  if length.days > 0
+    length_abbreviated = "#{translate_count(locale, "generic_count_days_short", length.days)} #{translate_count(locale, "generic_count_hours_short", length.hours)} #{translate_count(locale, "generic_count_minutes_short", length.minutes)}"
+  elsif length.hours > 0
+    length_abbreviated = "#{translate_count(locale, "generic_count_hours_short", length.hours)} #{translate_count(locale, "generic_count_minutes_short", length.minutes)}"
+  elsif length.minutes > 0
+    length_abbreviated = translate_count(locale, "generic_count_minutes_short", length.minutes)
+  else
+    length_abbreviated = translate_count(locale, "generic_count_seconds", length.seconds)
+  end
+
+  return length_abbreviated
+end
+
 def elapsed_text(elapsed)
   millis = elapsed.total_milliseconds
   return "#{millis.round(2)}ms" if millis >= 1

src/invidious/views/watch.ecr

@@ -77,6 +77,9 @@ we're going to need to do it here in order to allow for translations.
 <div class="h-box">
     <h1>
         <%= title %>
+        <span class="length-watch-page">
+            <%= video_length_abbreviated(locale, video.length_seconds.seconds)%>
+        </span>
         <% if params.listen %>
             <a title="<%=translate(locale, "Video mode")%>" href="/watch?<%= env.params.query %>&listen=0">
                 <i class="icon ion-ios-videocam"></i>
@@ -88,6 +91,7 @@ we're going to need to do it here in order to allow for translations.
         <% end %>
     </h1>
 
+
     <% if !video.is_listed %>
         <h3>
             <i class="icon ion-ios-unlock"></i> <%= translate(locale, "Unlisted") %>