simplify focus detection + add option to settings

This commit is contained in:
DokterKaj 2024-10-16 18:27:18 +08:00
parent 3b180e590b
commit 4d051361d8
11 changed files with 58 additions and 48 deletions

View file

@ -30,6 +30,8 @@ REDLIB_DEFAULT_BLUR_SPOILER=off
REDLIB_DEFAULT_SHOW_NSFW=off REDLIB_DEFAULT_SHOW_NSFW=off
# Enable blurring NSFW content by default # Enable blurring NSFW content by default
REDLIB_DEFAULT_BLUR_NSFW=off REDLIB_DEFAULT_BLUR_NSFW=off
# Enable unblurring content on hover by default
REDLIB_DEFAULT_UNBLUR_ON_HOVER=off
# Enable HLS video format by default # Enable HLS video format by default
REDLIB_DEFAULT_USE_HLS=off REDLIB_DEFAULT_USE_HLS=off
# Hide HLS notification by default # Hide HLS notification by default

View file

@ -398,6 +398,7 @@ Assign a default value for each user-modifiable setting by passing environment v
| `BLUR_SPOILER` | `["on", "off"]` | `off` | | `BLUR_SPOILER` | `["on", "off"]` | `off` |
| `SHOW_NSFW` | `["on", "off"]` | `off` | | `SHOW_NSFW` | `["on", "off"]` | `off` |
| `BLUR_NSFW` | `["on", "off"]` | `off` | | `BLUR_NSFW` | `["on", "off"]` | `off` |
| `UNBLUR_ON_HOVER` | `["on", "off"]` | `off` |
| `USE_HLS` | `["on", "off"]` | `off` | | `USE_HLS` | `["on", "off"]` | `off` |
| `HIDE_HLS_NOTIFICATION` | `["on", "off"]` | `off` | | `HIDE_HLS_NOTIFICATION` | `["on", "off"]` | `off` |
| `AUTOPLAY_VIDEOS` | `["on", "off"]` | `off` | | `AUTOPLAY_VIDEOS` | `["on", "off"]` | `off` |

View file

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

View file

@ -9,6 +9,7 @@ PORT=12345
#REDLIB_DEFAULT_BLUR_SPOILER=off #REDLIB_DEFAULT_BLUR_SPOILER=off
#REDLIB_DEFAULT_SHOW_NSFW=off #REDLIB_DEFAULT_SHOW_NSFW=off
#REDLIB_DEFAULT_BLUR_NSFW=off #REDLIB_DEFAULT_BLUR_NSFW=off
#REDLIB_DEFAULT_UNBLUR_ON_HOVER=off
#REDLIB_DEFAULT_USE_HLS=off #REDLIB_DEFAULT_USE_HLS=off
#REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION=off #REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION=off
#REDLIB_DEFAULT_AUTOPLAY_VIDEOS=off #REDLIB_DEFAULT_AUTOPLAY_VIDEOS=off

View file

@ -60,6 +60,10 @@ pub struct Config {
#[serde(alias = "LIBREDDIT_DEFAULT_BLUR_NSFW")] #[serde(alias = "LIBREDDIT_DEFAULT_BLUR_NSFW")]
pub(crate) default_blur_nsfw: Option<String>, 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(rename = "REDLIB_DEFAULT_USE_HLS")]
#[serde(alias = "LIBREDDIT_DEFAULT_USE_HLS")] #[serde(alias = "LIBREDDIT_DEFAULT_USE_HLS")]
pub(crate) default_use_hls: Option<String>, pub(crate) default_use_hls: Option<String>,
@ -143,6 +147,7 @@ impl Config {
default_blur_spoiler: parse("REDLIB_DEFAULT_BLUR_SPOILER"), default_blur_spoiler: parse("REDLIB_DEFAULT_BLUR_SPOILER"),
default_show_nsfw: parse("REDLIB_DEFAULT_SHOW_NSFW"), default_show_nsfw: parse("REDLIB_DEFAULT_SHOW_NSFW"),
default_blur_nsfw: parse("REDLIB_DEFAULT_BLUR_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_use_hls: parse("REDLIB_DEFAULT_USE_HLS"),
default_hide_hls_notification: parse("REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION"), default_hide_hls_notification: parse("REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION"),
default_hide_awards: parse("REDLIB_DEFAULT_HIDE_AWARDS"), 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_BLUR_SPOILER" => config.default_blur_spoiler.clone(),
"REDLIB_DEFAULT_SHOW_NSFW" => config.default_show_nsfw.clone(), "REDLIB_DEFAULT_SHOW_NSFW" => config.default_show_nsfw.clone(),
"REDLIB_DEFAULT_BLUR_NSFW" => config.default_blur_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_USE_HLS" => config.default_use_hls.clone(),
"REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION" => config.default_hide_hls_notification.clone(), "REDLIB_DEFAULT_HIDE_HLS_NOTIFICATION" => config.default_hide_hls_notification.clone(),
"REDLIB_DEFAULT_WIDE" => config.default_wide.clone(), "REDLIB_DEFAULT_WIDE" => config.default_wide.clone(),

View file

@ -146,6 +146,7 @@ impl InstanceInfo {
["Blur Spoiler", &convert(&self.config.default_blur_spoiler)], ["Blur Spoiler", &convert(&self.config.default_blur_spoiler)],
["Show NSFW", &convert(&self.config.default_show_nsfw)], ["Show NSFW", &convert(&self.config.default_show_nsfw)],
["Blur NSFW", &convert(&self.config.default_blur_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)], ["Use HLS", &convert(&self.config.default_use_hls)],
["Hide HLS notification", &convert(&self.config.default_hide_hls_notification)], ["Hide HLS notification", &convert(&self.config.default_hide_hls_notification)],
["Subscriptions", &convert(&self.config.default_subscriptions)], ["Subscriptions", &convert(&self.config.default_subscriptions)],
@ -182,6 +183,7 @@ impl InstanceInfo {
Default blur Spoiler: {:?}\n Default blur Spoiler: {:?}\n
Default show NSFW: {:?}\n Default show NSFW: {:?}\n
Default blur NSFW: {:?}\n Default blur NSFW: {:?}\n
Default unblur on hover: {:?}\n
Default use HLS: {:?}\n Default use HLS: {:?}\n
Default hide HLS notification: {:?}\n Default hide HLS notification: {:?}\n
Default subscriptions: {:?}\n Default subscriptions: {:?}\n
@ -208,6 +210,7 @@ impl InstanceInfo {
self.config.default_blur_spoiler, self.config.default_blur_spoiler,
self.config.default_show_nsfw, self.config.default_show_nsfw,
self.config.default_blur_nsfw, self.config.default_blur_nsfw,
self.config.default_unblur_on_hover,
self.config.default_use_hls, self.config.default_use_hls,
self.config.default_hide_hls_notification, self.config.default_hide_hls_notification,
self.config.default_subscriptions, self.config.default_subscriptions,

View file

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

View file

@ -600,6 +600,7 @@ pub struct Preferences {
pub blur_spoiler: String, pub blur_spoiler: String,
pub show_nsfw: String, pub show_nsfw: String,
pub blur_nsfw: String, pub blur_nsfw: String,
pub unblur_on_hover: String,
pub hide_hls_notification: String, pub hide_hls_notification: String,
pub hide_sidebar_and_summary: String, pub hide_sidebar_and_summary: String,
pub use_hls: String, pub use_hls: String,
@ -639,6 +640,7 @@ impl Preferences {
show_nsfw: setting(req, "show_nsfw"), show_nsfw: setting(req, "show_nsfw"),
hide_sidebar_and_summary: setting(req, "hide_sidebar_and_summary"), hide_sidebar_and_summary: setting(req, "hide_sidebar_and_summary"),
blur_nsfw: setting(req, "blur_nsfw"), blur_nsfw: setting(req, "blur_nsfw"),
unblur_on_hover: setting(req, "unblur_on_hover"),
use_hls: setting(req, "use_hls"), use_hls: setting(req, "use_hls"),
hide_hls_notification: setting(req, "hide_hls_notification"), hide_hls_notification: setting(req, "hide_hls_notification"),
autoplay_videos: setting(req, "autoplay_videos"), autoplay_videos: setting(req, "autoplay_videos"),

View file

@ -1146,49 +1146,35 @@ a.search_subreddit:hover {
} }
/* Unblur on hover */ /* Unblur on hover */
.post_blurred .post_media_content:not([tabindex]):hover *, .post_blurred:has(:is(.post_media_content, .post_body, .post_thumbnail):hover) {
.post_blurred .post_media_content:not([tabindex]):hover ~ .post_body, .post_media_content:not([tabindex]) *,
.post_blurred .post_media_content:not([tabindex]):has(~ .post_body:hover) *, .post_body:not([tabindex]),
.post_blurred .post_body:not([tabindex]):hover, .post_thumbnail:not([tabindex]) * {
.post_blurred .post_thumbnail:not([tabindex]):hover * { filter: none;
filter: none; }
} }
/* Unblur on click */ /* Unblur on click */
.post_blurred .post_media_content[tabindex]:not(:focus-within) *, .post_blurred:not(:has(:is(.post_media_content, .post_body, .post_thumbnail):focus-within)) {
.post_blurred .post_body[tabindex]:not(:focus-within) a, .post_media_content[tabindex] *,
.post_blurred .post_thumbnail[tabindex]:not(:focus-within) a { .post_body[tabindex] a,
pointer-events: none; .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:has(:is(.post_media_content, .post_body, .post_thumbnail):focus-within) {
.post_blurred .post_body[tabindex]:not(:focus-within), .post_media_content[tabindex] *,
.post_blurred .post_thumbnail[tabindex]:not(:focus-within) { .post_body[tabindex],
cursor: pointer; .post_thumbnail[tabindex] * {
} filter: none;
}
.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 { .post_media_image svg {

View file

@ -75,6 +75,11 @@
<input type="checkbox" name="blur_nsfw" id="blur_nsfw" {% if prefs.blur_nsfw == "on" %}checked{% endif %}> <input type="checkbox" name="blur_nsfw" id="blur_nsfw" {% if prefs.blur_nsfw == "on" %}checked{% endif %}>
</div> </div>
{% endif %} {% 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"> <div class="prefs-group">
<label for="autoplay_videos">Autoplay videos</label> <label for="autoplay_videos">Autoplay videos</label>
<input type="hidden" value="off" name="autoplay_videos"> <input type="hidden" value="off" name="autoplay_videos">

View file

@ -100,7 +100,7 @@
<!-- POST MEDIA --> <!-- POST MEDIA -->
<!-- post_type: {{ post.post_type }} --> <!-- post_type: {{ post.post_type }} -->
{% if post.post_type == "image" %} {% 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" > <a href="{{ post.media.url }}" class="post_media_image" >
{% if post.media.height == 0 || post.media.width == 0 %} {% if post.media.height == 0 || post.media.width == 0 %}
<!-- i.redd.it images special case --> <!-- i.redd.it images special case -->
@ -121,7 +121,7 @@
{% else if post.post_type == "video" || post.post_type == "gif" %} {% else if post.post_type == "video" || post.post_type == "gif" %}
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %} {% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
<script src="/hls.min.js"></script> <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> <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.alt_url }}" type="application/vnd.apple.mpegurl" />
<source src="{{ post.media.url }}" type="video/mp4" /> <source src="{{ post.media.url }}" type="video/mp4" />
@ -129,7 +129,7 @@
</div> </div>
<script src="/playHLSVideo.js"></script> <script src="/playHLSVideo.js"></script>
{% else %} {% 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> <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> </div>
{% call render_hls_notification(post.permalink[1..]) %} {% call render_hls_notification(post.permalink[1..]) %}
@ -153,7 +153,7 @@
{% endif %} {% endif %}
<!-- POST BODY --> <!-- 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 }} {{ post.body|safe }}
{% call poll(post) %} {% call poll(post) %}
</div> </div>
@ -249,7 +249,7 @@
</h2> </h2>
<!-- POST MEDIA/THUMBNAIL --> <!-- POST MEDIA/THUMBNAIL -->
{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %} {% 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 %}" > <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 %} {% if post.media.height == 0 || post.media.width == 0 %}
<!-- i.redd.it images speical case --> <!-- i.redd.it images speical case -->
@ -269,20 +269,20 @@
</div> </div>
{% else if (prefs.layout.is_empty() || prefs.layout == "card") && (post.post_type == "gif" || post.post_type == "video") %} {% 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() %} {% 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"> <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.alt_url }}" type="application/vnd.apple.mpegurl" />
<source src="{{ post.media.url }}" type="video/mp4" /> <source src="{{ post.media.url }}" type="video/mp4" />
</video> </video>
</div> </div>
{% else %} {% 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> <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> </div>
{% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post.id)) %} {% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post.id)) %}
{% endif %} {% endif %}
{% else if post.post_type != "self" %} {% 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"> <a href="{% if post.post_type == "link" %}{{ post.media.url }}{% else %}{{ post.permalink }}{% endif %}" rel="nofollow">
{% if post.thumbnail.url.is_empty() %} {% if post.thumbnail.url.is_empty() %}
<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
@ -310,7 +310,7 @@
&#x2022; &#x2022;
{% endif %} {% endif %}
<span class="label"> Upvotes</span></div> <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 }} {{ post.body|safe }}
</div> </div>