Get Started Video

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

export default parentElement => {
  const { videoId, videoType } = parentElement.dataset;
  const videoPlayerId = parentElement
    .querySelector('.get-start-video')
    .getAttribute('id');
  const videoControls = parentElement.querySelector(
    '.get-started-video__control-overlay'
  );
  const playVideoCta = document.querySelector('.play-video');
  const closeVideo = parentElement.querySelector('.close-video');
  const playButton = parentElement.querySelector('.play-pause-controls__play');
  const pauseButton = parentElement.querySelector(
    '.play-pause-controls__pause'
  );
  const fullscreenVideo = parentElement.querySelector('.full-screen');

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

  if (!videoId) {
    return;
  }

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

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

  const onPlayerReady = () => {
    // To capture error on video
    if (videoType === 'youtube') {
      videoPlayer.pauseVideo();
      videoPlayer.mute();
    } else {
      videoPlayer.pause();
      videoPlayer.setMuted(1);
    }
    parentElement.classList.add('video-player-loaded');
  };

  if (playVideoCta) {
    playVideoCta.addEventListener('click', () => {
      if (videoType === 'youtube') {
        videoPlayer.playVideo();
        videoPlayer.unMute();
      } else {
        videoPlayer.play();
        videoPlayer.setMuted(0);
      }
    });
  }

  closeVideo.addEventListener('click', e => {
    e.preventDefault();

    if (videoType === 'youtube') {
      videoPlayer.pauseVideo();
      videoPlayer.mute();
    } else {
      videoPlayer.pause();
      videoPlayer.setMuted(1);
    }
  });

  const initVideo = () => {
    videoPlayer = new window.YT.Player(videoPlayerId, {
      height: '100%',
      width: '100%',
      videoId,
      playerVars: {
        playsinline: 1,
        controls: 0,
      },
      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,
      muted: 1,
      title: 0,
      sidedock: 0,
      controls: 0,
      quality: 'auto',
      width: '100%',
      height: '100%',
    });

    videoPlayer
      .play()
      .then(() => {
        parentElement.classList.add('video-player-loaded');
      })
      .catch(error => {
        // eslint-disable-next-line no-console
        console.log(error);
      });

    videoPlayer.on('loaded', () => {
      // eslint-disable-next-line no-console
      console.log('vimeo loaded');
      parentElement.classList.add('video-player-loaded');
    });
  }

  parentElement.addEventListener('mouseover', () => {
    videoControls.style.opacity = '1';
  });

  parentElement.addEventListener('mouseleave', () => {
    videoControls.style.opacity = '0';
  });

  playButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.playVideo();
    } else {
      videoPlayer.play();
    }
    playButton.classList.toggle('hidden');
    pauseButton.classList.toggle('hidden');
  });

  pauseButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.pauseVideo();
    } else {
      videoPlayer.pause();
    }
    playButton.classList.toggle('hidden');
    pauseButton.classList.toggle('hidden');
  });

  fullscreenVideo.addEventListener('click', e => {
    e.preventDefault();

    const videoIframe = parentElement.querySelector(
      '.get-started-video iframe'
    );

    if (videoIframe.requestFullscreen) {
      videoIframe.requestFullscreen();
    } else if (videoIframe.webkitRequestFullscreen) {
      videoIframe.webkitRequestFullscreen();
    } else if (videoIframe.msRequestFullscreen) {
      videoIframe.msRequestFullscreen();
    }
  });
};