/* withBuffering */

const BUFFERING_EVENT_NAME_LIST = ['canplay', 'waiting', 'loadstart'];

let buffered = [];
let bufferCheckIntervalId = -1;

const bufferingSymbol = Symbol('handleBuffering');

const withBuffering = (controller, mediaContainer) => {
  const alreadyHandled = mediaContainer[bufferingSymbol];
  if (alreadyHandled) {
    return;
  }

  mediaContainer[bufferingSymbol] = true;

  BUFFERING_EVENT_NAME_LIST.forEach(eventName =>
    mediaContainer.addEventListener(
      eventName,
      ({ target: mediaElement }) =>
        isHTMLMediaElement(mediaElement) &&
        tryBuffering(controller, mediaElement),
      { capture: true },
    ),
  );
};

const tryBuffering = (controller, mediaElement) => {
  const noNeedBuffering =
    !controller.isPlay ||
    isMediaPlayable(mediaElement) ||
    buffered.includes(mediaElement);

  if (noNeedBuffering) {
    return;
  }

  const preventPlay = () => {
    controller.pause();
  };

  preventPlay();
  mediaElement.addEventListener('playing', preventPlay);
  buffered.push(mediaElement);

  startCheckMediaIsPlayable(() => {
    clearBuffer(preventPlay);
    controller.play();
  });
};

const CHECK_INTERVAL_MS = 3000;

const startCheckMediaIsPlayable = onPlayable => {
  if (bufferCheckIntervalId !== -1) {
    return;
  }

  const executeOnPlayableWhenEveryPlayable = () => {
    const everyPlayable = buffered.every(isMediaPlayable);
    if (everyPlayable) {
      onPlayable();
      return;
    }

    bufferCheckIntervalId = setTimeout(
      executeOnPlayableWhenEveryPlayable,
      CHECK_INTERVAL_MS,
    );
  };

  executeOnPlayableWhenEveryPlayable();
};

const clearBuffer = preventPlay => {
  window.clearTimeout(bufferCheckIntervalId);
  bufferCheckIntervalId = -1;
  buffered.forEach(element =>
    element.removeEventListener('playing', preventPlay),
  );
  buffered = [];
};

const isHTMLMediaElement = element => element instanceof HTMLMediaElement;

const isMediaPlayable = mediaElement => {
  if (mediaElement.networkState !== mediaElement.NETWORK_LOADING) {
    return true;
  }

  if (mediaElement.readyState >= mediaElement.HAVE_ENOUGH_DATA) {
    return true;
  }

  return false;
};

/* UI */

document.addEventListener('DOMContentLoaded', () => {
  const mediaContainer = document.querySelector('.media-container');
  const videoElement = document.querySelector('video');
  const audioElement = document.querySelector('audio');

  const controller = {
    isPlay: false,
    play() {
      this.isPlay = true;
      videoElement.play().catch(e => console.log('Failed to play video:', e));
      audioElement.play().catch(e => console.log('Failed to play audio:', e));
    },
    stop() {
      this.pause();
      clearMedia(videoElement);
      clearMedia(audioElement);
    },
    pause() {
      this.isPlay = false;
      videoElement.pause();
      audioElement.pause();
    },
  };

  withBuffering(controller, mediaContainer);

  document
    .querySelector('button.play')
    .addEventListener('click', () => controller.play());
  document
    .querySelector('button.stop')
    .addEventListener('click', () => controller.stop());
});

const clearMedia = mediaElement => {
  mediaElement.currentTime = 0;

  const originSrc = mediaElement.src;
  mediaElement.src = '';
  mediaElement.load();
  mediaElement.src = originSrc;
};