onDuration doesn't get called on clicking a video item

I have a page where a fetch data from YouTube API. When I click one of video, data about that video is sent through WebSockets. The problem is when I click it for the first time, onDuration of react-player is called. After that if I click another video, onDuration isn't called.

handleDuration = (duration) => {
this.setState({
duration: duration,
}, () => {
let data = {
play: this.state.play,
url: this.state.url,
mute: this.state.mute,
duration: this.state.duration,
seek: this.state.seek,
};
streamSocket.send(JSON.stringify(data));
});
console.log("handleDuration");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

This function is associated with onDuration.

GitHub URL: https://github.com/algomaster99/stream-2.0/tree/master/stream-frontend

stream.js and videoItem.js will be the files you need to be concerned about.

EDIT: Changed onDuration to onReady. It still works only on the first video I select.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.