From 116bfac640211694554f501b9f979246a5b997f5 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Mon, 16 Mar 2020 21:25:15 -0400
Subject: [PATCH] links: add soundcloud embeds

---
 .../js/components/lib/link-detail-preview.js  | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/link/src/js/components/lib/link-detail-preview.js b/pkg/interface/link/src/js/components/lib/link-detail-preview.js
index 5590c4597..0b3e3502a 100644
--- a/pkg/interface/link/src/js/components/lib/link-detail-preview.js
+++ b/pkg/interface/link/src/js/components/lib/link-detail-preview.js
@@ -7,7 +7,8 @@ export class LinkPreview extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      timeSinceLinkPost: this.getTimeSinceLinkPost()
+      timeSinceLinkPost: this.getTimeSinceLinkPost(),
+      embed: ""
     };
   }
 
@@ -67,6 +68,12 @@ export class LinkPreview extends Component {
         /(?:(?:(?:(?:watch\?)?(?:time_continue=(?:[0-9]+))?.+v=)?([a-zA-Z0-9_-]+))(?:\?t\=(?:[0-9a-zA-Z]+))?)/.source // id
     );
 
+    let soundcloudRegex = new RegExp('' +
+      /(https?:\/\/(?:www.)?soundcloud.com\/[\w-]+\/?(?:sets\/)?[\w-]+)/.source
+    );
+
+    let isSoundcloud = soundcloudRegex.exec(props.url);
+
     let ytMatch = youTubeRegex.exec(props.url);
 
     let embed = "";
@@ -91,13 +98,26 @@ export class LinkPreview extends Component {
       );
     }
 
+    if (isSoundcloud && this.state.embed === "") {
+      fetch(
+        'https://soundcloud.com/oembed?format=json&url=' +
+        encodeURIComponent(props.url))
+      .then((response) => {
+        return response.json();
+      })
+      .then((json) => {
+        console.log(json)
+        this.setState({embed: json.html})
+      })
+    }
+
     let nameClass = props.nickname ? "inter" : "mono";
 
     return (
       <div className="pb6 w-100">
         <div
           className={"w-100 tc " + (ytMatch ? "embed-container" : "")}>
-          {embed}
+          {embed || <div dangerouslySetInnerHTML={{__html: this.state.embed}}/>}
         </div>
         <div className="flex flex-column ml2 pt6 flex-auto">
           <a href={props.url} className="w-100 flex" target="_blank">