Add legacy soundcloud player

src/ReactPlayer.js

@@ -4,6 +4,7 @@ import omit from 'lodash.omit'
 import { propTypes, defaultProps } from './props'
 import YouTube from './players/YouTube'
 import SoundCloud from './players/SoundCloud'
+import SoundCloudLegacy from './players/SoundCloudLegacy'
 import Vimeo from './players/Vimeo'
 import Facebook from './players/Facebook'
 import FilePlayer from './players/FilePlayer'
@@ -81,12 +82,16 @@ export default class ReactPlayer extends Component {
   }
   renderPlayers () {
     // Build array of players to render based on URL and preload config
-    const { url, youtubeConfig, vimeoConfig, dailymotionConfig } = this.props
+    const { url, youtubeConfig, vimeoConfig, dailymotionConfig, soundcloudConfig } = this.props
     const players = []
     if (YouTube.canPlay(url)) {
       players.push(YouTube)
     } else if (SoundCloud.canPlay(url)) {
-      players.push(SoundCloud)
+      if (soundcloudConfig.legacy) {
+        players.push(SoundCloudLegacy)
+      } else {
+        players.push(SoundCloud)
+      }
     } else if (Vimeo.canPlay(url)) {
       players.push(Vimeo)
     } else if (Facebook.canPlay(url)) {

src/players/SoundCloudLegacy.js

@@ -0,0 +1,85 @@
+import React from 'react'
+import fetchJSONP from 'fetch-jsonp'
+
+import FilePlayer from './FilePlayer'
+import { defaultProps } from '../props'
+
+const RESOLVE_URL = '//api.soundcloud.com/resolve.json'
+const MATCH_URL = /^https?:\/\/(soundcloud.com|snd.sc)\/([a-z0-9-_]+\/[a-z0-9-_]+)$/
+
+const songData = {} // Cache song data requests
+
+export default class SoundCloud extends FilePlayer {
+  static displayName = 'SoundCloud'
+  static canPlay (url) {
+    return MATCH_URL.test(url)
+  }
+  state = {
+    image: null
+  }
+  clientId = this.props.soundcloudConfig.clientId || defaultProps.soundcloudConfig.clientId
+  shouldComponentUpdate (nextProps, nextState) {
+    return (
+      super.shouldComponentUpdate(nextProps, nextState) ||
+      this.state.image !== nextState.image
+    )
+  }
+  getSongData (url) {
+    if (songData[url]) {
+      return Promise.resolve(songData[url])
+    }
+    return fetchJSONP(RESOLVE_URL + '?url=' + url + '&client_id=' + this.clientId)
+      .then(response => {
+        if (response.ok) {
+          songData[url] = response.json()
+          return songData[url]
+        } else {
+          this.props.onError(new Error('SoundCloud track could not be resolved'))
+        }
+      })
+  }
+  load (url) {
+    const { soundcloudConfig, onError } = this.props
+    this.stop()
+    this.getSongData(url).then(data => {
+      if (!this.mounted) return
+      if (!data.streamable) {
+        onError(new Error('SoundCloud track is not streamable'))
+        return
+      }
+      const image = data.artwork_url || data.user.avatar_url
+      if (image && soundcloudConfig.showArtwork) {
+        this.setState({ image: image.replace('-large', '-t500x500') })
+      }
+      this.player.src = data.stream_url + '?client_id=' + this.clientId
+    }, onError)
+  }
+  ref = player => {
+    this.player = player
+  }
+  render () {
+    const { url, loop, controls } = this.props
+    const style = {
+      display: url ? 'block' : 'none',
+      height: '100%',
+      backgroundImage: this.state.image ? 'url(' + this.state.image + ')' : null,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center'
+    }
+    return (
+      <div style={style}>
+        <audio
+          ref={this.ref}
+          type='audio/mpeg'
+          preload='auto'
+          style={{
+            width: '100%',
+            height: '100%'
+          }}
+          controls={controls}
+          loop={loop}
+        />
+      </div>
+    )
+  }
+}

src/props.js

@@ -18,7 +18,9 @@ export const propTypes = {
   hidden: bool,
   className: string,
   soundcloudConfig: shape({
-    options: object
+    options: object,
+    legacy: bool,
+    clientId: string
   }),
   youtubeConfig: shape({
     playerVars: object,
@@ -73,7 +75,9 @@ export const defaultProps = {
   progressFrequency: 1000,
   playsinline: false,
   soundcloudConfig: {
-    options: {}
+    options: {},
+    legacy: false,
+    clientId: 'e8b6f84fbcad14c301ca1355cae1dea2'
   },
   youtubeConfig: {
     playerVars: {},