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 ( - +