feat: replace http nostr links with native nostr links

closes #666
refactor: embeds

packages/app/src/Components/Embed/AppleMusicEmbed.tsx

@@ -3,21 +3,15 @@ const AppleMusicEmbed = ({ link }: { link: string }) => {
   const isSongLink = /\?i=\d+$/.test(convertedUrl);
 
   return (
-    <>
     <iframe
       allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
       frameBorder="0"
-        // eslint-disable-next-line react/no-unknown-property
-        credentialless=""
       height={isSongLink ? 175 : 450}
       style={{ width: "100%", maxWidth: 660, overflow: "hidden", background: "transparent" }}
       sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
       src={convertedUrl}
+      loading="lazy"
     />
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
-        {link}
-      </a>
-    </>
   );
 };
 

packages/app/src/Components/Embed/HyperText.tsx

@@ -1,3 +1,4 @@
+import { Bech32Regex } from "@snort/shared";
 import { ReactNode } from "react";
 
 import AppleMusicEmbed from "@/Components/Embed/AppleMusicEmbed";
@@ -10,11 +11,11 @@ import SpotifyEmbed from "@/Components/Embed/SpotifyEmbed";
 import TidalEmbed from "@/Components/Embed/TidalEmbed";
 import TwitchEmbed from "@/Components/Embed/TwitchEmbed";
 import WavlakeEmbed from "@/Components/Embed/WavlakeEmbed";
+import YoutubeEmbed from "@/Components/Embed/YoutubeEmbed";
 import { magnetURIDecode } from "@/Utils";
 import {
   AppleMusicRegex,
   MixCloudRegex,
-  NostrNestsRegex,
   SoundCloudRegex,
   SpotifyRegex,
   TidalRegex,
@@ -34,57 +35,23 @@ export default function HyperText({ link, depth, showLinkPreview, children }: Hy
   const a = link;
   try {
     const url = new URL(a);
-    const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
-    const tidalId = TidalRegex.test(a) && RegExp.$1;
-    const soundcloundId = SoundCloudRegex.test(a) && RegExp.$1;
-    const mixcloudId = MixCloudRegex.test(a) && RegExp.$1;
-    const isSpotifyLink = SpotifyRegex.test(a);
-    const isTwitchLink = TwitchRegex.test(a);
-    const isAppleMusicLink = AppleMusicRegex.test(a);
-    const isNostrNestsLink = NostrNestsRegex.test(a);
-    const isWavlakeLink = WavlakeRegex.test(a);
 
-    if (youtubeId) {
+    let m = null;
-      return (
+    if (a.match(YoutubeUrlRegex)) {
-        <>
+      return <YoutubeEmbed link={a} />;
-          <iframe
+    } else if (a.match(TidalRegex)) {
-            // eslint-disable-next-line react/no-unknown-property
-            credentialless=""
-            className="-mx-4 md:mx-0 w-max my-2"
-            src={`https://www.youtube.com/embed/${youtubeId}`}
-            title="YouTube video player"
-            key={youtubeId}
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowFullScreen={true}
-          />
-          <a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
-            {a}
-          </a>
-        </>
-      );
-    } else if (tidalId) {
       return <TidalEmbed link={a} />;
-    } else if (soundcloundId) {
+    } else if (a.match(SoundCloudRegex)) {
       return <SoundCloudEmbed link={a} />;
-    } else if (mixcloudId) {
+    } else if (a.match(MixCloudRegex)) {
       return <MixCloudEmbed link={a} />;
-    } else if (isSpotifyLink) {
+    } else if (a.match(SpotifyRegex)) {
       return <SpotifyEmbed link={a} />;
-    } else if (isTwitchLink) {
+    } else if (a.match(TwitchRegex)) {
       return <TwitchEmbed link={a} />;
-    } else if (isAppleMusicLink) {
+    } else if (a.match(AppleMusicRegex)) {
       return <AppleMusicEmbed link={a} />;
-    } else if (isNostrNestsLink) {
+    } else if (a.match(WavlakeRegex)) {
-      return (
-        <>
-          <a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
-            {children ?? a}
-          </a>
-          {/*<NostrNestsEmbed link={a} />,*/}
-        </>
-      );
-    } else if (isWavlakeLink) {
       return <WavlakeEmbed link={a} />;
     } else if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
       return <NostrLink link={a} depth={depth} />;
@@ -93,6 +60,8 @@ export default function HyperText({ link, depth, showLinkPreview, children }: Hy
       if (parsed) {
         return <MagnetLink magnet={parsed} />;
       }
+    } else if ((m = a.match(Bech32Regex)) != null) {
+      return <NostrLink link={`nostr:${m[1]}`} depth={depth} />;
     } else if (showLinkPreview ?? true) {
       return <LinkPreview url={a} />;
     }

packages/app/src/Components/Embed/MixCloudEmbed.tsx

@@ -2,24 +2,21 @@ import usePreferences from "@/Hooks/usePreferences";
 import { MixCloudRegex } from "@/Utils/Const";
 
 const MixCloudEmbed = ({ link }: { link: string }) => {
-  const feedPath = (MixCloudRegex.test(link) && RegExp.$1) + "%2F" + (MixCloudRegex.test(link) && RegExp.$2);
+  const match = link.match(MixCloudRegex);
+  if (!match) return;
+  const feedPath = match[1] + "%2F" + match[2];
 
   const theme = usePreferences(s => s.theme);
   const lightParams = theme === "light" ? "light=1" : "light=0";
   return (
-    <>
-      <br />
     <iframe
       title="SoundCloud player"
       width="100%"
       height="120"
       frameBorder="0"
       src={`https://www.mixcloud.com/widget/iframe/?hide_cover=1&${lightParams}&feed=%2F${feedPath}%2F`}
+      loading="lazy"
     />
-      <a href={link} target="_blank" rel="noreferrer">
-        {link}
-      </a>
-    </>
   );
 };
 

packages/app/src/Components/Embed/SoundCloudEmded.tsx

@@ -1,19 +1,12 @@
 const SoundCloudEmbed = ({ link }: { link: string }) => {
   return (
-    <>
     <iframe
-        // eslint-disable-next-line react/no-unknown-property
-        credentialless=""
       width="100%"
       height="166"
-        scrolling="no"
       allow="autoplay"
       src={`https://w.soundcloud.com/player/?url=${link}`}
+      loading="lazy"
     />
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
-        {link}
-      </a>
-    </>
   );
 };
 

packages/app/src/Components/Embed/SpotifyEmbed.tsx

@@ -2,10 +2,7 @@ const SpotifyEmbed = ({ link }: { link: string }) => {
   const convertedUrl = link.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
 
   return (
-    <>
     <iframe
-        // eslint-disable-next-line react/no-unknown-property
-        credentialless=""
       style={{ borderRadius: 12 }}
       src={convertedUrl}
       width="100%"
@@ -14,10 +11,6 @@ const SpotifyEmbed = ({ link }: { link: string }) => {
       allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
       loading="lazy"
     />
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
-        {link}
-      </a>
-    </>
   );
 };
 

packages/app/src/Components/Embed/TidalEmbed.tsx

@@ -53,7 +53,7 @@ const TidalEmbed = ({ link }: { link: string }) => {
       </a>
     );
   }
-  const iframe = (
+  return (
     <iframe
       src={source}
       style={extraStyles}
@@ -62,16 +62,9 @@ const TidalEmbed = ({ link }: { link: string }) => {
       sandbox="allow-scripts allow-popups allow-forms allow-same-origin"
       title="TIDAL Embed"
       frameBorder={0}
+      loading="lazy"
     />
   );
-  return (
-    <>
-      {iframe}
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
-        {link}
-      </a>
-    </>
-  );
 };
 
 export default TidalEmbed;

packages/app/src/Components/Embed/TwitchEmbed.tsx

@@ -3,12 +3,12 @@ const TwitchEmbed = ({ link }: { link: string }) => {
 
   const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
   return (
-    <>
+    <iframe
-      <iframe src={`https://player.twitch.tv/${args}`} className="w-max" allowFullScreen={true} />
+      src={`https://player.twitch.tv/${args}`}
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+      className="aspect-video w-full"
-        {link}
+      allowFullScreen={true}
-      </a>
+      loading="lazy"
-    </>
+    />
   );
 };
 

packages/app/src/Components/Embed/WavlakeEmbed.tsx

@@ -2,21 +2,7 @@ const WavlakeEmbed = ({ link }: { link: string }) => {
   const convertedUrl = link.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
 
   return (
-    <>
+    <iframe style={{ borderRadius: 12 }} src={convertedUrl} width="100%" height="380" frameBorder="0" loading="lazy" />
-      <iframe
-        // eslint-disable-next-line react/no-unknown-property
-        credentialless=""
-        style={{ borderRadius: 12 }}
-        src={convertedUrl}
-        width="100%"
-        height="380"
-        frameBorder="0"
-        loading="lazy"
-      />
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
-        {link}
-      </a>
-    </>
   );
 };
 

packages/app/src/Components/Embed/YoutubeEmbed.tsx

@@ -0,0 +1,17 @@
+import { YoutubeUrlRegex } from "@/Utils/Const";
+
+export default function YoutubeEmbed({ link }: { link: string }) {
+  const m = link.match(YoutubeUrlRegex);
+  if (!m) return;
+
+  return (
+    <iframe
+      className="-mx-4 md:mx-0 w-max my-2"
+      src={`https://www.youtube.com/embed/${m[1]}${m[3] ? `?list=${m[3].slice(6)}` : ""}`}
+      title="YouTube video player"
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowFullScreen={true}
+    />
+  );
+}

packages/app/src/Utils/Const.ts

@@ -84,9 +84,10 @@ export const InvoiceRegex = /(lnbc\w+)/i;
 
 /**
  * YouTube URL regex
+ * https://music.youtube.com/watch?v=KyF9hKd-EC4&list=RDTMAK5uy_kset8DisdE7LSD4TNjEVvrKRTmG7a56sY
  */
 export const YoutubeUrlRegex =
-  /(?:https?:\/\/)?(?:www|m\.)?(?:youtu\.be\/|youtube\.com\/(?:live\/|shorts\/|embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})/;
+  /(?:https?:\/\/)?(?:www|m\.)?(?:youtu\.be\/|youtube\.com\/(?:live\/|shorts\/|embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})((?:&list=)(?:(\w|-)+))?/;
 
 /**
  * Hashtag regex

packages/shared/src/const.ts

@@ -4,3 +4,8 @@
 export const EmailRegex =
   // eslint-disable-next-line no-useless-escape
   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+/**
+ * Match any NIP-19 code
+ */
+export const Bech32Regex = /(n(?:pub|profile|event|ote|addr|req|relay|chat)1[acdefghjklmnpqrstuvwxyz023456789]+)/;

packages/shared/src/index.ts

@@ -6,3 +6,4 @@ export * from "./feed-cache";
 export * from "./invoices";
 export * from "./dexie-like";
 export * from "./SortedMap/SortedMap";
+export * from "./const";

packages/system/src/nostr-link.ts

@@ -1,4 +1,4 @@
-import { bech32ToHex, hexToBech32, isHex, removeUndefined, unwrap } from "@snort/shared";
+import { bech32ToHex, hexToBech32, isHex, removeUndefined, unwrap, Bech32Regex } from "@snort/shared";
 import {
   decodeTLV,
   encodeTLV,
@@ -283,7 +283,7 @@ export function trimNostrLink(link: string) {
   let entity = link.startsWith("web+nostr:") || link.startsWith("nostr:") ? link.split(":")[1] : link;
 
   // trim any non-bech32 chars
-  entity = entity.match(/(n(?:pub|profile|event|ote|addr|req)1[acdefghjklmnpqrstuvwxyz023456789]+)/)?.[0] ?? entity;
+  entity = entity.match(Bech32Regex)?.[0] ?? entity;
   return entity;
 }