From d19b000185a3e1d893a353f00541c21dd416453f Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Thu, 16 Nov 2023 09:49:28 -0600
Subject: [PATCH] show soundcloud embeds

---
 .changeset/shaggy-dolphins-clap.md            |  5 +++++
 src/components/embed-types/music.tsx          | 21 +++++++++++++++++++
 src/components/note/text-note-contents.tsx    |  2 ++
 .../stream-chat/chat-message-content.tsx      |  4 +++-
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/shaggy-dolphins-clap.md

diff --git a/.changeset/shaggy-dolphins-clap.md b/.changeset/shaggy-dolphins-clap.md
new file mode 100644
index 000000000..2c29ef9c4
--- /dev/null
+++ b/.changeset/shaggy-dolphins-clap.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Show soundcloud embeds
diff --git a/src/components/embed-types/music.tsx b/src/components/embed-types/music.tsx
index 540af6d00..66705eba4 100644
--- a/src/components/embed-types/music.tsx
+++ b/src/components/embed-types/music.tsx
@@ -1,6 +1,7 @@
 import { CSSProperties } from "react";
 import { Box, useColorMode } from "@chakra-ui/react";
 import { EmbedEventPointer } from "../embed-event";
+import appSettings from "../../services/settings/app-settings";
 
 const setZIndex: CSSProperties = { zIndex: 1, position: "relative" };
 
@@ -121,3 +122,23 @@ export function renderStemstrUrl(match: URL) {
 
   return <EmbedEventPointer pointer={{ type: "nevent", data: { id, relays: ["wss://relay.stemstr.app"] } }} />;
 }
+
+export function renderSoundCloudUrl(match: URL) {
+  if (match.hostname !== "soundcloud.com" || match.pathname.split("/").length !== 3) return null;
+
+  return (
+    <iframe
+      width="100%"
+      height="166"
+      scrolling="no"
+      frameBorder="no"
+      allow="autoplay"
+      src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
+        match.protocol + match.host + match.pathname,
+      )}&color=${encodeURIComponent(
+        "#" + appSettings.value.primaryColor || "ff5500",
+      )}&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true`}
+      style={setZIndex}
+    ></iframe>
+  );
+}
diff --git a/src/components/note/text-note-contents.tsx b/src/components/note/text-note-contents.tsx
index 48006e9b0..97eaa30cd 100644
--- a/src/components/note/text-note-contents.tsx
+++ b/src/components/note/text-note-contents.tsx
@@ -23,6 +23,7 @@ import {
   renderSongDotLinkUrl,
   embedCashuTokens,
   renderStemstrUrl,
+  renderSoundCloudUrl,
 } from "../embed-types";
 import { LightboxProvider } from "../lightbox-provider";
 import { renderRedditUrl } from "../embed-types/reddit";
@@ -44,6 +45,7 @@ function buildContents(event: NostrEvent | DraftNostrEvent, simpleLinks = false)
     renderTidalUrl,
     renderSongDotLinkUrl,
     renderStemstrUrl,
+    renderSoundCloudUrl,
     renderImageUrl,
     renderVideoUrl,
     simpleLinks ? renderGenericUrl : renderOpenGraphUrl,
diff --git a/src/views/streams/stream/stream-chat/chat-message-content.tsx b/src/views/streams/stream/stream-chat/chat-message-content.tsx
index 41b601f00..b2319c630 100644
--- a/src/views/streams/stream/stream-chat/chat-message-content.tsx
+++ b/src/views/streams/stream/stream-chat/chat-message-content.tsx
@@ -8,6 +8,8 @@ import {
   embedNostrMentions,
   renderGenericUrl,
   renderImageUrl,
+  renderSoundCloudUrl,
+  renderStemstrUrl,
 } from "../../../../components/embed-types";
 import { NostrEvent } from "../../../../types/nostr-event";
 
@@ -15,7 +17,7 @@ const ChatMessageContent = React.memo(({ event }: { event: NostrEvent }) => {
   const content = useMemo(() => {
     let c: EmbedableContent = [event.content];
 
-    c = embedUrls(c, [renderImageUrl, renderGenericUrl]);
+    c = embedUrls(c, [renderImageUrl, renderStemstrUrl, renderSoundCloudUrl, renderGenericUrl]);
 
     // nostr
     c = embedNostrLinks(c);