Files |
diff --git a/src/players/Mixcloud.js b/src/players/Mixcloud.js
new file mode 100644
index 0000000..2ea9d47
--- /dev/null
+++ b/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 (
+
+ )
+ }
+}
+
+export default createSinglePlayer(Mixcloud)
diff --git a/src/players/index.js b/src/players/index.js
index 047a1e1..38a6dfb 100644
--- a/src/players/index.js
+++ b/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
]
diff --git a/src/props.js b/src/props.js
index 7af3887..77ea9ea 100644
--- a/src/props.js
+++ b/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 () {},
diff --git a/src/utils.js b/src/utils.js
index 53b961a..132ee5a 100644
--- a/src/utils.js
+++ b/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) {
diff --git a/test/specs/ReactPlayer.js b/test/specs/ReactPlayer.js
index 83c7ce6..74da93c 100644
--- a/test/specs/ReactPlayer.js
+++ b/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/'
}
]
|