added leaving reddit dialog (#643)

2023-01-12 09:46:56 +01:00 · 2023-01-12 09:46:56 +01:00 · eb9ef9f6d9
parent 8fa8a449cf
commit eb9ef9f6d9
9 changed files with 182 additions and 3 deletions
--- a/README.md
+++ b/README.md
@ -199,6 +199,7 @@ Assign a default value for each setting by passing environment variables to Libr
 | `USE_HLS`               | `["on", "off"]`                                                                                     | `off`         |
 | `HIDE_HLS_NOTIFICATION` | `["on", "off"]`                                                                                     | `off`         |
 | `AUTOPLAY_VIDEOS`       | `["on", "off"]`                                                                                     | `off`         |
+| `DISABLE_VISIT_REDDIT_CONFIRMATION`     | `["on", "off"]`                                                                                     | `off`         |

 ### Examples

--- a/app.json
+++ b/app.json
@ -40,6 +40,9 @@
    },
    "LIBREDDIT_HIDE_HLS_NOTIFICATION": {
      "required": false
+    },
+    "LIBREDDIT_DEFAULT_DISABLE_VISIT_REDDIT_CONFIRMATION": {
+      "required": false
    }
  }
 }
--- a/src/settings.rs
+++ b/src/settings.rs
@ -19,7 +19,7 @@ struct SettingsTemplate {

 // CONSTANTS

-const PREFS: [&str; 11] = [
+const PREFS: [&str; 12] = [
 	"theme",
 	"front_page",
 	"layout",
@ -31,6 +31,7 @@ const PREFS: [&str; 11] = [
 	"use_hls",
 	"hide_hls_notification",
 	"autoplay_videos",
+	"disable_visit_reddit_confirmation",
 ];

 // FUNCTIONS
--- a/src/utils.rs
+++ b/src/utils.rs
@ -466,6 +466,7 @@ pub struct Preferences {
 	pub hide_hls_notification: String,
 	pub use_hls: String,
 	pub autoplay_videos: String,
+	pub disable_visit_reddit_confirmation: String,
 	pub comment_sort: String,
 	pub post_sort: String,
 	pub subscriptions: Vec<String>,
@ -498,6 +499,7 @@ impl Preferences {
 			use_hls: setting(&req, "use_hls"),
 			hide_hls_notification: setting(&req, "hide_hls_notification"),
 			autoplay_videos: setting(&req, "autoplay_videos"),
+			disable_visit_reddit_confirmation: setting(&req, "disable_visit_reddit_confirmation"),
 			comment_sort: setting(&req, "comment_sort"),
 			post_sort: setting(&req, "post_sort"),
 			subscriptions: setting(&req, "subscriptions").split('+').map(String::from).filter(|s| !s.is_empty()).collect(),
--- a/static/style.css
+++ b/static/style.css
@ -4,6 +4,28 @@
 :root {
 	--nsfw: #ff5c5d;
 	--admin: #ea0027;
+
+	/* Reddit redirect warning constants */
+	--popup-red: #ea0027;
+	--popup-black: #111;
+	--popup-text: #fff;
+	--popup-background-1: #0f0f0f;
+	--popup-background-2: #220f0f;
+	--popup-reddit-url: var(--popup-red);
+
+	--popup-background: repeating-linear-gradient(
+		-45deg,
+		var(--popup-background-1),
+		var(--popup-background-1) 50px,
+		var(--popup-background-2) 50px,
+		var(--popup-background-2) 100px
+	);
+
+	--popup-toreddit-background: var(--popup-black);
+	--popup-toreddit-text: var(--popup-red);
+	--popup-goback-background: var(--popup-red);
+	--popup-goback-text: #222;
+	--popup-border: 1px solid var(--popup-red);
 }

@font-face {
@ -26,6 +48,7 @@
 	--highlighted: #333;
 	--visited: #aaa;
 	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+	--popup: #b80a27;
 }

 /* Browser-defined light theme */
@ -132,6 +155,109 @@ nav #libreddit {
 	opacity: 0.8;
 }

+.popup {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: clip;
+	opacity: 0;
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	bottom: 0;
+	right: 0;
+	visibility: hidden;
+	transition: all 0.1s ease-in-out;
+	z-index: 2;
+}
+
+/* fallback for firefox esr */
+.popup {
+	background-color: #000000fd;
+}
+
+/* all other browsers */
+@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+	.popup {
+		-webkit-backdrop-filter: blur(.25rem) brightness(15%);
+		backdrop-filter: blur(.25rem) brightness(15%);
+	}
+}
+
+.popup-inner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	max-width: 600px;
+	max-height: 500px;
+	width: fit-content;
+	height: fit-content;
+	padding: 1rem;
+	background: var(--popup-background);
+	border: var(--popup-border);
+	border-radius: 5px;
+	transition: all 0.1s ease-in-out;
+}
+
+.popup-inner svg {
+	display: unset !important;
+	width: 35%;
+	stroke: none;
+	margin: 1rem;
+}
+
+.popup-inner h1 {
+	color: var(--popup-text);
+	margin: 1.5rem 1.5rem 1rem;
+}
+
+.popup-inner p {
+	color: var(--popup-text);
+}
+
+.popup-inner a {
+	border-radius: 5px;
+	padding: 2%;
+	width: 80%;
+	margin: 0.5rem;
+	cursor: pointer;
+	transition: all 0.1s ease-in-out;
+}
+
+#goback {
+	background: var(--popup-goback-background);
+	color: var(--popup-goback-text);
+}
+
+#goback:not(.selected):hover {
+	opacity: 0.8;
+}
+
+#toreddit {
+	background: var(--popup-toreddit-background);
+	color: var(--popup-toreddit-text);
+	border: 1px solid var(--popup-red);
+}
+
+#toreddit:not(.selected):hover {
+	background: var(--popup-toreddit-text);
+	color: var(--popup-toreddit-background);
+}
+
+.popup:target {
+	visibility: visible;
+	opacity: 1;
+}
+
+#reddit_url {
+	width: 80%;
+	color: var(--popup-reddit-url);
+	font-weight: 600;
+	line-break: anywhere;
+	margin-top: 1rem;
+}
+
 #code {
 	margin-left: 10px;
 }
@ -1373,4 +1499,13 @@ td, th {
 		padding: 7px 0px;
 		margin-right: -5px;
 	}
+
+	.popup {
+		width: auto;
+		bottom: 10vh;
+	}
+
+	.popup-inner > a, h1, p, img {
+		width: 100%;
+	}
 }
--- a/templates/base.html
+++ b/templates/base.html
@ -1,3 +1,5 @@
+{% import "utils.html" as utils %}
+
 <!DOCTYPE html>
 <html lang="en">
 	<head>
@ -35,12 +37,15 @@
 			</div>
 			{% block search %}{% endblock %}
 			<div id="links">
-				<a id="reddit_link" href="https://www.reddit.com{{ url }}" rel="nofollow">
+				<a id="reddit_link" {% if prefs.disable_visit_reddit_confirmation != "on" %}href="#popup"{% else %}href="https://www.reddit.com" rel="nofollow"{{ url }}"{% endif %}>
 					<span>reddit</span>
 					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 						<path d="M23 12.0737C23 10.7308 21.9222 9.64226 20.5926 9.64226C19.9435 9.64226 19.3557 9.90274 18.923 10.3244C17.2772 9.12492 15.0099 8.35046 12.4849 8.26135L13.5814 3.05002L17.1643 3.8195C17.2081 4.73947 17.9539 5.47368 18.8757 5.47368C19.8254 5.47368 20.5951 4.69626 20.5951 3.73684C20.5951 2.77769 19.8254 2 18.8758 2C18.2001 2 17.6214 2.39712 17.3404 2.96952L13.3393 2.11066C13.2279 2.08679 13.1116 2.10858 13.016 2.17125C12.9204 2.23393 12.8533 2.33235 12.8295 2.44491L11.6051 8.25987C9.04278 8.33175 6.73904 9.10729 5.07224 10.3201C4.63988 9.90099 4.05398 9.64226 3.40757 9.64226C2.0781 9.64226 1 10.7308 1 12.0737C1 13.0618 1.58457 13.9105 2.4225 14.2909C2.38466 14.5342 2.36545 14.78 2.36505 15.0263C2.36505 18.7673 6.67626 21.8 11.9945 21.8C17.3131 21.8 21.6243 18.7673 21.6243 15.0263C21.6243 14.7794 21.6043 14.5359 21.5678 14.2957C22.4109 13.9175 23 13.0657 23 12.0737Z"/>
 					</svg>
 				</a>
+				{% if prefs.disable_visit_reddit_confirmation != "on" %}
+					{% call utils::visit_reddit_confirmation(url) %}
+				{% endif %}
 				<a id="settings_link" href="/settings">
 					<span>settings</span>
 					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
--- a/templates/post.html
+++ b/templates/post.html
@ -130,7 +130,12 @@
 			<div class="post_footer">
 				<ul id="post_links">
 					<li><a href="{{ post.permalink }}">permalink</a></li>
-					<li><a href="https://reddit.com{{ post.permalink }}" rel="nofollow">reddit</a></li>
+					<li>
+						<a id="reddit_link" {% if prefs.disable_visit_reddit_confirmation != "on" %}href="#popup"{% else %}href="https://reddit.com{{ post.permalink }}" rel="nofollow"{{ url }}"{% endif %}>reddit</a>
+						{% if prefs.disable_visit_reddit_confirmation != "on" %}
+							{% call utils::visit_reddit_confirmation(post.permalink) %}
+						{% endif %}
+					</li>
 				</ul>
 				<p>{{ post.upvote_ratio }}% Upvoted</p>
 			</div>
--- a/templates/settings.html
+++ b/templates/settings.html
@ -79,6 +79,11 @@
 				<input type="hidden" value="off" name="hide_hls_notification">
 				<input type="checkbox" name="hide_hls_notification" {% if prefs.hide_hls_notification == "on" %}checked{% endif %}>
 			</div>
+			<div id="disable_visit_reddit_confirmation">
+				<label for="disable_visit_reddit_confirmation">Do not confirm before visiting content on Reddit</label>
+				<input type="hidden" value="off" name="disable_visit_reddit_confirmation">
+				<input type="checkbox" name="disable_visit_reddit_confirmation" {% if prefs.disable_visit_reddit_confirmation == "on" %}checked{% endif %}>
+			</div>
 			<input id="save" type="submit" value="Save">
 		</div>
 	</form>
--- a/templates/utils.html
+++ b/templates/utils.html
@ -156,3 +156,25 @@
 	</div>
 </div>
 {%- endmacro %}
+
+{% macro visit_reddit_confirmation(url) -%}
+<div class="popup" id="popup">
+	<div class="popup-inner">
+		<h1>You are about to leave Libreddit</h1>
+		<p>Do you want to continue?</p>
+		<p id="reddit_url">https://www.reddit.com{{ url }}</p>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 639.24 563">
+			<defs>
+				<style>.cls-1{fill:#000000;}.cls-2{fill:#f8aa00;}</style>
+			</defs>
+			<path class="cls-2" d="M322.03,0c1.95,2.5,4.88,.9,7.33,1.65,10.5,3.21,17.65,10.39,22.83,19.35,93.64,162.06,186.98,324.29,280.25,486.56,15.73,20.19,2.49,51.27-22.92,54.37-1.21,.19-2.72-.54-3.49,1.08H239.03c-70.33-2.43-141.6,.79-212.08-1.74-17.49-4.92-23.16-15.88-26.91-32.26l-.04-1.97C88.74,354.76,194.49,188.2,289.92,18.43c6.2-10.66,15.03-16.94,27.61-17.36,.95-.03,2.05,.18,2.51-1.07h2Zm-2.43,545c94.95-.02,189.9,.04,284.85-.02,11.84-.73,20.75-13.19,16.68-23.55C523.83,355.97,430.74,187.62,332.05,23.07c-7.93-9.02-22.2-6.58-27.23,3.22C230.28,156.11,155.21,285.64,80.41,415.31c-19.88,34.41-39.31,69.07-59.78,103.14-2.43,4.05-4.24,8.8-1.68,14.18,3.92,8.24,9.59,12.37,18.82,12.37,93.95,0,187.9,0,281.85,0Z"/>
+			<path class="cls-1" d="M319.61,545c-93.95,0-187.9,0-281.85,0-9.22,0-14.89-4.13-18.82-12.37-2.56-5.38-.75-10.13,1.68-14.18,20.47-34.07,39.9-68.73,59.78-103.14C155.21,285.64,230.28,156.11,304.82,26.29c5.03-9.8,19.3-12.24,27.23-3.22,98.7,164.55,191.79,332.9,289.1,498.35,4.06,10.36-4.85,22.82-16.68,23.55-94.94,.06-189.9,0-284.85,.02Zm.44-462.31C238.88,223.22,158.17,362.95,77.28,503h485.54c-80.94-140.13-161.61-279.79-242.77-420.31Z"/>
+			<path class="cls-2" d="M320.05,82.69c81.16,140.52,161.83,280.18,242.77,420.31H77.28C158.17,362.95,238.88,223.22,320.05,82.69Zm36.05,118.99c-.14-46.75-68.32-52.32-74.66-4.76,.73,51.49,9.2,102.97,12.63,154.49,1.18,13.14,10.53,21.81,23.32,22.76,13.12,.97,23.89-9.13,24.96-21.58,4.44-49.99,9.4-101.22,13.76-150.91Zm-36.56,271.4c48.8,.76,49.24-74.7-.31-75.47-53.45,3-46.02,78.12,.31,75.47Z"/>
+			<path class="cls-1" d="M356.1,201.67c-4.36,49.69-9.31,100.91-13.76,150.91-1.07,12.45-11.84,22.56-24.96,21.58-12.79-.95-22.14-9.63-23.31-22.76-3.43-51.52-11.9-103-12.63-154.49,6.33-47.53,74.51-42.03,74.66,4.76Z"/>
+			<path class="cls-1" d="M319.54,473.08c-46.34,2.64-53.75-72.47-.31-75.47,49.56,.78,49.1,76.24,.31,75.47Z"/>
+		</svg>
+		<a id="goback" href="#">No, go back!</a>
+		<a id="toreddit" href="https://www.reddit.com{{ url }}" rel="nofollow">Yes, take me to Reddit</a>
+	</div>
+</div>
+{%- endmacro %}