Content warning

src/element/content-warning.tsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
+export function isContentWarningAccepted() {
+  return Boolean(window.localStorage.getItem("accepted-content-warning"));
+}
+
 export function ContentWarningOverlay() {
   const navigate = useNavigate();
-  const [is18Plus, setIs18Plus] = useState(
-    Boolean(window.localStorage.getItem("accepted-content-warning"))
-  );
+  const [is18Plus, setIs18Plus] = useState(isContentWarningAccepted());
   if (is18Plus) return null;
 
   function grownUp() {

src/element/video-tile.css

@@ -1,5 +1,9 @@
 .video-tile {}
 
+.video-tile.nsfw>div:nth-child(1) {
+    filter: blur(3px);
+}
+
 .video-tile>div:nth-child(1) {
     border-radius: 16px;
     width: 100%;

src/element/video-tile.tsx

@@ -8,6 +8,7 @@ import { StreamState } from "index";
 import { findTag, getHost } from "utils";
 import { formatSats } from "number";
 import ZapStream from "../../public/zap-stream.svg";
+import { isContentWarningAccepted } from "./content-warning";
 
 export function VideoTile({
   ev,
@@ -24,6 +25,7 @@ export function VideoTile({
   const image = findTag(ev, "image");
   const status = findTag(ev, "status");
   const viewers = findTag(ev, "current_participants");
+  const contentWarning = findTag(ev, "content-warning") && !isContentWarningAccepted();
   const host = getHost(ev);
 
   const link = encodeTLV(
@@ -34,7 +36,7 @@ export function VideoTile({
     ev.pubkey
   );
   return (
-    <Link to={`/${link}`} className="video-tile" ref={ref}>
+    <Link to={`/${link}`} className={`video-tile${contentWarning ? " nsfw" : ""}`} ref={ref}>
       <div
         style={{
           backgroundImage: `url(${inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""})`,

src/pages/stream-page.tsx

@@ -22,6 +22,7 @@ import { StreamCards } from "element/stream-cards";
 import { formatSats } from "number";
 import { StreamTimer } from "element/stream-time";
 import { ShareMenu } from "element/share-menu";
+import { ContentWarningOverlay, isContentWarningAccepted } from "element/content-warning";
 
 function ProfileInfo({ ev, goal }: { ev?: NostrEvent; goal?: TaggedRawEvent }) {
   const login = useLogin();
@@ -112,8 +113,13 @@ export function StreamPage() {
   const summary = findTag(ev, "summary");
   const image = findTag(ev, "image");
   const stream = findTag(ev, "streaming");
+  const contentWarning = findTag(ev, "content-warning");
   const tags = ev?.tags.filter((a) => a[0] === "t").map((a) => a[1]) ?? [];
 
+  if (contentWarning && !isContentWarningAccepted()) {
+    return <ContentWarningOverlay />
+  }
+
   const descriptionContent = [
     title,
     (summary?.length ?? 0) > 0 ? summary : "Nostr live streaming",