Merge pull request #149 from pimlie/feat-blur-spoiler-previews

feat: add support to blur spoiler previews

.env.example

@@ -24,6 +24,8 @@ REDLIB_DEFAULT_WIDE=off
 REDLIB_DEFAULT_POST_SORT=hot
 # Set the default comment sort method (options: confidence, top, new, controversial, old)
 REDLIB_DEFAULT_COMMENT_SORT=confidence
+# Enable blurring Spoiler content by default
+REDLIB_DEFAULT_BLUR_SPOILER=off
 # Enable showing NSFW content by default
 REDLIB_DEFAULT_SHOW_NSFW=off
 # Enable blurring NSFW content by default

README.md

@@ -394,6 +394,7 @@ Assign a default value for each user-modifiable setting by passing environment v
 | `WIDE`                              | `["on", "off"]`                                                                                                                    | `off`         |
 | `POST_SORT`                         | `["hot", "new", "top", "rising", "controversial"]`                                                                                 | `hot`         |
 | `COMMENT_SORT`                      | `["confidence", "top", "new", "controversial", "old"]`                                                                             | `confidence`  |
+| `BLUR_SPOILER`                         | `["on", "off"]`                                                                                                                    | `off`         |
 | `SHOW_NSFW`                         | `["on", "off"]`                                                                                                                    | `off`         |
 | `BLUR_NSFW`                         | `["on", "off"]`                                                                                                                    | `off`         |
 | `USE_HLS`                           | `["on", "off"]`                                                                                                                    | `off`         |

app.json

@@ -29,6 +29,9 @@
     "REDLIB_DEFAULT_POST_SORT": {
       "required": false
     },
+    "REDLIB_DEFAULT_BLUR_SPOILER": {
+      "required": false
+    },
     "REDLIB_DEFAULT_SHOW_NSFW": {
       "required": false
     },

contrib/redlib.conf

@@ -6,6 +6,7 @@ PORT=12345
 #REDLIB_DEFAULT_WIDE=off
 #REDLIB_DEFAULT_POST_SORT=hot
 #REDLIB_DEFAULT_COMMENT_SORT=confidence
+#REDLIB_DEFAULT_BLUR_SPOILER=off
 #REDLIB_DEFAULT_SHOW_NSFW=off
 #REDLIB_DEFAULT_BLUR_NSFW=off
 #REDLIB_DEFAULT_USE_HLS=off

src/config.rs

@@ -48,6 +48,10 @@ pub struct Config {
 	#[serde(alias = "LIBREDDIT_DEFAULT_POST_SORT")]
 	pub(crate) default_post_sort: Option<String>,
 
+	#[serde(rename = "REDLIB_DEFAULT_BLUR_SPOILER")]
+	#[serde(alias = "LIBREDDIT_DEFAULT_BLUR_SPOILER")]
+	pub(crate) default_blur_spoiler: Option<String>,
+
 	#[serde(rename = "REDLIB_DEFAULT_SHOW_NSFW")]
 	#[serde(alias = "LIBREDDIT_DEFAULT_SHOW_NSFW")]
 	pub(crate) default_show_nsfw: Option<String>,
@@ -130,6 +134,7 @@ impl Config {
 			default_post_sort: parse("REDLIB_DEFAULT_POST_SORT"),
 			default_wide: parse("REDLIB_DEFAULT_WIDE"),
 			default_comment_sort: parse("REDLIB_DEFAULT_COMMENT_SORT"),
+			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_use_hls: parse("REDLIB_DEFAULT_USE_HLS"),
@@ -155,6 +160,7 @@ fn get_setting_from_config(name: &str, config: &Config) -> Option<String> {
 		"REDLIB_DEFAULT_LAYOUT" => config.default_layout.clone(),
 		"REDLIB_DEFAULT_COMMENT_SORT" => config.default_comment_sort.clone(),
 		"REDLIB_DEFAULT_POST_SORT" => config.default_post_sort.clone(),
+		"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_USE_HLS" => config.default_use_hls.clone(),

src/instance_info.rs

@@ -141,6 +141,7 @@ impl InstanceInfo {
 				["Wide", &convert(&self.config.default_wide)],
 				["Comment sort", &convert(&self.config.default_comment_sort)],
 				["Post sort", &convert(&self.config.default_post_sort)],
+				["Blur Spoiler", &convert(&self.config.default_blur_spoiler)],
 				["Show NSFW", &convert(&self.config.default_show_nsfw)],
 				["Blur NSFW", &convert(&self.config.default_blur_nsfw)],
 				["Use HLS", &convert(&self.config.default_use_hls)],
@@ -174,6 +175,7 @@ impl InstanceInfo {
                     Default wide: {:?}\n
                     Default comment sort: {:?}\n
                     Default post sort: {:?}\n
+					Default blur Spoiler: {:?}\n
                     Default show NSFW: {:?}\n
                     Default blur NSFW: {:?}\n
                     Default use HLS: {:?}\n
@@ -197,6 +199,7 @@ impl InstanceInfo {
 					self.config.default_wide,
 					self.config.default_comment_sort,
 					self.config.default_post_sort,
+					self.config.default_blur_spoiler,
 					self.config.default_show_nsfw,
 					self.config.default_blur_nsfw,
 					self.config.default_use_hls,

src/settings.rs

@@ -19,13 +19,14 @@ struct SettingsTemplate {
 
 // CONSTANTS
 
-const PREFS: [&str; 16] = [
+const PREFS: [&str; 17] = [
 	"theme",
 	"front_page",
 	"layout",
 	"wide",
 	"comment_sort",
 	"post_sort",
+	"blur_spoiler",
 	"show_nsfw",
 	"blur_nsfw",
 	"use_hls",

src/utils.rs

@@ -157,6 +157,7 @@ impl PollOption {
 
 // Post flags with nsfw and stickied
 pub struct Flags {
+	pub spoiler: bool,
 	pub nsfw: bool,
 	pub stickied: bool,
 }
@@ -403,6 +404,7 @@ impl Post {
 					},
 				},
 				flags: Flags {
+					spoiler: data["spoiler"].as_bool().unwrap_or_default(),
 					nsfw: data["over_18"].as_bool().unwrap_or_default(),
 					stickied: data["stickied"].as_bool().unwrap_or_default() || data["pinned"].as_bool().unwrap_or_default(),
 				},
@@ -575,6 +577,7 @@ pub struct Preferences {
 	pub front_page: String,
 	pub layout: String,
 	pub wide: String,
+	pub blur_spoiler: String,
 	pub show_nsfw: String,
 	pub blur_nsfw: String,
 	pub hide_hls_notification: String,
@@ -612,6 +615,7 @@ impl Preferences {
 			front_page: setting(req, "front_page"),
 			layout: setting(req, "layout"),
 			wide: setting(req, "wide"),
+			blur_spoiler: setting(req, "blur_spoiler"),
 			show_nsfw: setting(req, "show_nsfw"),
 			hide_sidebar_and_summary: setting(req, "hide_sidebar_and_summary"),
 			blur_nsfw: setting(req, "blur_nsfw"),
@@ -732,6 +736,7 @@ pub async fn parse_post(post: &Value) -> Post {
 			},
 		},
 		flags: Flags {
+			spoiler: post["data"]["spoiler"].as_bool().unwrap_or_default(),
 			nsfw: post["data"]["over_18"].as_bool().unwrap_or_default(),
 			stickied: post["data"]["stickied"].as_bool().unwrap_or_default() || post["data"]["pinned"].as_bool().unwrap_or(false),
 		},

static/style.css

@@ -52,6 +52,7 @@
 	--visited: #aaa;
 	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 	--popup: #b80a27;
+	--spoiler: #ddd;
 
 	/* Hint color theme to browser for scrollbar */
 	color-scheme: dark;
@@ -71,6 +72,7 @@
 		--highlighted: white;
 		--visited: #555;
 		--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		--spoiler: #0f0f0f;
 
 		/* Hint color theme to browser for scrollbar */
 		color-scheme: light;
@@ -929,6 +931,15 @@ a.search_subreddit:hover {
 	font-weight: bold;
 }
 
+.spoiler {
+	color: var(--spoiler);
+	margin-left: 5px;
+	border: 1px solid var(--spoiler);
+	padding: 3px;
+	font-size: 12px;
+	border-radius: 5px;
+}
+
 .post_media_content, .post .__NoScript_PlaceHolder__, .gallery {
 	max-width: calc(100% - 40px);
 	grid-area: post_media;

templates/settings.html

@@ -54,6 +54,11 @@
 						{% call utils::options(prefs.comment_sort, ["confidence", "top", "new", "controversial", "old"], "confidence") %}
 					</select>
 				</div>
+				<div class="prefs-group">
+					<label for="blur_spoiler">Blur spoiler previews:</label>
+					<input type="hidden" value="off" name="blur_spoiler">
+					<input type="checkbox" name="blur_spoiler" id="blur_spoiler" {% if prefs.blur_spoiler == "on" %}checked{% endif %}>
+				</div>
         {% if !crate::utils::sfw_only() %}
 				<div class="prefs-group">
 					<label for="show_nsfw">Show NSFW posts:</label>

templates/utils.html

@@ -62,6 +62,7 @@
 {%- endmacro %}
 
 {% macro post(post) -%}
+{% set post_should_be_blurred = post.flags.spoiler && prefs.blur_spoiler=="on" -%}
 <!-- POST CONTENT -->
 <div class="post highlighted">
 	<p class="post_header">
@@ -93,6 +94,7 @@
 				style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call render_flair(post.flair.flair_parts) %}</a>
 		{% endif %}
 		{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
+		{% if post.flags.spoiler %} <small class="spoiler">Spoiler</small>{% endif %}
 	</h1>
 
 	<!-- POST MEDIA -->
@@ -101,12 +103,13 @@
 	<div class="post_media_content">
 		<a href="{{ post.media.url }}" class="post_media_image" >
 			{% if post.media.height == 0 || post.media.width == 0 %}
-			<!-- i.redd.it images speical case -->
+			<!-- i.redd.it images special case -->
-			<img width="100%" height="100%" loading="lazy" alt="Post image" src="{{ post.media.url }}"/>
+			<img width="100%" height="100%" loading="lazy" alt="Post image" src="{{ post.media.url }}"{%if post_should_be_blurred %} class="post_nsfw_blur"{% endif %}/>
 			{% else %}
 			<svg
 				width="{{ post.media.width }}px"
 				height="{{ post.media.height }}px"
+				{%if post_should_be_blurred %}class="post_nsfw_blur"{% endif %}
 				xmlns="http://www.w3.org/2000/svg">
 					<image width="100%" height="100%" href="{{ post.media.url }}"/>
 					<desc>
@@ -120,7 +123,7 @@
 	{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
 	<script src="/hls.min.js"></script>
 	<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 }}" preload="none" controls>
+		<video class="post_media_video short {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}{%if post_should_be_blurred %} post_nsfw_blur{% 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>
@@ -128,7 +131,7 @@
 	<script src="/playHLSVideo.js"></script>
 	{% else %}
 	<div class="post_media_content">
-		<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{%if post_should_be_blurred %} post_nsfw_blur{% endif %}" 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 %}
@@ -194,6 +197,7 @@
 {% endmacro %}
 
 {% macro post_in_list(post) -%}
+{% set post_should_be_blurred = (post.flags.nsfw && prefs.blur_nsfw=="on") || (post.flags.spoiler && prefs.blur_spoiler=="on") -%}
 <div class="post {% if post.flags.stickied %}stickied{% endif %}" id="{{ post.id }}">
 	<p class="post_header">
 		{% let community -%}
@@ -222,7 +226,7 @@
 				style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};"
 				dir="ltr">{% call render_flair(post.flair.flair_parts) %}</a>
 		{% endif %}
-		<a href="{{ post.permalink }}">{{ post.title }}</a>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
+		<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" %}
@@ -233,7 +237,7 @@
 			<img width="100%" height="100%" loading="lazy" alt="Post image" src="{{ post.media.url }}"/>
 			{% else %}
 			<svg
-				{%if post.flags.nsfw && prefs.blur_nsfw=="on" %}class="post_nsfw_blur"{% endif %}
+				{%if post_should_be_blurred %}class="post_nsfw_blur"{% endif %}
 				width="{{ post.media.width }}px"
 				height="{{ post.media.height }}px"
 				xmlns="http://www.w3.org/2000/svg">
@@ -247,19 +251,19 @@
 	</div>
 	{% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "gif" %}
 	<div class="post_media_content">
-		<video class="post_media_video short {%if post.flags.nsfw && prefs.blur_nsfw=="on" %}post_nsfw_blur{% endif %}" 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 loop {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
+		<video class="post_media_video short {%if post_should_be_blurred %}post_nsfw_blur{% endif %}" 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 loop {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
 	</div>
 	{% else if (prefs.layout.is_empty() || prefs.layout == "card") && 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 post.flags.nsfw && prefs.blur_nsfw=="on" %}post_nsfw_blur{% endif %} {% 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 post_should_be_blurred %}post_nsfw_blur{% endif %} {% 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 {%if post.flags.nsfw && prefs.blur_nsfw=="on" %}post_nsfw_blur{% endif %}" 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 {%if post_should_be_blurred %}post_nsfw_blur{% endif %}" 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 %}
@@ -272,7 +276,7 @@
 		</svg>
 		{% else %}
 		<div style="max-width:{{ post.thumbnail.width }}px;max-height:{{ post.thumbnail.height }}px;">
-			<svg {% if post.flags.nsfw && prefs.blur_nsfw=="on" %} class="thumb_nsfw_blur" {% endif %} width="{{ post.thumbnail.width }}px" height="{{ post.thumbnail.height }}px" xmlns="http://www.w3.org/2000/svg">
+			<svg {% if post_should_be_blurred %} class="thumb_nsfw_blur" {% endif %} 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 }}"/>