DailyMotion tweaks

cookpete · Apr 27, 2017 · 64f3cd3 · 64f3cd3
1 parent 71dcda6
commit 64f3cd3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 32 deletions.
diff --git 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,14 +108,17 @@ 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 => {
     this.player = player
   }
   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
@@ -168,13 +168,6 @@ export default class App extends Component {
                 {this.renderLoadButton('https://www.youtube.com/watch?v=jNgP6d9HraI', 'Test B')}
               </td>
             </tr>
-            <tr>
-              <th>DailyMotion</th>
-              <td>
-                {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')}
-              </td>
-            </tr>
             <tr>
               <th>SoundCloud</th>
               <td>
@@ -217,6 +210,13 @@ export default class App extends Component {
                 {this.renderLoadButton('https://home.wistia.com/medias/29b0fbf547', 'Test B')}
               </td>
             </tr>
+            <tr>
+              <th>DailyMotion</th>
+              <td>
+                {this.renderLoadButton('http://www.dailymotion.com/video/x26m1j4_wildlife_animals', 'Test A')}
+                {this.renderLoadButton('http://www.dailymotion.com/video/x26ezj5', 'Test B')}
+              </td>
+            </tr>
             <tr>
               <th>Files</th>
               <td>

diff --git 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,18 +65,18 @@ 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,
         params: {
           ...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 (