When seeking before player is ready, store value and seek later

Fixes cookpete/react-player#19
philip-luther · Nov 22, 2024 · 3444041 · 3444041
1 parent 20aa8f7
commit 3444041
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/src/players/Base.js b/src/players/Base.js
@@ -2,6 +2,8 @@ import { Component } from 'react'
 
 import { propTypes, defaultProps } from '../props'
 
+const SEEK_ON_READY_EXPIRY = 5000
+
 export default class Base extends Component {
   static propTypes = propTypes
   static defaultProps = defaultProps
@@ -17,7 +19,7 @@ export default class Base extends Component {
     // Invoke player methods based on incoming props
     if (this.props.url !== nextProps.url && nextProps.url) {
       this.load(nextProps.url, nextProps.playing)
-      this.props.onProgress({ played: 0, loaded: 0 }) // Needed?
+      this.seekOnReady = null
     } else if (this.props.url && !nextProps.url) {
       this.stop()
       clearTimeout(this.updateTimeout)
@@ -33,9 +35,23 @@ export default class Base extends Component {
     return this.props.url !== nextProps.url
   }
   isReady = false
+  seekTo (fraction) {
+    // When seeking before player is ready, store value and seek later
+    if (!this.isReady && fraction !== 0) {
+      this.seekOnReady = fraction
+      setTimeout(() => this.seekOnReady = null, SEEK_ON_READY_EXPIRY)
+    }
+  }
+  onPlay = () => {
+    this.props.onPlay()
+    this.setVolume(this.props.volume)
+    if (this.seekOnReady) {
+      this.seekTo(this.seekOnReady)
+      this.seekOnReady = null
+    }
+  }
   onReady = () => {
     this.isReady = true
-    this.setVolume(this.props.volume)
     if (this.props.playing || this.preloading) {
       this.preloading = false
       if (this.loadOnReady) {

diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
@@ -13,7 +13,7 @@ export default class FilePlayer extends Base {
   componentDidMount () {
     this.player = this.refs.player
     this.player.oncanplay = this.onReady
-    this.player.onplay = this.props.onPlay
+    this.player.onplay = this.onPlay
     this.player.onpause = this.props.onPause
     this.player.onended = this.props.onEnded
     this.player.onerror = this.props.onError
@@ -31,6 +31,7 @@ export default class FilePlayer extends Base {
     this.player.src = ''
   }
   seekTo (fraction) {
+    super.seekTo(fraction)
     this.player.currentTime = this.player.duration * fraction
   }
   setVolume (fraction) {

diff --git a/src/players/SoundCloud.js b/src/players/SoundCloud.js
@@ -59,7 +59,7 @@ export default class SoundCloud extends Base {
     })
   }
   onStateChange = state => {
-    if (state === 'playing') this.props.onPlay()
+    if (state === 'playing') this.onPlay()
     if (state === 'paused') this.props.onPause()
     if (state === 'loading') this.props.onBuffer()
     if (state === 'ended') this.props.onEnded()
@@ -86,6 +86,7 @@ export default class SoundCloud extends Base {
     this.player.stop()
   }
   seekTo (fraction) {
+    super.seekTo(fraction)
     if (!this.isReady) return
     this.player.seek(this.player.getDuration() * fraction)
   }

diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
@@ -50,6 +50,7 @@ export default class Vimeo extends Base {
     this.iframe.src = ''
   }
   seekTo (fraction) {
+    super.seekTo(fraction)
     this.postMessage('seekTo', this.duration * fraction)
   }
   setVolume (fraction) {
@@ -76,7 +77,7 @@ export default class Vimeo extends Base {
     if (data.event === 'ready') this.onReady()
     if (data.event === 'playProgress') this.fractionPlayed = data.data.percent
     if (data.event === 'loadProgress') this.fractionLoaded = data.data.percent
-    if (data.event === 'play') this.props.onPlay()
+    if (data.event === 'play') this.onPlay()
     if (data.event === 'pause') this.props.onPause()
     if (data.event === 'finish') this.props.onEnded()
     if (data.method === 'getDuration') this.duration = data.value // Store for use in seekTo()

diff --git a/src/players/YouTube.js b/src/players/YouTube.js
@@ -54,7 +54,6 @@ export default class YouTube extends Base {
       } else {
         this.player.cueVideoById(id)
       }
-      this.setVolume(this.props.volume)
       return
     }
     if (this.loadingSDK) {
@@ -84,7 +83,7 @@ export default class YouTube extends Base {
   }
   onStateChange = ({ data }) => {
     const { PLAYING, PAUSED, BUFFERING, ENDED } = window[SDK_GLOBAL].PlayerState
-    if (data === PLAYING) this.props.onPlay()
+    if (data === PLAYING) this.onPlay()
     if (data === PAUSED) this.props.onPause()
     if (data === BUFFERING) this.props.onBuffer()
     if (data === ENDED) this.props.onEnded()
@@ -102,6 +101,7 @@ export default class YouTube extends Base {
     this.player.stopVideo()
   }
   seekTo (fraction) {
+    super.seekTo(fraction)
     if (!this.isReady || !this.player.seekTo) return
     this.player.seekTo(this.player.getDuration() * fraction)
   }