Add partial support for video duration in thumbnails

This commit is contained in:
Omar Roth 2018-10-20 20:37:55 -05:00
parent 3ee7201f5d
commit 4875aa1d7e
6 changed files with 88 additions and 11 deletions

View File

@ -32,6 +32,29 @@ a.pure-button-primary:hover {
color: #fff; color: #fff;
} }
div.thumbnail {
position: relative;
}
img.thumbnail {
width: 100%;
left: 0;
top: 0;
}
.length {
z-index: 100;
position: absolute;
background-color: rgba(35, 35, 35, 0.75);
color: #fff;
border-radius: 2px;
padding: 2px;
font-size: 16px;
font-family: sans-serif;
right: 0.5em;
bottom: -0.5em;
}
/* /*
* Navbar * Navbar
*/ */

View File

@ -15,6 +15,11 @@ class ChannelVideo
ucid: String, ucid: String,
author: String, author: String,
}) })
# TODO: Add length_seconds to channel_video
def length_seconds
return 0
end
end end
def get_channel(id, client, db, refresh = true, pull_all_videos = true) def get_channel(id, client, db, refresh = true, pull_all_videos = true)

View File

@ -40,6 +40,23 @@ def decode_length_seconds(string)
return length_seconds return length_seconds
end end
def recode_length_seconds(time)
if time <= 0
return ""
else
time = time.seconds
text = "#{time.minutes.to_s.rjust(2, '0')}:#{time.seconds.to_s.rjust(2, '0')}"
if time.hours > 0
text = "#{time.hours.to_s.rjust(2, '0')}:#{text}"
end
text = text.lchop('0')
return text
end
end
def decode_time(string) def decode_time(string)
time = string.try &.to_f? time = string.try &.to_f?

View File

@ -451,6 +451,10 @@ class Video
return description return description
end end
def length_seconds
return self.info["length_seconds"].to_i
end
add_mapping({ add_mapping({
id: String, id: String,
info: { info: {

View File

@ -22,7 +22,10 @@
<a style="width:100%;" href="<%= url %>"> <a style="width:100%;" href="<%= url %>">
<% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %> <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
<% else %> <% else %>
<img style="width:100%;" src="/vi/<%= item.videos[0]?.try &.id %>/mqdefault.jpg"/> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.videos[0]?.try &.id %>/mqdefault.jpg"/>
<p class="length"><%= recode_length_seconds(item.videos[0].length_seconds) %></p>
</div>
<% end %> <% end %>
<p><%= item.title %></p> <p><%= item.title %></p>
</a> </a>
@ -35,23 +38,45 @@
<a style="width:100%;" href="/watch?v=<%= item.id %>&list=<%= item.mixes[0] %>"> <a style="width:100%;" href="/watch?v=<%= item.id %>&list=<%= item.mixes[0] %>">
<% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %> <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
<% else %> <% else %>
<img style="width:100%;" src="/vi/<%= item.id %>/mqdefault.jpg"/> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
</div>
<% end %> <% end %>
<p><%= item.title %></p> <p><%= item.title %></p>
</a> </a>
<p> <p>
<b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b> <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
</p> </p>
<% else %> <% when PlaylistVideo %>
<% if item.responds_to?(:playlists) && !item.playlists.empty? %> <a style="width:100%;" href="/watch?v=<%= item.id %>&list=<%= item.playlists[0] %>">
<% params = "&list=#{item.playlists[0]}" %>
<% else %>
<% params = nil %>
<% end %>
<a style="width:100%;" href="/watch?v=<%= item.id %><%= params %>">
<% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %> <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
<% else %> <% else %>
<img style="width:100%;" src="/vi/<%= item.id %>/mqdefault.jpg"/> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
</div>
<% end %>
<p><%= item.title %></p>
</a>
<% if item.responds_to?(:live_now) && item.live_now %>
<p>LIVE</p>
<% end %>
<p>
<b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
</p>
<% if Time.now - item.published > 1.minute %>
<h5>Shared <%= recode_date(item.published) %> ago</h5>
<% end %>
<% else %>
<a style="width:100%;" href="/watch?v=<%= item.id %>">
<% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
<% else %>
<div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
</div>
<% end %> <% end %>
<p><%= item.title %></p> <p><%= item.title %></p>
</a> </a>

View File

@ -137,7 +137,10 @@
<a href="/watch?v=<%= rv["id"] %>"> <a href="/watch?v=<%= rv["id"] %>">
<% if preferences && preferences.thin_mode %> <% if preferences && preferences.thin_mode %>
<% else %> <% else %>
<img style="width:100%;" src="/vi/<%= rv["id"] %>/mqdefault.jpg"> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg">
<p class="length"><%= recode_length_seconds(rv["length_seconds"]?.try &.to_i? || 0) %></p>
</div>
<% end %> <% end %>
<p style="width:100%"><%= rv["title"] %></p> <p style="width:100%"><%= rv["title"] %></p>
<p> <p>