Add Spotify embed (#188)

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>
         }