Blur videos from strangers

Use nevent instead of note1 in urls

.changeset/poor-dogs-look.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Use nevent instead of note1 in urls

.changeset/stupid-trees-tan.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Blur videos from strangers

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">

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;
 

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";

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()} />;
+}

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 };
+}

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

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>