Autoplay Hero Video: Youtube Video

import Player from '@vimeo/player';
import { loadYouTubeApi } from '../video/video';

export default parentElement => {
  const { videoId, videoType } = parentElement.dataset;
  const videoPlayerId = parentElement
    .querySelector('.vimeo-video-player')
    .getAttribute('id');
  const playButton = parentElement.querySelector('.play-pause-controls__play');
  const muteButton = parentElement.querySelector('.mute-unmute-controls__mute');
  const pauseButton = parentElement.querySelector(
    '.play-pause-controls__pause'
  );
  const unmuteButton = parentElement.querySelector(
    '.mute-unmute-controls__unmute'
  );

  // eslint-disable-next-line no-unused-vars
  let videoPlayer;

  if (!videoId) {
    return;
  }

  const resizeVideo = () => {
    const headerHeight = document.querySelector('.global-fixed-header')
      .offsetHeight;
    const screenWidth = document.getElementsByTagName('body')[0].clientWidth;
    const screenHeight = window.innerHeight - headerHeight;
    const playerWidth = screenHeight * (16 / 9);

    if (playerWidth < screenWidth && parentElement.querySelector('iframe')) {
      const playerHeight = screenWidth * (9 / 16);
      const PlayerWidth = screenWidth;

      // eslint-disable-next-line no-param-reassign
      parentElement.querySelector('iframe').style.height = `${playerHeight}px`;
      // eslint-disable-next-line no-param-reassign
      parentElement.querySelector('iframe').style.width = `${PlayerWidth}px`;
    }
  };

  const onPlayerError = () => {
    parentElement.classList.remove('vimeo-player-loaded');
  };

  const onPlayerStateChange = event => {
    if (event.data === window.YT.PlayerState.ENDED) {
      videoPlayer.playVideo();
    }
  };

  const onPlayerReady = () => {
    // To capture error on video
    videoPlayer.playVideo();
    videoPlayer.mute();
    parentElement.classList.add('vimeo-player-loaded');
    resizeVideo();
  };

  const initVideo = () => {
    videoPlayer = new window.YT.Player(videoPlayerId, {
      height: '390',
      width: '640',
      videoId,
      playerVars: {
        autoplay: 1,
        playsinline: 1,
        controls: 0,
        loop: 1,
      },
      events: {
        onReady: onPlayerReady,
        onError: onPlayerError,
        onStateChange: onPlayerStateChange,
      },
    });
  };

  if (videoType === 'youtube') {
    if (
      window.YouTubeIframeApiReady === undefined ||
      window.YouTubeIframeApiReady === false
    ) {
      loadYouTubeApi();
      window.onYouTubeIframeAPIReady = () => {
        window.YouTubeIframeApiReady = true;
        initVideo();
      };
    } else {
      initVideo();
    }
  } else {
    // eslint-disable-next-line no-undef
    videoPlayer = new Player(videoPlayerId, {
      id: videoId,
      autoplay: 1,
      muted: 1,
      title: 0,
      sidedock: 0,
      controls: 0,
      loop: 1,
      quality: 'auto',
      width: '100%',
      height: '100%',
    });

    videoPlayer
      .play()
      .then(() => {
        parentElement.classList.add('vimeo-player-loaded');
        // The video is loadded
        resizeVideo();
      })
      .catch(() => {
        // console.log(error.name);
      });
  }
  playButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.playVideo();
    } else {
      videoPlayer.play();
    }
    playButton.classList.toggle('hidden');
    pauseButton.classList.toggle('hidden');
  });
  playButton.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      playButton.click();
    }
  });
  pauseButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.pauseVideo();
    } else {
      videoPlayer.pause();
    }
    playButton.classList.toggle('hidden');
    pauseButton.classList.toggle('hidden');
  });
  pauseButton.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      pauseButton.click();
    }
  });
  muteButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.mute();
    } else {
      videoPlayer.setMuted(1);
    }
    muteButton.classList.toggle('hidden');
    unmuteButton.classList.toggle('hidden');
  });
  muteButton.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      muteButton.click();
    }
  });
  unmuteButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.unMute();
    } else {
      videoPlayer.setMuted(0);
    }
    muteButton.classList.toggle('hidden');
    unmuteButton.classList.toggle('hidden');
  });
  unmuteButton.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      unmuteButton.click();
    }
  });
  if (window.innerWidth < 820) {
    parentElement
      .querySelector('.autoplay-hero-video__gradient')
      .addEventListener('click', () => {
        if (
          window
            .getComputedStyle(parentElement.querySelector('.control-overlay'))
            .getPropertyValue('opacity') === '1'
        ) {
          // eslint-disable-next-line no-param-reassign
          parentElement.querySelector('.control-overlay').style.opacity = '0';
          // eslint-disable-next-line no-param-reassign
          parentElement.querySelector(
            '.autoplay-hero-video__gradient'
          ).style.opacity = '0';
        } else {
          // eslint-disable-next-line no-param-reassign
          parentElement.querySelector('.control-overlay').style.opacity = '1';
          // eslint-disable-next-line no-param-reassign
          parentElement.querySelector(
            '.autoplay-hero-video__gradient'
          ).style.opacity = '1';
        }
      });
  }
  window.addEventListener('resize', () => resizeVideo());
};