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 6fabfcc..e5d4219 100644 --- 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` | 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, + #[serde(rename = "REDLIB_DEFAULT_UNBLUR_ON_HOVER")] + #[serde(alias = "LIBREDDIT_DEFAULT_UNBLUR_ON_HOVER")] + pub(crate) default_unblur_on_hover: Option, + #[serde(rename = "REDLIB_DEFAULT_USE_HLS")] #[serde(alias = "LIBREDDIT_DEFAULT_USE_HLS")] pub(crate) default_use_hls: Option, @@ -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 { "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 5f82ce6..5bd3a43 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 34718c2..7d1029b 100644 --- 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", diff --git a/src/utils.rs b/src/utils.rs index 0aa3159..d916e71 100644 --- 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"), diff --git a/static/style.css b/static/style.css index 76b55dd..033eb45 100644 --- 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; diff --git a/templates/settings.html b/templates/settings.html index fef91cf..a46c88c 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -81,6 +81,11 @@ {% endif %} +
+ + + +
diff --git a/templates/utils.html b/templates/utils.html index e0b3589..7cd3b89 100644 --- a/templates/utils.html +++ b/templates/utils.html @@ -100,7 +100,7 @@ {% if post.post_type == "image" %} -
+
{% if post.media.height == 0 || post.media.width == 0 %} @@ -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() %} -
+
{% else %} -
+
Video
{% call render_hls_notification(post.permalink[1..]) %} @@ -153,7 +153,7 @@ {% endif %} -
+
{{ post.body|safe }} {% call poll(post) %}
@@ -249,7 +249,7 @@ {% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} -
+
{% if post.media.height == 0 || post.media.width == 0 %} @@ -269,37 +269,39 @@
{% 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() %} -
+
{% else %} -
+
Video
{% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post.id)) %} {% endif %} {% else if post.post_type != "self" %} - - {% if post.thumbnail.url.is_empty() %} - - Thumbnail - - - {% else %} -
- - - - Thumbnail - +
+ + {% if post.thumbnail.url.is_empty() %} + + Thumbnail + -
- {% endif %} - {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} - + {% else %} +
+ + + + Thumbnail + + +
+ {% endif %} + {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} + +
{% endif %}
{% if prefs.hide_score != "on" %} @@ -308,7 +310,7 @@ • {% endif %} Upvotes
-
+
{{ post.body|safe }}