Add Mixcloud player

Fixes cookpete/react-player#335

README.md

@@ -131,6 +131,7 @@ Key | Options
 `soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params)<br />`preload`: Used for [preloading](#preloading)
 `vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters)<br />`preload`: Used for [preloading](#preloading)
 `wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)
+`mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods)
 `dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)<br />`preload`: Used for [preloading](#preloading)
 `file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams<br />`hlsOptions`: Override the [default `hls.js` options](https://github.com/video-dev/hls.js/blob/master/doc/API.md#fine-tuning)
 

index.d.ts

@@ -39,6 +39,10 @@ export interface WistiaConfig {
   options?: Object;
 }
 
+export interface MixcloudConfig {
+  options?: Object;
+}
+
 export interface FileConfig {
   attributes?: Object;
   tracks?: TrackProps[];
@@ -55,6 +59,7 @@ export interface Config {
   vimeo?: VimeoConfig;
   file?: FileConfig;
   wistia?: WistiaConfig;
+  mixcloud?: MixcloudConfig;
 }
 
 export interface ReactPlayerProps {

src/demo/App.js

@@ -249,6 +249,13 @@ class App extends Component {
                 {this.renderLoadButton('https://www.dailymotion.com/video/x61xx3z', 'Test B')}
               </td>
             </tr>
+            <tr>
+              <th>Mixcloud</th>
+              <td>
+                {this.renderLoadButton('https://www.mixcloud.com/mixcloud/meet-the-curators/', 'Test A')}
+                {this.renderLoadButton('https://www.mixcloud.com/mixcloud/mixcloud-curates-4-mary-anne-hobbs-in-conversation-with-dan-deacon/', 'Test B')}
+              </td>
+            </tr>
             <tr>
               <th>Files</th>
               <td>

src/players/Mixcloud.js

@@ -0,0 +1,86 @@
+import React, { Component } from 'react'
+
+import { callPlayer, getSDK, queryString } from '../utils'
+import createSinglePlayer from '../singlePlayer'
+
+const SDK_URL = '//widget.mixcloud.com/media/js/widgetApi.js'
+const SDK_GLOBAL = 'Mixcloud'
+const MATCH_URL = /mixcloud\.com\/([^/]+\/[^/]+)/
+
+export class Mixcloud extends Component {
+  static displayName = 'Mixcloud'
+  static canPlay = url => MATCH_URL.test(url)
+
+  callPlayer = callPlayer
+  duration = null
+  currentTime = null
+  secondsLoaded = null
+  load (url) {
+    getSDK(SDK_URL, SDK_GLOBAL).then(Mixcloud => {
+      this.player = Mixcloud.PlayerWidget(this.iframe)
+      this.player.ready.then(() => {
+        this.player.events.play.on(this.props.onPlay)
+        this.player.events.pause.on(this.props.onPause)
+        this.player.events.ended.on(this.props.onEnded)
+        this.player.events.error.on(this.props.error)
+        this.player.events.progress.on((seconds, duration) => {
+          this.currentTime = seconds
+          this.duration = duration
+        })
+        this.props.onReady()
+      })
+    }, this.props.onError)
+  }
+  play () {
+    this.callPlayer('play')
+  }
+  pause () {
+    this.callPlayer('pause')
+  }
+  stop () {
+    // Nothing to do
+  }
+  seekTo (seconds) {
+    this.callPlayer('seek', seconds)
+  }
+  setVolume (fraction) {
+    // No volume support
+  }
+  getDuration () {
+    return this.duration
+  }
+  getCurrentTime () {
+    return this.currentTime
+  }
+  getSecondsLoaded () {
+    return null
+  }
+  ref = iframe => {
+    this.iframe = iframe
+  }
+  render () {
+    const { url, config } = this.props
+    const id = url.match(MATCH_URL)[1]
+    const style = {
+      width: '100%',
+      height: '100%'
+    }
+    const query = queryString({
+      ...config.mixcloud.options,
+      feed: `/${id}/`
+    })
+    // We have to give the iframe a key here to prevent a
+    // weird dialog appearing when loading a new track
+    return (
+      <iframe
+        key={id}
+        ref={this.ref}
+        style={style}
+        src={`https://www.mixcloud.com/widget/iframe/?${query}`}
+        frameBorder='0'
+      />
+    )
+  }
+}
+
+export default createSinglePlayer(Mixcloud)

src/players/index.js

@@ -6,6 +6,7 @@ import { Streamable } from './Streamable'
 import { Wistia } from './Wistia'
 import { Twitch } from './Twitch'
 import { DailyMotion } from './DailyMotion'
+import { Mixcloud } from './Mixcloud'
 import { FilePlayer } from './FilePlayer'
 
 export default [
@@ -17,5 +18,6 @@ export default [
   Wistia,
   Twitch,
   DailyMotion,
+  Mixcloud,
   FilePlayer
 ]

src/props.js

@@ -45,6 +45,9 @@ export const propTypes = {
     }),
     wistia: shape({
       options: object
+    }),
+    mixcloud: shape({
+      options: object
     })
   }),
   onReady: func,
@@ -125,6 +128,11 @@ export const defaultProps = {
     },
     wistia: {
       options: {}
+    },
+    mixcloud: {
+      options: {
+        hide_cover: 1
+      }
     }
   },
   onReady: function () {},

src/utils.js

@@ -41,6 +41,13 @@ export function randomString () {
   return Math.random().toString(36).substr(2, 5)
 }
 
+export function queryString (object) {
+  return Object
+    .keys(object)
+    .map(key => `${key}=${object[key]}`)
+    .join('&')
+}
+
 // Util function to load an external SDK
 // or return the SDK if it is already loaded
 export function getSDK (url, sdkGlobal, sdkReady = null, isLoaded = () => true) {

test/specs/ReactPlayer.js

@@ -87,6 +87,11 @@ const TEST_URLS = [
     error: 'http://www.dailymotion.com/video/x6c0xvb',
     onSeek: true,
     skip: true
+  },
+  {
+    name: 'Mixcloud',
+    url: 'https://www.mixcloud.com/mixcloud/meet-the-curators/',
+    switchTo: 'https://www.mixcloud.com/mixcloud/mixcloud-curates-4-mary-anne-hobbs-in-conversation-with-dan-deacon/'
   }
 ]