diff --git a/src/components/post/embed/embed.module.css b/src/components/post/embed/embed.module.css index 692d13bf..0f7cfbd6 100644 --- a/src/components/post/embed/embed.module.css +++ b/src/components/post/embed/embed.module.css @@ -67,4 +67,10 @@ width: 100% !important; height: 50vh !important; } +} + +.soundcloudEmbed { + height: 166px; /* default height of soundcloud embeds */ + width: 100%; + max-width: 640px; } \ No newline at end of file diff --git a/src/components/post/embed/embed.tsx b/src/components/post/embed/embed.tsx index c589cf4b..5f8b8e96 100644 --- a/src/components/post/embed/embed.tsx +++ b/src/components/post/embed/embed.tsx @@ -37,6 +37,9 @@ const Embed = ({ url }: EmbedProps) => { if (spotifyHosts.has(parsedUrl.host)) { return ; } + if (soundcloudHosts.has(parsedUrl.host)) { + return ; + } }; interface EmbedComponentProps { @@ -258,6 +261,24 @@ const SpotifyEmbed = ({ parsedUrl }: EmbedComponentProps) => { ); }; +const soundcloudHosts = new Set(['soundcloud.com', 'www.soundcloud.com', 'on.soundcloud.com', 'api.soundcloud.com', 'w.soundcloud.com']); + +// not officially documented https://stackoverflow.com/questions/20870270/how-to-get-soundcloud-embed-code-by-soundcloud-com-url +const SoundcloudEmbed = ({ parsedUrl }: EmbedComponentProps) => { + return ( +