Fix youtube fragment looping

Fixes cookpete/react-player#897
webmiraclepro · May 22, 2020 · 99bac29 · 99bac29
1 parent aa93153
commit 99bac29
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/players/YouTube.js b/src/players/YouTube.js
@@ -83,7 +83,7 @@ export default class YouTube extends Component {
   }
 
   onStateChange = ({ data }) => {
-    const { onPlay, onPause, onBuffer, onBufferEnd, onEnded, onReady, loop } = this.props
+    const { onPlay, onPause, onBuffer, onBufferEnd, onEnded, onReady, loop, config: { playerVars } } = this.props
     const { PLAYING, PAUSED, BUFFERING, ENDED, CUED } = window[SDK_GLOBAL].PlayerState
     if (data === PLAYING) {
       onPlay()
@@ -93,8 +93,13 @@ export default class YouTube extends Component {
     if (data === BUFFERING) onBuffer()
     if (data === ENDED) {
       const isPlaylist = !!this.callPlayer('getPlaylist')
+      // Only loop manually if not playing a playlist
       if (loop && !isPlaylist) {
-        this.play() // Only loop manually if not playing a playlist
+        if (playerVars.start) {
+          this.seekTo(playerVars.start)
+        } else {
+          this.play()
+        }
       }
       onEnded()
     }

diff --git a/test/players/YouTube.js b/test/players/YouTube.js
@@ -85,33 +85,33 @@ test('onStateChange() - play', t => {
   const called = {}
   const onPlay = () => { called.onPlay = true }
   const onBufferEnd = () => { called.onBufferEnd = true }
-  const instance = shallow(<YouTube url={TEST_URL} onPlay={onPlay} onBufferEnd={onBufferEnd} />).instance()
+  const instance = shallow(<YouTube url={TEST_URL} onPlay={onPlay} onBufferEnd={onBufferEnd} config={{}} />).instance()
   instance.onStateChange({ data: 'PLAYING' })
   t.true(called.onPlay && called.onBufferEnd)
 })
 
 test('onStateChange() - pause', async t => {
   const onPause = () => t.pass()
-  const instance = shallow(<YouTube url={TEST_URL} onPause={onPause} />).instance()
+  const instance = shallow(<YouTube url={TEST_URL} onPause={onPause} config={{}} />).instance()
   instance.onStateChange({ data: 'PAUSED' })
 })
 
 test('onStateChange() - buffer', async t => {
   const onBuffer = () => t.pass()
-  const instance = shallow(<YouTube url={TEST_URL} onBuffer={onBuffer} />).instance()
+  const instance = shallow(<YouTube url={TEST_URL} onBuffer={onBuffer} config={{}} />).instance()
   instance.onStateChange({ data: 'BUFFERING' })
 })
 
 test('onStateChange() - ended', async t => {
   const onEnded = () => t.pass()
-  const instance = shallow(<YouTube url={TEST_URL} onEnded={onEnded} />).instance()
+  const instance = shallow(<YouTube url={TEST_URL} onEnded={onEnded} config={{}} />).instance()
   instance.player = { getPlaylist: () => {} }
   instance.onStateChange({ data: 'ENDED' })
 })
 
 test('onStateChange() - ready', async t => {
   const onReady = () => t.pass()
-  const instance = shallow(<YouTube url={TEST_URL} onReady={onReady} />).instance()
+  const instance = shallow(<YouTube url={TEST_URL} onReady={onReady} config={{}} />).instance()
   instance.onStateChange({ data: 'CUED' })
 })