Add Spotify embed (#188)

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

public/index.html

@@ -8,7 +8,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Fast nostr web ui" />
   <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; child-src 'none'; worker-src 'self'; frame-src youtube.com www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src wss://* 'self' https://*; img-src * data:; font-src https://fonts.gstatic.com; media-src *; script-src 'self' https://static.cloudflareinsights.com https://platform.twitter.com https://embed.tidal.com;" />
+    content="default-src 'self'; child-src 'none'; worker-src 'self'; frame-src youtube.com www.youtube.com https://platform.twitter.com https://embed.tidal.com https://w.soundcloud.com https://www.mixcloud.com https://open.spotify.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src wss://* 'self' https://*; img-src * data:; font-src https://fonts.gstatic.com; media-src *; script-src 'self' https://static.cloudflareinsights.com https://platform.twitter.com https://embed.tidal.com;" />
 
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/nostrich_512.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
@@ -20,4 +20,4 @@
   <div id="root"></div>
 </body>
 
-</html>
+</html>

src/Const.ts

@@ -122,3 +122,5 @@ export const SoundCloudRegex = /soundcloud\.com\/(?!live)([a-zA-Z0-9]+)\/([a-zA-
  */
 
 export const MixCloudRegex = /mixcloud\.com\/(?!live)([a-zA-Z0-9]+)\/([a-zA-Z0-9-]+)/
+
+export const SpotifyRegex = /open\.spotify\.com\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/

src/Element/SpotifyEmbed.tsx

@@ -0,0 +1,20 @@
+const SpotifyEmbed = ({ link }: { link: string }) => {
+  const convertedUrl = link.replace(
+    /\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/,
+    "/embed/$1/$2"
+  );
+
+  return (
+    <iframe
+      style={{ borderRadius: 12 }}
+      src={convertedUrl}
+      width="100%"
+      height="352"
+      frameBorder="0"
+      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+      loading="lazy"
+    ></iframe>
+  );
+};
+
+export default SpotifyEmbed;

src/Element/Text.tsx

@@ -5,7 +5,7 @@ import ReactMarkdown from "react-markdown";
 import { visit, SKIP } from "unist-util-visit";
 import { TwitterTweetEmbed } from "react-twitter-embed";
 
-import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex, TidalRegex, SoundCloudRegex, MixCloudRegex } from "Const";
+import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex, TidalRegex, SoundCloudRegex, MixCloudRegex, SpotifyRegex } from "Const";
 import { eventLink, hexToBech32 } from "Util";
 import Invoice from "Element/Invoice";
 import Hashtag from "Element/Hashtag";
@@ -19,6 +19,7 @@ import { RootState } from 'State/Store';
 import { UserPreferences } from 'State/Login';
 import SoundCloudEmbed from 'Element/SoundCloudEmded'
 import MixCloudEmbed from 'Element/MixCloudEmbed';
+import SpotifyEmbed from "./SpotifyEmbed";
 import { ProxyImg } from 'Element/ProxyImg';
 
 function transformHttpLink(a: string, pref: UserPreferences) {
@@ -32,6 +33,7 @@ function transformHttpLink(a: string, pref: UserPreferences) {
         const tidalId = TidalRegex.test(a) && RegExp.$1;
         const soundcloundId = SoundCloudRegex.test(a) && RegExp.$1;
         const mixcloudId = MixCloudRegex.test(a) && RegExp.$1;
+        const spotifyId = SpotifyRegex.test(a);
         const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
         if (extension) {
             switch (extension) {
@@ -86,6 +88,8 @@ function transformHttpLink(a: string, pref: UserPreferences) {
             return <SoundCloudEmbed link={a} />
         } else if (mixcloudId) {
             return <MixCloudEmbed link={a} />
+        } else if (spotifyId) {
+            return <SpotifyEmbed link={a} />
         } else {
             return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
         }