From 3f33a73001329fe213824e7f0a00588ba68e18f4 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Mon, 14 Oct 2024 13:20:40 +0800
Subject: [PATCH] let blurred content be focusable (TODO: add blur focus pref
 condition)

---
 templates/utils.html | 90 ++++++++++++++++++++++----------------------
 1 file changed, 44 insertions(+), 46 deletions(-)

diff --git a/templates/utils.html b/templates/utils.html
index e0b3589..61548f8 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -99,8 +99,9 @@
 
 	<!-- POST MEDIA -->
 	<!-- post_type: {{ post.post_type }} -->
-	{% if post.post_type == "image" %}
-	<div class="post_media_content">
+	{% if post.post_type == "image" || post.post_type == "video" || post.post_type == "gif" %}
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+		{% if post.post_type == "image" %}
 		<a href="{{ post.media.url }}" class="post_media_image" >
 			{% if post.media.height == 0 || post.media.width == 0 %}
 			<!-- i.redd.it images special case -->
@@ -117,23 +118,20 @@
 			</svg>
 			{% endif %}
 		</a>
-	</div>
-	{% else if post.post_type == "video" || post.post_type == "gif" %}
-	{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
-	<script src="/hls.min.js"></script>
-	<div class="post_media_content">
+		{% else %}
+		{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
+		<script src="/hls.min.js"></script>
 		<video class="post_media_video short {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" preload="none" controls>
 			<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
 			<source src="{{ post.media.url }}" type="video/mp4" />
 		</video>
-	</div>
-	<script src="/playHLSVideo.js"></script>
-	{% else %}
-	<div class="post_media_content">
+		<script src="/playHLSVideo.js"></script>
+		{% else %}
 		<video class="post_media_video" src="{{ post.media.url }}" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %} loop><a href={{ post.media.url }}>Video</a></video>
+		{% call render_hls_notification(post.permalink[1..]) %}
+		{% endif %}
+		{% endif %}
 	</div>
-	{% call render_hls_notification(post.permalink[1..]) %}
-	{% endif %}
 	{% else if post.post_type == "gallery" %}
 	<div class="gallery">
 	{% for image in post.gallery -%}
@@ -153,7 +151,7 @@
 	{% endif %}
 
 	<!-- POST BODY -->
-	<div class="post_body">
+	<div class="post_body"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
 		{{ post.body|safe }}
 		{% call poll(post) %}
 	</div>
@@ -248,8 +246,9 @@
 		<a href="{{ post.permalink }}">{{ post.title }}</a>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}{% if post.flags.spoiler %} <small class="spoiler">Spoiler</small>{% endif %}
 	</h2>
 	<!-- POST MEDIA/THUMBNAIL -->
-	{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
-	<div class="post_media_content">
+	{% if (prefs.layout.is_empty() || prefs.layout == "card") && (post.post_type == "image" || post.post_type == "gif" || post.post_type == "video") %}
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+		{% if post.post_type == "image" %}
 		<a href="{{ post.media.url }}" class="post_media_image {% if post.media.height < post.media.width*2 %}short{% endif %}" >
 			{% if post.media.height == 0 || post.media.width == 0 %}
 			<!-- i.redd.it images speical case -->
@@ -266,40 +265,39 @@
 			</svg>
 			{% endif %}
 		</a>
-	</div>
-	{% else if (prefs.layout.is_empty() || prefs.layout == "card") && (post.post_type == "gif" || post.post_type == "video") %}
-	{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
-	<div class="post_media_content">
-        <video class="post_media_video short{% if prefs.autoplay_videos == "on" %} hls_autoplay{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" controls preload="none">
+		{% else %}
+		{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
+		<video class="post_media_video short{% if prefs.autoplay_videos == "on" %} hls_autoplay{% endif %}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" controls preload="none">
 			<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
 			<source src="{{ post.media.url }}" type="video/mp4" />
 		</video>
-	</div>
-	{% else %}
-	<div class="post_media_content">
-		<video class="post_media_video short" src="{{ post.media.url }}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" preload="none" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
-	</div>
-	{% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post.id)) %}
-	{% endif %}
-	{% else if post.post_type != "self" %}
-	<a class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media.url }}{% else %}{{ post.permalink }}{% endif %}" rel="nofollow">
-		{% if post.thumbnail.url.is_empty() %}
-		<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
-			<title>Thumbnail</title>
-			<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
-		</svg>
 		{% else %}
-		<div style="max-width:{{ post.thumbnail.width }}px;max-height:{{ post.thumbnail.height }}px;">
-			<svg width="{{ post.thumbnail.width }}px" height="{{ post.thumbnail.height }}px" xmlns="http://www.w3.org/2000/svg">
-				<image width="100%" height="100%" href="{{ post.thumbnail.url }}"/>
-				<desc>
-					<img loading="lazy" alt="Thumbnail" src="{{ post.thumbnail.url }}"/>
-				</desc>
-			</svg>
-		</div>
+		<video class="post_media_video short" src="{{ post.media.url }}" {% if post.media.width > 0 && post.media.height > 0 %}width="{{ post.media.width }}" height="{{ post.media.height }}"{% endif %} poster="{{ post.media.poster }}" preload="none" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
+		{% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post.id)) %}
 		{% endif %}
-		<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
-	</a>
+		{% endif %}
+	</div>
+	{% else if post.post_type != "self" %}
+	<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+		<a href="{% if post.post_type == "link" %}{{ post.media.url }}{% else %}{{ post.permalink }}{% endif %}" rel="nofollow">
+			{% if post.thumbnail.url.is_empty() %}
+			<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
+				<title>Thumbnail</title>
+				<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
+			</svg>
+			{% else %}
+			<div style="max-width:{{ post.thumbnail.width }}px;max-height:{{ post.thumbnail.height }}px;">
+				<svg width="{{ post.thumbnail.width }}px" height="{{ post.thumbnail.height }}px" xmlns="http://www.w3.org/2000/svg">
+					<image width="100%" height="100%" href="{{ post.thumbnail.url }}"/>
+					<desc>
+						<img loading="lazy" alt="Thumbnail" src="{{ post.thumbnail.url }}"/>
+					</desc>
+				</svg>
+			</div>
+			{% endif %}
+			<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
+		</a>
+	</div>
 	{% endif %}
 	<div class="post_score" title="{{ post.score.1 }}">
     {% if prefs.hide_score != "on" %}
@@ -308,7 +306,7 @@
     &#x2022;
     {% endif %}
     <span class="label"> Upvotes</span></div>
-	<div class="post_body post_preview">
+	<div class="post_body post_preview"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
 		{{ post.body|safe }}
 	</div>