diff --git a/src/pages/ContentWarningOverlay.tsx b/src/element/content-warning.tsx similarity index 79% rename from src/pages/ContentWarningOverlay.tsx rename to src/element/content-warning.tsx index 57d45e8..78e7e69 100644 --- a/src/pages/ContentWarningOverlay.tsx +++ b/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() { diff --git a/src/element/video-tile.css b/src/element/video-tile.css index 01cc774..170c38c 100644 --- a/src/element/video-tile.css +++ b/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%; diff --git a/src/element/video-tile.tsx b/src/element/video-tile.tsx index 28a50b7..fd86b48 100644 --- a/src/element/video-tile.tsx +++ b/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 ( - +
0 ? image : ZapStream) : ""})`, diff --git a/src/pages/stream-page.tsx b/src/pages/stream-page.tsx index 8507fb9..03e484a 100644 --- a/src/pages/stream-page.tsx +++ b/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 + } + const descriptionContent = [ title, (summary?.length ?? 0) > 0 ? summary : "Nostr live streaming",