diff options
| -rw-r--r-- | assets/css/default.css | 23 | ||||
| -rw-r--r-- | src/invidious/channels.cr | 5 | ||||
| -rw-r--r-- | src/invidious/helpers/utils.cr | 17 | ||||
| -rw-r--r-- | src/invidious/videos.cr | 4 | ||||
| -rw-r--r-- | src/invidious/views/components/item.ecr | 43 | ||||
| -rw-r--r-- | src/invidious/views/watch.ecr | 5 |
6 files changed, 87 insertions, 10 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index a7496981..aebd563c 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -32,6 +32,29 @@ a.pure-button-primary:hover { 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 */ diff --git a/src/invidious/channels.cr b/src/invidious/channels.cr index 09e8f522..4d9d89c8 100644 --- a/src/invidious/channels.cr +++ b/src/invidious/channels.cr @@ -15,6 +15,11 @@ class ChannelVideo ucid: String, author: String, }) + + # TODO: Add length_seconds to channel_video + def length_seconds + return 0 + end end def get_channel(id, client, db, refresh = true, pull_all_videos = true) diff --git a/src/invidious/helpers/utils.cr b/src/invidious/helpers/utils.cr index dab8e0e9..174f2993 100644 --- a/src/invidious/helpers/utils.cr +++ b/src/invidious/helpers/utils.cr @@ -40,6 +40,23 @@ def decode_length_seconds(string) return length_seconds 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) time = string.try &.to_f? diff --git a/src/invidious/videos.cr b/src/invidious/videos.cr index 2e1a828c..72dbe9fb 100644 --- a/src/invidious/videos.cr +++ b/src/invidious/videos.cr @@ -451,6 +451,10 @@ class Video return description end + def length_seconds + return self.info["length_seconds"].to_i + end + add_mapping({ id: String, info: { diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index db319d82..6560ab4c 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -22,7 +22,10 @@ <a style="width:100%;" href="<%= url %>"> <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %> <% 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 %> <p><%= item.title %></p> </a> @@ -35,23 +38,45 @@ <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 %> <% 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> <p> <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b> </p> - <% else %> - <% if item.responds_to?(:playlists) && !item.playlists.empty? %> - <% params = "&list=#{item.playlists[0]}" %> - <% else %> - <% params = nil %> + <% when PlaylistVideo %> + <a style="width:100%;" href="/watch?v=<%= item.id %>&list=<%= item.playlists[0] %>"> + <% 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 %> + <p><%= item.title %></p> + </a> + <% if item.responds_to?(:live_now) && item.live_now %> + <p>LIVE</p> <% end %> - <a style="width:100%;" href="/watch?v=<%= item.id %><%= params %>"> + <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 %> - <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> diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 9424bd10..6af7e10a 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -137,7 +137,10 @@ <a href="/watch?v=<%= rv["id"] %>"> <% if preferences && preferences.thin_mode %> <% 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 %> <p style="width:100%"><%= rv["title"] %></p> <p> |