Merge 0f9eed302a into a732f18143

2025-04-03 04:57:38 +03:00 · 2025-02-04 07:17:11 +00:00 · 2025-02-04 07:17:11 +00:00 · 09eaf13429
commit 09eaf13429
parent a732f18143 0f9eed302a
11 changed files with 91 additions and 34 deletions
--- 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
--- a/README.md
+++ b/README.md
@ -443,6 +443,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`         |
--- 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
    },
--- 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
--- 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(),
--- 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,
--- a/src/settings.rs
+++ b/src/settings.rs
@ -22,7 +22,7 @@ struct SettingsTemplate {

 // CONSTANTS

-const PREFS: [&str; 18] = [
+const PREFS: [&str; 19] = [
 	"theme",
 	"front_page",
 	"layout",
@ -32,6 +32,7 @@ const PREFS: [&str; 18] = [
 	"blur_spoiler",
 	"show_nsfw",
 	"blur_nsfw",
+	"unblur_on_hover",
 	"use_hls",
 	"hide_hls_notification",
 	"autoplay_videos",
--- a/src/utils.rs
+++ b/src/utils.rs
@ -621,6 +621,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,
@ -670,6 +671,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"),
--- a/static/style.css
+++ b/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 {
@ -1313,13 +1337,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;
@ -1341,6 +1368,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;
--- a/templates/settings.html
+++ b/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">
--- 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">
+	<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">
+	<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">
+	<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">
+	<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">
+	<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 @@
 	</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 @@
    &#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>