diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js index db2fbfcd..9ed8a586 100644 --- a/src/ReactPlayer.js +++ b/src/ReactPlayer.js @@ -79,7 +79,7 @@ export default class ReactPlayer extends Component { } renderPlayers () { // Build array of players to render based on URL and preload config - const { url, youtubeConfig, vimeoConfig } = this.props + const { url, youtubeConfig, vimeoConfig, dailymotionConfig } = this.props const players = [] if (YouTube.canPlay(url)) { players.push(YouTube) @@ -108,6 +108,9 @@ export default class ReactPlayer extends Component { if (!Vimeo.canPlay(url) && vimeoConfig.preload) { players.push(Vimeo) } + if (!DailyMotion.canPlay(url) && dailymotionConfig.preload) { + players.push(DailyMotion) + } return players.map(this.renderPlayer) } ref = player => { @@ -115,7 +118,7 @@ export default class ReactPlayer extends Component { } renderPlayer = Player => { const active = Player.canPlay(this.props.url) - const { youtubeConfig, vimeoConfig, ...activeProps } = this.props + const { youtubeConfig, vimeoConfig, dailymotionConfig, ...activeProps } = this.props const props = active ? { ...activeProps, ref: this.ref } : {} // Only youtube and vimeo config passed to // inactive players due to preload behaviour @@ -124,6 +127,7 @@ export default class ReactPlayer extends Component { key={Player.displayName} youtubeConfig={youtubeConfig} vimeoConfig={vimeoConfig} + dailymotionConfig={dailymotionConfig} {...props} /> ) diff --git a/src/demo/App.js b/src/demo/App.js index 92d50932..e2f006e0 100644 --- a/src/demo/App.js +++ b/src/demo/App.js @@ -168,13 +168,6 @@ export default class App extends Component { {this.renderLoadButton('https://www.youtube.com/watch?v=jNgP6d9HraI', 'Test B')} - - DailyMotion - - {this.renderLoadButton('http://www.dailymotion.com/video/x522udb', 'Test A')} - {this.renderLoadButton('http://www.dailymotion.com/video/x2hzs96_feast-2015-oscar-winning-short-movie-full-length-hd_shortfilms', 'Test B')} - - SoundCloud @@ -217,6 +210,13 @@ export default class App extends Component { {this.renderLoadButton('https://home.wistia.com/medias/29b0fbf547', 'Test B')} + + DailyMotion + + {this.renderLoadButton('http://www.dailymotion.com/video/x26m1j4_wildlife_animals', 'Test A')} + {this.renderLoadButton('http://www.dailymotion.com/video/x26ezj5', 'Test B')} + + Files diff --git a/src/players/DailyMotion.js b/src/players/DailyMotion.js index 6f626b27..e2efc051 100644 --- a/src/players/DailyMotion.js +++ b/src/players/DailyMotion.js @@ -45,24 +45,14 @@ export default class DailyMotion extends Base { }) }) } - parseId (url) { - if (url) { - const m = url.match(MATCH_URL) - if (m !== null) { - if (m[4] !== undefined) { - return m[4] - } - return m[2] - } - } - return null + const m = url.match(MATCH_URL) + return m[4] || m[2] } - load (url) { const { controls, dailymotionConfig, onError, playing } = this.props const id = this.parseId(url) - if (this.isReady) { + if (this.player) { this.player.load(id, { start: parseStartTime(url), autoplay: playing @@ -75,8 +65,8 @@ export default class DailyMotion extends Base { } this.loadingSDK = true this.getSDK().then(DM => { - // eslint-disable-next-line new-cap - this.player = new DM.player(this.container, { + const Player = DM.player + this.player = new Player(this.container, { width: '100%', height: '100%', video: id, @@ -84,9 +74,9 @@ export default class DailyMotion extends Base { ...DEFAULT_PLAYER_VARS, controls: controls, autoplay: this.props.playing, - ...dailymotionConfig.params, start: parseStartTime(url), - origin: window.location.origin + origin: window.location.origin, + ...dailymotionConfig.params }, events: { apiready: () => { @@ -108,7 +98,6 @@ export default class DailyMotion extends Base { const duration = this.getDuration() onDuration(duration) } - onEnded = () => { const { loop, onEnded } = this.props if (loop) { @@ -125,9 +114,7 @@ export default class DailyMotion extends Base { this.player.pause() } stop () { - if (!this.isReady || !this.player.pause) return - this.player.pause() - this.onEnded() + // Nothing to do } seekTo (fraction) { super.seekTo(fraction) @@ -138,6 +125,9 @@ export default class DailyMotion extends Base { if (!this.isReady || !this.player.setVolume) return this.player.setVolume(fraction) } + setPlaybackRate () { + return null + } getDuration () { if (!this.isReady || !this.player.duration) return null return this.player.duration @@ -147,8 +137,8 @@ export default class DailyMotion extends Base { return this.player.currentTime / this.getDuration() } getFractionLoaded () { - if (!this.isReady || !this.player.bufferedTime) return null - return this.player.bufferedTime + if (!this.isReady || !this.getDuration() || !this.player.bufferedTime) return null + return this.player.bufferedTime / this.getDuration() } ref = container => { this.container = container @@ -157,6 +147,7 @@ export default class DailyMotion extends Base { const style = { width: '100%', height: '100%', + backgroundColor: 'black', display: this.props.url ? 'block' : 'none' } return (