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 1/9] 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>
 

From 6e7de2f966ddbde5d85d5dc98d0c653f7a962dc6 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:19:31 +0800
Subject: [PATCH 2/9] adapt to .post_thumbnail being a wrapper + add unblur on
 click styles

---
 static/style.css | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/static/style.css b/static/style.css
index a9d893a..1adf1b6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1141,10 +1141,11 @@ a.search_subreddit:hover {
     filter: blur(0.25rem);
 }
 
-.post_blurred .post_thumbnail * {
+.post_blurred .post_thumbnail a * {
     filter: blur(0.3rem);
 }
 
+/* Unblur on hover */
 .post_blurred .post_media_content:hover *,
 .post_blurred .post_media_content:hover ~ .post_body,
 .post_blurred .post_media_content:has(~ .post_body:hover) *,
@@ -1153,6 +1154,22 @@ a.search_subreddit:hover {
 	filter: none;
 }
 
+/* Unblur on click */
+.post_blurred .post_media_content a,
+.post_blurred .post_body a,
+.post_blurred .post_thumbnail a {
+	pointer-events: none;
+}
+
+.post_blurred .post_media_content:focus *,
+.post_blurred .post_media_content:focus ~ .post_body,
+.post_blurred .post_media_content:has(~ .post_body:focus) *,
+.post_blurred .post_body:focus,
+.post_blurred .post_thumbnail:focus * {
+	filter: none;
+	pointer-events: auto;
+}
+
 .post_media_image svg {
     max-width: 100%;
     height: auto;
@@ -1306,13 +1323,16 @@ a.search_subreddit:hover {
 .post_thumbnail {
     border-radius: 5px;
     border: var(--panel-border);
-    display: grid;
     overflow: hidden;
     background-color: var(--background);
     grid-area: post_thumbnail;
     margin: 5px;
 }
 
+.post_thumbnail a {
+    display: grid;
+}
+
 .post_thumbnail div {
     grid-area: 1 / 1 / 2 / 2;
     object-fit: cover;
@@ -1334,6 +1354,10 @@ a.search_subreddit:hover {
     background-color: var(--highlighted);
 }
 
+.post_thumbnail.no_thumbnail a {
+    height: 100%;
+}
+
 .post_thumbnail.no_thumbnail svg {
     grid-area: 1 / 1 / 2 / 2;
     align-self: center;

From 92852cd423a1e481251a4add8c67e33de19e9153 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:55:21 +0800
Subject: [PATCH 3/9] revert to old if-else structure

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

diff --git a/templates/utils.html b/templates/utils.html
index 61548f8..2355228 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -99,9 +99,8 @@
 
 	<!-- POST MEDIA -->
 	<!-- post_type: {{ post.post_type }} -->
-	{% if post.post_type == "image" || post.post_type == "video" || post.post_type == "gif" %}
+	{% if post.post_type == "image" %}
 	<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 -->
@@ -118,20 +117,23 @@
 			</svg>
 			{% endif %}
 		</a>
-		{% else %}
-		{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
-		<script src="/hls.min.js"></script>
+	</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"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
 		<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>
-		<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>
+	<script src="/playHLSVideo.js"></script>
+	{% else %}
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+		<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>
+	</div>
+	{% call render_hls_notification(post.permalink[1..]) %}
+	{% endif %}
 	{% else if post.post_type == "gallery" %}
 	<div class="gallery">
 	{% for image in post.gallery -%}
@@ -246,9 +248,8 @@
 		<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" || post.post_type == "gif" || post.post_type == "video") %}
+	{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
 	<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 -->
@@ -265,18 +266,21 @@
 			</svg>
 			{% endif %}
 		</a>
-		{% 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">
+	</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"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+        <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>
-		{% else %}
-		<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 %}
-		{% endif %}
 	</div>
+	{% else %}
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+		<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" %}
 	<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">

From ac7eb2e97bee15bdb30e3d03b036d24d8ca6801a Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:11:47 +0800
Subject: [PATCH 4/9] fix `.post_body a` not reenabling on click + separate
 pointer, filter rules

---
 static/style.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/static/style.css b/static/style.css
index 1adf1b6..71e9a21 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1161,13 +1161,20 @@ a.search_subreddit:hover {
 	pointer-events: none;
 }
 
+.post_blurred .post_media_content:focus a,
+.post_blurred .post_media_content:focus ~ .post_body a,
+.post_blurred .post_media_content:has(~ .post_body:focus) a,
+.post_blurred .post_body:focus a,
+.post_blurred .post_thumbnail:focus a {
+	pointer-events: auto;
+}
+
 .post_blurred .post_media_content:focus *,
 .post_blurred .post_media_content:focus ~ .post_body,
 .post_blurred .post_media_content:has(~ .post_body:focus) *,
 .post_blurred .post_body:focus,
 .post_blurred .post_thumbnail:focus * {
 	filter: none;
-	pointer-events: auto;
 }
 
 .post_media_image svg {

From eacb0cf7fda53ecae05c8fab12da6c4abd690d76 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Tue, 15 Oct 2024 01:14:16 +0800
Subject: [PATCH 5/9] fix reblurring and disabling after focusing on link

---
 static/style.css | 67 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 43 insertions(+), 24 deletions(-)

diff --git a/static/style.css b/static/style.css
index 71e9a21..61d3235 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1146,35 +1146,54 @@ a.search_subreddit:hover {
 }
 
 /* Unblur on hover */
-.post_blurred .post_media_content:hover *,
-.post_blurred .post_media_content:hover ~ .post_body,
-.post_blurred .post_media_content:has(~ .post_body:hover) *,
-.post_blurred .post_body:hover,
-.post_blurred .post_thumbnail:hover * {
+.post_blurred .post_media_content:not([tabindex]):hover *,
+.post_blurred .post_media_content:not([tabindex]):hover ~ .post_body,
+.post_blurred .post_media_content:not([tabindex]):has(~ .post_body:hover) *,
+.post_blurred .post_body:not([tabindex]):hover,
+.post_blurred .post_thumbnail:not([tabindex]):hover a * {
 	filter: none;
 }
 
 /* Unblur on click */
-.post_blurred .post_media_content a,
-.post_blurred .post_body a,
-.post_blurred .post_thumbnail a {
-	pointer-events: none;
-}
+.post_blurred {
+    .post_media_content[tabindex],
+    .post_body[tabindex],
+    .post_thumbnail[tabindex] {
+        cursor: pointer;
+        /* Disable links when link is not focused */
+        a:not(:focus) {
+            pointer-events: none;
+        }
+    }
+    
+    /* Enable links when content is focused */
+    .post_media_content:focus a,
+    .post_media_content:focus ~ .post_body a,
+    .post_media_content:has(~ .post_body:focus) a,
+    .post_body:focus a,
+    .post_thumbnail:focus a,
+    /* Keep enabling links when a link is focused */
+    .post_media_content:has(*:focus) a,
+    .post_media_content:has(*:focus) ~ .post_body a,
+    .post_media_content:has(~ .post_body a:focus) a,
+    .post_body:has(a:focus) a {
+        pointer-events: auto !important;
+    }
 
-.post_blurred .post_media_content:focus a,
-.post_blurred .post_media_content:focus ~ .post_body a,
-.post_blurred .post_media_content:has(~ .post_body:focus) a,
-.post_blurred .post_body:focus a,
-.post_blurred .post_thumbnail:focus a {
-	pointer-events: auto;
-}
-
-.post_blurred .post_media_content:focus *,
-.post_blurred .post_media_content:focus ~ .post_body,
-.post_blurred .post_media_content:has(~ .post_body:focus) *,
-.post_blurred .post_body:focus,
-.post_blurred .post_thumbnail:focus * {
-	filter: none;
+    /* Unblur when content is focused */
+    .post_media_content:focus *,
+    .post_media_content:focus ~ .post_body,
+    .post_media_content:has(~ .post_body:focus) *,
+    .post_body:focus,
+    .post_thumbnail:focus a *,
+    /* Keep unblurring when link or video is focused */
+    .post_media_content:has(*:focus) *,
+    .post_media_content:has(*:focus) ~ .post_body,
+    .post_media_content:has(~ .post_body a:focus) *,
+    .post_body:has(a:focus),
+    .post_thumbnail a:focus * {
+        filter: none;
+    }
 }
 
 .post_media_image svg {

From 3b180e590bbf9c3c8ec9a0b08416b6b9e6aed41d Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Wed, 16 Oct 2024 00:40:12 +0800
Subject: [PATCH 6/9] simplify with `:focus-within` to fix right-click taking
 two tries + add "Unblur post" tooltip

---
 static/style.css     | 77 +++++++++++++++++++++-----------------------
 templates/utils.html | 18 +++++------
 2 files changed, 45 insertions(+), 50 deletions(-)

diff --git a/static/style.css b/static/style.css
index 61d3235..9130ce0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1141,8 +1141,8 @@ a.search_subreddit:hover {
     filter: blur(0.25rem);
 }
 
-.post_blurred .post_thumbnail a * {
-    filter: blur(0.3rem);
+.post_blurred .post_thumbnail * {
+    filter: blur(0.25rem);
 }
 
 /* Unblur on hover */
@@ -1150,50 +1150,45 @@ a.search_subreddit:hover {
 .post_blurred .post_media_content:not([tabindex]):hover ~ .post_body,
 .post_blurred .post_media_content:not([tabindex]):has(~ .post_body:hover) *,
 .post_blurred .post_body:not([tabindex]):hover,
-.post_blurred .post_thumbnail:not([tabindex]):hover a * {
+.post_blurred .post_thumbnail:not([tabindex]):hover * {
 	filter: none;
 }
 
 /* Unblur on click */
-.post_blurred {
-    .post_media_content[tabindex],
-    .post_body[tabindex],
-    .post_thumbnail[tabindex] {
-        cursor: pointer;
-        /* Disable links when link is not focused */
-        a:not(:focus) {
-            pointer-events: none;
-        }
-    }
-    
-    /* Enable links when content is focused */
-    .post_media_content:focus a,
-    .post_media_content:focus ~ .post_body a,
-    .post_media_content:has(~ .post_body:focus) a,
-    .post_body:focus a,
-    .post_thumbnail:focus a,
-    /* Keep enabling links when a link is focused */
-    .post_media_content:has(*:focus) a,
-    .post_media_content:has(*:focus) ~ .post_body a,
-    .post_media_content:has(~ .post_body a:focus) a,
-    .post_body:has(a:focus) a {
-        pointer-events: auto !important;
-    }
+.post_blurred .post_media_content[tabindex]:not(:focus-within) *,
+.post_blurred .post_body[tabindex]:not(:focus-within) a,
+.post_blurred .post_thumbnail[tabindex]:not(:focus-within) a {
+    pointer-events: none;
+}
 
-    /* Unblur when content is focused */
-    .post_media_content:focus *,
-    .post_media_content:focus ~ .post_body,
-    .post_media_content:has(~ .post_body:focus) *,
-    .post_body:focus,
-    .post_thumbnail:focus a *,
-    /* Keep unblurring when link or video is focused */
-    .post_media_content:has(*:focus) *,
-    .post_media_content:has(*:focus) ~ .post_body,
-    .post_media_content:has(~ .post_body a:focus) *,
-    .post_body:has(a:focus),
-    .post_thumbnail a:focus * {
-        filter: none;
-    }
+.post_blurred .post_media_content[tabindex]:not(:focus-within),
+.post_blurred .post_body[tabindex]:not(:focus-within),
+.post_blurred .post_thumbnail[tabindex]:not(:focus-within) {
+    cursor: pointer;
+}
+
+.post_blurred .post_media_content:focus-within *,
+.post_blurred .post_media_content:focus-within ~ .post_body,
+.post_blurred .post_media_content:has(~ .post_body:focus-within) *,
+.post_blurred .post_body:focus-within,
+.post_blurred .post_thumbnail:focus-within * {
+    filter: none;
+}
+
+.post_blurred .post_media_content:focus-within *,
+.post_blurred .post_media_content:focus-within ~ .post_body a,
+.post_blurred .post_media_content:has(~ .post_body:focus-within) *,
+.post_blurred .post_body:focus-within a,
+.post_blurred .post_thumbnail:focus-within a {
+    pointer-events: unset !important;
+}
+
+.post_blurred .post_media_content:focus-within,
+.post_blurred .post_media_content:focus-within ~ .post_body,
+.post_blurred .post_media_content:has(~ .post_body:focus-within),
+.post_blurred .post_body:focus-within,
+.post_blurred .post_thumbnail:focus-within {
+    cursor: unset !important;
 }
 
 .post_media_image svg {
diff --git a/templates/utils.html b/templates/utils.html
index 2355228..8ac87ed 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -100,7 +100,7 @@
 	<!-- POST MEDIA -->
 	<!-- post_type: {{ post.post_type }} -->
 	{% if post.post_type == "image" %}
-	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
 		<a href="{{ post.media.url }}" class="post_media_image" >
 			{% if post.media.height == 0 || post.media.width == 0 %}
 			<!-- i.redd.it images special case -->
@@ -121,7 +121,7 @@
 	{% 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"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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" />
@@ -129,7 +129,7 @@
 	</div>
 	<script src="/playHLSVideo.js"></script>
 	{% else %}
-	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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>
 	</div>
 	{% call render_hls_notification(post.permalink[1..]) %}
@@ -153,7 +153,7 @@
 	{% endif %}
 
 	<!-- POST BODY -->
-	<div class="post_body"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_body"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
 		{{ post.body|safe }}
 		{% call poll(post) %}
 	</div>
@@ -249,7 +249,7 @@
 	</h2>
 	<!-- POST MEDIA/THUMBNAIL -->
 	{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
-	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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 -->
@@ -269,20 +269,20 @@
 	</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"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
         <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"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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" %}
-	<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% 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">
@@ -310,7 +310,7 @@
     &#x2022;
     {% endif %}
     <span class="label"> Upvotes</span></div>
-	<div class="post_body post_preview"{% if post_should_be_blurred %} tabindex="-1"{% endif %}>
+	<div class="post_body post_preview"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
 		{{ post.body|safe }}
 	</div>
 

From 4d051361d8268e572a9a9b238598933f01986610 Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Wed, 16 Oct 2024 18:27:18 +0800
Subject: [PATCH 7/9] simplify focus detection + add option to settings

---
 .env.example            |  2 ++
 README.md               |  1 +
 app.json                |  3 ++
 contrib/redlib.conf     |  1 +
 src/config.rs           |  6 ++++
 src/instance_info.rs    |  3 ++
 src/settings.rs         |  3 +-
 src/utils.rs            |  2 ++
 static/style.css        | 62 ++++++++++++++++-------------------------
 templates/settings.html |  5 ++++
 templates/utils.html    | 18 ++++++------
 11 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/.env.example b/.env.example
index 5e60b08..d4d85c6 100644
--- a/.env.example
+++ b/.env.example
@@ -30,6 +30,8 @@ REDLIB_DEFAULT_BLUR_SPOILER=off
 REDLIB_DEFAULT_SHOW_NSFW=off
 # Enable blurring NSFW content by default
 REDLIB_DEFAULT_BLUR_NSFW=off
+# Enable unblurring content on hover by default
+REDLIB_DEFAULT_UNBLUR_ON_HOVER=off
 # Enable HLS video format by default
 REDLIB_DEFAULT_USE_HLS=off
 # Hide HLS notification by default
diff --git a/README.md b/README.md
index 16be29e..c3fe270 100644
--- a/README.md
+++ b/README.md
@@ -398,6 +398,7 @@ Assign a default value for each user-modifiable setting by passing environment v
 | `BLUR_SPOILER`                         | `["on", "off"]`                                                                                                                    | `off`         |
 | `SHOW_NSFW`                         | `["on", "off"]`                                                                                                                    | `off`         |
 | `BLUR_NSFW`                         | `["on", "off"]`                                                                                                                    | `off`         |
+| `UNBLUR_ON_HOVER`                   | `["on", "off"]`                                                                                                                    | `off`         |
 | `USE_HLS`                           | `["on", "off"]`                                                                                                                    | `off`         |
 | `HIDE_HLS_NOTIFICATION`             | `["on", "off"]`                                                                                                                    | `off`         |
 | `AUTOPLAY_VIDEOS`                   | `["on", "off"]`                                                                                                                    | `off`         |
diff --git a/app.json b/app.json
index c05b26d..04884f5 100644
--- a/app.json
+++ b/app.json
@@ -38,6 +38,9 @@
     "REDLIB_DEFAULT_BLUR_NSFW": {
       "required": false
     },
+    "REDLIB_DEFAULT_UNBLUR_ON_HOVER" : {
+      "required": false
+    },
     "REDLIB_USE_HLS": {
       "required": false
     },
diff --git a/contrib/redlib.conf b/contrib/redlib.conf
index e670455..012d3dd 100644
--- a/contrib/redlib.conf
+++ b/contrib/redlib.conf
@@ -9,6 +9,7 @@ PORT=12345
 #REDLIB_DEFAULT_BLUR_SPOILER=off
 #REDLIB_DEFAULT_SHOW_NSFW=off
 #REDLIB_DEFAULT_BLUR_NSFW=off
+#REDLIB_DEFAULT_UNBLUR_ON_HOVER=off
 #REDLIB_DEFAULT_USE_HLS=off
 #REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION=off
 #REDLIB_DEFAULT_AUTOPLAY_VIDEOS=off
diff --git a/src/config.rs b/src/config.rs
index 034afc7..ab01bb6 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -60,6 +60,10 @@ pub struct Config {
 	#[serde(alias = "LIBREDDIT_DEFAULT_BLUR_NSFW")]
 	pub(crate) default_blur_nsfw: Option<String>,
 
+	#[serde(rename = "REDLIB_DEFAULT_UNBLUR_ON_HOVER")]
+	#[serde(alias = "LIBREDDIT_DEFAULT_UNBLUR_ON_HOVER")]
+	pub(crate) default_unblur_on_hover: Option<String>,
+
 	#[serde(rename = "REDLIB_DEFAULT_USE_HLS")]
 	#[serde(alias = "LIBREDDIT_DEFAULT_USE_HLS")]
 	pub(crate) default_use_hls: Option<String>,
@@ -143,6 +147,7 @@ impl Config {
 			default_blur_spoiler: parse("REDLIB_DEFAULT_BLUR_SPOILER"),
 			default_show_nsfw: parse("REDLIB_DEFAULT_SHOW_NSFW"),
 			default_blur_nsfw: parse("REDLIB_DEFAULT_BLUR_NSFW"),
+			default_unblur_on_hover: parse("REDLIB_DEFAULT_UNBLUR_ON_HOVER"),
 			default_use_hls: parse("REDLIB_DEFAULT_USE_HLS"),
 			default_hide_hls_notification: parse("REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION"),
 			default_hide_awards: parse("REDLIB_DEFAULT_HIDE_AWARDS"),
@@ -171,6 +176,7 @@ fn get_setting_from_config(name: &str, config: &Config) -> Option<String> {
 		"REDLIB_DEFAULT_BLUR_SPOILER" => config.default_blur_spoiler.clone(),
 		"REDLIB_DEFAULT_SHOW_NSFW" => config.default_show_nsfw.clone(),
 		"REDLIB_DEFAULT_BLUR_NSFW" => config.default_blur_nsfw.clone(),
+		"REDLIB_DEFAULT_UNBLUR_ON_HOVER" => config.default_unblur_on_hover.clone(),
 		"REDLIB_DEFAULT_USE_HLS" => config.default_use_hls.clone(),
 		"REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION" => config.default_hide_hls_notification.clone(),
 		"REDLIB_DEFAULT_WIDE" => config.default_wide.clone(),
diff --git a/src/instance_info.rs b/src/instance_info.rs
index c05ce5c..8d5c681 100644
--- a/src/instance_info.rs
+++ b/src/instance_info.rs
@@ -146,6 +146,7 @@ impl InstanceInfo {
 				["Blur Spoiler", &convert(&self.config.default_blur_spoiler)],
 				["Show NSFW", &convert(&self.config.default_show_nsfw)],
 				["Blur NSFW", &convert(&self.config.default_blur_nsfw)],
+				["Unblur on hover", &convert(&self.config.default_unblur_on_hover)],
 				["Use HLS", &convert(&self.config.default_use_hls)],
 				["Hide HLS notification", &convert(&self.config.default_hide_hls_notification)],
 				["Subscriptions", &convert(&self.config.default_subscriptions)],
@@ -182,6 +183,7 @@ impl InstanceInfo {
 					Default blur Spoiler: {:?}\n
                     Default show NSFW: {:?}\n
                     Default blur NSFW: {:?}\n
+					Default unblur on hover: {:?}\n
                     Default use HLS: {:?}\n
                     Default hide HLS notification: {:?}\n
                     Default subscriptions: {:?}\n
@@ -208,6 +210,7 @@ impl InstanceInfo {
 					self.config.default_blur_spoiler,
 					self.config.default_show_nsfw,
 					self.config.default_blur_nsfw,
+					self.config.default_unblur_on_hover,
 					self.config.default_use_hls,
 					self.config.default_hide_hls_notification,
 					self.config.default_subscriptions,
diff --git a/src/settings.rs b/src/settings.rs
index 5db1a03..67bd143 100644
--- a/src/settings.rs
+++ b/src/settings.rs
@@ -19,7 +19,7 @@ struct SettingsTemplate {
 
 // CONSTANTS
 
-const PREFS: [&str; 17] = [
+const PREFS: [&str; 18] = [
 	"theme",
 	"front_page",
 	"layout",
@@ -29,6 +29,7 @@ const PREFS: [&str; 17] = [
 	"blur_spoiler",
 	"show_nsfw",
 	"blur_nsfw",
+	"unblur_on_hover",
 	"use_hls",
 	"hide_hls_notification",
 	"autoplay_videos",
diff --git a/src/utils.rs b/src/utils.rs
index 6f97775..67484c9 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -600,6 +600,7 @@ pub struct Preferences {
 	pub blur_spoiler: String,
 	pub show_nsfw: String,
 	pub blur_nsfw: String,
+	pub unblur_on_hover: String,
 	pub hide_hls_notification: String,
 	pub hide_sidebar_and_summary: String,
 	pub use_hls: String,
@@ -639,6 +640,7 @@ impl Preferences {
 			show_nsfw: setting(req, "show_nsfw"),
 			hide_sidebar_and_summary: setting(req, "hide_sidebar_and_summary"),
 			blur_nsfw: setting(req, "blur_nsfw"),
+			unblur_on_hover: setting(req, "unblur_on_hover"),
 			use_hls: setting(req, "use_hls"),
 			hide_hls_notification: setting(req, "hide_hls_notification"),
 			autoplay_videos: setting(req, "autoplay_videos"),
diff --git a/static/style.css b/static/style.css
index 9130ce0..4911f30 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1146,49 +1146,35 @@ a.search_subreddit:hover {
 }
 
 /* Unblur on hover */
-.post_blurred .post_media_content:not([tabindex]):hover *,
-.post_blurred .post_media_content:not([tabindex]):hover ~ .post_body,
-.post_blurred .post_media_content:not([tabindex]):has(~ .post_body:hover) *,
-.post_blurred .post_body:not([tabindex]):hover,
-.post_blurred .post_thumbnail:not([tabindex]):hover * {
-	filter: none;
+.post_blurred:has(:is(.post_media_content, .post_body, .post_thumbnail):hover) {
+    .post_media_content:not([tabindex]) *,
+    .post_body:not([tabindex]),
+    .post_thumbnail:not([tabindex]) * {
+        filter: none;
+    }
 }
 
 /* Unblur on click */
-.post_blurred .post_media_content[tabindex]:not(:focus-within) *,
-.post_blurred .post_body[tabindex]:not(:focus-within) a,
-.post_blurred .post_thumbnail[tabindex]:not(:focus-within) a {
-    pointer-events: none;
+.post_blurred:not(:has(:is(.post_media_content, .post_body, .post_thumbnail):focus-within)) {
+    .post_media_content[tabindex] *,
+    .post_body[tabindex] a,
+    .post_thumbnail[tabindex] a {
+        pointer-events: none;
+    }
+    
+    .post_media_content[tabindex],
+    .post_body[tabindex],
+    .post_thumbnail[tabindex] {
+        cursor: pointer;
+    }
 }
 
-.post_blurred .post_media_content[tabindex]:not(:focus-within),
-.post_blurred .post_body[tabindex]:not(:focus-within),
-.post_blurred .post_thumbnail[tabindex]:not(:focus-within) {
-    cursor: pointer;
-}
-
-.post_blurred .post_media_content:focus-within *,
-.post_blurred .post_media_content:focus-within ~ .post_body,
-.post_blurred .post_media_content:has(~ .post_body:focus-within) *,
-.post_blurred .post_body:focus-within,
-.post_blurred .post_thumbnail:focus-within * {
-    filter: none;
-}
-
-.post_blurred .post_media_content:focus-within *,
-.post_blurred .post_media_content:focus-within ~ .post_body a,
-.post_blurred .post_media_content:has(~ .post_body:focus-within) *,
-.post_blurred .post_body:focus-within a,
-.post_blurred .post_thumbnail:focus-within a {
-    pointer-events: unset !important;
-}
-
-.post_blurred .post_media_content:focus-within,
-.post_blurred .post_media_content:focus-within ~ .post_body,
-.post_blurred .post_media_content:has(~ .post_body:focus-within),
-.post_blurred .post_body:focus-within,
-.post_blurred .post_thumbnail:focus-within {
-    cursor: unset !important;
+.post_blurred:has(:is(.post_media_content, .post_body, .post_thumbnail):focus-within) {
+    .post_media_content[tabindex] *,
+    .post_body[tabindex],
+    .post_thumbnail[tabindex] * {
+        filter: none;
+    }
 }
 
 .post_media_image svg {
diff --git a/templates/settings.html b/templates/settings.html
index 3940cc7..4b36a2b 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -75,6 +75,11 @@
 					<input type="checkbox" name="blur_nsfw" id="blur_nsfw" {% if prefs.blur_nsfw == "on" %}checked{% endif %}>
 				</div>
         {% endif %}
+				<div class="prefs-group">
+					<label for="unblur_on_hover">Unblur posts on hover:</label>
+					<input type="hidden" value="off" name="unblur_on_hover">
+					<input type="checkbox" name="unblur_on_hover" id="unblur_on_hover" {% if prefs.unblur_on_hover == "on" %}checked{% endif %}>
+				</div>
 				<div class="prefs-group">
 					<label for="autoplay_videos">Autoplay videos</label>
 					<input type="hidden" value="off" name="autoplay_videos">
diff --git a/templates/utils.html b/templates/utils.html
index 8ac87ed..99a2725 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -100,7 +100,7 @@
 	<!-- POST MEDIA -->
 	<!-- post_type: {{ post.post_type }} -->
 	{% if post.post_type == "image" %}
-	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<a href="{{ post.media.url }}" class="post_media_image" >
 			{% if post.media.height == 0 || post.media.width == 0 %}
 			<!-- i.redd.it images special case -->
@@ -121,7 +121,7 @@
 	{% 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"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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" />
@@ -129,7 +129,7 @@
 	</div>
 	<script src="/playHLSVideo.js"></script>
 	{% else %}
-	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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>
 	</div>
 	{% call render_hls_notification(post.permalink[1..]) %}
@@ -153,7 +153,7 @@
 	{% endif %}
 
 	<!-- POST BODY -->
-	<div class="post_body"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_body"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		{{ post.body|safe }}
 		{% call poll(post) %}
 	</div>
@@ -249,7 +249,7 @@
 	</h2>
 	<!-- POST MEDIA/THUMBNAIL -->
 	{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
-	<div class="post_media_content"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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 -->
@@ -269,20 +269,20 @@
 	</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"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
         <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"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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" %}
-	<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% 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">
@@ -310,7 +310,7 @@
     &#x2022;
     {% endif %}
     <span class="label"> Upvotes</span></div>
-	<div class="post_body post_preview"{% if post_should_be_blurred %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_body post_preview"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		{{ post.body|safe }}
 	</div>
 

From b82111599b7a795d2574f5495456d635f9ff8a7e Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Thu, 17 Oct 2024 12:50:44 +0800
Subject: [PATCH 8/9] change `post_should_be_blurred &&` to
 `*post_should_be_blurred &&` + unblur all focused content

---
 static/style.css     |  6 +++---
 templates/utils.html | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/static/style.css b/static/style.css
index 4911f30..375a4c8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1170,9 +1170,9 @@ a.search_subreddit:hover {
 }
 
 .post_blurred:has(:is(.post_media_content, .post_body, .post_thumbnail):focus-within) {
-    .post_media_content[tabindex] *,
-    .post_body[tabindex],
-    .post_thumbnail[tabindex] * {
+    .post_media_content *,
+    .post_body,
+    .post_thumbnail * {
         filter: none;
     }
 }
diff --git a/templates/utils.html b/templates/utils.html
index 99a2725..7cd3b89 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -100,7 +100,7 @@
 	<!-- POST MEDIA -->
 	<!-- post_type: {{ post.post_type }} -->
 	{% if post.post_type == "image" %}
-	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<a href="{{ post.media.url }}" class="post_media_image" >
 			{% if post.media.height == 0 || post.media.width == 0 %}
 			<!-- i.redd.it images special case -->
@@ -121,7 +121,7 @@
 	{% 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"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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" />
@@ -129,7 +129,7 @@
 	</div>
 	<script src="/playHLSVideo.js"></script>
 	{% else %}
-	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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>
 	</div>
 	{% call render_hls_notification(post.permalink[1..]) %}
@@ -153,7 +153,7 @@
 	{% endif %}
 
 	<!-- POST BODY -->
-	<div class="post_body"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_body"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		{{ post.body|safe }}
 		{% call poll(post) %}
 	</div>
@@ -249,7 +249,7 @@
 	</h2>
 	<!-- POST MEDIA/THUMBNAIL -->
 	{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
-	<div class="post_media_content"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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 -->
@@ -269,20 +269,20 @@
 	</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"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
         <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"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_media_content"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		<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" %}
-	<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_thumbnail{% if post.thumbnail.url.is_empty() %} no_thumbnail{% endif %}"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% 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">
@@ -310,7 +310,7 @@
     &#x2022;
     {% endif %}
     <span class="label"> Upvotes</span></div>
-	<div class="post_body post_preview"{% if post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
+	<div class="post_body post_preview"{% if *post_should_be_blurred && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		{{ post.body|safe }}
 	</div>
 

From 0e8f1ef6c582ecb0752beb7cd360243729570d0d Mon Sep 17 00:00:00 2001
From: DokterKaj <54882101+DokterKaj@users.noreply.github.com>
Date: Fri, 8 Nov 2024 23:04:19 +0800
Subject: [PATCH 9/9] update number of settings

---
 src/settings.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/settings.rs b/src/settings.rs
index 67bd143..ff912f5 100644
--- a/src/settings.rs
+++ b/src/settings.rs
@@ -19,7 +19,7 @@ struct SettingsTemplate {
 
 // CONSTANTS
 
-const PREFS: [&str; 18] = [
+const PREFS: [&str; 19] = [
 	"theme",
 	"front_page",
 	"layout",