From 9cef7945c04620eb0b18a200aa0db803dba99c5a Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Fri, 25 Jun 2021 02:03:05 +0200
Subject: [PATCH] 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):

* `<p><a href="some_link">RTL_TEXT</a></p>`
* `<p><a href="some_link" dir="auto">RTL_TEXT</a></p>`
* `<p dir="auto"><a href="some_link">RTL_TEXT</a></p>`

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:

`<a href="some_link"><p dir="auto">RTL_TEXT</p></a>`
---
 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 6f027bee7..85ff53a1f 100644
--- a/src/invidious/views/components/item.ecr
+++ b/src/invidious/views/components/item.ecr
@@ -2,13 +2,13 @@
     <div class="h-box">
         <% case item when %>
         <% when SearchChannel %>
-            <a style="width:100%" href="/channel/<%= item.ucid %>">
+            <a href="/channel/<%= item.ucid %>">
                 <% if !env.get("preferences").as(Preferences).thin_mode %>
                     <center>
                         <img style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>"/>
                     </center>
                 <% end %>
-                <p><%= item.author %></p>
+                <p dir="auto"><%= HTML.escape(item.author) %></p>
             </a>
             <p><%= translate(locale, "`x` subscribers", number_with_separator(item.subscriber_count)) %></p>
             <% if !item.auto_generated %><p><%= translate(locale, "`x` videos", number_with_separator(item.video_count)) %></p><% end %>
@@ -27,15 +27,13 @@
                         <p class="length"><%= number_with_separator(item.video_count) %> videos</p>
                     </div>
                 <% end %>
-                <p><%= item.title %></p>
+                <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>
-            <p>
-                <b>
-                    <a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
-                </b>
-            </p>
         <% when MixVideo %>
-            <a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.rdid %>">
+            <a href="/watch?v=<%= item.id %>&list=<%= item.rdid %>">
                 <% if !env.get("preferences").as(Preferences).thin_mode %>
                     <div class="thumbnail">
                         <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
@@ -44,13 +42,11 @@
                         <% end %>
                     </div>
                 <% end %>
-                <p><%= HTML.escape(item.title) %></p>
+                <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>
-            <p>
-                <b>
-                    <a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
-                </b>
-            </p>
         <% when PlaylistVideo %>
             <a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.plid %>">
                 <% if !env.get("preferences").as(Preferences).thin_mode %>
@@ -76,13 +72,11 @@
                         <% end %>
                     </div>
                 <% end %>
-                <p><a href="/watch?v=<%= item.id %>"><%= HTML.escape(item.title) %></a></p>
+                <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>
-            <p>
-                <b>
-                    <a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
-                </b>
-            </p>
 
             <h5 class="pure-g">
                 <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
@@ -98,8 +92,8 @@
                 </div>
             </h5>
         <% else %>
-            <% if !env.get("preferences").as(Preferences).thin_mode %>
-                <a style="width:100%" href="/watch?v=<%= item.id %>">
+            <a style="width:100%" href="/watch?v=<%= item.id %>">
+                <% if !env.get("preferences").as(Preferences).thin_mode %>
                     <div class="thumbnail">
                         <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                         <% if env.get? "show_watched" %>
@@ -134,12 +128,13 @@
                             <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                         <% end %>
                     </div>
-                </a>
-            <% end %>
-            <p><a href="/watch?v=<%= item.id %>"><%= HTML.escape(item.title) %></a></p>
+                <% end %>
+                <p dir="auto"><%= HTML.escape(item.title) %></p>
+            </a>
+
             <div style="display: flex">
                 <b style="flex: 1;">
-                    <a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
+                    <a dir="auto" href="/channel/<%= item.ucid %>"><p dir="auto"><%= HTML.escape(item.author) %></p></a>
                 </b>
                 <div class="icon-buttons">
                     <a title="<%=translate(locale, "Watch on YouTube")%>" href="https://www.youtube.com/watch?v=<%= item.id %>">