forked from midou/invidious
		
	Improve accessibility (#3710)
This commit is contained in:
		@@ -346,7 +346,7 @@ def template_youtube_comments(comments, locale, thin_mode, is_replies = false)
 | 
			
		||||
      html << <<-END_HTML
 | 
			
		||||
      <div class="pure-g" style="width:100%">
 | 
			
		||||
        <div class="channel-profile pure-u-4-24 pure-u-md-2-24">
 | 
			
		||||
          <img loading="lazy" style="margin-right:1em;margin-top:1em;width:90%" src="#{author_thumbnail}">
 | 
			
		||||
          <img loading="lazy" style="margin-right:1em;margin-top:1em;width:90%" src="#{author_thumbnail}" alt="" />
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="pure-u-20-24 pure-u-md-22-24">
 | 
			
		||||
          <p>
 | 
			
		||||
@@ -367,7 +367,7 @@ def template_youtube_comments(comments, locale, thin_mode, is_replies = false)
 | 
			
		||||
          html << <<-END_HTML
 | 
			
		||||
          <div class="pure-g">
 | 
			
		||||
            <div class="pure-u-1 pure-u-md-1-2">
 | 
			
		||||
              <img loading="lazy" style="width:100%" src="/ggpht#{URI.parse(attachment["url"].as_s).request_target}">
 | 
			
		||||
              <img loading="lazy" style="width:100%" src="/ggpht#{URI.parse(attachment["url"].as_s).request_target}" alt="" />
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
          END_HTML
 | 
			
		||||
@@ -428,7 +428,7 @@ def template_youtube_comments(comments, locale, thin_mode, is_replies = false)
 | 
			
		||||
        html << <<-END_HTML
 | 
			
		||||
          <span class="creator-heart-container" title="#{translate(locale, "`x` marked it with a ❤", child["creatorHeart"]["creatorName"].as_s)}">
 | 
			
		||||
              <div class="creator-heart">
 | 
			
		||||
                  <img loading="lazy" class="creator-heart-background-hearted" src="#{creator_thumbnail}"></img>
 | 
			
		||||
                  <img loading="lazy" class="creator-heart-background-hearted" src="#{creator_thumbnail}" alt="" />
 | 
			
		||||
                  <div class="creator-heart-small-hearted">
 | 
			
		||||
                      <div class="icon ion-ios-heart creator-heart-small-container"></div>
 | 
			
		||||
                  </div>
 | 
			
		||||
@@ -702,7 +702,7 @@ def content_to_comment_html(content, video_id : String? = "")
 | 
			
		||||
            str << %(title=") << emojiAlt << "\" "
 | 
			
		||||
            str << %(width=") << emojiThumb["width"] << "\" "
 | 
			
		||||
            str << %(height=") << emojiThumb["height"] << "\" "
 | 
			
		||||
            str << %(class="channel-emoji"/>)
 | 
			
		||||
            str << %(class="channel-emoji" />)
 | 
			
		||||
          end
 | 
			
		||||
        else
 | 
			
		||||
          # Hide deleted channel emoji
 | 
			
		||||
 
 | 
			
		||||
@@ -97,7 +97,7 @@ def template_mix(mix)
 | 
			
		||||
      <li class="pure-menu-item">
 | 
			
		||||
        <a href="/watch?v=#{video["videoId"]}&list=#{mix["mixId"]}">
 | 
			
		||||
          <div class="thumbnail">
 | 
			
		||||
              <img loading="lazy" class="thumbnail" src="/vi/#{video["videoId"]}/mqdefault.jpg">
 | 
			
		||||
              <img loading="lazy" class="thumbnail" src="/vi/#{video["videoId"]}/mqdefault.jpg" alt="" />
 | 
			
		||||
              <p class="length">#{recode_length_seconds(video["lengthSeconds"].as_i)}</p>
 | 
			
		||||
          </div>
 | 
			
		||||
          <p style="width:100%">#{video["title"]}</p>
 | 
			
		||||
 
 | 
			
		||||
@@ -507,7 +507,7 @@ def template_playlist(playlist)
 | 
			
		||||
      <li class="pure-menu-item" id="#{video["videoId"]}">
 | 
			
		||||
        <a href="/watch?v=#{video["videoId"]}&list=#{playlist["playlistId"]}&index=#{video["index"]}">
 | 
			
		||||
          <div class="thumbnail">
 | 
			
		||||
              <img loading="lazy" class="thumbnail" src="/vi/#{video["videoId"]}/mqdefault.jpg">
 | 
			
		||||
              <img loading="lazy" class="thumbnail" src="/vi/#{video["videoId"]}/mqdefault.jpg" alt="" />
 | 
			
		||||
              <p class="length">#{recode_length_seconds(video["lengthSeconds"].as_i)}</p>
 | 
			
		||||
          </div>
 | 
			
		||||
          <p style="width:100%">#{video["title"]}</p>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
<% if channel.banner %>
 | 
			
		||||
    <div class="h-box">
 | 
			
		||||
        <img style="width:100%" src="/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>">
 | 
			
		||||
        <img style="width:100%" src="/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>" alt="" />
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <div class="h-box">
 | 
			
		||||
@@ -11,7 +11,7 @@
 | 
			
		||||
<div class="pure-g h-box">
 | 
			
		||||
    <div class="pure-u-2-3">
 | 
			
		||||
        <div class="channel-profile">
 | 
			
		||||
            <img src="/ggpht<%= channel_profile_pic %>">
 | 
			
		||||
            <img src="/ggpht<%= channel_profile_pic %>" alt="" />
 | 
			
		||||
            <span><%= author %></span><% if !channel.verified.nil? && channel.verified %> <i class="icon ion ion-md-checkmark-circle"></i><% end %>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 
 | 
			
		||||
@@ -7,7 +7,7 @@
 | 
			
		||||
            <a href="/channel/<%= item.ucid %>">
 | 
			
		||||
                <% if !env.get("preferences").as(Preferences).thin_mode %>
 | 
			
		||||
                    <center>
 | 
			
		||||
                        <img loading="lazy" tabindex="-1" style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>"/>
 | 
			
		||||
                        <img loading="lazy" tabindex="-1" style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>" alt="" />
 | 
			
		||||
                    </center>
 | 
			
		||||
                <% end %>
 | 
			
		||||
                <p dir="auto"><%= HTML.escape(item.author) %><% if !item.author_verified.nil? && item.author_verified %> <i class="icon ion ion-md-checkmark-circle"></i><% end %></p>
 | 
			
		||||
@@ -25,7 +25,7 @@
 | 
			
		||||
            <a style="width:100%" href="<%= url %>">
 | 
			
		||||
                <% if !env.get("preferences").as(Preferences).thin_mode %>
 | 
			
		||||
                    <div class="thumbnail">
 | 
			
		||||
                        <img loading="lazy" tabindex="-1" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>"/>
 | 
			
		||||
                        <img loading="lazy" tabindex="-1" 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>
 | 
			
		||||
                    </div>
 | 
			
		||||
                <% end %>
 | 
			
		||||
@@ -38,7 +38,7 @@
 | 
			
		||||
            <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"/>
 | 
			
		||||
                        <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 %>
 | 
			
		||||
@@ -58,7 +58,7 @@
 | 
			
		||||
            <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"/>
 | 
			
		||||
                        <img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
 | 
			
		||||
 | 
			
		||||
                        <% if plid_form = env.get?("remove_playlist_items") %>
 | 
			
		||||
                            <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">
 | 
			
		||||
@@ -112,7 +112,7 @@
 | 
			
		||||
            <a style="width:100%" href="/watch?v=<%= item.id %>">
 | 
			
		||||
                <% if !env.get("preferences").as(Preferences).thin_mode %>
 | 
			
		||||
                    <div class="thumbnail">
 | 
			
		||||
                        <img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
 | 
			
		||||
                        <img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
 | 
			
		||||
                        <% 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) || "") %>">
 | 
			
		||||
 
 | 
			
		||||
@@ -34,7 +34,7 @@
 | 
			
		||||
                <a style="width:100%" href="/watch?v=<%= item %>">
 | 
			
		||||
                    <% if !env.get("preferences").as(Preferences).thin_mode %>
 | 
			
		||||
                        <div class="thumbnail">
 | 
			
		||||
                            <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/>
 | 
			
		||||
                            <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg" alt="" />
 | 
			
		||||
                            <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) || "") %>">
 | 
			
		||||
                                <p class="watched">
 | 
			
		||||
 
 | 
			
		||||
@@ -208,7 +208,7 @@ we're going to need to do it here in order to allow for translations.
 | 
			
		||||
            <a href="/channel/<%= video.ucid %>" style="display:block;width:fit-content;width:-moz-fit-content">
 | 
			
		||||
                <div class="channel-profile">
 | 
			
		||||
                    <% if !video.author_thumbnail.empty? %>
 | 
			
		||||
                        <img src="/ggpht<%= URI.parse(video.author_thumbnail).request_target %>">
 | 
			
		||||
                        <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 %> <i class="icon ion ion-md-checkmark-circle"></i><% end %></span>
 | 
			
		||||
                </div>
 | 
			
		||||
@@ -298,7 +298,7 @@ we're going to need to do it here in order to allow for translations.
 | 
			
		||||
                            <a href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>">
 | 
			
		||||
                                <% if !env.get("preferences").as(Preferences).thin_mode %>
 | 
			
		||||
                                    <div class="thumbnail">
 | 
			
		||||
                                        <img loading="lazy" class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg">
 | 
			
		||||
                                        <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>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                <% end %>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user