From 624dcb103e7fecd232f8362467f3e27ea54afe72 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Tue, 18 Apr 2023 00:04:49 +0200 Subject: [PATCH 01/17] I18n: Add a function to determine if a given locale is RTL --- src/invidious/helpers/i18n.cr | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/invidious/helpers/i18n.cr b/src/invidious/helpers/i18n.cr index a9ed1f64..76e477a4 100644 --- a/src/invidious/helpers/i18n.cr +++ b/src/invidious/helpers/i18n.cr @@ -165,3 +165,12 @@ def translate_bool(locale : String?, translation : Bool) return translate(locale, "No") 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 From 8230d56dd9bdfa6d71c519ee5fd7ed4bdfda5ab6 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Wed, 26 Apr 2023 22:30:13 +0200 Subject: [PATCH 02/17] Utils: Create a function to append parameters to a base URL --- src/invidious/http_server/utils.cr | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/invidious/http_server/utils.cr b/src/invidious/http_server/utils.cr index e3f1fa0f..222dfc4a 100644 --- a/src/invidious/http_server/utils.cr +++ b/src/invidious/http_server/utils.cr @@ -1,3 +1,5 @@ +require "uri" + module Invidious::HttpServer module Utils extend self @@ -16,5 +18,23 @@ module Invidious::HttpServer return "#{url.request_target}?#{params}" 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 From 48981695cf07c4443a417106d49d2a8653a463b4 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Mon, 17 Apr 2023 21:25:00 +0200 Subject: [PATCH 03/17] HTML: Add code to generate page nav buttons --- src/invidious/frontend/pagination.cr | 97 ++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 src/invidious/frontend/pagination.cr diff --git a/src/invidious/frontend/pagination.cr b/src/invidious/frontend/pagination.cr new file mode 100644 index 00000000..3f931f4e --- /dev/null +++ b/src/invidious/frontend/pagination.cr @@ -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 << %() + + if locale_is_rtl?(locale) + # Inverted arrow ("previous" points to the right) + str << translate(locale, "Previous page") + str << "  " + str << %() + else + # Regular arrow ("previous" points to the left) + str << %() + str << "  " + str << translate(locale, "Previous page") + end + + str << "" + end + + private def next_page(str : String::Builder, locale : String?, url : String) + # Link + str << %() + + if locale_is_rtl?(locale) + # Inverted arrow ("next" points to the left) + str << %() + str << "  " + str << translate(locale, "Next page") + else + # Regular arrow ("next" points to the right) + str << translate(locale, "Next page") + str << "  " + str << %() + end + + str << "" + end + + def nav_numeric(locale : String?, *, base_url : String | URI, current_page : Int, show_next : Bool = true) + return String.build do |str| + str << %(
\n) + str << %(
\n) + + str << %(
) + + 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 << %(
\n) + str << %(
) + + 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 << %(
\n) + + str << %(
\n) + str << %(
\n\n) + end + end + + def nav_ctoken(locale : String?, *, base_url : String | URI, ctoken : String?) + return String.build do |str| + str << %(
\n) + str << %(
\n) + + str << %(
\n) + + str << %(
) + + 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 << %(
\n) + + str << %(
\n) + str << %(
\n\n) + end + end +end From 717f4c4db9cd5a234154d1b38ccfb0ff38883d58 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Mon, 17 Apr 2023 21:26:04 +0200 Subject: [PATCH 04/17] HTML: Make a dedicated ECR component for items + pagination --- src/invidious/views/components/items_paginated.ecr | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/invidious/views/components/items_paginated.ecr diff --git a/src/invidious/views/components/items_paginated.ecr b/src/invidious/views/components/items_paginated.ecr new file mode 100644 index 00000000..c82b1772 --- /dev/null +++ b/src/invidious/views/components/items_paginated.ecr @@ -0,0 +1,11 @@ +<%= page_nav_html %> + +
+ <%- videos.each do |item| -%> + <%= rendered "components/item" %> + <%- end -%> +
+ +<%= page_nav_html %> + + From b004886c6266d13c6982ef88e86be77c1dec2d77 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Thu, 20 Apr 2023 18:55:35 +0200 Subject: [PATCH 05/17] CSS: add styling for the new buttons --- assets/css/default.css | 54 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/assets/css/default.css b/assets/css/default.css index 431a0427..eb90c09c 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -115,6 +115,11 @@ div { padding-right: 10px; } + +/* + * Buttons + */ + body a.pure-button { color: rgba(0,0,0,.8); } @@ -127,14 +132,36 @@ body a.pure-button-primary, color: rgba(35, 35, 35, 1); } +.pure-button-primary, +.pure-button-secondary { + border: 1px solid #a0a0a0; + border-radius: 3px; + margin: 0 .4em; +} + +.dark-theme .pure-button-secondary { + background-color: #0002; + color: #ddd; +} + button.pure-button-primary:hover, -body a.pure-button-primary:hover, button.pure-button-primary:focus, +body a.pure-button-primary:hover, body a.pure-button-primary:focus { background-color: rgba(0, 182, 240, 1); color: #fff; } +button.pure-button-secondary:hover, +button.pure-button-secondary:focus { + border-color: rgba(0, 182, 240, 1); +} + + +/* + * Thumbnails + */ + div.thumbnail { padding: 28.125%; position: relative; @@ -192,6 +219,7 @@ div.watched-indicator { top: -0.7em; } + /* * Navbar */ @@ -347,6 +375,22 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } 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 */ @@ -389,6 +433,7 @@ span > select { word-wrap: normal; } + /* * Light theme */ @@ -453,6 +498,7 @@ span > select { } } + /* * Dark theme */ @@ -539,6 +585,12 @@ body.dark-theme { } } + +/* + * Miscellanous + */ + + /*With commit d9528f5 all contents of the page is now within a flexbox. However, the hr element is rendered improperly within one. See https://stackoverflow.com/a/34372979 for more info */ From b78412b01fff5c0d49fb316ee975573e9884e1c8 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Tue, 18 Apr 2023 00:04:01 +0200 Subject: [PATCH 06/17] HTML: Use the new pagination component for playlists --- src/invidious/routes/playlists.cr | 22 ++++++++++++++++ src/invidious/views/add_playlist_items.ecr | 30 +--------------------- src/invidious/views/edit_playlist.ecr | 25 +----------------- src/invidious/views/playlist.ecr | 25 +----------------- 4 files changed, 25 insertions(+), 77 deletions(-) diff --git a/src/invidious/routes/playlists.cr b/src/invidious/routes/playlists.cr index 8675fa45..a2f9b445 100644 --- a/src/invidious/routes/playlists.cr +++ b/src/invidious/routes/playlists.cr @@ -170,6 +170,13 @@ module Invidious::Routes::Playlists 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: (videos.size == 100) + ) + templated "edit_playlist" end @@ -252,6 +259,14 @@ module Invidious::Routes::Playlists videos = [] of SearchVideo 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: (videos.size >= 20) + ) + env.set "add_playlist_items", plid templated "add_playlist_items" end @@ -431,6 +446,13 @@ module Invidious::Routes::Playlists env.set "remove_playlist_items", plid 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" end diff --git a/src/invidious/views/add_playlist_items.ecr b/src/invidious/views/add_playlist_items.ecr index bcba74cf..6aea82ae 100644 --- a/src/invidious/views/add_playlist_items.ecr +++ b/src/invidious/views/add_playlist_items.ecr @@ -31,33 +31,5 @@ -
- <% videos.each_slice(4) do |slice| %> - <% slice.each do |item| %> - <%= rendered "components/item" %> - <% end %> - <% end %> -
- - -<% if query %> - <%- query_encoded = URI.encode_www_form(query.text, space_to_plus: true) -%> -
-
- <% if query.page > 1 %> - - <%= translate(locale, "Previous page") %> - - <% end %> -
-
-
- <% if videos.size >= 20 %> - - <%= translate(locale, "Next page") %> - - <% end %> -
-
-<% end %> +<%= rendered "components/items_paginated" %> diff --git a/src/invidious/views/edit_playlist.ecr b/src/invidious/views/edit_playlist.ecr index 548104c8..d2981886 100644 --- a/src/invidious/views/edit_playlist.ecr +++ b/src/invidious/views/edit_playlist.ecr @@ -56,28 +56,5 @@
-
-<% videos.each do |item| %> - <%= rendered "components/item" %> -<% end %> -
- - -
-
- <% if page > 1 %> - - <%= translate(locale, "Previous page") %> - - <% end %> -
-
-
- <% if videos.size == 100 %> - - <%= translate(locale, "Next page") %> - - <% end %> -
-
+<%= rendered "components/items_paginated" %> diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr index a04acf4c..08995a83 100644 --- a/src/invidious/views/playlist.ecr +++ b/src/invidious/views/playlist.ecr @@ -100,28 +100,5 @@ <% end %> -
-<% videos.each do |item| %> - <%= rendered "components/item" %> -<% end %> -
- - -
-
- <% if page > 1 %> - - <%= translate(locale, "Previous page") %> - - <% end %> -
-
-
- <% if page_count != 1 && page < page_count %> - - <%= translate(locale, "Next page") %> - - <% end %> -
-
+<%= rendered "components/items_paginated" %> From 6472244a64a0b1f5f2a0d5699b820022d2832ee0 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Tue, 18 Apr 2023 00:12:56 +0200 Subject: [PATCH 07/17] HTML: Use the new pagination component for search results --- src/invidious/routes/search.cr | 21 +++++++++++++------- src/invidious/views/hashtag.ecr | 35 +-------------------------------- src/invidious/views/search.ecr | 35 +-------------------------------- 3 files changed, 16 insertions(+), 75 deletions(-) diff --git a/src/invidious/routes/search.cr b/src/invidious/routes/search.cr index 6c3088de..b050c31d 100644 --- a/src/invidious/routes/search.cr +++ b/src/invidious/routes/search.cr @@ -60,16 +60,21 @@ module Invidious::Routes::Search 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) + # Pagination + page_nav_html = Frontend::Pagination.nav_numeric(locale, + base_url: "/search?#{params}", + current_page: query.page, + show_next: (videos.size >= 60) + ) + if query.type == Invidious::Search::Query::Type::Channel env.set "search", "channel:#{query.channel} #{query.text}" else env.set "search", query.text end + templated "search" end end @@ -96,11 +101,13 @@ module Invidious::Routes::Search return error_template(500, ex) end - params = env.params.query.empty? ? "" : "&#{env.params.query}" - + # Pagination hashtag_encoded = URI.encode_www_form(hashtag, space_to_plus: false) - url_prev_page = "/hashtag/#{hashtag_encoded}?page=#{page - 1}#{params}" - url_next_page = "/hashtag/#{hashtag_encoded}?page=#{page + 1}#{params}" + page_nav_html = Frontend::Pagination.nav_numeric(locale, + base_url: "/hashtag/#{hashtag_encoded}", + current_page: page, + show_next: (videos.size >= 60) + ) templated "hashtag" end diff --git a/src/invidious/views/hashtag.ecr b/src/invidious/views/hashtag.ecr index 3351c21c..2000337e 100644 --- a/src/invidious/views/hashtag.ecr +++ b/src/invidious/views/hashtag.ecr @@ -4,38 +4,5 @@
-
-
- <%- if page > 1 -%> - <%= translate(locale, "Previous page") %> - <%- end -%> -
-
-
- <%- if videos.size >= 60 -%> - <%= translate(locale, "Next page") %> - <%- end -%> -
-
-
- <%- videos.each do |item| -%> - <%= rendered "components/item" %> - <%- end -%> -
- - - -
-
- <%- if page > 1 -%> - <%= translate(locale, "Previous page") %> - <%- end -%> -
-
-
- <%- if videos.size >= 60 -%> - <%= translate(locale, "Next page") %> - <%- end -%> -
-
+<%= rendered "components/items_paginated" %> diff --git a/src/invidious/views/search.ecr b/src/invidious/views/search.ecr index a7469e36..627a13b0 100644 --- a/src/invidious/views/search.ecr +++ b/src/invidious/views/search.ecr @@ -7,19 +7,6 @@ <%= Invidious::Frontend::SearchFilters.generate(query.filters, query.text, query.page, locale) %>
-
-
- <%- if query.page > 1 -%> - <%= translate(locale, "Previous page") %> - <%- end -%> -
-
-
- <%- if videos.size >= 20 -%> - <%= translate(locale, "Next page") %> - <%- end -%> -
-
<%- if videos.empty? -%>
@@ -30,25 +17,5 @@
<%- else -%> -
- <%- videos.each do |item| -%> - <%= rendered "components/item" %> - <%- end -%> -
+ <%= rendered "components/items_paginated" %> <%- end -%> - - - -
-
- <%- if query.page > 1 -%> - <%= translate(locale, "Previous page") %> - <%- end -%> -
-
-
- <%- if videos.size >= 20 -%> - <%= translate(locale, "Next page") %> - <%- end -%> -
-
From 8a90d23ad8a96a65a3feb80b4308158db65e9bad Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Fri, 21 Apr 2023 00:28:11 +0200 Subject: [PATCH 08/17] HTML: Use the new pagination component for channel pages --- src/invidious/routes/playlists.cr | 14 +++++------ src/invidious/routes/search.cr | 8 +++--- src/invidious/views/channel.ecr | 25 ++++++------------- .../views/components/items_paginated.ecr | 2 +- src/invidious/views/search.ecr | 2 +- 5 files changed, 20 insertions(+), 31 deletions(-) diff --git a/src/invidious/routes/playlists.cr b/src/invidious/routes/playlists.cr index a2f9b445..148bc6e6 100644 --- a/src/invidious/routes/playlists.cr +++ b/src/invidious/routes/playlists.cr @@ -163,9 +163,9 @@ module Invidious::Routes::Playlists end begin - videos = get_playlist_videos(playlist, offset: (page - 1) * 100) + items = get_playlist_videos(playlist, offset: (page - 1) * 100) rescue ex - videos = [] of PlaylistVideo + items = [] of PlaylistVideo end csrf_token = generate_response(sid, {":edit_playlist"}, HMAC_KEY) @@ -174,7 +174,7 @@ module Invidious::Routes::Playlists page_nav_html = Frontend::Pagination.nav_numeric(locale, base_url: "/playlist?list=#{playlist.id}", current_page: page, - show_next: (videos.size == 100) + show_next: (items.size == 100) ) templated "edit_playlist" @@ -254,9 +254,9 @@ module Invidious::Routes::Playlists begin 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 - videos = [] of SearchVideo + items = [] of SearchVideo end # Pagination @@ -264,7 +264,7 @@ module Invidious::Routes::Playlists page_nav_html = Frontend::Pagination.nav_numeric(locale, base_url: "/add_playlist_items?list=#{playlist.id}&q=#{query_encoded}", current_page: page, - show_next: (videos.size >= 20) + show_next: (items.size >= 20) ) env.set "add_playlist_items", plid @@ -437,7 +437,7 @@ module Invidious::Routes::Playlists end begin - videos = get_playlist_videos(playlist, offset: (page - 1) * 200) + items = get_playlist_videos(playlist, offset: (page - 1) * 200) rescue ex return error_template(500, "Error encountered while retrieving playlist videos.
#{ex.message}") end diff --git a/src/invidious/routes/search.cr b/src/invidious/routes/search.cr index b050c31d..848b3a48 100644 --- a/src/invidious/routes/search.cr +++ b/src/invidious/routes/search.cr @@ -52,7 +52,7 @@ module Invidious::Routes::Search user = env.get? "user" begin - videos = query.process + items = query.process 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'.") rescue ex @@ -66,7 +66,7 @@ module Invidious::Routes::Search page_nav_html = Frontend::Pagination.nav_numeric(locale, base_url: "/search?#{params}", current_page: query.page, - show_next: (videos.size >= 60) + show_next: (items.size >= 60) ) if query.type == Invidious::Search::Query::Type::Channel @@ -96,7 +96,7 @@ module Invidious::Routes::Search end begin - videos = Invidious::Hashtag.fetch(hashtag, page) + items = Invidious::Hashtag.fetch(hashtag, page) rescue ex return error_template(500, ex) end @@ -106,7 +106,7 @@ module Invidious::Routes::Search page_nav_html = Frontend::Pagination.nav_numeric(locale, base_url: "/hashtag/#{hashtag_encoded}", current_page: page, - show_next: (videos.size >= 60) + show_next: (items.size >= 60) ) templated "hashtag" diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr index 6e62a471..91fe40b9 100644 --- a/src/invidious/views/channel.ecr +++ b/src/invidious/views/channel.ecr @@ -15,7 +15,12 @@ youtube_url = "https://www.youtube.com#{relative_url}" 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 %> <%- if selected_tab.videos? -%> @@ -43,21 +48,5 @@
-
-<% items.each do |item| %> - <%= rendered "components/item" %> -<% end %> -
- - -
-
-
- <% if next_continuation %> - - <%= translate(locale, "Next page") %> - - <% end %> -
-
+<%= rendered "components/items_paginated" %> diff --git a/src/invidious/views/components/items_paginated.ecr b/src/invidious/views/components/items_paginated.ecr index c82b1772..4534a0a3 100644 --- a/src/invidious/views/components/items_paginated.ecr +++ b/src/invidious/views/components/items_paginated.ecr @@ -1,7 +1,7 @@ <%= page_nav_html %>
- <%- videos.each do |item| -%> + <%- items.each do |item| -%> <%= rendered "components/item" %> <%- end -%>
diff --git a/src/invidious/views/search.ecr b/src/invidious/views/search.ecr index 627a13b0..b1300214 100644 --- a/src/invidious/views/search.ecr +++ b/src/invidious/views/search.ecr @@ -8,7 +8,7 @@
-<%- if videos.empty? -%> +<%- if items.empty? -%>
<%= translate(locale, "search_message_no_results") %>

From 315505e61af2b45bd86fb35ed13399184d72b80e Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Sat, 22 Apr 2023 12:58:46 +0200 Subject: [PATCH 09/17] HTML: Use new buttons for thumbnail overlays In addition, this commit also heavily changes the structure of the generic "video card" item. Main benefits: * Improved accessibility for keyboard users * Many styling glitches were fixed * PlaylistVideos now use the same items as the rest * Elements all have distinct CSS classes * Design can be expanded to add more icons --- assets/css/default.css | 51 ++++---- src/invidious/views/components/item.ecr | 157 ++++++++++-------------- src/invidious/views/feeds/history.ecr | 8 +- 3 files changed, 98 insertions(+), 118 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index eb90c09c..48cb4264 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -152,9 +152,15 @@ body a.pure-button-primary:focus { color: #fff; } -button.pure-button-secondary:hover, -button.pure-button-secondary:focus { - border-color: rgba(0, 182, 240, 1); +.pure-button-secondary:hover, +.pure-button-secondary:focus { + color: rgb(0, 182, 240); + border-color: rgb(0, 182, 240); +} + +.pure-button-secondary.low-profile { + padding: 5px 10px; + margin: 0; } @@ -163,21 +169,19 @@ button.pure-button-secondary:focus { */ div.thumbnail { - padding: 28.125%; position: relative; + width: 100%; box-sizing: border-box; } img.thumbnail { - position: absolute; + display: block; /* See: https://stackoverflow.com/a/11635197 */ width: 100%; - height: 100%; - left: 0; - top: 0; object-fit: cover; } div.watched-overlay { + z-index: 50; position: absolute; top: 0; left: 0; @@ -195,28 +199,27 @@ div.watched-indicator { background-color: red; } -.length { +div.thumbnail > .top-left-overlay, +div.thumbnail > .bottom-right-overlay { z-index: 100; position: absolute; - background-color: rgba(35, 35, 35, 0.75); - color: #fff; - border-radius: 2px; - padding: 2px; + padding: 0; + margin: 0; font-size: 16px; - right: 0.25em; - bottom: -0.75em; } -.watched { - z-index: 100; - position: absolute; - background-color: rgba(35, 35, 35, 0.75); +.top-left-overlay { top: 0.6em; left: 0.6em; } +.bottom-right-overlay { bottom: 0.6em; right: 0.6em; } + +.length { + padding: 1px; + margin: -2px 0; color: #fff; - border-radius: 2px; - padding: 4px 8px 4px 8px; - font-size: 16px; - left: 0.2em; - top: -0.7em; + border-radius: 3px; +} + +.length, .top-left-overlay button { + background-color: rgba(35, 35, 35, 0.85); } diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index 7cfd38db..f05e1338 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -7,7 +7,7 @@ <% if !env.get("preferences").as(Preferences).thin_mode %>
- " alt="" /> + " alt="" />
<% end %>

<%= HTML.escape(item.author) %><% if !item.author_verified.nil? && item.author_verified %> <% end %>

@@ -25,7 +25,7 @@ <% if !env.get("preferences").as(Preferences).thin_mode %>
- " alt="" /> + " alt="" />

<%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %>

<% end %> @@ -38,7 +38,7 @@ <% if !env.get("preferences").as(Preferences).thin_mode %>
- + <% if item.length_seconds != 0 %>

<%= recode_length_seconds(item.length_seconds) %>

<% end %> @@ -54,104 +54,79 @@

<%= HTML.escape(item.author) %>

 - <% when PlaylistVideo %> - - <% if !env.get("preferences").as(Preferences).thin_mode %> -
- - - <% if plid_form = env.get?("remove_playlist_items") %> -
" method="post"> - "> -

- -

-
- <% end %> - - <% if item.responds_to?(:live_now) && item.live_now %> -

<%= translate(locale, "LIVE") %>

- <% elsif item.length_seconds != 0 %> -

<%= recode_length_seconds(item.length_seconds) %>

- <% end %> - - <% if item_watched %> -
-
- <% end %> -
- <% end %> -

<%= HTML.escape(item.title) %>

- - -
-
-

<%= HTML.escape(item.author) %>

-
- <% endpoint_params = "?v=#{item.id}&list=#{item.plid}" %> - <%= rendered "components/video-context-buttons" %> -
- -
-
- <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> -

<%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %>

- <% elsif Time.utc - item.published > 1.minute %> -

<%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %>

- <% end %> -
- - <% if item.responds_to?(:views) && item.views %> -
-

<%= translate_count(locale, "generic_views_count", item.views || 0, NumberFormatting::Short) %>

-
- <% end %> -
<% when Category %> <% else %> - - <% if !env.get("preferences").as(Preferences).thin_mode %> -
- - <% if env.get? "show_watched" %> -
" method="post"> - "> -

- -

-
- <% elsif plid_form = env.get? "add_playlist_items" %> -
" method="post"> - "> -

- -

-
- <% end %> + <%- + # `endpoint_params` is used for the "video-context-buttons" component + if item.is_a?(PlaylistVideo) + link_url = "/watch?v=#{item.id}&list=#{item.plid}&index=#{item.index}" + endpoint_params = "?v=#{item.id}&list=#{item.plid}" + else + link_url = "/watch?v=#{item.id}" + endpoint_params = "?v=#{item.id}" + end + -%> - <% if item.responds_to?(:live_now) && item.live_now %> -

<%= translate(locale, "LIVE") %>

- <% elsif item.length_seconds != 0 %> -

<%= recode_length_seconds(item.length_seconds) %>

- <% end %> +
+ <%- if !env.get("preferences").as(Preferences).thin_mode -%> + + + + <%- end -%> - <% if item_watched %> -
-
- <% end %> -
+
+ <%- if env.get? "show_watched" -%> +
" method="post"> + "> + +
+ <%- 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")}" -%> +
+ "> + +
+ <%- 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")}" -%> +
+ "> + +
+ <%- end -%> +
+ +
+ <%- if item.responds_to?(:live_now) && item.live_now -%> +

 <%= translate(locale, "LIVE") %>

+ <%- elsif item.length_seconds != 0 -%> +

<%= recode_length_seconds(item.length_seconds) %>

+ <%- end -%> +
+ + <% if item_watched %> +
+
<% end %> -

<%= HTML.escape(item.title) %>

- +
+ +
+

<%= HTML.escape(item.title) %>

 +
-

<%= HTML.escape(item.author) %><% if !item.is_a?(ChannelVideo) && !item.author_verified.nil? && item.author_verified %> <% end %>

+

<%= HTML.escape(item.author) %> + <%- if item.responds_to?(:author_verified) && item.author_verified %> <% end -%> +

- <% endpoint_params = "?v=#{item.id}" %> <%= rendered "components/video-context-buttons" %>
diff --git a/src/invidious/views/feeds/history.ecr b/src/invidious/views/feeds/history.ecr index 2234b297..5301a232 100644 --- a/src/invidious/views/feeds/history.ecr +++ b/src/invidious/views/feeds/history.ecr @@ -35,12 +35,14 @@ <% if !env.get("preferences").as(Preferences).thin_mode %>
+ +
" method="post"> "> -

- -

+
+

<% end %> From 0cce4e51c4681fd5d41b2ea3b79d1bada3e84239 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Sat, 22 Apr 2023 17:50:34 +0200 Subject: [PATCH 10/17] HTML: Use new buttons for playlists (save/delete/add videos/etc...) --- assets/css/default.css | 2 +- locales/en-US.json | 5 ++ src/invidious/views/edit_playlist.ecr | 41 ++++++++++------ src/invidious/views/playlist.ecr | 70 +++++++++++++++++---------- 4 files changed, 75 insertions(+), 43 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 48cb4264..7a99a0db 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -219,7 +219,7 @@ div.thumbnail > .bottom-right-overlay { } .length, .top-left-overlay button { - background-color: rgba(35, 35, 35, 0.85); + background-color: rgba(35, 35, 35, 0.85) !important; } diff --git a/locales/en-US.json b/locales/en-US.json index 96b6799b..7751044f 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -9,6 +9,10 @@ "generic_subscribers_count_plural": "{{count}} subscribers", "generic_subscriptions_count": "{{count}} subscription", "generic_subscriptions_count_plural": "{{count}} subscriptions", + "generic_button_delete": "Delete", + "generic_button_edit": "Edit", + "generic_button_save": "Save", + "generic_button_rss": "RSS", "LIVE": "LIVE", "Shared `x` ago": "Shared `x` ago", "Unsubscribe": "Unsubscribe", @@ -173,6 +177,7 @@ "Title": "Title", "Playlist privacy": "Playlist privacy", "Editing playlist `x`": "Editing playlist `x`", + "playlist_button_add_items": "Add videos", "Show more": "Show more", "Show less": "Show less", "Watch on YouTube": "Watch on YouTube", diff --git a/src/invidious/views/edit_playlist.ecr b/src/invidious/views/edit_playlist.ecr index d2981886..bc4183bd 100644 --- a/src/invidious/views/edit_playlist.ecr +++ b/src/invidious/views/edit_playlist.ecr @@ -7,8 +7,32 @@
-
+

+
+ +
+
+ +
+ +
+ +  <%= translate(locale, "generic_button_delete") %> + +
+
+ +  <%= translate(locale, "generic_button_rss") %> + +
+
+
+ +
+
<%= HTML.escape(playlist.author) %> | <%= translate_count(locale, "generic_videos_count", playlist.video_count) %> | @@ -21,21 +45,6 @@
-
-

-
-
- - - -
-
-
-
-

-
diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr index 08995a83..8d4d116d 100644 --- a/src/invidious/views/playlist.ecr +++ b/src/invidious/views/playlist.ecr @@ -7,8 +7,51 @@ <% end %>
-
+

<%= title %>

+
+ +
+ <%- if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email -%> +
+ +  <%= translate(locale, "playlist_button_add_items") %> + +
+
+ +  <%= translate(locale, "generic_button_edit") %> + +
+
+ +  <%= translate(locale, "generic_button_delete") %> + +
+ <%- else -%> +
+ <%- if IV::Database::Playlists.exists?(playlist.id) -%> + +  <%= translate(locale, "Subscribe") %> + + <%- else -%> + +  <%= translate(locale, "Unsubscribe") %> + + <%- end -%> +
+ <%- end -%> + +
+ +  <%= translate(locale, "generic_button_rss") %> + +
+
+
+ +
+
<% if playlist.is_a? InvidiousPlaylist %> <% if playlist.author == user.try &.email %> @@ -54,37 +97,12 @@
<% end %>
-
-

-
- <% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %> -
-
- <% else %> - <% if Invidious::Database::Playlists.exists?(playlist.id) %> -
- <% else %> -
- <% end %> - <% end %> -
-
-

-
<%= playlist.description_html %>
-<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %> -
-

- -

-
-<% end %> -
From b5688cd9443f9d492bc41ef2a118db15d73ae607 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Sat, 22 Apr 2023 19:45:45 +0200 Subject: [PATCH 11/17] HTML: merge MixVideo with other types in item.ecr --- src/invidious/views/components/item.ecr | 25 ++++--------------------- 1 file changed, 4 insertions(+), 21 deletions(-) diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index f05e1338..2aece9a2 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -34,26 +34,6 @@

<%= HTML.escape(item.author) %><% if !item.is_a?(InvidiousPlaylist) && !item.author_verified.nil? && item.author_verified %> <% end %>

 - <% when MixVideo %> - - <% if !env.get("preferences").as(Preferences).thin_mode %> -
- - <% if item.length_seconds != 0 %> -

<%= recode_length_seconds(item.length_seconds) %>

- <% end %> - - <% if item_watched %> -
-
- <% end %> -
- <% end %> -

<%= HTML.escape(item.title) %>

- - -

<%= HTML.escape(item.author) %>

- <% when Category %> <% else %> <%- @@ -61,6 +41,9 @@ if item.is_a?(PlaylistVideo) link_url = "/watch?v=#{item.id}&list=#{item.plid}&index=#{item.index}" endpoint_params = "?v=#{item.id}&list=#{item.plid}" + elsif item.is_a?(MixVideo) + link_url = "/watch?v=#{item.id}&list=#{item.rdid}" + endpoint_params = "?v=#{item.id}&list=#{item.rdid}" else link_url = "/watch?v=#{item.id}" endpoint_params = "?v=#{item.id}" @@ -134,7 +117,7 @@
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>

<%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %>

- <% elsif Time.utc - item.published > 1.minute %> + <% elsif item.responds_to?(:published) && (Time.utc - item.published) > 1.minute %>

<%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %>

<% end %>
From 69ac6ec2a327e9fdf1f5c51e3b23921ad8c725be Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Sat, 22 Apr 2023 19:59:01 +0200 Subject: [PATCH 12/17] HTML: Fix thin mode/thumbnail on other items --- src/invidious/views/components/item.ecr | 71 +++++++++++++++++-------- src/invidious/views/feeds/history.ecr | 28 +++++----- 2 files changed, 61 insertions(+), 38 deletions(-) diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index 2aece9a2..e1d95ec9 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -1,39 +1,64 @@ -<% 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 +-%>
<% case item when %> <% when SearchChannel %> - - <% if !env.get("preferences").as(Preferences).thin_mode %> + <% if !thin_mode %> +
" alt="" />
- <% end %> -

<%= HTML.escape(item.author) %><% if !item.author_verified.nil? && item.author_verified %> <% end %>

- + + <% end %> + +
+
+

<%= HTML.escape(item.author) %> + <%- if author_verified %> <% end -%> +

+
+
+

<%= translate_count(locale, "generic_subscribers_count", item.subscriber_count, NumberFormatting::Separator) %>

<% if !item.auto_generated %>

<%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %>

<% end %>
<%= item.description_html %>
<% when SearchPlaylist, InvidiousPlaylist %> - <% if item.id.starts_with? "RD" %> - <% url = "/mix?list=#{item.id}&continuation=#{URI.parse(item.thumbnail || "/vi/-----------").request_target.split("/")[2]}" %> - <% else %> - <% url = "/playlist?list=#{item.id}" %> - <% end %> + <%- + if item.id.starts_with? "RD" + link_url = "/mix?list=#{item.id}&continuation=#{URI.parse(item.thumbnail || "/vi/-----------").request_target.split("/")[2]}" + else + link_url = "/playlist?list=#{item.id}" + end + -%> - - <% if !env.get("preferences").as(Preferences).thin_mode %> -
+
+ <%- if !thin_mode %> + " alt="" /> -

<%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %>

-
- <% end %> -

<%= HTML.escape(item.title) %>

- - -

<%= HTML.escape(item.author) %><% if !item.is_a?(InvidiousPlaylist) && !item.author_verified.nil? && item.author_verified %> <% end %>

- + + <%- end -%> + +
+

<%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %>

+
+
+ +
+

<%= HTML.escape(item.title) %>

 +
+ +
+
+

<%= HTML.escape(item.author) %> + <%- if author_verified %> <% end -%> +

+
+
<% when Category %> <% else %> <%- @@ -106,7 +131,7 @@

<%= HTML.escape(item.author) %> - <%- if item.responds_to?(:author_verified) && item.author_verified %> <% end -%> + <%- if author_verified %> <% end -%>

diff --git a/src/invidious/views/feeds/history.ecr b/src/invidious/views/feeds/history.ecr index 5301a232..83ea7238 100644 --- a/src/invidious/views/feeds/history.ecr +++ b/src/invidious/views/feeds/history.ecr @@ -31,22 +31,20 @@ <% watched.each do |item| %>
- - <% if !env.get("preferences").as(Preferences).thin_mode %> -
- +
+ + + -
- " method="post"> - "> - - -
-
-

- <% end %> - +
+
" method="post"> + "> + +
+
+
+

<% end %> From 0de478c34f61861048fde4efbc951f8ce3ed0c4e Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Sat, 22 Apr 2023 20:25:26 +0200 Subject: [PATCH 13/17] CSS: fix light/dark themes for pure buttons --- assets/css/default.css | 74 +++++++++++++++++++++++++++++------------- 1 file changed, 51 insertions(+), 23 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 7a99a0db..f671c3bf 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -139,25 +139,6 @@ body a.pure-button-primary, margin: 0 .4em; } -.dark-theme .pure-button-secondary { - background-color: #0002; - color: #ddd; -} - -button.pure-button-primary:hover, -button.pure-button-primary:focus, -body a.pure-button-primary:hover, -body a.pure-button-primary:focus { - background-color: rgba(0, 182, 240, 1); - color: #fff; -} - -.pure-button-secondary:hover, -.pure-button-secondary:focus { - color: rgb(0, 182, 240); - border-color: rgb(0, 182, 240); -} - .pure-button-secondary.low-profile { padding: 5px 10px; margin: 0; @@ -219,6 +200,7 @@ div.thumbnail > .bottom-right-overlay { } .length, .top-left-overlay button { + color: #eee; background-color: rgba(35, 35, 35, 0.85) !important; } @@ -449,9 +431,18 @@ span > select { color: #075A9E !important; } -.light-theme a.pure-button-primary:hover, -.light-theme a.pure-button-primary:focus { +.light-theme .pure-button-primary:hover, +.light-theme .pure-button-primary:focus, +.light-theme .pure-button-secondary:hover, +.light-theme .pure-button-secondary:focus { 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 { @@ -479,9 +470,18 @@ span > select { color: #075A9E !important; } - .no-theme a.pure-button-primary:hover, - .no-theme a.pure-button-primary:focus { + .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: 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 { @@ -514,6 +514,20 @@ span > select { 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 { color: #a0a0a0; text-decoration: none; @@ -554,6 +568,20 @@ body.dark-theme { 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 { color: #a0a0a0; text-decoration: none; From 0b13efae679c34bc3ce4857f379d661d7d70ca53 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Mon, 24 Apr 2023 19:44:15 +0200 Subject: [PATCH 14/17] HTML/CSS: Fix playlist buttons' responsiveness --- assets/css/default.css | 74 +++++++++++++------ .../components/video-context-buttons.ecr | 4 +- src/invidious/views/playlist.ecr | 16 ++-- 3 files changed, 63 insertions(+), 31 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index f671c3bf..b363ead2 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -1,3 +1,7 @@ +/* + * Common attributes + */ + html, body { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, @@ -11,6 +15,16 @@ body { min-height: 100vh; } +.h-box { + padding-left: 1em; + padding-right: 1em; +} + +.v-box { + padding-top: 1em; + padding-bottom: 1em; +} + .deleted { background-color: rgb(255, 0, 0, 0.5); } @@ -20,6 +34,32 @@ body { margin-bottom: 20px; } +.title { + margin: 0.5em 0 1em 0; +} + +/* A flex container */ +.flexible { + display: flex; + align-items: center; +} + +.flex-left { + flex: 1 1 auto; + flex-flow: row wrap; + justify-content: flex-start; +} +.flex-right { + flex: 2 0 auto; + flex-flow: row nowrap; + justify-content: flex-end; +} + + +/* + * Channel page + */ + .channel-profile > * { font-size: 1.17em; font-weight: bold; @@ -90,16 +130,6 @@ body a.channel-owner { } } -.h-box { - padding-left: 1em; - padding-right: 1em; -} - -.v-box { - padding-top: 1em; - padding-bottom: 1em; -} - div { overflow-wrap: break-word; word-wrap: break-word; @@ -144,9 +174,15 @@ body a.pure-button-primary, margin: 0; } +/* Has to be combined with flex-left/right */ +.button-container { + flex-flow: wrap; + gap: 0.5em 0.75em; +} + /* - * Thumbnails + * Video thumbnails */ div.thumbnail { @@ -280,6 +316,11 @@ input[type="search"]::-webkit-search-cancel-button { margin-right: 1em; } + +/* + * Responsive rules + */ + @media only screen and (max-aspect-ratio: 16/9) { .player-dimensions.vjs-fluid { padding-top: 46.86% !important; @@ -328,10 +369,6 @@ input[type="search"]::-webkit-search-cancel-button { .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.video-data { margin: 0; font-weight: bold; font-size: 80%; } @@ -659,12 +696,7 @@ label[for="music-desc-expansion"]:hover { } /* Bidi (bidirectional text) support */ -h1, -h2, -h3, -h4, -h5, -p, +h1, h2, h3, h4, h5, p, #descriptionWrapper, #description-box, #music-description-box { diff --git a/src/invidious/views/components/video-context-buttons.ecr b/src/invidious/views/components/video-context-buttons.ecr index ddb6c983..385ed6b3 100644 --- a/src/invidious/views/components/video-context-buttons.ecr +++ b/src/invidious/views/components/video-context-buttons.ecr @@ -1,4 +1,4 @@ -
+
" href="https://www.youtube.com/watch<%=endpoint_params%>"> @@ -6,7 +6,7 @@ " href="/watch<%=endpoint_params%>&listen=1"> - + <% if env.get("preferences").as(Preferences).automatic_instance_redirect%> " href="/redirect?referer=%2Fwatch<%=URI.encode_www_form(endpoint_params)%>"> diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr index 8d4d116d..b6a819c0 100644 --- a/src/invidious/views/playlist.ecr +++ b/src/invidious/views/playlist.ecr @@ -6,30 +6,30 @@ <% end %> -
-
+
+

<%= title %>

-
+
<%- if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email -%> -
+
 <%= translate(locale, "playlist_button_add_items") %>
-
+
 <%= translate(locale, "generic_button_edit") %>
-
+
 <%= translate(locale, "generic_button_delete") %>
<%- else -%> -
+
<%- if IV::Database::Playlists.exists?(playlist.id) -%>  <%= translate(locale, "Subscribe") %> @@ -42,7 +42,7 @@
<%- end -%> -
+
 <%= translate(locale, "generic_button_rss") %> From c50747aa6009e1ac5f0f3c6ad38cb3d2ded531a7 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Mon, 24 Apr 2023 20:28:40 +0200 Subject: [PATCH 15/17] HTML: Reorder buttons on the channel and watch pages --- .../views/components/channel_info.ecr | 29 ++++++++--------- .../views/components/subscribe_widget.ecr | 6 ---- src/invidious/views/watch.ecr | 31 ++++++++++++------- 3 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/invidious/views/components/channel_info.ecr b/src/invidious/views/components/channel_info.ecr index 59888760..f4164f31 100644 --- a/src/invidious/views/components/channel_info.ecr +++ b/src/invidious/views/components/channel_info.ecr @@ -8,29 +8,30 @@
<% end %> -
-
+
+
<%= author %><% if !channel.verified.nil? && channel.verified %> <% end %>
-
-

- -

+ +
+
+ <% sub_count_text = number_to_short_text(channel.sub_count) %> + <%= rendered "components/subscribe_widget" %> +
+ +
+ +  <%= translate(locale, "generic_button_rss") %> + +
-
-

<%= channel.description_html %>

-
-
- -
- <% sub_count_text = number_to_short_text(channel.sub_count) %> - <%= rendered "components/subscribe_widget" %> +

<%= channel.description_html %>

diff --git a/src/invidious/views/components/subscribe_widget.ecr b/src/invidious/views/components/subscribe_widget.ecr index b9d5f783..05e4e253 100644 --- a/src/invidious/views/components/subscribe_widget.ecr +++ b/src/invidious/views/components/subscribe_widget.ecr @@ -1,22 +1,18 @@ <% if user %> <% if subscriptions.includes? ucid %> -

" method="post"> ">
-

<% else %> -

" method="post"> ">
-

<% end %> <% else %> -

"> <%= translate(locale, "Subscribe") %> | <%= sub_count_text %> -

<% end %> diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 5b3190f3..4f4354a9 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -204,19 +204,28 @@ we're going to need to do it here in order to allow for translations.
-
- -
- <% if !video.author_thumbnail.empty? %> - - <% end %> - <%= author %><% if !video.author_verified.nil? && video.author_verified %> <% end %> + +
+
+ +
+ <% if !video.author_thumbnail.empty? %> + + <% end %> + <%= author %><% if !video.author_verified.nil? && video.author_verified %> <% end %> +
+ +
+ +
+
+ <% sub_count_text = video.sub_count_text %> + <%= rendered "components/subscribe_widget" %>
- - - <% sub_count_text = video.sub_count_text %> - <%= rendered "components/subscribe_widget" %> +
+
+

<% if video.premiere_timestamp.try &.> Time.utc %> <%= video.premiere_timestamp.try { |t| translate(locale, "Premieres `x`", t.to_s("%B %-d, %R UTC")) } %> From 30aa2e976d8dd4f97b24738a87730d4562dbe991 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Mon, 24 Apr 2023 22:19:46 +0200 Subject: [PATCH 16/17] HTML: Fix thumbnails of related videos (watch page) --- src/invidious/views/watch.ecr | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 4f4354a9..9275631c 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -304,15 +304,26 @@ we're going to need to do it here in order to allow for translations. <% video.related_videos.each do |rv| %> <% if rv["id"]? %> - &listen=<%= params.listen %>"> - <% if !env.get("preferences").as(Preferences).thin_mode %> -

+
+ +
+ <%- if !env.get("preferences").as(Preferences).thin_mode -%> + &listen=<%= params.listen %>"> /mqdefault.jpg" alt="" /> -

<%= recode_length_seconds(rv["length_seconds"]?.try &.to_i? || 0) %>

-
- <% end %> -

<%= rv["title"] %>

- + + <%- end -%> + +
+ <%- if (length_seconds = rv["length_seconds"]?.try &.to_i?) && length_seconds != 0 -%> +

<%= recode_length_seconds(length_seconds) %>

+ <%- end -%> +
+
+ +
+ &listen=<%= params.listen %>">

<%= HTML.escape(rv["title"]) %>

 +
+
<% if rv["ucid"]? %> @@ -330,6 +341,8 @@ we're going to need to do it here in order to allow for translations. %>
+ +
<% end %> <% end %>
From 26da1b4cb613f86900d8d647b599f295956c659e Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Tue, 23 May 2023 22:49:44 +0200 Subject: [PATCH 17/17] HTML: Use the new pagination component for history/subscriptions --- src/invidious/routes/feeds.cr | 8 +++++++ src/invidious/views/feeds/history.ecr | 24 ++++++-------------- src/invidious/views/feeds/subscriptions.ecr | 25 +++++++-------------- 3 files changed, 23 insertions(+), 34 deletions(-) diff --git a/src/invidious/routes/feeds.cr b/src/invidious/routes/feeds.cr index fb482e33..21e9d77a 100644 --- a/src/invidious/routes/feeds.cr +++ b/src/invidious/routes/feeds.cr @@ -106,6 +106,10 @@ module Invidious::Routes::Feeds end 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" end @@ -133,6 +137,10 @@ module Invidious::Routes::Feeds end 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" end diff --git a/src/invidious/views/feeds/history.ecr b/src/invidious/views/feeds/history.ecr index 83ea7238..bda4e1f3 100644 --- a/src/invidious/views/feeds/history.ecr +++ b/src/invidious/views/feeds/history.ecr @@ -50,20 +50,10 @@ <% end %>
-
-
- <% if page > 1 %> - &max_results=<%= max_results %><% end %>"> - <%= translate(locale, "Previous page") %> - - <% end %> -
-
-
- <% if watched.size >= max_results %> - &max_results=<%= max_results %><% end %>"> - <%= translate(locale, "Next page") %> - - <% end %> -
-
+<%= + IV::Frontend::Pagination.nav_numeric(locale, + base_url: base_url, + current_page: page, + show_next: (watched.size >= max_results) + ) +%> diff --git a/src/invidious/views/feeds/subscriptions.ecr b/src/invidious/views/feeds/subscriptions.ecr index 9c69c5b0..c36bd00f 100644 --- a/src/invidious/views/feeds/subscriptions.ecr +++ b/src/invidious/views/feeds/subscriptions.ecr @@ -56,6 +56,7 @@ +
<% videos.each do |item| %> <%= rendered "components/item" %> @@ -64,20 +65,10 @@ -
-
- <% if page > 1 %> - &max_results=<%= max_results %><% end %>"> - <%= translate(locale, "Previous page") %> - - <% end %> -
-
-
- <% if (videos.size + notifications.size) == max_results %> - &max_results=<%= max_results %><% end %>"> - <%= translate(locale, "Next page") %> - - <% end %> -
-
+<%= + IV::Frontend::Pagination.nav_numeric(locale, + base_url: base_url, + current_page: page, + show_next: ((videos.size + notifications.size) == max_results) + ) +%>