lug/invidious
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2196 from ahangarha/patch-1

Browse Source 
Add bi-directional text support
This commit is contained in:
Samantaz Fox 2021-06-27 22:39:45 +02:00 committed by GitHub
commit 67a18dcff6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 126 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/css/default.css
View File

@ -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 * Footer
*/ */
@ -492,11 +507,6 @@ hr {
} }
/* Description Expansion Styling*/ /* Description Expansion Styling*/
#description-box {
display: flex;
flex-direction: column;
}
#descexpansionbutton { #descexpansionbutton {
display: none display: none
} }
@ -511,7 +521,24 @@ hr {
height: 100%; height: 100%;
} }
#descexpansionbutton + label { #descexpansionbutton ~ label {
order: 1; order: 1;
margin-top: 20px; margin-top: 20px;
} }
/* Bidi (bidirectional text) support */
h1,
h2,
h3,
h4,
h5,
p,
#descriptionWrapper,
#description-box {
unicode-bidi: plaintext;
text-align: start;
}
#descriptionWrapper {
max-width: 600px;
}

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

@ -21,14 +21,16 @@
</div> </div>
</div> </div>
<div class="pure-u-1-3" style="text-align:right"> <div class="pure-u-1-3" style="text-align:right">
<h3> <h3 style="text-align:right">
<a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a> <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
</h3> </h3>
</div> </div>
</div> </div>
<div class="h-box"> <div class="h-box">
<p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p> <div id="descriptionWrapper">
<p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
</div>
</div> </div>
<div class="h-box"> <div class="h-box">

6
src/invidious/views/community.ecr
View File

@ -20,14 +20,16 @@
</div> </div>
</div> </div>
<div class="pure-u-1-3" style="text-align:right"> <div class="pure-u-1-3" style="text-align:right">
<h3> <h3 style="text-align:right">
<a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a> <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
</h3> </h3>
</div> </div>
</div> </div>
<div class="h-box"> <div class="h-box">
<p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content %></span></p> <div id="descriptionWrapper">
<p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content %></span></p>
</div>
</div> </div>
<div class="h-box"> <div class="h-box">

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

@ -2,13 +2,13 @@
<div class="h-box"> <div class="h-box">
<% case item when %> <% case item when %>
<% when SearchChannel %> <% when SearchChannel %>
<a style="width:100%" href="/channel/<%= item.ucid %>"> <a href="/channel/<%= item.ucid %>">
<% if !env.get("preferences").as(Preferences).thin_mode %> <% if !env.get("preferences").as(Preferences).thin_mode %>
<center> <center>
<img style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>"/> <img style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>"/>
</center> </center>
<% end %> <% end %>
<p><%= item.author %></p> <p dir="auto"><%= HTML.escape(item.author) %></p>
</a> </a>
<p><%= translate(locale, "`x` subscribers", number_with_separator(item.subscriber_count)) %></p> <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 %> <% 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> <p class="length"><%= number_with_separator(item.video_count) %> videos</p>
</div> </div>
<% end %> <% 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> </a>
<p>
<b>
<a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
</b>
</p>
<% when MixVideo %> <% 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 %> <% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail"> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/> <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
@ -44,13 +42,11 @@
<% end %> <% end %>
</div> </div>
<% end %> <% 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> </a>
<p>
<b>
<a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
</b>
</p>
<% when PlaylistVideo %> <% when PlaylistVideo %>
<a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.plid %>"> <a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.plid %>">
<% if !env.get("preferences").as(Preferences).thin_mode %> <% if !env.get("preferences").as(Preferences).thin_mode %>
@ -76,30 +72,33 @@
<% end %> <% end %>
</div> </div>
<% end %> <% end %>
<p><a href="/watch?v=<%= item.id %>"><%= HTML.escape(item.title) %></a></p> <p dir="auto"><%= HTML.escape(item.title) %></p>
</a> </a>
<p>
<b>
<a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a>
</b>
</p>
<h5 class="pure-g"> <div class="video-card-row flexible">
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> <div class="flex-left"><a href="/channel/<%= item.ucid %>">
<div class="pure-u-2-3"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></div> <p class="channel-name" dir=auto"><%= HTML.escape(item.author) %></p>
<% elsif Time.utc - item.published > 1.minute %> </a></div>
<div class="pure-u-2-3"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></div> </div>
<% else %>
<div class="pure-u-2-3"></div>
<% end %>
<div class="pure-u-1-3" style="text-align:right"> <div class="video-card-row flexible">
<%= item.responds_to?(:views) && item.views ? translate(locale, "`x` views", number_to_short_text(item.views || 0)) : "" %> <div class="flex-left">
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
<p 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 %>
<p dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p>
<% end %>
</div> </div>
</h5>
<% if item.responds_to?(:views) && item.views %>
<div class="flex-right">
<p dir="auto"><%= translate(locale, "`x` views", number_to_short_text(item.views || 0)) %></p>
</div>
<% end %>
</div>
<% else %> <% 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"> <div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/> <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
<% if env.get? "show_watched" %> <% if env.get? "show_watched" %>
@ -129,44 +128,49 @@
<% end %> <% end %>
<% if item.responds_to?(:live_now) && item.live_now %> <% if item.responds_to?(:live_now) && item.live_now %>
<p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p> <p class="length" dir="auto"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
<% elsif item.length_seconds != 0 %> <% elsif item.length_seconds != 0 %>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p> <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
<% end %> <% end %>
</div> </div>
</a> <% end %>
<% end %> <p dir="auto"><%= HTML.escape(item.title) %></p>
<p><a href="/watch?v=<%= item.id %>"><%= HTML.escape(item.title) %></a></p> </a>
<div style="display: flex">
<b style="flex: 1;"> <div class="video-card-row flexible">
<a style="width:100%" href="/channel/<%= item.ucid %>"><%= item.author %></a> <div class="flex-left"><a href="/channel/<%= item.ucid %>">
</b> <p class="channel-name" dir=auto"><%= HTML.escape(item.author) %></p>
<div class="icon-buttons"> </a></div>
<a title="<%=translate(locale, "Watch on YouTube")%>" href="https://www.youtube.com/watch?v=<%= item.id %>"> <div class="flex-right">
<i class="icon ion-logo-youtube"></i> <div class="icon-buttons">
</a> <a title="<%=translate(locale, "Watch on YouTube")%>" href="https://www.youtube.com/watch?v=<%= item.id %>">
<a title="<%=translate(locale, "Audio mode")%>" href="/watch?v=<%= item.id %>&amp;listen=1"> <i class="icon ion-logo-youtube"></i>
<i class="icon ion-md-headset"></i> </a>
</a> <a title="<%=translate(locale, "Audio mode")%>" href="/watch?v=<%= item.id %>&amp;listen=1">
<a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=<%=HTML.escape("watch?v=#{item.id}")%>"> <i class="icon ion-md-headset"></i>
<i class="icon ion-md-jet"></i> </a>
</a> <a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=<%=HTML.escape("watch?v=#{item.id}")%>">
<i class="icon ion-md-jet"></i>
</a>
</div>
</div> </div>
</div> </div>
<h5 class="pure-g"> <div class="video-card-row flexible">
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> <div class="flex-left">
<div class="pure-u-2-3"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></div> <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
<% elsif Time.utc - item.published > 1.minute %> <p class="video-data" dir="auto"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></p>
<div class="pure-u-2-3"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></div> <% elsif Time.utc - item.published > 1.minute %>
<% else %> <p class="video-data" dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p>
<div class="pure-u-2-3"></div> <% end %>
<% end %>
<div class="pure-u-1-3" style="text-align:right">
<%= item.responds_to?(:views) && item.views ? translate(locale, "`x` views", number_to_short_text(item.views || 0)) : "" %>
</div> </div>
</h5>
<% if item.responds_to?(:views) && item.views %>
<div class="flex-right">
<p class="video-data" dir="auto"><%= translate(locale, "`x` views", number_to_short_text(item.views || 0)) %></p>
</div>
<% end %>
</div>
<% end %> <% end %>
</div> </div>
</div> </div>

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

@ -64,7 +64,9 @@
</div> </div>
<div class="h-box"> <div class="h-box">
<p><%= playlist.description_html %></p> <div id="descriptionWrapper">
<p><%= playlist.description_html %></p>
</div>
</div> </div>
<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %> <% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>

6
src/invidious/views/playlists.ecr
View File

@ -20,14 +20,16 @@
</div> </div>
</div> </div>
<div class="pure-u-1-3" style="text-align:right"> <div class="pure-u-1-3" style="text-align:right">
<h3> <h3 style="text-align:right">
<a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a> <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
</h3> </h3>
</div> </div>
</div> </div>
<div class="h-box"> <div class="h-box">
<p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content if !channel.description_html.empty? %></span></p> <div id="descriptionWrapper">
<p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content if !channel.description_html.empty? %></span></p>
</div>
</div> </div>
<div class="h-box"> <div class="h-box">

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

@ -30,11 +30,11 @@
we're going to need to do it here in order to allow for translations. we're going to need to do it here in order to allow for translations.
--> -->
<style> <style>
#descexpansionbutton + label > a::after { #descexpansionbutton ~ label > a::after {
content: "<%= translate(locale, "Show more") %>" content: "<%= translate(locale, "Show more") %>"
} }
#descexpansionbutton:checked + label > a::after { #descexpansionbutton:checked ~ label > a::after {
content: "<%= translate(locale, "Show less") %>" content: "<%= translate(locale, "Show less") %>"
} }
</style> </style>
@ -246,15 +246,17 @@ we're going to need to do it here in order to allow for translations.
<div id="description-box"> <!-- Description --> <div id="description-box"> <!-- Description -->
<% if video.description.size < 200 || params.extend_desc %> <% if video.description.size < 200 || params.extend_desc %>
<%= video.description_html %>
<% else %>
<input id="descexpansionbutton" type="checkbox"/>
<label for="descexpansionbutton" style="order: 1;">
<a></a>
</label>
<div id="descriptionWrapper"> <div id="descriptionWrapper">
<%= video.description_html %> <%= video.description_html %>
</div> </div>
<% else %>
<input id="descexpansionbutton" type="checkbox"/>
<div id="descriptionWrapper">
<%= video.description_html %>
</div>
<label for="descexpansionbutton">
<a></a>
</label>
<% end %> <% end %>
</div> </div>