From 3e8ddabcc1890360d9f42e8d483cf8061a07e582 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Thu, 24 Jun 2021 11:56:58 +0430 Subject: [PATCH 01/12] Add bidi support Adding these styles is the easiest way to add bidi (bidirectional text) support without or with least side effect. I have tested it by adding it manually on yewtu.be instance and so far it works very well. --- assets/css/default.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/css/default.css b/assets/css/default.css index 1d62bc01..de295501 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -515,3 +515,16 @@ hr { order: 1; margin-top: 20px; } + +/* Bidi (bidirectional text) support */ +h1, +h2, +h3, +h4, +h5, +p, +#descriptionWrapper, +#description-box { + unicode-bidi: plaintext; + text-align: start; +} From 965a8ea9fdd35cc8fc68fe99ed18c49c6fede901 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Thu, 24 Jun 2021 12:17:49 +0430 Subject: [PATCH 02/12] Change display to block Change display from flex to block so that the direction of content would get properly set --- assets/css/default.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index de295501..e7b2f6f7 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -493,8 +493,7 @@ hr { /* Description Expansion Styling*/ #description-box { - display: flex; - flex-direction: column; + display: block; } #descexpansionbutton { From 4a4867deeb80e9d560131a55286c6163c79a20c5 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Thu, 24 Jun 2021 13:10:31 +0430 Subject: [PATCH 03/12] Undo last commit --- assets/css/default.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/css/default.css b/assets/css/default.css index e7b2f6f7..de295501 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -493,7 +493,8 @@ hr { /* Description Expansion Styling*/ #description-box { - display: block; + display: flex; + flex-direction: column; } #descexpansionbutton { From 7ec93825b6e92667b345463d8d42e66764a83a57 Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Thu, 24 Jun 2021 21:05:06 +1200 Subject: [PATCH 04/12] Change description-box from flex to block I also make minor changes to the surroundings so that the same layout and functionality as before is preserved. --- assets/css/default.css | 7 +------ src/invidious/views/watch.ecr | 10 +++++----- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index de295501..808df295 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -492,11 +492,6 @@ hr { } /* Description Expansion Styling*/ -#description-box { - display: flex; - flex-direction: column; -} - #descexpansionbutton { display: none } @@ -511,7 +506,7 @@ hr { height: 100%; } -#descexpansionbutton + label { +#descexpansionbutton ~ label { order: 1; margin-top: 20px; } diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 91e03725..8ea83384 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -30,11 +30,11 @@ we're going to need to do it here in order to allow for translations. --> @@ -249,12 +249,12 @@ we're going to need to do it here in order to allow for translations. <%= video.description_html %> <% else %> -
<%= video.description_html %>
+ <% end %> From 97b469f59c4b0505d74e731a8501584c78dbad60 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Thu, 24 Jun 2021 15:58:54 +0430 Subject: [PATCH 05/12] remove unnecessary text-align --- assets/css/default.css | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/css/default.css b/assets/css/default.css index 808df295..8bb4f21e 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -521,5 +521,4 @@ p, #descriptionWrapper, #description-box { unicode-bidi: plaintext; - text-align: start; } From f616b8e518c27ad6972653827a5b86388f15afb9 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Thu, 24 Jun 2021 16:53:16 +0430 Subject: [PATCH 06/12] Revert "remove unnecessary text-align" This reverts commit 97b469f59c4b0505d74e731a8501584c78dbad60. --- assets/css/default.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/default.css b/assets/css/default.css index 8bb4f21e..808df295 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -521,4 +521,5 @@ p, #descriptionWrapper, #description-box { unicode-bidi: plaintext; + text-align: start; } From d16a748f37c6ca034480693ddb7433f351241cf6 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Thu, 24 Jun 2021 17:08:40 +0430 Subject: [PATCH 07/12] set alignment for feed link --- src/invidious/views/channel.ecr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr index 21038394..2f734b2c 100644 --- a/src/invidious/views/channel.ecr +++ b/src/invidious/views/channel.ecr @@ -21,7 +21,7 @@
-

+

From 9e4fd193c6f8a8a00243d04abba0ea4393ad10b7 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Thu, 24 Jun 2021 15:00:55 +0200 Subject: [PATCH 08/12] Limit descriptions width to ease mixed LTR/RTL text reading This will prevent, on large pages, the LTR and RTL text to be far away, on each side of the page. This could happen on channel and playlists descriptions, when the page is displayed on a large screen. --- assets/css/default.css | 4 ++++ src/invidious/views/channel.ecr | 4 +++- src/invidious/views/community.ecr | 4 +++- src/invidious/views/playlist.ecr | 4 +++- src/invidious/views/playlists.ecr | 4 +++- src/invidious/views/watch.ecr | 4 +++- 6 files changed, 19 insertions(+), 5 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 808df295..1df63412 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -523,3 +523,7 @@ p, unicode-bidi: plaintext; text-align: start; } + +#descriptionWrapper { + max-width: 600px; +} diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr index 2f734b2c..dd2807de 100644 --- a/src/invidious/views/channel.ecr +++ b/src/invidious/views/channel.ecr @@ -28,7 +28,9 @@
-

<%= channel.description_html %>

+
+

<%= channel.description_html %>

+
diff --git a/src/invidious/views/community.ecr b/src/invidious/views/community.ecr index b0092e5f..bc6fb631 100644 --- a/src/invidious/views/community.ecr +++ b/src/invidious/views/community.ecr @@ -27,7 +27,9 @@
-

<%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content %>

+
+

<%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content %>

+
diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr index a19dd182..377da20f 100644 --- a/src/invidious/views/playlist.ecr +++ b/src/invidious/views/playlist.ecr @@ -64,7 +64,9 @@
-

<%= playlist.description_html %>

+
+

<%= playlist.description_html %>

+
<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %> diff --git a/src/invidious/views/playlists.ecr b/src/invidious/views/playlists.ecr index 975ccd6c..52b79a40 100644 --- a/src/invidious/views/playlists.ecr +++ b/src/invidious/views/playlists.ecr @@ -27,7 +27,9 @@
-

<%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content if !channel.description_html.empty? %>

+
+

<%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content if !channel.description_html.empty? %>

+
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 8ea83384..7ee3fb1a 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -246,7 +246,9 @@ we're going to need to do it here in order to allow for translations.
<% if video.description.size < 200 || params.extend_desc %> - <%= video.description_html %> +
+ <%= video.description_html %> +
<% else %>
From 1b1932f7873fa360b1e66071aa8c79c8702a8a69 Mon Sep 17 00:00:00 2001 From: Mostafa Ahangarha Date: Thu, 24 Jun 2021 17:40:02 +0430 Subject: [PATCH 09/12] fix feed alignment on community view --- src/invidious/views/community.ecr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/invidious/views/community.ecr b/src/invidious/views/community.ecr index bc6fb631..96976271 100644 --- a/src/invidious/views/community.ecr +++ b/src/invidious/views/community.ecr @@ -20,7 +20,7 @@
-

+

From 9cef7945c04620eb0b18a200aa0db803dba99c5a Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Fri, 25 Jun 2021 02:03:05 +0200 Subject: [PATCH 10/12] Fix RTL text in video titles on Firefox The behavior was as follow: on Right-To-Left text (e.g Arabic) that is wrapped (because it's too long to fit on one line), the second row and following rows may or may not be right aligned (as RTL text should be). Opening the devtools fixes that alignement, as consistently as closing the devtool breaks it. This problem seems to arrive only in the following configurations (link nested in a paragraph, both of which may or may not have the dir= attribute): * `

RTL_TEXT

` * `

RTL_TEXT

` * `

RTL_TEXT

` with the following CSS: ``` p { unicode-bidi: plaintext; text-align: start; } ``` Changing the HTML to the following configuration (a paragraph with the dir= attribute, nested in a link) seems to fix it: `

RTL_TEXT

` --- src/invidious/views/components/item.ecr | 49 +++++++++++-------------- 1 file changed, 22 insertions(+), 27 deletions(-) diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index 6f027bee..85ff53a1 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -2,13 +2,13 @@
<% case item when %> <% when SearchChannel %> - + <% if !env.get("preferences").as(Preferences).thin_mode %>
"/>
<% end %> -

<%= item.author %>

+

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

<%= translate(locale, "`x` subscribers", number_with_separator(item.subscriber_count)) %>

<% if !item.auto_generated %>

<%= translate(locale, "`x` videos", number_with_separator(item.video_count)) %>

<% end %> @@ -27,15 +27,13 @@

<%= number_with_separator(item.video_count) %> videos

<% end %> -

<%= item.title %>

+

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

+ + +

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

 -

- - <%= item.author %> - -

<% when MixVideo %> - + <% if !env.get("preferences").as(Preferences).thin_mode %>
@@ -44,13 +42,11 @@ <% end %>
<% end %> -

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

+

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

+ + +

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

 -

- - <%= item.author %> - -

<% when PlaylistVideo %> <% if !env.get("preferences").as(Preferences).thin_mode %> @@ -76,13 +72,11 @@ <% end %>
<% end %> -

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

+

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

+ + +

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

 -

- - <%= item.author %> - -

<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> @@ -98,8 +92,8 @@
<% else %> - <% if !env.get("preferences").as(Preferences).thin_mode %> - + + <% if !env.get("preferences").as(Preferences).thin_mode %>
<% if env.get? "show_watched" %> @@ -134,12 +128,13 @@

<%= recode_length_seconds(item.length_seconds) %>

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

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

+ <% end %> +

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

+ +
-

+

From cfcb64c5164816e27496366e0f6fb489dfaa6932 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Fri, 25 Jun 2021 20:47:15 +0200 Subject: [PATCH 12/12] Fix layout of video 'card' items Previous changes broke alignment of text and icons --- assets/css/default.css | 15 ++++ src/invidious/views/components/item.ecr | 91 ++++++++++++++----------- 2 files changed, 65 insertions(+), 41 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 1df63412..06a2f07f 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -282,6 +282,21 @@ input[type="search"]::-webkit-search-cancel-button { } } + +/* + * Video "cards" (results/playlist/channel videos) + */ + +.video-card-row { margin: 15px 0; } + +.flexible { display: flex; } +.flex-left { flex: 1 1 100%; flex-wrap: wrap; } +.flex-right { flex: 1 0 max-content; flex-wrap: nowrap; } + +p.channel-name { margin: 0; } +p.video-data { margin: 0; font-weight: bold; font-size: 80%; } + + /* * Footer */ diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index 85ff53a1..7fbefc38 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -74,23 +74,28 @@ <% end %>

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

- -

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

- -
- <% 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)) %>
- <% else %> -
- <% end %> +
+
+

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

+
+
-
- <%= item.responds_to?(:views) && item.views ? translate(locale, "`x` views", number_to_short_text(item.views || 0)) : "" %> +
+
+ <% 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(locale, "`x` views", number_to_short_text(item.views || 0)) %>

+
+ <% end %> + <% else %> <% if !env.get("preferences").as(Preferences).thin_mode %> @@ -123,7 +128,7 @@ <% end %> <% if item.responds_to?(:live_now) && item.live_now %> -

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

+

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

<% elsif item.length_seconds != 0 %>

<%= recode_length_seconds(item.length_seconds) %>

<% end %> @@ -132,36 +137,40 @@

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

 -
- -

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

 - -
- " href="https://www.youtube.com/watch?v=<%= item.id %>"> - - - " href="/watch?v=<%= item.id %>&listen=1"> - - - " href="/redirect?referer=<%=HTML.escape("watch?v=#{item.id}")%>"> - - +
+
+

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

+
+
+
+ " href="https://www.youtube.com/watch?v=<%= item.id %>"> + + + " href="/watch?v=<%= item.id %>&listen=1"> + + + " href="/redirect?referer=<%=HTML.escape("watch?v=#{item.id}")%>"> + + +
-
- <% 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)) %>
- <% else %> -
- <% end %> - -
- <%= item.responds_to?(:views) && item.views ? translate(locale, "`x` views", number_to_short_text(item.views || 0)) : "" %> +
+
+ <% 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(locale, "`x` views", number_to_short_text(item.views || 0)) %>

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