Unblur all images when clicking on a note

.changeset/nine-chicken-fetch.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Dont auto-play blured videos

.changeset/strong-camels-whisper.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Unblur all images when clicking on a note

src/components/embed-types/image.tsx

@@ -1,7 +1,7 @@
 import { MouseEventHandler, MutableRefObject, forwardRef, useCallback, useMemo, useRef } from "react";
 import { Image, ImageProps, Link, LinkProps } from "@chakra-ui/react";
 
-import { useTrusted } from "../../providers/local/trust";
+import { useTrustContext } from "../../providers/local/trust";
 import { EmbedableContent, defaultGetLocation } from "../../helpers/embeds";
 import { getMatchLink } from "../../helpers/regexp";
 import { useRegisterSlide } from "../lightbox-provider";
@@ -10,15 +10,14 @@ import PhotoGallery, { PhotoWithoutSize } from "../photo-gallery";
 import { NostrEvent } from "../../types/nostr-event";
 import useAppSettings from "../../hooks/use-app-settings";
 import { useBreakpointValue } from "../../providers/global/breakpoint-provider";
-import useElementBlur from "../../hooks/use-element-blur";
+import useElementTrustBlur from "../../hooks/use-element-trust-blur";
 import { buildImageProxyURL } from "../../helpers/image";
 
 export type TrustImageProps = ImageProps;
 
 export const TrustImage = forwardRef<HTMLImageElement, TrustImageProps>((props, ref) => {
   const { blurImages } = useAppSettings();
-  const trusted = useTrusted();
+  const { onClick, style } = useElementTrustBlur();
-  const { onClick, style } = useElementBlur(!trusted);
 
   const handleClick = useCallback<MouseEventHandler<HTMLImageElement>>(
     (e) => {

src/components/embed-types/video.tsx

@@ -1,8 +1,8 @@
 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 useElementTrustBlur from "../../hooks/use-element-trust-blur";
-import { useTrusted } from "../../providers/local/trust";
+import { useTrustContext } from "../../providers/local/trust";
 
 const StyledVideo = styled.video`
   max-width: 30rem;
@@ -14,8 +14,7 @@ const StyledVideo = styled.video`
 
 function TrustVideo({ src }: { src: string }) {
   const { blurImages } = useAppSettings();
-  const trusted = useTrusted();
+  const { onClick, handleEvent, style } = useElementTrustBlur();
-  const { onClick, handleEvent, style } = useElementBlur(!trusted);
 
   return (
     <StyledVideo

src/hooks/use-element-blur.ts

@@ -1,34 +0,0 @@
-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/hooks/use-element-trust-blur.ts

@@ -0,0 +1,41 @@
+import { CSSProperties, MouseEventHandler, ReactEventHandler, useCallback } from "react";
+import { useTrustContext } from "../providers/local/trust";
+
+export default function useElementTrustBlur(): {
+  style: CSSProperties;
+  onClick: MouseEventHandler;
+  handleEvent: ReactEventHandler<HTMLElement>;
+} {
+  const { trust, setOverride } = useTrustContext();
+
+  const onClick = useCallback<MouseEventHandler>(
+    (e) => {
+      if (!trust) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!trust) setOverride(true);
+
+        // prevent videos from auto playing
+        if (e.target instanceof HTMLVideoElement) e.target.pause();
+      }
+    },
+    [trust],
+  );
+  const handleEvent = useCallback<ReactEventHandler<HTMLElement>>(
+    (e) => {
+      if (!trust) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!trust) setOverride(true);
+
+        // prevent videos from auto playing
+        if (e.target instanceof HTMLVideoElement) e.target.pause();
+      }
+    },
+    [trust],
+  );
+
+  const style: CSSProperties = !trust ? { filter: "blur(1.5rem)", cursor: "pointer" } : {};
+
+  return { onClick, handleEvent, style };
+}

src/providers/local/trust.tsx

@@ -1,12 +1,15 @@
-import React, { PropsWithChildren, useContext } from "react";
+import React, { PropsWithChildren, useContext, useMemo, useState } from "react";
 import { NostrEvent } from "../../types/nostr-event";
 import useCurrentAccount from "../../hooks/use-current-account";
 import useUserContactList from "../../hooks/use-user-contact-list";
 import { getPubkeysFromList } from "../../helpers/nostr/lists";
 
-const TrustContext = React.createContext<boolean>(false);
+const TrustContext = React.createContext<{ trust: boolean; setOverride: (trust: boolean) => void }>({
+  trust: false,
+  setOverride: () => {},
+});
 
-export function useTrusted() {
+export function useTrustContext() {
   return useContext(TrustContext);
 }
 
@@ -14,8 +17,10 @@ export function TrustProvider({
   children,
   event,
   trust = false,
-}: PropsWithChildren & { event?: NostrEvent; trust?: boolean }) {
+  allowOverride = true,
-  const parentTrust = useContext(TrustContext);
+}: PropsWithChildren & { event?: NostrEvent; trust?: boolean; allowOverride?: boolean }) {
+  const { trust: parentTrust } = useContext(TrustContext);
+  const [override, setOverride] = useState<boolean>();
 
   const account = useCurrentAccount();
   const contactList = useUserContactList(account?.pubkey);
@@ -23,5 +28,13 @@ export function TrustProvider({
 
   const isEventTrusted = trust || (!!event && (event.pubkey === account?.pubkey || following.includes(event.pubkey)));
 
-  return <TrustContext.Provider value={parentTrust || isEventTrusted}>{children}</TrustContext.Provider>;
+  const context = useMemo(() => {
+    const trust = parentTrust || isEventTrusted;
+    return {
+      trust: allowOverride ? override ?? trust : trust,
+      setOverride: (v: boolean) => allowOverride && setOverride(v),
+    };
+  }, [override, parentTrust, isEventTrusted, setOverride, allowOverride]);
+
+  return <TrustContext.Provider value={context}>{children}</TrustContext.Provider>;
 }

src/views/files/index.tsx

@@ -7,7 +7,7 @@ import { NostrEvent } from "../../types/nostr-event";
 import { FILE_KIND, IMAGE_TYPES, VIDEO_TYPES, getFileUrl, parseImageFile } from "../../helpers/nostr/files";
 import { ErrorBoundary } from "../../components/error-boundary";
 import useAppSettings from "../../hooks/use-app-settings";
-import { TrustProvider, useTrusted } from "../../providers/local/trust";
+import { TrustProvider, useTrustContext } from "../../providers/local/trust";
 import BlurredImage from "../../components/blured-image";
 import PeopleListProvider, { usePeopleListContext } from "../../providers/local/people-list-provider";
 import PeopleListSelection from "../../components/people-list-selection/people-list-selection";
@@ -27,7 +27,7 @@ import { useReadRelays } from "../../hooks/use-client-relays";
 function ImageFile({ event }: { event: NostrEvent }) {
   const parsed = parseImageFile(event);
   const settings = useAppSettings();
-  const trust = useTrusted();
+  const { trust } = useTrustContext();
 
   const ref = useRef<HTMLDivElement | null>(null);
   useRegisterIntersectionEntity(ref, event.id);