midou/invidious
1
0
Fork 1
mirror of https://github.com/iv-org/invidious.git synced 2024-11-08 13:42:27 +05:30
Code Issues Packages Projects Releases Wiki Activity

UI: Nicer buttons (#3763)

Browse Source
This commit is contained in:
Samantaz Fox 2023-07-16 17:36:35 +02:00
commit c8ade5194b
No known key found for this signature in database
GPG Key ID: F42821059186176E
23 changed files with 677 additions and 508 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
assets/css/default.css
View File

@ -1,3 +1,7 @@
/*
* Common attributes
*/
html, html,
body { body {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
@ -11,6 +15,16 @@ body {
min-height: 100vh; min-height: 100vh;
} }
.h-box {
padding-left: 1em;
padding-right: 1em;
}
.v-box {
padding-top: 1em;
padding-bottom: 1em;
}
.deleted { .deleted {
background-color: rgb(255, 0, 0, 0.5); background-color: rgb(255, 0, 0, 0.5);
} }
@ -20,6 +34,34 @@ body {
margin-bottom: 20px; margin-bottom: 20px;
} }
.title {
margin: 0.5em 0 1em 0;
}
/* A flex container */
.flexible {
display: flex;
align-items: center;
}
.flex-left {
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
justify-content: flex-start;
}
.flex-right {
display: flex;
flex: 2 0 auto;
flex-flow: row nowrap;
justify-content: flex-end;
}
/*
* Channel page
*/
.channel-profile > * { .channel-profile > * {
font-size: 1.17em; font-size: 1.17em;
font-weight: bold; font-weight: bold;
@ -90,16 +132,6 @@ body a.channel-owner {
} }
} }
.h-box {
padding-left: 1em;
padding-right: 1em;
}
.v-box {
padding-top: 1em;
padding-bottom: 1em;
}
div { div {
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
@ -115,6 +147,11 @@ div {
padding-right: 10px; padding-right: 10px;
} }
/*
* Buttons
*/
body a.pure-button { body a.pure-button {
color: rgba(0,0,0,.8); color: rgba(0,0,0,.8);
} }
@ -127,30 +164,48 @@ body a.pure-button-primary,
color: rgba(35, 35, 35, 1); color: rgba(35, 35, 35, 1);
} }
button.pure-button-primary:hover, .pure-button-primary,
body a.pure-button-primary:hover, .pure-button-secondary {
button.pure-button-primary:focus, border: 1px solid #a0a0a0;
body a.pure-button-primary:focus { border-radius: 3px;
background-color: rgba(0, 182, 240, 1); margin: 0 .4em;
color: #fff;
} }
.pure-button-secondary.low-profile {
padding: 5px 10px;
margin: 0;
}
/* Has to be combined with flex-left/right */
.button-container {
flex-flow: wrap;
gap: 0.5em 0.75em;
}
/*
* Video thumbnails
*/
div.thumbnail { div.thumbnail {
padding: 28.125%;
position: relative; position: relative;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
img.thumbnail { img.thumbnail {
position: absolute; display: block; /* See: https://stackoverflow.com/a/11635197 */
width: 100%; width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover; object-fit: cover;
} }
.thumbnail-placeholder {
min-height: 50px;
border: 2px dotted;
}
div.watched-overlay { div.watched-overlay {
z-index: 50;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -168,30 +223,31 @@ div.watched-indicator {
background-color: red; background-color: red;
} }
.length { div.thumbnail > .top-left-overlay,
div.thumbnail > .bottom-right-overlay {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
background-color: rgba(35, 35, 35, 0.75); padding: 0;
color: #fff; margin: 0;
border-radius: 2px;
padding: 2px;
font-size: 16px; font-size: 16px;
right: 0.25em;
bottom: -0.75em;
} }
.watched { .top-left-overlay { top: 0.6em; left: 0.6em; }
z-index: 100; .bottom-right-overlay { bottom: 0.6em; right: 0.6em; }
position: absolute;
background-color: rgba(35, 35, 35, 0.75); .length {
padding: 1px;
margin: -2px 0;
color: #fff; color: #fff;
border-radius: 2px; border-radius: 3px;
padding: 4px 8px 4px 8px;
font-size: 16px;
left: 0.2em;
top: -0.7em;
} }
.length, .top-left-overlay button {
color: #eee;
background-color: rgba(35, 35, 35, 0.85) !important;
}
/* /*
* Navbar * Navbar
*/ */
@ -267,6 +323,11 @@ input[type="search"]::-webkit-search-cancel-button {
margin-right: 1em; margin-right: 1em;
} }
/*
* Responsive rules
*/
@media only screen and (max-aspect-ratio: 16/9) { @media only screen and (max-aspect-ratio: 16/9) {
.player-dimensions.vjs-fluid { .player-dimensions.vjs-fluid {
padding-top: 46.86% !important; padding-top: 46.86% !important;
@ -285,20 +346,28 @@ input[type="search"]::-webkit-search-cancel-button {
.navbar > div { .navbar > div {
display: flex; display: flex;
justify-content: center; justify-content: center;
} margin-bottom: 25px;
.navbar > div:not(:last-child) {
margin-bottom: 1em;
} }
.navbar > .searchbar > form { .navbar > .searchbar > form {
width: 60%; width: 75%;
} }
h1 { h1 {
font-size: 1.25em; font-size: 1.25em;
margin: 0.42em 0; margin: 0.42em 0;
} }
/* Space out the subscribe & RSS buttons and align them to the left */
.title.flexible { display: block; }
.title.flexible > .flex-right { margin: 0.75em 0; justify-content: flex-start; }
/* Space out buttons to make them easier to tap */
.user-field { font-size: 125%; }
.user-field > :not(:last-child) { margin-right: 1.75em; }
.icon-buttons { font-size: 125%; }
.icon-buttons > :not(:last-child) { margin-right: 0.75em; }
} }
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
@ -315,10 +384,6 @@ input[type="search"]::-webkit-search-cancel-button {
.video-card-row { margin: 15px 0; } .video-card-row { margin: 15px 0; }
.flexible { display: flex; }
.flex-left { flex: 1 1 100%; flex-wrap: wrap; }
.flex-right { flex: 1 0 auto; flex-wrap: nowrap; }
p.channel-name { margin: 0; } p.channel-name { margin: 0; }
p.video-data { margin: 0; font-weight: bold; font-size: 80%; } p.video-data { margin: 0; font-weight: bold; font-size: 80%; }
@ -347,6 +412,22 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; }
border: none; border: none;
} }
/*
* Page navigation
*/
.page-nav-container { margin: 15px 0 30px 0; }
.page-prev-container { text-align: start; }
.page-next-container { text-align: end; }
.page-prev-container,
.page-next-container {
display: inline-block;
}
/* /*
* Footer * Footer
*/ */
@ -389,6 +470,7 @@ span > select {
word-wrap: normal; word-wrap: normal;
} }
/* /*
* Light theme * Light theme
*/ */
@ -401,9 +483,18 @@ span > select {
color: #075A9E !important; color: #075A9E !important;
} }
.light-theme a.pure-button-primary:hover, .light-theme .pure-button-primary:hover,
.light-theme a.pure-button-primary:focus { .light-theme .pure-button-primary:focus,
.light-theme .pure-button-secondary:hover,
.light-theme .pure-button-secondary:focus {
color: #fff !important; color: #fff !important;
border-color: rgba(0, 182, 240, 0.75) !important;
background-color: rgba(0, 182, 240, 0.75) !important;
}
.light-theme .pure-button-secondary:not(.low-profile) {
color: #335d7a;
background-color: #fff2;
} }
.light-theme a { .light-theme a {
@ -431,9 +522,18 @@ span > select {
color: #075A9E !important; color: #075A9E !important;
} }
.no-theme a.pure-button-primary:hover, .no-theme .pure-button-primary:hover,
.no-theme a.pure-button-primary:focus { .no-theme .pure-button-primary:focus,
.no-theme .pure-button-secondary:hover,
.no-theme .pure-button-secondary:focus {
color: #fff !important; color: #fff !important;
border-color: rgba(0, 182, 240, 0.75) !important;
background-color: rgba(0, 182, 240, 0.75) !important;
}
.no-theme .pure-button-secondary:not(.low-profile) {
color: #335d7a;
background-color: #fff2;
} }
.no-theme a { .no-theme a {
@ -453,6 +553,7 @@ span > select {
} }
} }
/* /*
* Dark theme * Dark theme
*/ */
@ -465,6 +566,20 @@ span > select {
color: rgb(0, 182, 240); color: rgb(0, 182, 240);
} }
.dark-theme .pure-button-primary:hover,
.dark-theme .pure-button-primary:focus,
.dark-theme .pure-button-secondary:hover,
.dark-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgb(0, 182, 240) !important;
background-color: rgba(0, 182, 240, 1) !important;
}
.dark-theme .pure-button-secondary {
background-color: #0002;
color: #ddd;
}
.dark-theme a { .dark-theme a {
color: #a0a0a0; color: #a0a0a0;
text-decoration: none; text-decoration: none;
@ -505,6 +620,20 @@ body.dark-theme {
color: rgb(0, 182, 240); color: rgb(0, 182, 240);
} }
.no-theme .pure-button-primary:hover,
.no-theme .pure-button-primary:focus,
.no-theme .pure-button-secondary:hover,
.no-theme .pure-button-secondary:focus {
color: #fff !important;
border-color: rgb(0, 182, 240) !important;
background-color: rgba(0, 182, 240, 1) !important;
}
.no-theme .pure-button-secondary {
background-color: #0002;
color: #ddd;
}
.no-theme a { .no-theme a {
color: #a0a0a0; color: #a0a0a0;
text-decoration: none; text-decoration: none;
@ -539,6 +668,12 @@ body.dark-theme {
} }
} }
/*
* Miscellanous
*/
/*With commit d9528f5 all contents of the page is now within a flexbox. However, /*With commit d9528f5 all contents of the page is now within a flexbox. However,
the hr element is rendered improperly within one. the hr element is rendered improperly within one.
See https://stackoverflow.com/a/34372979 for more info */ See https://stackoverflow.com/a/34372979 for more info */
@ -576,12 +711,7 @@ label[for="music-desc-expansion"]:hover {
} }
/* Bidi (bidirectional text) support */ /* Bidi (bidirectional text) support */
h1, h1, h2, h3, h4, h5, p,
h2,
h3,
h4,
h5,
p,
#descriptionWrapper, #descriptionWrapper,
#description-box, #description-box,
#music-description-box { #music-description-box {

6
locales/en-US.json
View File

@ -9,6 +9,11 @@
"generic_subscribers_count_plural": "{{count}} subscribers", "generic_subscribers_count_plural": "{{count}} subscribers",
"generic_subscriptions_count": "{{count}} subscription", "generic_subscriptions_count": "{{count}} subscription",
"generic_subscriptions_count_plural": "{{count}} subscriptions", "generic_subscriptions_count_plural": "{{count}} subscriptions",
"generic_button_delete": "Delete",
"generic_button_edit": "Edit",
"generic_button_save": "Save",
"generic_button_cancel": "Cancel",
"generic_button_rss": "RSS",
"LIVE": "LIVE", "LIVE": "LIVE",
"Shared `x` ago": "Shared `x` ago", "Shared `x` ago": "Shared `x` ago",
"Unsubscribe": "Unsubscribe", "Unsubscribe": "Unsubscribe",
@ -170,6 +175,7 @@
"Title": "Title", "Title": "Title",
"Playlist privacy": "Playlist privacy", "Playlist privacy": "Playlist privacy",
"Editing playlist `x`": "Editing playlist `x`", "Editing playlist `x`": "Editing playlist `x`",
"playlist_button_add_items": "Add videos",
"Show more": "Show more", "Show more": "Show more",
"Show less": "Show less", "Show less": "Show less",
"Watch on YouTube": "Watch on YouTube", "Watch on YouTube": "Watch on YouTube",

6
locales/fr.json
View File

@ -9,6 +9,11 @@
"generic_subscribers_count_plural": "{{count}} abonnés", "generic_subscribers_count_plural": "{{count}} abonnés",
"generic_subscriptions_count": "{{count}} abonnement", "generic_subscriptions_count": "{{count}} abonnement",
"generic_subscriptions_count_plural": "{{count}} abonnements", "generic_subscriptions_count_plural": "{{count}} abonnements",
"generic_button_delete": "Supprimer",
"generic_button_edit": "Editer",
"generic_button_save": "Enregistrer",
"generic_button_cancel": "Annuler",
"generic_button_rss": "RSS",
"LIVE": "EN DIRECT", "LIVE": "EN DIRECT",
"Shared `x` ago": "Ajoutée il y a `x`", "Shared `x` ago": "Ajoutée il y a `x`",
"Unsubscribe": "Se désabonner", "Unsubscribe": "Se désabonner",
@ -149,6 +154,7 @@
"Title": "Titre", "Title": "Titre",
"Playlist privacy": "Paramètres de confidentialité de la liste de lecture", "Playlist privacy": "Paramètres de confidentialité de la liste de lecture",
"Editing playlist `x`": "Modifier la liste de lecture `x`", "Editing playlist `x`": "Modifier la liste de lecture `x`",
"playlist_button_add_items": "Ajouter des vidéos",
"Show more": "Afficher plus", "Show more": "Afficher plus",
"Show less": "Afficher moins", "Show less": "Afficher moins",
"Watch on YouTube": "Voir la vidéo sur Youtube", "Watch on YouTube": "Voir la vidéo sur Youtube",

97
src/invidious/frontend/pagination.cr Normal file
View File

@ -0,0 +1,97 @@
require "uri"
module Invidious::Frontend::Pagination
extend self
private def previous_page(str : String::Builder, locale : String?, url : String)
# Link
str << %(<a href=") << url << %(" class="pure-button pure-button-secondary">)
if locale_is_rtl?(locale)
# Inverted arrow ("previous" points to the right)
str << translate(locale, "Previous page")
str << "&nbsp;&nbsp;"
str << %(<i class="icon ion-ios-arrow-forward"></i>)
else
# Regular arrow ("previous" points to the left)
str << %(<i class="icon ion-ios-arrow-back"></i>)
str << "&nbsp;&nbsp;"
str << translate(locale, "Previous page")
end
str << "</a>"
end
private def next_page(str : String::Builder, locale : String?, url : String)
# Link
str << %(<a href=") << url << %(" class="pure-button pure-button-secondary">)
if locale_is_rtl?(locale)
# Inverted arrow ("next" points to the left)
str << %(<i class="icon ion-ios-arrow-back"></i>)
str << "&nbsp;&nbsp;"
str << translate(locale, "Next page")
else
# Regular arrow ("next" points to the right)
str << translate(locale, "Next page")
str << "&nbsp;&nbsp;"
str << %(<i class="icon ion-ios-arrow-forward"></i>)
end
str << "</a>"
end
def nav_numeric(locale : String?, *, base_url : String | URI, current_page : Int, show_next : Bool = true)
return String.build do |str|
str << %(<div class="h-box">\n)
str << %(<div class="page-nav-container flexible">\n)
str << %(<div class="page-prev-container flex-left">)
if current_page > 1
params_prev = URI::Params{"page" => (current_page - 1).to_s}
url_prev = HttpServer::Utils.add_params_to_url(base_url, params_prev)
self.previous_page(str, locale, url_prev.to_s)
end
str << %(</div>\n)
str << %(<div class="page-next-container flex-right">)
if show_next
params_next = URI::Params{"page" => (current_page + 1).to_s}
url_next = HttpServer::Utils.add_params_to_url(base_url, params_next)
self.next_page(str, locale, url_next.to_s)
end
str << %(</div>\n)
str << %(</div>\n)
str << %(</div>\n\n)
end
end
def nav_ctoken(locale : String?, *, base_url : String | URI, ctoken : String?)
return String.build do |str|
str << %(<div class="h-box">\n)
str << %(<div class="page-nav-container flexible">\n)
str << %(<div class="page-prev-container flex-left"></div>\n)
str << %(<div class="page-next-container flex-right">)
if !ctoken.nil?
params_next = URI::Params{"continuation" => ctoken}
url_next = HttpServer::Utils.add_params_to_url(base_url, params_next)
self.next_page(str, locale, url_next.to_s)
end
str << %(</div>\n)
str << %(</div>\n)
str << %(</div>\n\n)
end
end
end

9
src/invidious/helpers/i18n.cr
View File

@ -165,3 +165,12 @@ def translate_bool(locale : String?, translation : Bool)
return translate(locale, "No") return translate(locale, "No")
end end
end end
def locale_is_rtl?(locale : String?)
# Fallback to en-US
return false if locale.nil?
# Arabic, Persian, Hebrew
# See https://en.wikipedia.org/wiki/Right-to-left_script#List_of_RTL_scripts
return {"ar", "fa", "he"}.includes? locale
end

20
src/invidious/http_server/utils.cr
View File

@ -1,3 +1,5 @@
require "uri"
module Invidious::HttpServer module Invidious::HttpServer
module Utils module Utils
extend self extend self
@ -16,5 +18,23 @@ module Invidious::HttpServer
return "#{url.request_target}?#{params}" return "#{url.request_target}?#{params}"
end end
end end
def add_params_to_url(url : String | URI, params : URI::Params) : URI
url = URI.parse(url) if url.is_a?(String)
url_query = url.query || ""
# Append the parameters
url.query = String.build do |str|
if !url_query.empty?
str << url_query
str << '&'
end
str << params
end
return url
end
end end
end end

8
src/invidious/routes/feeds.cr
View File

@ -102,6 +102,10 @@ module Invidious::Routes::Feeds
end end
env.set "user", user env.set "user", user
# Used for pagination links
base_url = "/feed/subscriptions"
base_url += "?max_results=#{max_results}" if env.params.query.has_key?("max_results")
templated "feeds/subscriptions" templated "feeds/subscriptions"
end end
@ -129,6 +133,10 @@ module Invidious::Routes::Feeds
end end
watched ||= [] of String watched ||= [] of String
# Used for pagination links
base_url = "/feed/history"
base_url += "?max_results=#{max_results}" if env.params.query.has_key?("max_results")
templated "feeds/history" templated "feeds/history"
end end

32
src/invidious/routes/playlists.cr
View File

@ -163,13 +163,20 @@ module Invidious::Routes::Playlists
end end
begin begin
videos = get_playlist_videos(playlist, offset: (page - 1) * 100) items = get_playlist_videos(playlist, offset: (page - 1) * 100)
rescue ex rescue ex
videos = [] of PlaylistVideo items = [] of PlaylistVideo
end end
csrf_token = generate_response(sid, {":edit_playlist"}, HMAC_KEY) csrf_token = generate_response(sid, {":edit_playlist"}, HMAC_KEY)
# Pagination
page_nav_html = Frontend::Pagination.nav_numeric(locale,
base_url: "/playlist?list=#{playlist.id}",
current_page: page,
show_next: (items.size == 100)
)
templated "edit_playlist" templated "edit_playlist"
end end
@ -247,11 +254,19 @@ module Invidious::Routes::Playlists
begin begin
query = Invidious::Search::Query.new(env.params.query, :playlist, region) query = Invidious::Search::Query.new(env.params.query, :playlist, region)
videos = query.process.select(SearchVideo).map(&.as(SearchVideo)) items = query.process.select(SearchVideo).map(&.as(SearchVideo))
rescue ex rescue ex
videos = [] of SearchVideo items = [] of SearchVideo
end end
# Pagination
query_encoded = URI.encode_www_form(query.try &.text || "", space_to_plus: true)
page_nav_html = Frontend::Pagination.nav_numeric(locale,
base_url: "/add_playlist_items?list=#{playlist.id}&q=#{query_encoded}",
current_page: page,
show_next: (items.size >= 20)
)
env.set "add_playlist_items", plid env.set "add_playlist_items", plid
templated "add_playlist_items" templated "add_playlist_items"
end end
@ -418,7 +433,7 @@ module Invidious::Routes::Playlists
end end
begin begin
videos = get_playlist_videos(playlist, offset: (page - 1) * 200) items = get_playlist_videos(playlist, offset: (page - 1) * 200)
rescue ex rescue ex
return error_template(500, "Error encountered while retrieving playlist videos.<br>#{ex.message}") return error_template(500, "Error encountered while retrieving playlist videos.<br>#{ex.message}")
end end
@ -427,6 +442,13 @@ module Invidious::Routes::Playlists
env.set "remove_playlist_items", plid env.set "remove_playlist_items", plid
end end
# Pagination
page_nav_html = Frontend::Pagination.nav_numeric(locale,
base_url: "/playlist?list=#{playlist.id}",
current_page: page,
show_next: (page_count != 1 && page < page_count)
)
templated "playlist" templated "playlist"
end end

26
src/invidious/routes/search.cr
View File

@ -52,24 +52,28 @@ module Invidious::Routes::Search
user = env.get? "user" user = env.get? "user"
begin begin
videos = query.process items = query.process
rescue ex : ChannelSearchException rescue ex : ChannelSearchException
return error_template(404, "Unable to find channel with id of '#{HTML.escape(ex.channel)}'. Are you sure that's an actual channel id? It should look like 'UC4QobU6STFB0P71PMvOGN5A'.") return error_template(404, "Unable to find channel with id of '#{HTML.escape(ex.channel)}'. Are you sure that's an actual channel id? It should look like 'UC4QobU6STFB0P71PMvOGN5A'.")
rescue ex rescue ex
return error_template(500, ex) return error_template(500, ex)
end end
params = query.to_http_params
url_prev_page = "/search?#{params}&page=#{query.page - 1}"
url_next_page = "/search?#{params}&page=#{query.page + 1}"
redirect_url = Invidious::Frontend::Misc.redirect_url(env) redirect_url = Invidious::Frontend::Misc.redirect_url(env)
# Pagination
page_nav_html = Frontend::Pagination.nav_numeric(locale,
base_url: "/search?#{query.to_http_params}",
current_page: query.page,
show_next: (items.size >= 20)
)
if query.type == Invidious::Search::Query::Type::Channel if query.type == Invidious::Search::Query::Type::Channel
env.set "search", "channel:#{query.channel} #{query.text}" env.set "search", "channel:#{query.channel} #{query.text}"
else else
env.set "search", query.text env.set "search", query.text
end end
templated "search" templated "search"
end end
end end
@ -91,16 +95,18 @@ module Invidious::Routes::Search
end end
begin begin
videos = Invidious::Hashtag.fetch(hashtag, page) items = Invidious::Hashtag.fetch(hashtag, page)
rescue ex rescue ex
return error_template(500, ex) return error_template(500, ex)
end end
params = env.params.query.empty? ? "" : "&#{env.params.query}" # Pagination
hashtag_encoded = URI.encode_www_form(hashtag, space_to_plus: false) hashtag_encoded = URI.encode_www_form(hashtag, space_to_plus: false)
url_prev_page = "/hashtag/#{hashtag_encoded}?page=#{page - 1}#{params}" page_nav_html = Frontend::Pagination.nav_numeric(locale,
url_next_page = "/hashtag/#{hashtag_encoded}?page=#{page + 1}#{params}" base_url: "/hashtag/#{hashtag_encoded}",
current_page: page,
show_next: (items.size >= 60)
)
templated "hashtag" templated "hashtag"
end end

30
src/invidious/views/add_playlist_items.ecr
View File

@ -31,33 +31,5 @@
</script> </script>
<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
<div class="pure-g">
<% videos.each_slice(4) do |slice| %>
<% slice.each do |item| %>
<%= rendered "components/item" %>
<% end %>
<% end %>
</div>
<script src="/js/watched_indicator.js"></script> <%= rendered "components/items_paginated" %>
<% if query %>
<%- query_encoded = URI.encode_www_form(query.text, space_to_plus: true) -%>
<div class="pure-g h-box">
<div class="pure-u-1 pure-u-lg-1-5">
<% if query.page > 1 %>
<a href="/add_playlist_items?list=<%= plid %>&q=<%= query_encoded %>&page=<%= page - 1 %>">
<%= translate(locale, "Previous page") %>
</a>
<% end %>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<% if videos.size >= 20 %>
<a href="/add_playlist_items?list=<%= plid %>&q=<%= query_encoded %>&page=<%= page + 1 %>">
<%= translate(locale, "Next page") %>
</a>
<% end %>
</div>
</div>
<% end %>

25
src/invidious/views/channel.ecr
View File

@ -17,7 +17,12 @@
youtube_url = "https://www.youtube.com#{relative_url}" youtube_url = "https://www.youtube.com#{relative_url}"
redirect_url = Invidious::Frontend::Misc.redirect_url(env) redirect_url = Invidious::Frontend::Misc.redirect_url(env)
-%>
page_nav_html = IV::Frontend::Pagination.nav_ctoken(locale,
base_url: relative_url,
ctoken: next_continuation
)
%>
<% content_for "header" do %> <% content_for "header" do %>
<%- if selected_tab.videos? -%> <%- if selected_tab.videos? -%>
@ -45,21 +50,5 @@
<hr> <hr>
</div> </div>
<div class="pure-g">
<% items.each do |item| %>
<%= rendered "components/item" %>
<% end %>
</div>
<script src="/js/watched_indicator.js"></script> <%= rendered "components/items_paginated" %>
<div class="pure-g h-box">
<div class="pure-u-1 pure-u-md-4-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<% if next_continuation %>
<a href="<%= relative_url %>?continuation=<%= next_continuation %><% if sort_options.any? sort_by %>&sort_by=<%= sort_by %><% end %>">
<%= translate(locale, "Next page") %>
</a>
<% end %>
</div>
</div>

29
src/invidious/views/components/channel_info.ecr
View File

@ -8,29 +8,30 @@
</div> </div>
<% end %> <% end %>
<div class="pure-g h-box"> <div class="pure-g h-box flexible title">
<div class="pure-u-2-3"> <div class="pure-u-1-2 flex-left flexible">
<div class="channel-profile"> <div class="channel-profile">
<img src="/ggpht<%= channel_profile_pic %>" alt="" /> <img src="/ggpht<%= channel_profile_pic %>" alt="" />
<span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %> <span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
</div> </div>
</div> </div>
<div class="pure-u-1-3">
<h3 style="text-align:right"> <div class="pure-u-1-2 flex-right flexible button-container">
<a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a> <div class="pure-u">
</h3> <% sub_count_text = number_to_short_text(channel.sub_count) %>
<%= rendered "components/subscribe_widget" %>
</div>
<div class="pure-u">
<a class="pure-button pure-button-secondary" dir="auto" href="/feed/channel/<%= ucid %>">
<i class="icon ion-logo-rss"></i>&nbsp;<%= translate(locale, "generic_button_rss") %>
</a>
</div>
</div> </div>
</div> </div>
<div class="h-box"> <div class="h-box">
<div id="descriptionWrapper"> <div id="descriptionWrapper"><p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p></div>
<p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
</div>
</div>
<div class="h-box">
<% sub_count_text = number_to_short_text(channel.sub_count) %>
<%= rendered "components/subscribe_widget" %>
</div> </div>
<div class="pure-g h-box"> <div class="pure-g h-box">

237
src/invidious/views/components/item.ecr
View File

@ -1,157 +1,146 @@
<% item_watched = !item.is_a?(SearchChannel | SearchPlaylist | InvidiousPlaylist | Category) && env.get?("user").try &.as(User).watched.index(item.id) != nil %> <%-
thin_mode = env.get("preferences").as(Preferences).thin_mode
item_watched = !item.is_a?(SearchChannel | SearchPlaylist | InvidiousPlaylist | Category) && env.get?("user").try &.as(User).watched.index(item.id) != nil
author_verified = item.responds_to?(:author_verified) && item.author_verified
-%>
<div class="pure-u-1 pure-u-md-1-4"> <div class="pure-u-1 pure-u-md-1-4">
<div class="h-box"> <div class="h-box">
<% case item when %> <% case item when %>
<% when SearchChannel %> <% when SearchChannel %>
<a href="/channel/<%= item.ucid %>"> <% if !thin_mode %>
<% if !env.get("preferences").as(Preferences).thin_mode %> <a tabindex="-1" href="/channel/<%= item.ucid %>">
<center> <center>
<img loading="lazy" tabindex="-1" style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>" alt="" /> <img loading="lazy" style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>" alt="" />
</center> </center>
<% end %> </a>
<p dir="auto"><%= HTML.escape(item.author) %><% if !item.author_verified.nil? && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></p> <%- else -%>
</a> <div class="thumbnail-placeholder" style="width:56.25%"></div>
<% end %>
<div class="video-card-row flexible">
<div class="flex-left"><a href="/channel/<%= item.ucid %>">
<p class="channel-name" dir="auto"><%= HTML.escape(item.author) %>
<%- if author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end -%>
</p>
</a></div>
</div>
<p><%= translate_count(locale, "generic_subscribers_count", item.subscriber_count, NumberFormatting::Separator) %></p> <p><%= translate_count(locale, "generic_subscribers_count", item.subscriber_count, NumberFormatting::Separator) %></p>
<% if !item.auto_generated %><p><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p><% end %> <% if !item.auto_generated %><p><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p><% end %>
<h5><%= item.description_html %></h5> <h5><%= item.description_html %></h5>
<% when SearchPlaylist, InvidiousPlaylist %> <% when SearchPlaylist, InvidiousPlaylist %>
<% if item.id.starts_with? "RD" %> <%-
<% url = "/mix?list=#{item.id}&continuation=#{URI.parse(item.thumbnail || "/vi/-----------").request_target.split("/")[2]}" %> if item.id.starts_with? "RD"
<% else %> link_url = "/mix?list=#{item.id}&continuation=#{URI.parse(item.thumbnail || "/vi/-----------").request_target.split("/")[2]}"
<% url = "/playlist?list=#{item.id}" %> else
<% end %> link_url = "/playlist?list=#{item.id}"
end
-%>
<a style="width:100%" href="<%= url %>"> <div class="thumbnail">
<% if !env.get("preferences").as(Preferences).thin_mode %> <%- if !thin_mode %>
<div class="thumbnail"> <a tabindex="-1" href="<%= link_url %>">
<img loading="lazy" tabindex="-1" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>" alt="" /> <img loading="lazy" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>" alt="" />
<p class="length"><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p> </a>
</div> <%- else -%>
<% end %> <div class="thumbnail-placeholder"></div>
<p dir="auto"><%= HTML.escape(item.title) %></p> <%- end -%>
</a>
<a href="/channel/<%= item.ucid %>">
<p dir="auto"><b><%= HTML.escape(item.author) %><% if !item.is_a?(InvidiousPlaylist) && !item.author_verified.nil? && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></b></p>
</a>
<% when MixVideo %>
<a href="/watch?v=<%= item.id %>&list=<%= item.rdid %>">
<% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail">
<img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
<% if item.length_seconds != 0 %>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
<% end %>
<% if item_watched %> <div class="bottom-right-overlay">
<div class="watched-overlay"></div> <p class="length"><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p>
<div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div> </div>
<% end %> </div>
</div>
<% end %>
<p dir="auto"><%= HTML.escape(item.title) %></p>
</a>
<a href="/channel/<%= item.ucid %>">
<p dir="auto"><b><%= HTML.escape(item.author) %></b></p>
</a>
<% when PlaylistVideo %>
<a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.plid %>&index=<%= item.index %>">
<% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail">
<img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
<% if plid_form = env.get?("remove_playlist_items") %> <div class="video-card-row">
<form data-onsubmit="return_false" action="/playlist_ajax?action_remove_video=1&set_video_id=<%= item.index %>&playlist_id=<%= plid_form %>&referer=<%= env.get("current_page") %>" method="post"> <a href="<%= link_url %>"><p dir="auto"><%= HTML.escape(item.title) %></p></a>
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched">
<button type="submit" style="all:unset" data-onclick="remove_playlist_item" data-index="<%= item.index %>" data-plid="<%= plid_form %>"><i class="icon ion-md-trash"></i></button>
</p>
</form>
<% end %>
<% if item.responds_to?(:live_now) && item.live_now %>
<p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
<% elsif item.length_seconds != 0 %>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
<% end %>
<% if item_watched %>
<div class="watched-overlay"></div>
<div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
<% end %>
</div>
<% end %>
<p dir="auto"><%= HTML.escape(item.title) %></p>
</a>
<div class="video-card-row flexible">
<div class="flex-left"><a href="/channel/<%= item.ucid %>">
<p class="channel-name" dir="auto"><%= HTML.escape(item.author) %></p>
</a></div>
<% endpoint_params = "?v=#{item.id}&list=#{item.plid}" %>
<%= rendered "components/video-context-buttons" %>
</div> </div>
<div class="video-card-row flexible"> <div class="video-card-row flexible">
<div class="flex-left"> <div class="flex-left"><a href="/channel/<%= item.ucid %>">
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> <p class="channel-name" dir="auto"><%= HTML.escape(item.author) %>
<p dir="auto"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></p> <%- if author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end -%>
<% elsif Time.utc - item.published > 1.minute %> </p>
<p dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p> </a></div>
<% end %>
</div>
<% if item.responds_to?(:views) && item.views %>
<div class="flex-right">
<p dir="auto"><%= translate_count(locale, "generic_views_count", item.views || 0, NumberFormatting::Short) %></p>
</div>
<% end %>
</div> </div>
<% when Category %> <% when Category %>
<% else %> <% else %>
<a style="width:100%" href="/watch?v=<%= item.id %>"> <%-
<% if !env.get("preferences").as(Preferences).thin_mode %> # `endpoint_params` is used for the "video-context-buttons" component
<div class="thumbnail"> if item.is_a?(PlaylistVideo)
<img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" /> link_url = "/watch?v=#{item.id}&list=#{item.plid}&index=#{item.index}"
<% if env.get? "show_watched" %> endpoint_params = "?v=#{item.id}&list=#{item.plid}"
<form data-onsubmit="return_false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post"> elsif item.is_a?(MixVideo)
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>"> link_url = "/watch?v=#{item.id}&list=#{item.rdid}"
<p class="watched"> endpoint_params = "?v=#{item.id}&list=#{item.rdid}"
<button type="submit" style="all:unset" data-onclick="mark_watched" data-id="<%= item.id %>"> else
<i data-mouse="switch_classes" data-switch-classes="ion-ios-eye-off,ion-ios-eye" class="icon ion-ios-eye"></i> link_url = "/watch?v=#{item.id}"
</button> endpoint_params = "?v=#{item.id}"
</p> end
</form> -%>
<% elsif plid_form = env.get? "add_playlist_items" %>
<form data-onsubmit="return_false" action="/playlist_ajax?action_add_video=1&video_id=<%= item.id %>&playlist_id=<%= plid_form %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched">
<button type="submit" style="all:unset" data-onclick="add_playlist_item" data-id="<%= item.id %>" data-plid="<%= plid_form %>"><i class="icon ion-md-add"></i></button>
</p>
</form>
<% end %>
<% if item.responds_to?(:live_now) && item.live_now %> <div class="thumbnail">
<p class="length" dir="auto"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p> <%- if !thin_mode -%>
<% elsif item.length_seconds != 0 %> <a tabindex="-1" href="<%= link_url %>">
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p> <img loading="lazy" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
<% end %>
<% if item_watched %> <% if item_watched %>
<div class="watched-overlay"></div> <div class="watched-overlay"></div>
<div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div> <div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
<% end %> <% end %>
</div> </a>
<% end %> <%- else -%>
<p dir="auto"><%= HTML.escape(item.title) %></p> <div class="thumbnail-placeholder"></div>
</a> <%- end -%>
<div class="top-left-overlay">
<%- if env.get? "show_watched" -%>
<form data-onsubmit="return_false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<button type="submit" class="pure-button pure-button-secondary low-profile"
data-onclick="mark_watched" data-id="<%= item.id %>">
<i data-mouse="switch_classes" data-switch-classes="ion-ios-eye-off,ion-ios-eye" class="icon ion-ios-eye"></i>
</button>
</form>
<%- end -%>
<%- if plid_form = env.get?("add_playlist_items") -%>
<%- form_parameters = "action_add_video=1&video_id=#{item.id}&playlist_id=#{plid_form}&referer=#{env.get("current_page")}" -%>
<form data-onsubmit="return_false" action="/playlist_ajax?<%= form_parameters %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<button type="submit" class="pure-button pure-button-secondary low-profile"
data-onclick="add_playlist_item" data-id="<%= item.id %>" data-plid="<%= plid_form %>"><i class="icon ion-md-add"></i></button>
</form>
<%- elsif item.is_a?(PlaylistVideo) && (plid_form = env.get?("remove_playlist_items")) -%>
<%- form_parameters = "action_remove_video=1&set_video_id=#{item.index}&playlist_id=#{plid_form}&referer=#{env.get("current_page")}" -%>
<form data-onsubmit="return_false" action="/playlist_ajax?<%= form_parameters %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<button type="submit" class="pure-button pure-button-secondary low-profile"
data-onclick="remove_playlist_item" data-index="<%= item.index %>" data-plid="<%= plid_form %>"><i class="icon ion-md-trash"></i></button>
</form>
<%- end -%>
</div>
<div class="bottom-right-overlay">
<%- if item.responds_to?(:live_now) && item.live_now -%>
<p class="length" dir="auto"><i class="icon ion-ios-play-circle"></i>&nbsp;<%= translate(locale, "LIVE") %></p>
<%- elsif item.length_seconds != 0 -%>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
<%- end -%>
</div>
</div>
<div class="video-card-row">
<a href="<%= link_url %>"><p dir="auto"><%= HTML.escape(item.title) %></p></a>
</div>
<div class="video-card-row flexible"> <div class="video-card-row flexible">
<div class="flex-left"><a href="/channel/<%= item.ucid %>"> <div class="flex-left"><a href="/channel/<%= item.ucid %>">
<p class="channel-name" dir="auto"><%= HTML.escape(item.author) %><% if !item.is_a?(ChannelVideo) && !item.author_verified.nil? && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></p> <p class="channel-name" dir="auto"><%= HTML.escape(item.author) %>
<%- if author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end -%>
</p>
</a></div> </a></div>
<% endpoint_params = "?v=#{item.id}" %>
<%= rendered "components/video-context-buttons" %> <%= rendered "components/video-context-buttons" %>
</div> </div>
@ -159,7 +148,7 @@
<div class="flex-left"> <div class="flex-left">
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
<p class="video-data" dir="auto"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></p> <p class="video-data" dir="auto"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></p>
<% elsif Time.utc - item.published > 1.minute %> <% elsif item.responds_to?(:published) && (Time.utc - item.published) > 1.minute %>
<p class="video-data" dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p> <p class="video-data" dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p>
<% end %> <% end %>
</div> </div>

11
src/invidious/views/components/items_paginated.ecr Normal file
View File

@ -0,0 +1,11 @@
<%= page_nav_html %>
<div class="pure-g">
<%- items.each do |item| -%>
<%= rendered "components/item" %>
<%- end -%>
</div>
<%= page_nav_html %>
<script src="/js/watched_indicator.js"></script>

6
src/invidious/views/components/subscribe_widget.ecr
View File

@ -1,22 +1,18 @@
<% if user %> <% if user %>
<% if subscriptions.includes? ucid %> <% if subscriptions.includes? ucid %>
<p>
<form action="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post"> <form action="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>"> <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<button data-type="unsubscribe" id="subscribe" class="pure-button pure-button-primary"> <button data-type="unsubscribe" id="subscribe" class="pure-button pure-button-primary">
<b><input style="all:unset" type="submit" value="<%= translate(locale, "Unsubscribe") %> | <%= sub_count_text %>"></b> <b><input style="all:unset" type="submit" value="<%= translate(locale, "Unsubscribe") %> | <%= sub_count_text %>"></b>
</button> </button>
</form> </form>
</p>
<% else %> <% else %>
<p>
<form action="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post"> <form action="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>"> <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<button data-type="subscribe" id="subscribe" class="pure-button pure-button-primary"> <button data-type="subscribe" id="subscribe" class="pure-button pure-button-primary">
<b><input style="all:unset" type="submit" value="<%= translate(locale, "Subscribe") %> | <%= sub_count_text %>"></b> <b><input style="all:unset" type="submit" value="<%= translate(locale, "Subscribe") %> | <%= sub_count_text %>"></b>
</button> </button>
</form> </form>
</p>
<% end %> <% end %>
<script id="subscribe_data" type="application/json"> <script id="subscribe_data" type="application/json">
@ -33,10 +29,8 @@
</script> </script>
<script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script>
<% else %> <% else %>
<p>
<a id="subscribe" class="pure-button pure-button-primary" <a id="subscribe" class="pure-button pure-button-primary"
href="/login?referer=<%= env.get("current_page") %>"> href="/login?referer=<%= env.get("current_page") %>">
<b><%= translate(locale, "Subscribe") %> | <%= sub_count_text %></b> <b><%= translate(locale, "Subscribe") %> | <%= sub_count_text %></b>
</a> </a>
</p>
<% end %> <% end %>

4
src/invidious/views/components/video-context-buttons.ecr
View File

@ -1,4 +1,4 @@
<div class="flex-right"> <div class="flex-right flexible">
<div class="icon-buttons"> <div class="icon-buttons">
<a title="<%=translate(locale, "videoinfo_watch_on_youTube")%>" href="https://www.youtube.com/watch<%=endpoint_params%>"> <a title="<%=translate(locale, "videoinfo_watch_on_youTube")%>" href="https://www.youtube.com/watch<%=endpoint_params%>">
<i class="icon ion-logo-youtube"></i> <i class="icon ion-logo-youtube"></i>
@ -6,7 +6,7 @@
<a title="<%=translate(locale, "Audio mode")%>" href="/watch<%=endpoint_params%>&listen=1"> <a title="<%=translate(locale, "Audio mode")%>" href="/watch<%=endpoint_params%>&listen=1">
<i class="icon ion-md-headset"></i> <i class="icon ion-md-headset"></i>
</a> </a>
<% if env.get("preferences").as(Preferences).automatic_instance_redirect%> <% if env.get("preferences").as(Preferences).automatic_instance_redirect%>
<a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=%2Fwatch<%=URI.encode_www_form(endpoint_params)%>"> <a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=%2Fwatch<%=URI.encode_www_form(endpoint_params)%>">
<i class="icon ion-md-jet"></i> <i class="icon ion-md-jet"></i>

89
src/invidious/views/edit_playlist.ecr
View File

@ -6,35 +6,43 @@
<% end %> <% end %>
<form class="pure-form" action="/edit_playlist?list=<%= plid %>" method="post"> <form class="pure-form" action="/edit_playlist?list=<%= plid %>" method="post">
<div class="pure-g h-box"> <div class="h-box flexible">
<div class="pure-u-2-3"> <div class="flex-right button-container">
<div class="pure-u">
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/playlist?list=<%= plid %>">
<i class="icon ion-md-close"></i>&nbsp;<%= translate(locale, "generic_button_cancel") %>
</a>
</div>
<div class="pure-u">
<button class="pure-button pure-button-secondary low-profile" dir="auto" type="submit">
<i class="icon ion-md-save"></i>&nbsp;<%= translate(locale, "generic_button_save") %>
</button>
</div>
<div class="pure-u">
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
<i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "generic_button_delete") %>
</a>
</div>
</div>
</div>
<div class="h-box flexible title">
<div>
<h3><input class="pure-input-1" maxlength="150" name="title" type="text" value="<%= title %>"></h3> <h3><input class="pure-input-1" maxlength="150" name="title" type="text" value="<%= title %>"></h3>
</div>
</div>
<div class="h-box">
<div class="pure-u-1-1">
<b> <b>
<%= HTML.escape(playlist.author) %> | <%= HTML.escape(playlist.author) %> |
<%= translate_count(locale, "generic_videos_count", playlist.video_count) %> | <%= translate_count(locale, "generic_videos_count", playlist.video_count) %> |
<%= translate(locale, "Updated `x` ago", recode_date(playlist.updated, locale)) %> |
<i class="icon <%= {"ion-md-globe", "ion-ios-unlock", "ion-ios-lock"}[playlist.privacy.value] %>"></i>
<select name="privacy">
<% {"Public", "Unlisted", "Private"}.each do |option| %>
<option value="<%= option %>" <% if option == playlist.privacy.to_s %>selected<% end %>><%= translate(locale, option) %></option>
<% end %>
</select>
</b> </b>
</div> <select name="privacy">
<div class="pure-u-1-3" style="text-align:right"> <%- {"Public", "Unlisted", "Private"}.each do |option| -%>
<h3> <option value="<%= option %>" <% if option == playlist.privacy.to_s %>selected<% end %>><%= translate(locale, option) %></option>
<div class="pure-g user-field"> <%- end -%>
<div class="pure-u-1-3"> </select>
<a href="javascript:void(0)">
<button type="submit" style="all:unset">
<i class="icon ion-md-save"></i>
</button>
</a>
</div>
<div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
<div class="pure-u-1-3"><a href="/feed/playlist/<%= plid %>"><i class="icon ion-logo-rss"></i></a></div>
</div>
</h3>
</div> </div>
</div> </div>
@ -44,40 +52,9 @@
<input type="hidden" name="csrf_token" value="<%= HTML.escape(csrf_token) %>"> <input type="hidden" name="csrf_token" value="<%= HTML.escape(csrf_token) %>">
</form> </form>
<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
<div class="h-box" style="text-align:right">
<h3>
<a href="/add_playlist_items?list=<%= plid %>"><i class="icon ion-md-add"></i></a>
</h3>
</div>
<% end %>
<div class="h-box"> <div class="h-box">
<hr> <hr>
</div> </div>
<div class="pure-g">
<% videos.each do |item| %>
<%= rendered "components/item" %>
<% end %>
</div>
<script src="/js/watched_indicator.js"></script> <%= rendered "components/items_paginated" %>
<div class="pure-g h-box">
<div class="pure-u-1 pure-u-lg-1-5">
<% if page > 1 %>
<a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">
<%= translate(locale, "Previous page") %>
</a>
<% end %>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<% if videos.size == 100 %>
<a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">
<%= translate(locale, "Next page") %>
</a>
<% end %>
</div>
</div>

52
src/invidious/views/feeds/history.ecr
View File

@ -31,39 +31,29 @@
<% watched.each do |item| %> <% watched.each do |item| %>
<div class="pure-u-1 pure-u-md-1-4"> <div class="pure-u-1 pure-u-md-1-4">
<div class="h-box"> <div class="h-box">
<a style="width:100%" href="/watch?v=<%= item %>"> <div class="thumbnail">
<% if !env.get("preferences").as(Preferences).thin_mode %> <a style="width:100%" href="/watch?v=<%= item %>">
<div class="thumbnail"> <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg" alt="" />
<img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg" alt="" /> </a>
<form data-onsubmit="return_false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"> <div class="top-left-overlay"><div class="watched">
<p class="watched"> <form data-onsubmit="return_false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
<button type="submit" style="all:unset" data-onclick="mark_unwatched" data-id="<%= item %>"><i class="icon ion-md-trash"></i></button> <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
</p> <button type="submit" class="pure-button pure-button-secondary low-profile"
</form> data-onclick="mark_unwatched" data-id="<%= item %>"><i class="icon ion-md-trash"></i></button>
</div> </form>
<p></p> </div></div>
<% end %> </div>
</a> <p></p>
</div> </div>
</div> </div>
<% end %> <% end %>
</div> </div>
<div class="pure-g h-box"> <%=
<div class="pure-u-1 pure-u-lg-1-5"> IV::Frontend::Pagination.nav_numeric(locale,
<% if page > 1 %> base_url: base_url,
<a href="/feed/history?page=<%= page - 1 %><% if env.params.query["max_results"]? %>&max_results=<%= max_results %><% end %>"> current_page: page,
<%= translate(locale, "Previous page") %> show_next: (watched.size >= max_results)
</a> )
<% end %> %>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<% if watched.size >= max_results %>
<a href="/feed/history?page=<%= page + 1 %><% if env.params.query["max_results"]? %>&max_results=<%= max_results %><% end %>">
<%= translate(locale, "Next page") %>
</a>
<% end %>
</div>
</div>

25
src/invidious/views/feeds/subscriptions.ecr
View File

@ -56,6 +56,7 @@
</script> </script>
<script src="/js/watched_widget.js"></script> <script src="/js/watched_widget.js"></script>
<div class="pure-g"> <div class="pure-g">
<% videos.each do |item| %> <% videos.each do |item| %>
<%= rendered "components/item" %> <%= rendered "components/item" %>
@ -64,20 +65,10 @@
<script src="/js/watched_indicator.js"></script> <script src="/js/watched_indicator.js"></script>
<div class="pure-g h-box"> <%=
<div class="pure-u-1 pure-u-lg-1-5"> IV::Frontend::Pagination.nav_numeric(locale,
<% if page > 1 %> base_url: base_url,
<a href="/feed/subscriptions?page=<%= page - 1 %><% if env.params.query["max_results"]? %>&max_results=<%= max_results %><% end %>"> current_page: page,
<%= translate(locale, "Previous page") %> show_next: ((videos.size + notifications.size) == max_results)
</a> )
<% end %> %>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<% if (videos.size + notifications.size) == max_results %>
<a href="/feed/subscriptions?page=<%= page + 1 %><% if env.params.query["max_results"]? %>&max_results=<%= max_results %><% end %>">
<%= translate(locale, "Next page") %>
</a>
<% end %>
</div>
</div>

35
src/invidious/views/hashtag.ecr
View File

@ -4,38 +4,5 @@
<hr/> <hr/>
<div class="pure-g h-box v-box">
<div class="pure-u-1 pure-u-lg-1-5">
<%- if page > 1 -%>
<a href="<%= url_prev_page %>"><%= translate(locale, "Previous page") %></a>
<%- end -%>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<%- if videos.size >= 60 -%>
<a href="<%= url_next_page %>"><%= translate(locale, "Next page") %></a>
<%- end -%>
</div>
</div>
<div class="pure-g"> <%= rendered "components/items_paginated" %>
<%- videos.each do |item| -%>
<%= rendered "components/item" %>
<%- end -%>
</div>
<script src="/js/watched_indicator.js"></script>
<div class="pure-g h-box">
<div class="pure-u-1 pure-u-lg-1-5">
<%- if page > 1 -%>
<a href="<%= url_prev_page %>"><%= translate(locale, "Previous page") %></a>
<%- end -%>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<%- if videos.size >= 60 -%>
<a href="<%= url_next_page %>"><%= translate(locale, "Next page") %></a>
<%- end -%>
</div>
</div>

97
src/invidious/views/playlist.ecr
View File

@ -6,9 +6,50 @@
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/playlist/<%= plid %>" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/playlist/<%= plid %>" />
<% end %> <% end %>
<div class="pure-g h-box"> <div class="h-box flexible title">
<div class="pure-u-2-3"> <div class="flex-left"><h3><%= title %></h3></div>
<h3><%= title %></h3>
<div class="flex-right button-container">
<%- if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email -%>
<div class="pure-u">
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/add_playlist_items?list=<%= plid %>">
<i class="icon ion-md-add"></i>&nbsp;<%= translate(locale, "playlist_button_add_items") %>
</a>
</div>
<div class="pure-u">
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/edit_playlist?list=<%= plid %>">
<i class="icon ion-md-create"></i>&nbsp;<%= translate(locale, "generic_button_edit") %>
</a>
</div>
<div class="pure-u">
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
<i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "generic_button_delete") %>
</a>
</div>
<%- else -%>
<div class="pure-u">
<%- if IV::Database::Playlists.exists?(playlist.id) -%>
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/subscribe_playlist?list=<%= plid %>">
<i class="icon ion-md-add"></i>&nbsp;<%= translate(locale, "Subscribe") %>
</a>
<%- else -%>
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
<i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "Unsubscribe") %>
</a>
<%- end -%>
</div>
<%- end -%>
<div class="pure-u">
<a class="pure-button pure-button-secondary low-profile" dir="auto" href="/feed/playlist/<%= plid %>">
<i class="icon ion-logo-rss"></i>&nbsp;<%= translate(locale, "generic_button_rss") %>
</a>
</div>
</div>
</div>
<div class="h-box">
<div class="pure-u-1-1">
<% if playlist.is_a? InvidiousPlaylist %> <% if playlist.is_a? InvidiousPlaylist %>
<b> <b>
<% if playlist.author == user.try &.email %> <% if playlist.author == user.try &.email %>
@ -54,37 +95,12 @@
</div> </div>
<% end %> <% end %>
</div> </div>
<div class="pure-u-1-3" style="text-align:right">
<h3>
<div class="pure-g user-field">
<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
<div class="pure-u-1-3"><a href="/edit_playlist?list=<%= plid %>"><i class="icon ion-md-create"></i></a></div>
<div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
<% else %>
<% if Invidious::Database::Playlists.exists?(playlist.id) %>
<div class="pure-u-1-3"><a href="/subscribe_playlist?list=<%= plid %>"><i class="icon ion-md-add"></i></a></div>
<% else %>
<div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
<% end %>
<% end %>
<div class="pure-u-1-3"><a href="/feed/playlist/<%= plid %>"><i class="icon ion-logo-rss"></i></a></div>
</div>
</h3>
</div>
</div> </div>
<div class="h-box"> <div class="h-box">
<div id="descriptionWrapper"><%= playlist.description_html %></div> <div id="descriptionWrapper"><%= playlist.description_html %></div>
</div> </div>
<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
<div class="h-box" style="text-align:right">
<h3>
<a href="/add_playlist_items?list=<%= plid %>"><i class="icon ion-md-add"></i></a>
</h3>
</div>
<% end %>
<div class="h-box"> <div class="h-box">
<hr> <hr>
</div> </div>
@ -100,28 +116,5 @@
<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script> <script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
<% end %> <% end %>
<div class="pure-g">
<% videos.each do |item| %>
<%= rendered "components/item" %>
<% end %>
</div>
<script src="/js/watched_indicator.js"></script> <%= rendered "components/items_paginated" %>
<div class="pure-g h-box">
<div class="pure-u-1 pure-u-lg-1-5">
<% if page > 1 %>
<a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">
<%= translate(locale, "Previous page") %>
</a>
<% end %>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<% if page_count != 1 && page < page_count %>
<a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">
<%= translate(locale, "Next page") %>
</a>
<% end %>
</div>
</div>

37
src/invidious/views/search.ecr
View File

@ -7,21 +7,8 @@
<%= Invidious::Frontend::SearchFilters.generate(query.filters, query.text, query.page, locale) %> <%= Invidious::Frontend::SearchFilters.generate(query.filters, query.text, query.page, locale) %>
<hr/> <hr/>
<div class="pure-g h-box v-box">
<div class="pure-u-1 pure-u-lg-1-5">
<%- if query.page > 1 -%>
<a href="<%= url_prev_page %>"><%= translate(locale, "Previous page") %></a>
<%- end -%>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<%- if videos.size >= 20 -%>
<a href="<%= url_next_page %>"><%= translate(locale, "Next page") %></a>
<%- end -%>
</div>
</div>
<%- if videos.empty? -%> <%- if items.empty? -%>
<div class="h-box no-results-error"> <div class="h-box no-results-error">
<div> <div>
<%= translate(locale, "search_message_no_results") %><br/><br/> <%= translate(locale, "search_message_no_results") %><br/><br/>
@ -30,25 +17,5 @@
</div> </div>
</div> </div>
<%- else -%> <%- else -%>
<div class="pure-g"> <%= rendered "components/items_paginated" %>
<%- videos.each do |item| -%>
<%= rendered "components/item" %>
<%- end -%>
</div>
<%- end -%> <%- end -%>
<script src="/js/watched_indicator.js"></script>
<div class="pure-g h-box">
<div class="pure-u-1 pure-u-lg-1-5">
<%- if query.page > 1 -%>
<a href="<%= url_prev_page %>"><%= translate(locale, "Previous page") %></a>
<%- end -%>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<%- if videos.size >= 20 -%>
<a href="<%= url_next_page %>"><%= translate(locale, "Next page") %></a>
<%- end -%>
</div>
</div>

62
src/invidious/views/watch.ecr
View File

@ -204,19 +204,28 @@ we're going to need to do it here in order to allow for translations.
</div> </div>
<div class="pure-u-1 <% if params.related_videos || plid %>pure-u-lg-3-5<% else %>pure-u-md-4-5<% end %>"> <div class="pure-u-1 <% if params.related_videos || plid %>pure-u-lg-3-5<% else %>pure-u-md-4-5<% end %>">
<div class="h-box">
<a href="/channel/<%= video.ucid %>" style="display:block;width:fit-content;width:-moz-fit-content"> <div class="pure-g h-box flexible title">
<div class="channel-profile"> <div class="pure-u-1-2 flex-left flexible">
<% if !video.author_thumbnail.empty? %> <a href="/channel/<%= video.ucid %>">
<img src="/ggpht<%= URI.parse(video.author_thumbnail).request_target %>" alt="" /> <div class="channel-profile">
<% end %> <% if !video.author_thumbnail.empty? %>
<span id="channel-name"><%= author %><% if !video.author_verified.nil? && video.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></span> <img src="/ggpht<%= URI.parse(video.author_thumbnail).request_target %>" alt="" />
<% end %>
<span id="channel-name"><%= author %><% if !video.author_verified.nil? && video.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></span>
</div>
</a>
</div>
<div class="pure-u-1-2 flex-right flexible button-container">
<div class="pure-u">
<% sub_count_text = video.sub_count_text %>
<%= rendered "components/subscribe_widget" %>
</div> </div>
</a> </div>
</div>
<% sub_count_text = video.sub_count_text %>
<%= rendered "components/subscribe_widget" %>
<div class="h-box">
<p id="published-date"> <p id="published-date">
<% if video.premiere_timestamp.try &.> Time.utc %> <% if video.premiere_timestamp.try &.> Time.utc %>
<b><%= video.premiere_timestamp.try { |t| translate(locale, "Premieres `x`", t.to_s("%B %-d, %R UTC")) } %></b> <b><%= video.premiere_timestamp.try { |t| translate(locale, "Premieres `x`", t.to_s("%B %-d, %R UTC")) } %></b>
@ -295,15 +304,28 @@ we're going to need to do it here in order to allow for translations.
<% video.related_videos.each do |rv| %> <% video.related_videos.each do |rv| %>
<% if rv["id"]? %> <% if rv["id"]? %>
<a href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>"> <div class="pure-u-1">
<% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail"> <div class="thumbnail">
<%- if !env.get("preferences").as(Preferences).thin_mode -%>
<a tabindex="-1" href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>">
<img loading="lazy" class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg" alt="" /> <img loading="lazy" class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg" alt="" />
<p class="length"><%= recode_length_seconds(rv["length_seconds"]?.try &.to_i? || 0) %></p> </a>
</div> <%- else -%>
<% end %> <div class="thumbnail-placeholder"></div>
<p style="width:100%"><%= rv["title"] %></p> <%- end -%>
</a>
<div class="bottom-right-overlay">
<%- if (length_seconds = rv["length_seconds"]?.try &.to_i?) && length_seconds != 0 -%>
<p class="length"><%= recode_length_seconds(length_seconds) %></p>
<%- end -%>
</div>
</div>
<div class="video-card-row">
<a href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>"><p dir="auto"><%= HTML.escape(rv["title"]) %></p></a>
</div>
<h5 class="pure-g"> <h5 class="pure-g">
<div class="pure-u-14-24"> <div class="pure-u-14-24">
<% if rv["ucid"]? %> <% if rv["ucid"]? %>
@ -321,6 +343,8 @@ we're going to need to do it here in order to allow for translations.
%></b> %></b>
</div> </div>
</h5> </h5>
</div>
<% end %> <% end %>
<% end %> <% end %>
</div> </div>