feat: Unblur on click by default + add unblur on hover option

.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

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`         |

app.json

@@ -38,6 +38,9 @@
     "REDLIB_DEFAULT_BLUR_NSFW": {
       "required": false
     },
+    "REDLIB_DEFAULT_UNBLUR_ON_HOVER" : {
+      "required": false
+    },
     "REDLIB_USE_HLS": {
       "required": false
     },

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

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(),

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,

src/settings.rs

@@ -21,7 +21,7 @@ struct SettingsTemplate {
 
 // CONSTANTS
 
-const PREFS: [&str; 18] = [
+const PREFS: [&str; 19] = [
 	"theme",
 	"front_page",
 	"layout",
@@ -31,6 +31,7 @@ const PREFS: [&str; 18] = [
 	"blur_spoiler",
 	"show_nsfw",
 	"blur_nsfw",
+	"unblur_on_hover",
 	"use_hls",
 	"hide_hls_notification",
 	"autoplay_videos",

src/utils.rs

@@ -611,6 +611,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 video_quality: String,
 	pub hide_sidebar_and_summary: String,
@@ -651,6 +652,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"),
 			video_quality: setting(req, "video_quality"),

static/style.css

@@ -1142,15 +1142,39 @@ a.search_subreddit:hover {
 }
 
 .post_blurred .post_thumbnail * {
-    filter: blur(0.3rem);
+    filter: blur(0.25rem);
 }
 
-.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 * {
-	filter: none;
+/* Unblur on hover */
+.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: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:has(:is(.post_media_content, .post_body, .post_thumbnail):focus-within) {
+    .post_media_content *,
+    .post_body,
+    .post_thumbnail * {
+        filter: none;
+    }
 }
 
 .post_media_image svg {
@@ -1306,13 +1330,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 +1361,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;

templates/settings.html

@@ -81,6 +81,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">

templates/utils.html

@@ -100,7 +100,7 @@ <h1 class="post_title">
 	<!-- POST MEDIA -->
 	<!-- post_type: {{ post.post_type }} -->
 	{% if post.post_type == "image" %}
-	<div class="post_media_content">
+	<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,15 +121,15 @@ <h1 class="post_title">
 	{% 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">
+	<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" />
 		</video>
 	</div>
 	<script src="/playHLSVideo.js"></script>
 	{% else %}
-	<div class="post_media_content">
+	<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 @@ <h1 class="post_title">
 	{% endif %}
 
 	<!-- POST BODY -->
-	<div class="post_body">
+	<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 class="post_title">
 	</h2>
 	<!-- POST MEDIA/THUMBNAIL -->
 	{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
-	<div class="post_media_content">
+	<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,37 +269,39 @@ <h2 class="post_title">
 	</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">
+	<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">
+	<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" %}
-	<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>
+	<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">
+				<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>
-		</div>
-		{% endif %}
-		<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
-	</a>
+			{% 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 +310,7 @@ <h2 class="post_title">
     &#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 && prefs.unblur_on_hover != "on" %} tabindex="-1" title="Unblur post"{% endif %}>
 		{{ post.body|safe }}
 	</div>