show soundcloud embeds

.changeset/shaggy-dolphins-clap.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Show soundcloud embeds

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>
+  );
+}

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,

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);