From 9bdb5c896644ec47e9c8f79f644c8c39dbd762f0 Mon Sep 17 00:00:00 2001
From: Pim <pimlie@hotmail.com>
Date: Sun, 21 Jul 2024 16:22:40 +0200
Subject: [PATCH] feat: also blur text in post body for spoilers (#186)

chore: simplify blur classes
---
 static/style.css     | 22 ++++++++++++++++------
 templates/utils.html | 20 +++++++++-----------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/static/style.css b/static/style.css
index 58eb010..2ab1eac 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1019,11 +1019,25 @@ a.search_subreddit:hover {
 	margin: auto;
 }
 
-.post_nsfw_blur {
+.post_blurred img,
+.post_blurred svg,
+.post_blurred video {
 	filter: blur(1.5rem);
 }
 
-.post_nsfw_blur:hover {
+.post_blurred .post_body {
+	filter: blur(0.25rem);
+}
+
+.post_blurred .post_thumbnail svg {
+	filter: blur(0.3rem);
+}
+
+.post_blurred img:hover,
+.post_blurred svg:hover,
+.post_blurred video:hover,
+.post_blurred .post_body:hover,
+.post_blurred .post_thumbnail:hover svg {
 	filter: none;
 }
 
@@ -1199,10 +1213,6 @@ a.search_subreddit:hover {
 	z-index: 0;
 }
 
-.thumb_nsfw_blur {
-	filter: blur(0.3rem)
-}
-
 .post_thumbnail.no_thumbnail {
 	background-color: var(--highlighted);
 }
diff --git a/templates/utils.html b/templates/utils.html
index c5ba45f..b88702b 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -64,7 +64,7 @@
 {% macro post(post) -%}
 {% set post_should_be_blurred = post.flags.spoiler && prefs.blur_spoiler=="on" -%}
 <!-- POST CONTENT -->
-<div class="post highlighted">
+<div class="post highlighted{% if post_should_be_blurred %} post_blurred{% endif %}">
 	<p class="post_header">
 		<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
 		<span class="dot">&bull;</span>
@@ -104,12 +104,11 @@
 		<a href="{{ post.media.url }}" class="post_media_image" >
 			{% if post.media.height == 0 || post.media.width == 0 %}
 			<!-- i.redd.it images special case -->
-			<img width="100%" height="100%" loading="lazy" alt="Post image" src="{{ post.media.url }}"{%if post_should_be_blurred %} class="post_nsfw_blur"{% endif %}/>
+			<img width="100%" height="100%" loading="lazy" alt="Post image" src="{{ post.media.url }}"/>
 			{% 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>
@@ -123,7 +122,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_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>
+		<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>
@@ -131,7 +130,7 @@
 	<script src="/playHLSVideo.js"></script>
 	{% else %}
 	<div class="post_media_content">
-		<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>
+		<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..]) %}
 	{% endif %}
@@ -211,7 +210,7 @@
 
 {% 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 }}">
+<div class="post{% if post.flags.stickied %} stickied{% endif %}{% if post_should_be_blurred %} post_blurred{% endif %}" id="{{ post.id }}">
 	<p class="post_header">
 		{% let community -%}
 		{% if post.community.starts_with("u_") -%}
@@ -250,7 +249,6 @@
 			<img width="100%" height="100%" loading="lazy" alt="Post image" src="{{ post.media.url }}"/>
 			{% else %}
 			<svg
-				{%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">
@@ -265,19 +263,19 @@
 	{% 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">
-        <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">
+        <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">
-		<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>
+		<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">
+	<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>
@@ -285,7 +283,7 @@
 		</svg>
 		{% else %}
 		<div style="max-width:{{ post.thumbnail.width }}px;max-height:{{ post.thumbnail.height }}px;">
-			<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">
+			<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 }}"/>