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">
        <span class="visually-hidden">Close dialog</span>
      </button>      
      <div class="video__player-wrap">
        <div id="lightbox-vimeo-player" class="vimeo-video-player"></div>
        <img src="${posterImage}" />
      </div>
    </div>
  </div>`;
};

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

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

  // eslint-disable-next-line func-names
  parentElement.addEventListener('click', function() {
    // Create the lightbox
    const lightboxContainer = document.createElement('div');

    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
      })
      .catch(() => {
        // console.log(error.name);
        // eslint-disable-next-line no-param-reassign
        lightboxContainer.querySelector(
          '.video__player-wrap img'
        ).style.display = 'block';
        // eslint-disable-next-line no-param-reassign
        lightboxContainer.querySelector('.vimeo-video-player').style.display =
          'none';
      });
  });
};