From a714a2c6219eb37a5970d09637e923380a692dfb Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Fri, 24 Nov 2023 09:13:37 -0600
Subject: [PATCH] Blur videos from strangers Use nevent instead of note1 in
 urls

---
 .changeset/poor-dogs-look.md              |  5 ++++
 .changeset/stupid-trees-tan.md            |  5 ++++
 src/components/embed-types/common.tsx     | 13 ---------
 src/components/embed-types/image.tsx      | 22 +-------------
 src/components/embed-types/index.ts       |  1 +
 src/components/embed-types/video.tsx      | 35 +++++++++++++++++++++++
 src/hooks/use-element-blur.ts             | 34 ++++++++++++++++++++++
 src/views/note/components/thread-post.tsx |  4 +--
 src/views/settings/display-settings.tsx   |  4 +--
 9 files changed, 85 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/poor-dogs-look.md
 create mode 100644 .changeset/stupid-trees-tan.md
 create mode 100644 src/components/embed-types/video.tsx
 create mode 100644 src/hooks/use-element-blur.ts

diff --git a/.changeset/poor-dogs-look.md b/.changeset/poor-dogs-look.md
new file mode 100644
index 000000000..bcedefd25
--- /dev/null
+++ b/.changeset/poor-dogs-look.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Use nevent instead of note1 in urls
diff --git a/.changeset/stupid-trees-tan.md b/.changeset/stupid-trees-tan.md
new file mode 100644
index 000000000..5ac35e64d
--- /dev/null
+++ b/.changeset/stupid-trees-tan.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Blur videos from strangers
diff --git a/src/components/embed-types/common.tsx b/src/components/embed-types/common.tsx
index 9c7f5581a..7b595c98d 100644
--- a/src/components/embed-types/common.tsx
+++ b/src/components/embed-types/common.tsx
@@ -1,21 +1,8 @@
 import { Link } from "@chakra-ui/react";
 
 import OpenGraphCard from "../open-graph-card";
-import { isVideoURL } from "../../helpers/url";
 import OpenGraphLink from "../open-graph-link";
 
-export function renderVideoUrl(match: URL) {
-  if (!isVideoURL(match)) return null;
-
-  return (
-    <video
-      src={match.toString()}
-      controls
-      style={{ maxWidth: "30rem", maxHeight: "20rem", width: "100%", position: "relative", zIndex: 1 }}
-    />
-  );
-}
-
 export function renderGenericUrl(match: URL) {
   return (
     <Link href={match.toString()} isExternal color="blue.500">
diff --git a/src/components/embed-types/image.tsx b/src/components/embed-types/image.tsx
index e6085e683..66c3dbb8c 100644
--- a/src/components/embed-types/image.tsx
+++ b/src/components/embed-types/image.tsx
@@ -1,12 +1,10 @@
 import {
-  CSSProperties,
   MouseEventHandler,
   MutableRefObject,
   forwardRef,
   useCallback,
   useMemo,
   useRef,
-  useState,
 } from "react";
 import { Image, ImageProps, Link, LinkProps } from "@chakra-ui/react";
 
@@ -20,25 +18,7 @@ import PhotoGallery, { PhotoWithoutSize } from "../photo-gallery";
 import { NostrEvent } from "../../types/nostr-event";
 import useAppSettings from "../../hooks/use-app-settings";
 import { useBreakpointValue } from "../../providers/breakpoint-provider";
-
-function useElementBlur(initBlur = false): { style: CSSProperties; onClick: MouseEventHandler } {
-  const [blur, setBlur] = useState(initBlur);
-
-  const onClick = useCallback<MouseEventHandler>(
-    (e) => {
-      if (blur) {
-        e.stopPropagation();
-        e.preventDefault();
-        setBlur(false);
-      }
-    },
-    [blur],
-  );
-
-  const style: CSSProperties = blur ? { filter: "blur(1.5rem)", cursor: "pointer" } : {};
-
-  return { onClick, style };
-}
+import useElementBlur from "../../hooks/use-element-blur";
 
 export type TrustImageProps = ImageProps;
 
diff --git a/src/components/embed-types/index.ts b/src/components/embed-types/index.ts
index 93c2d5b02..c06b29727 100644
--- a/src/components/embed-types/index.ts
+++ b/src/components/embed-types/index.ts
@@ -7,3 +7,4 @@ export * from "./nostr";
 export * from "./emoji";
 export * from "./image";
 export * from "./cashu";
+export * from "./video";
diff --git a/src/components/embed-types/video.tsx b/src/components/embed-types/video.tsx
new file mode 100644
index 000000000..fdb597b8f
--- /dev/null
+++ b/src/components/embed-types/video.tsx
@@ -0,0 +1,35 @@
+import styled from "@emotion/styled";
+import { isVideoURL } from "../../helpers/url";
+import useAppSettings from "../../hooks/use-app-settings";
+import useElementBlur from "../../hooks/use-element-blur";
+import { useTrusted } from "../../providers/trust";
+
+const StyledVideo = styled.video`
+  max-width: 30rem;
+  max-height: 20rem;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+`;
+
+function TrustVideo({ src }: { src: string }) {
+  const { blurImages } = useAppSettings();
+  const trusted = useTrusted();
+  const { onClick, handleEvent, style } = useElementBlur(!trusted);
+
+  return (
+    <StyledVideo
+      src={src}
+      controls
+      style={blurImages ? style : undefined}
+      onClick={blurImages ? onClick : undefined}
+      onPlay={blurImages ? handleEvent : undefined}
+    />
+  );
+}
+
+export function renderVideoUrl(match: URL) {
+  if (!isVideoURL(match)) return null;
+
+  return <TrustVideo src={match.toString()} />;
+}
diff --git a/src/hooks/use-element-blur.ts b/src/hooks/use-element-blur.ts
new file mode 100644
index 000000000..4cc99993b
--- /dev/null
+++ b/src/hooks/use-element-blur.ts
@@ -0,0 +1,34 @@
+import { CSSProperties, EventHandler, MouseEventHandler, ReactEventHandler, useCallback, useState } from "react";
+
+export default function useElementBlur(initBlur = false): {
+  style: CSSProperties;
+  onClick: MouseEventHandler;
+  handleEvent: ReactEventHandler<HTMLElement>;
+} {
+  const [blur, setBlur] = useState(initBlur);
+
+  const onClick = useCallback<MouseEventHandler>(
+    (e) => {
+      if (blur) {
+        e.stopPropagation();
+        e.preventDefault();
+        setBlur(false);
+      }
+    },
+    [blur],
+  );
+  const handleEvent = useCallback<ReactEventHandler<HTMLElement>>(
+    (e) => {
+      if (blur) {
+        e.stopPropagation();
+        e.preventDefault();
+        setBlur(false);
+      }
+    },
+    [blur],
+  );
+
+  const style: CSSProperties = blur ? { filter: "blur(1.5rem)", cursor: "pointer" } : {};
+
+  return { onClick, handleEvent, style };
+}
diff --git a/src/views/note/components/thread-post.tsx b/src/views/note/components/thread-post.tsx
index eda1da72d..95fc35698 100644
--- a/src/views/note/components/thread-post.tsx
+++ b/src/views/note/components/thread-post.tsx
@@ -11,7 +11,6 @@ import {
   useColorMode,
   useDisclosure,
 } from "@chakra-ui/react";
-import { nip19 } from "nostr-tools";
 import { Link as RouterLink } from "react-router-dom";
 
 import { ReplyIcon } from "../../../components/icons";
@@ -39,6 +38,7 @@ import { UserDnsIdentityIcon } from "../../../components/user-dns-identity-icon"
 import NoteProxyLink from "../../../components/note/components/note-proxy-link";
 import { NoteDetailsButton } from "../../../components/note/components/note-details-button";
 import EventInteractionDetailsModal from "../../../components/event-interactions-modal";
+import { getNeventCodeWithRelays } from "../../../helpers/nip19";
 
 const LEVEL_COLORS = ["green", "blue", "red", "purple", "yellow", "cyan", "pink"];
 
@@ -85,7 +85,7 @@ export const ThreadPost = memo(({ post, initShowReplies, focusId, level = -1 }:
       <UserAvatarLink pubkey={post.event.pubkey} size="sm" />
       <UserLink pubkey={post.event.pubkey} fontWeight="bold" isTruncated />
       <UserDnsIdentityIcon pubkey={post.event.pubkey} onlyIcon />
-      <Link as={RouterLink} whiteSpace="nowrap" color="current" to={`/n/${nip19.noteEncode(post.event.id)}`}>
+      <Link as={RouterLink} whiteSpace="nowrap" color="current" to={`/n/${getNeventCodeWithRelays(post.event.id)}`}>
         <Timestamp timestamp={post.event.created_at} />
       </Link>
       {replies.length > 0 ? (
diff --git a/src/views/settings/display-settings.tsx b/src/views/settings/display-settings.tsx
index 33b166bd6..3315cfb50 100644
--- a/src/views/settings/display-settings.tsx
+++ b/src/views/settings/display-settings.tsx
@@ -165,12 +165,12 @@ export default function DisplaySettings() {
           <FormControl>
             <Flex alignItems="center">
               <FormLabel htmlFor="blurImages" mb="0">
-                Blur images from strangers
+                Blur media from strangers
               </FormLabel>
               <Switch id="blurImages" {...register("blurImages")} />
             </Flex>
             <FormHelperText>
-              <span>Enabled: blur images for people you aren't following</span>
+              <span>Enabled: blur media from people you aren't following</span>
             </FormHelperText>
           </FormControl>
           <FormControl>