cleanup and update dependencies

package.json

@@ -12,16 +12,16 @@
     "test": "cypress run --e2e --browser=chrome"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.19",
-    "@chakra-ui/react": "^2.7.1",
-    "@emotion/react": "^11.11.0",
+    "@chakra-ui/icons": "^2.1.0",
+    "@chakra-ui/react": "^2.8.0",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "bech32": "^2.0.0",
     "cheerio": "^1.0.0-rc.12",
     "dayjs": "^1.11.9",
     "debug": "^4.3.4",
-    "framer-motion": "^7.10.3",
-    "hls.js": "^1.4.7",
+    "framer-motion": "^10.16.0",
+    "hls.js": "^1.4.10",
     "idb": "^7.1.1",
     "identicon.js": "^2.3.3",
     "leaflet": "^1.9.4",
@@ -29,17 +29,17 @@
     "light-bolt11-decoder": "^3.0.0",
     "ngeohash": "^0.6.3",
     "noble-secp256k1": "^1.2.14",
-    "nostr-tools": "^1.12.1",
+    "nostr-tools": "^1.14.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.10",
-    "react-hook-form": "^7.45.1",
+    "react-error-boundary": "^4.0.11",
+    "react-hook-form": "^7.45.4",
     "react-qr-barcode-scanner": "^1.0.6",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.15.0",
     "react-singleton-hook": "^4.0.1",
     "react-use": "^17.4.0",
     "webln": "^0.3.2",
-    "yet-another-react-lightbox": "^3.12.0"
+    "yet-another-react-lightbox": "^3.12.1"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",
@@ -49,17 +49,17 @@
     "@types/leaflet": "^1.9.3",
     "@types/leaflet.locatecontrol": "^0.74.1",
     "@types/ngeohash": "^0.6.4",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@vitejs/plugin-react": "^4.0.1",
-    "cypress": "^12.16.0",
-    "prettier": "^2.8.8",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.4",
+    "cypress": "^12.17.4",
+    "prettier": "^3.0.2",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9",
+    "vite": "^4.4.9",
     "vite-plugin-pwa": "^0.16.4"
   },
   "resolutions": {
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6"
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7"
   }
 }

src/components/embed-types/common.tsx

@@ -7,6 +7,7 @@ import OpenGraphCard from "../open-graph-card";
 import { EmbedableContent, defaultGetLocation } from "../../helpers/embeds";
 import { matchLink } from "../../helpers/regexp";
 import { useRegisterSlide } from "../lightbox-provider";
+import { isImageURL, isVideoURL } from "../../helpers/url";
 
 export const ImageGalleryLink = ({ children, href, ...props }: Omit<LinkProps, "onClick">) => {
   const ref = useRef<HTMLAnchorElement | null>(null);
@@ -83,8 +84,6 @@ function ImageGallery({ images }: { images: string[] }) {
   );
 }
 
-const imageExt = [".svg", ".gif", ".png", ".jpg", ".jpeg", ".webp", ".avif"];
-
 // nevent1qqs8397rp8tt60f3lm8zldt8uqljuqw9axp8z79w0qsmj3r96lmg4tgpz3mhxue69uhhyetvv9ujuerpd46hxtnfduq3zamnwvaz7tmwdaehgun4v5hxxmmd0mkwa9
 export function embedImageGallery(content: EmbedableContent): EmbedableContent {
   return content
@@ -113,7 +112,7 @@ export function embedImageGallery(content: EmbedableContent): EmbedableContent {
         for (const match of matches) {
           try {
             const url = new URL(match[0]);
-            if (!imageExt.some((ext) => url.pathname.endsWith(ext))) throw new Error("not an image");
+            if (!isImageURL(url)) throw new Error("not an image");
 
             // if this is the first image, add it to the batch
             if (batch.length === 0) {
@@ -149,14 +148,13 @@ export function embedImageGallery(content: EmbedableContent): EmbedableContent {
 
 // nostr:nevent1qqsfhafvv705g5wt8rcaytkj6shsshw3dwgamgfe3za8knk0uq4yesgpzpmhxue69uhkummnw3ezuamfdejszrthwden5te0dehhxtnvdakqsrnltk
 export function renderImageUrl(match: URL) {
-  if (!imageExt.some((ext) => match.pathname.endsWith(ext))) return null;
+  if (!isImageURL(match)) return null;
 
   return <EmbeddedImage src={match.toString()} />;
 }
 
-const videoExt = [".mp4", ".mkv", ".webm", ".mov"];
 export function renderVideoUrl(match: URL) {
-  if (!videoExt.some((ext) => match.pathname.endsWith(ext))) return null;
+  if (!isVideoURL(match)) return null;
 
   return <video src={match.toString()} controls style={{ maxWidth: "30rem", maxHeight: "20rem", width: "100%" }} />;
 }

src/components/timeline-page/index.tsx

@@ -9,7 +9,7 @@ import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-
 import TimelineActionAndStatus from "./timeline-action-and-status";
 import { useSearchParams } from "react-router-dom";
 import { NostrEvent } from "../../types/nostr-event";
-import { matchImageUrls } from "../../helpers/regexp";
+import { matchLink } from "../../helpers/regexp";
 import TimelineHealth from "./timeline-health";
 
 export function useTimelinePageEventFilter() {
@@ -18,7 +18,7 @@ export function useTimelinePageEventFilter() {
 
   return useCallback(
     (event: NostrEvent) => {
-      if (view === "images" && !event.content.match(matchImageUrls)) return false;
+      if (view === "images" && !event.content.match(matchLink)) return false;
       return true;
     },
     [view]

src/components/timeline-page/media-timeline/index.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo, useRef } from "react";
-import { TimelineLoader } from "../../../classes/timeline-loader";
-import useSubject from "../../../hooks/use-subject";
-import { matchImageUrls } from "../../../helpers/regexp";
-import { LightboxProvider, useRegisterSlide } from "../../lightbox-provider";
 import { Box, IconButton, Link } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
+
+import { TimelineLoader } from "../../../classes/timeline-loader";
+import useSubject from "../../../hooks/use-subject";
+import { matchLink } from "../../../helpers/regexp";
+import { LightboxProvider, useRegisterSlide } from "../../lightbox-provider";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
 import { getSharableNoteId } from "../../../helpers/nip19";
 import { ExternalLinkIcon } from "../../icons";
-
-const matchAllImages = new RegExp(matchImageUrls, "ig");
+import { isImageURL } from "../../../helpers/url";
 
 type ImagePreview = { eventId: string; src: string; index: number };
 
@@ -64,11 +64,11 @@ export default function MediaTimeline({ timeline }: { timeline: TimelineLoader }
     var images: { eventId: string; src: string; index: number }[] = [];
 
     for (const event of events) {
-      const urls = event.content.matchAll(matchAllImages);
+      const urls = event.content.matchAll(matchLink);
 
       let i = 0;
-      for (const url of urls) {
-        images.push({ eventId: event.id, src: url[0], index: i++ });
+      for (const match of urls) {
+        if (isImageURL(match[0])) images.push({ eventId: event.id, src: match[0], index: i++ });
       }
     }
 

src/helpers/regexp.ts

@@ -1,7 +1,4 @@
 export const mentionNpubOrNote = /(?:\s|^)(@|nostr:)?((npub1|note1)[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58})(?:\s|$)/gi;
-export const matchImageUrls =
-  /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,12})((?:\/[\+~%\/\.\w\-_]*)?\.(?:svg|gif|png|jpg|jpeg|webp|avif))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i;
-
 export const matchNostrLink = /(nostr:|@)?((npub|note|nprofile|nevent)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,})/gi;
 export const matchHashtag = /(^|[^\p{L}])#([\p{L}\p{N}]+)/gu;
 export const matchLink = /https?:\/\/([a-zA-Z0-9\.\-]+\.[a-zA-Z]+)([\p{Letter}\p{Number}&\.-\/\?=#\-@%\+_,:]*)/gu;

src/helpers/url.ts

@@ -1,5 +1,20 @@
 export const convertToUrl = (url: string | URL) => (url instanceof URL ? url : new URL(url));
 
+export const IMAGE_EXT = [".svg", ".gif", ".png", ".jpg", ".jpeg", ".webp", ".avif"];
+export const VIDEO_EXT = [".mp4", ".mkv", ".webm", ".mov"];
+
+export function isMediaURL(url: string | URL) {
+  return isImageURL(url) || isVideoURL(url);
+}
+export function isImageURL(url: string | URL) {
+  const u = new URL(url);
+  return IMAGE_EXT.some((ext) => u.pathname.endsWith(ext));
+}
+export function isVideoURL(url: string | URL) {
+  const u = new URL(url);
+  return VIDEO_EXT.some((ext) => u.pathname.endsWith(ext));
+}
+
 export function normalizeRelayUrl(relayUrl: string) {
   const url = new URL(relayUrl);