onEnded calls twice

[dmitryrn]

onEnded event calls twice and I do not understand why.

import React, { Component } from 'react'

import ReactPlayer from 'react-player'

class SingleClip extends Component {
  state = {
    currentUrl: '',
    currentStart: 0,
    currentEnd: 0,
    currentVideoIndex: 0,
  }

  componentWillMount = () => {
    const {
      videos,
    } = this.props

    const firstVideo = videos[0]

    this.setState({
      currentUrl: firstVideo.url,
      currentStart: firstVideo.start,
      currentEnd: firstVideo.end,
    })
  }

  onEnded = () => {
    const {
      currentVideoIndex,
    } = this.state

    const {
      videos,
    } = this.props

    const nextVideoIndex = currentVideoIndex + 1
    const nextVideoUrl = videos[nextVideoIndex].url
    
    console.log('url')

    this.setState({
      currentVideoIndex: nextVideoIndex,
      currentUrl: nextVideoUrl,
    }, () => console.log('state updated'))
  }

  render() {
    const {
      currentUrl,
      currentStart,
      currentEnd,
    } = this.state

    console.log('render')

    return (
      <div>
        <div>Single clip</div>
        <ReactPlayer
          ref={x => this.player = x}
          playing
          onEnded={this.onEnded}
          url={currentUrl}
          config={{
            youtube: {
              playerVars: {
                showinfo: 1,
                controls: 1,
                start: currentStart,
                end: currentEnd,
              }
            },
          }} />
      </div>
    )
  }
}

export default SingleClip

console.log output:

render
// waiting till video ends
url
render
state updated
url
render
state updated

props.videos:

[
  {
    url: 'https://www.youtube.com/watch?v=A71aqufiNtQ',
    start: 15,
    end: 20,
  }, {
    url: 'https://www.youtube.com/watch?v=pgAvVxowaYU',
    start: 30,
    end: 35,
  }, {
    url: 'https://www.youtube.com/watch?v=A71aqufiNtQ',
    start: 60,
    end: 70,
  },
]