Dynamic Video Dialog

import Player from '@vimeo/player';
import { Dialog } from '../lightbox-overlay/lightbox-overlay';

const DIALOG_ID = 'generated-vimeo-video-dialog';

const generateVimeoLightBox = ({ videoId, labelId, posterImage }) => {
  return `
  <div role="dialog" id="${DIALOG_ID}" aria-labell, edby="${labelId}" aria-modal="true" class="lightbox-overlay">
    <div class="video" data-behavior="lightbox-video" data-video-id="${videoId}" id="lightbox-video-container">
      <button class="lightbox-overlay__close" id="close">
        <div class="visually-hidden">Close dialog</div>
      </button>      
      <div class="video__player-wrap">
        <div id="lightbox-vimeo-player" class="vimeo-video-player"></div>
        <img src="${posterImage}" />
      </div>
    </div>
  </div>`;
};

const removeLightBox = () => {
  if (document.getElementById(DIALOG_ID)) {
    document.getElementById(DIALOG_ID).parentElement.remove();
  }
};

export default parentElement => {
  const { videoId, posterImage } = parentElement.dataset;

  // Accessibility click event trigger
  parentElement.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      parentElement.click();
    }
  });
  // eslint-disable-next-line func-names

  parentElement.addEventListener('click', function(event) {
    event.preventDefault();
    // Create the lightbox

    const lightboxContainer = document.createElement('div');

    if (document.getElementById(DIALOG_ID)) {
      return;
    }

    lightboxContainer.innerHTML = generateVimeoLightBox({
      videoId,
      labelId: parentElement.id,
      posterImage,
    });
    document.body.appendChild(lightboxContainer);

    // eslint-disable-next-line no-new
    new Dialog({
      dialogId: DIALOG_ID,
      focusAfterClosed: this,
      focusFirst: 'close',
      closeCallBack: () => removeLightBox(),
    });

    const player = new Player('lightbox-vimeo-player', {
      id: videoId,
      autoplay: 1,
      title: 0,
      sidedock: 0,
      quality: 'auto',
      width: '100%',
      height: '100%',
    });

    player
      .play()
      .then(() => {
        lightboxContainer.classList.add('vimeo-player-loaded');
        // The video is loadded
        console.log('Video is loaded');
      })
      .catch(error => {
        // eslint-disable-next-line no-param-reassign
        console.log(`error->${error}<--`);
        console.log(typeof error.toString());

        if (
          error.toString().indexOf('is not a valid video id.') !== -1 ||
          error.toString().indexOf('is not embeddable') !== -1
        ) {
          lightboxContainer.querySelector(
            '.video__player-wrap img'
          ).style.display = 'block';
          // eslint-disable-next-line no-param-reassign
          lightboxContainer.querySelector('.vimeo-video-player').style.display =
            'none';
          console.log('inside if');
        } else {
          lightboxContainer.classList.add('vimeo-player-loaded');
          const playInterval = setInterval(() => {
            if (player) {
              player.play();
              clearInterval(playInterval);
            }
          }, 100);

          console.log('inside else');
        }
      });
  });
};