feat: replace http nostr links with native nostr links

closes #666 refactor: embeds
2024-09-13 10:52:25 +01:00 · 2024-09-13 10:52:25 +01:00 · b5c106d579
commit b5c106d579
parent dd7424f616
13 changed files with 86 additions and 137 deletions
--- a/packages/app/src/Components/Embed/AppleMusicEmbed.tsx
+++ b/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}
-      />
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
-        {link}
-      </a>
-    </>
+    <iframe
+      allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
+      frameBorder="0"
+      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/packages/app/src/Components/Embed/HyperText.tsx
+++ b/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) {
-      return (
-        <>
-          <iframe
-            // 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) {
+    let m = null;
+    if (a.match(YoutubeUrlRegex)) {
+      return <YoutubeEmbed link={a} />;
+    } else if (a.match(TidalRegex)) {
      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) {
-      return (
-        <>
-          <a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
-            {children ?? a}
-          </a>
-          {/*<NostrNestsEmbed link={a} />,*/}
-        </>
-      );
-    } else if (isWavlakeLink) {
+    } else if (a.match(WavlakeRegex)) {
      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} />;
    }
--- a/packages/app/src/Components/Embed/MixCloudEmbed.tsx
+++ b/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`}
-      />
-      <a href={link} target="_blank" rel="noreferrer">
-        {link}
-      </a>
-    </>
+    <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/packages/app/src/Components/Embed/SoundCloudEmded.tsx
+++ b/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}`}
-      />
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
-        {link}
-      </a>
-    </>
+    <iframe
+      width="100%"
+      height="166"
+      allow="autoplay"
+      src={`https://w.soundcloud.com/player/?url=${link}`}
+      loading="lazy"
+    />
  );
 };

--- a/packages/app/src/Components/Embed/SpotifyEmbed.tsx
+++ b/packages/app/src/Components/Embed/SpotifyEmbed.tsx
@ -2,22 +2,15 @@ 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%"
-        height="352"
-        frameBorder="0"
-        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>
-    </>
+    <iframe
+      style={{ borderRadius: 12 }}
+      src={convertedUrl}
+      width="100%"
+      height="352"
+      frameBorder="0"
+      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+      loading="lazy"
+    />
  );
 };

--- a/packages/app/src/Components/Embed/TidalEmbed.tsx
+++ b/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;
--- a/packages/app/src/Components/Embed/TwitchEmbed.tsx
+++ b/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 src={`https://player.twitch.tv/${args}`} className="w-max" allowFullScreen={true} />
-      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
-        {link}
-      </a>
-    </>
+    <iframe
+      src={`https://player.twitch.tv/${args}`}
+      className="aspect-video w-full"
+      allowFullScreen={true}
+      loading="lazy"
+    />
  );
 };

--- a/packages/app/src/Components/Embed/WavlakeEmbed.tsx
+++ b/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
-        // 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>
-    </>
+    <iframe style={{ borderRadius: 12 }} src={convertedUrl} width="100%" height="380" frameBorder="0" loading="lazy" />
  );
 };

--- a/packages/app/src/Components/Embed/YoutubeEmbed.tsx
+++ b/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}
+    />
+  );
+}
--- a/packages/app/src/Utils/Const.ts
+++ b/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
--- a/packages/shared/src/const.ts
+++ b/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]+)/;
--- a/packages/shared/src/index.ts
+++ b/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";
--- a/packages/system/src/nostr-link.ts
+++ b/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;
 }