PoC using Youtube Player API with react-youtube to control a player

App.js

import React from 'react';
import YouTube from 'react-youtube';
import './App.css';

function App() {
  const opts = {
    playerVars: { }
    // https://developers.google.com/youtube/player_parameters
  }

  let player_status = -1;
  let player = undefined;
  let agent = {
    stop: undefined,
  }
  let currrent_action = {
    stopIn: -1,
  };

  window.YTConfig = {
    host: 'https://www.youtube.com'
  };

  const _onReady = (event) => {
    console.log(YouTube.PlayerState);
    player = event.target;
    _resumePlayer(event.target, 2);
  };

  const _onChange = (event) => {
    player_status = event.data;
    if (event.data === YouTube.PlayerState.PLAYING && currrent_action.stopIn !== -1) {
      console.log('Playing for: ' + currrent_action.stopIn + 's starting: ' + new Date().getTime());
      agent.stop = setTimeout(_pausePlayer, currrent_action.stopIn, event.target, console.log);
    } else {
      console.log('I have changed: ' + event.data + ' at ' + event.target.getCurrentTime());
    }
  };

  const _resumePlayer = (target, stopTime = -1) => {
    currrent_action.stopIn = stopTime === -1 ? stopTime : (stopTime - target.getCurrentTime())*1000
    target.playVideo();
  };

  const _pausePlayer = (target, callback) => {
    target.pauseVideo();
    callback('Video current time: ' + target.getCurrentTime() + ' pausing at: ' + new Date().getTime());
  };

  const _playMore10 = (event) => {
    if (player_status !== YouTube.PlayerState.PLAYING) {
      _resumePlayer(player, player.getCurrentTime()+10);
    }
  };

  const _playToTheEnd = (event) => {
    if (player_status !== YouTube.PlayerState.PLAYING) {
      _resumePlayer(player)
    }
  }

  const _changeVideo = (event) => {
    console.log(player);
    player.stopVideo();
    clearTimeout(agent.stop);
    currrent_action.stopIn = -1;
    player.loadVideoById('LL7B6v9xZ1g');
  }

  return (
    <div className="App">
      <header className="App-header">
        <YouTube
          videoId="2g811Eo7K8U"
          id="VIDEO01"
          opts={opts}
          onReady={_onReady}
          onStateChange={_onChange}
        />
        <button onClick={_playMore10}>Play more 10</button>
        <button onClick={_playToTheEnd}>Play All</button>
        <button onClick={_changeVideo}>Change Video</button>
      </header>
    </div>
  );

}

export default App;