Blur SSR by default when content warning is set

LemmyNet · Apr 18, 2024 · 1b4903d · 1b4903d
1 parent 8e5599e
commit 1b4903d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/lemmy-translations b/lemmy-translations
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -461,7 +461,3 @@ br.big {
 .totp-link {
   width: fit-content;
 }
-
-#adultConsentModal {
-  backdrop-filter: blur(10px);
-}
diff --git a/src/server/utils/create-ssr-html.tsx b/src/server/utils/create-ssr-html.tsx
@@ -75,6 +75,20 @@ export async function createSsrHtml(
     .map(x => `<link rel="preload" as="script" href="${x}" />`)
     .join("");
 
+  // Blurring has to happen even if all style sheets fail to load.
+  const blurStyles = !site?.site_view.site.content_warning
+    ? ""
+    : `
+    <style>
+      [data-lemmy-blur=on] #app > :not(#adultConsentModal) {
+        filter: blur(10px);
+        pointer-events: none; ${/* prevent accidental link clicks */ ""}
+      }
+      html[data-lemmy-blur=on] {
+        overflow: hidden; ${/* Firefox on Android allows otherwise to peek behind the urlbar */ ""}
+      }
+    </style>`;
+
   return `
     <!DOCTYPE html>
     <html ${helmet.htmlAttributes.toString()}>
@@ -84,7 +98,12 @@ export async function createSsrHtml(
       const light = window.matchMedia("(prefers-color-scheme: light)").matches;
       document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark");
     }
+    if (document.documentElement.hasAttribute("data-lemmy-blur")) {
+      const consent = localStorage.getItem("adult-consent") === "true";
+      document.documentElement.setAttribute("data-lemmy-blur", consent ? "off" : "on");
+    }
     </script>
+    ${blurStyles}
     ${lazyScripts}
     <script nonce="${cspNonce}">window.isoData = ${serialize(isoData)}</script>
   

diff --git a/src/shared/components/common/adult-consent-modal.tsx b/src/shared/components/common/adult-consent-modal.tsx
@@ -4,7 +4,9 @@ import { adultConsentLocalStorageKey } from "../../config";
 import { setIsoData } from "@utils/app";
 import { IsoDataOptionalSite } from "../../interfaces";
 import { mdToHtml } from "../../markdown";
-import { I18NextService, UserService } from "../../services";
+import { I18NextService } from "../../services";
+import { isBrowser } from "@utils/browser";
+import { Helmet } from "inferno-helmet";
 
 interface AdultConsentModalProps {
   contentWarning: string;
@@ -33,6 +35,13 @@ class AdultConsentModalInner extends Component<AdultConsentModalProps, any> {
         data-bs-backdrop="static"
         ref={this.modalDivRef}
       >
+        <Helmet
+          htmlAttributes={{
+            // There is a hack included in create-ssr-html that fixes this
+            // attribute early based on localStorage.
+            "data-lemmy-blur": this.props.show ? "on" : "off",
+          }}
+        />
         <div
           className="modal-dialog modal-fullscreen-sm-down"
           data-bs-backdrop="static"
@@ -89,7 +98,6 @@ interface AdultConsentModalState {
 function handleAdultConsent(i: AdultConsentModal) {
   localStorage.setItem(adultConsentLocalStorageKey, "true");
   i.setState({ show: false });
-  location.reload();
 }
 
 function handleAdultConsentGoBack(i: AdultConsentModal) {
@@ -114,17 +122,19 @@ export default class AdultConsentModal extends Component<
     redirectCountdown: Infinity,
   };
 
-  componentDidMount() {
+  componentWillMount() {
     const siteRes = this.isoData.site_res;
 
-    if (
-      siteRes?.site_view.site.content_warning &&
-      !(
-        UserService.Instance.myUserInfo ||
-        localStorage.getItem(adultConsentLocalStorageKey)
-      )
-    ) {
-      this.setState({ show: true });
+    if (siteRes?.site_view.site.content_warning) {
+      if (isBrowser()) {
+        if (localStorage.getItem(adultConsentLocalStorageKey) !== "true") {
+          this.setState({ show: true });
+        } else {
+          this.setState({ show: false });
+        }
+      } else {
+        this.setState({ show: true });
+      }
     }
   }