{"version":3,"sources":["webpack:///./src/js/modules/video-modal.js"],"names":["Module","Component","setupDefaults","this","videoId","el","dataset","service","videoService","accountId","window","ue","brightcoveAccountId","ignoreUtilFocusChanges","lastFocus","handleVideoModalClose","bind","handleEscape","handleFocus","dom","$body","document","_$","$link","addListeners","_on","handleVideoModalOpen","handleModalOpenKeyboard","removeListeners","$videoModal","removeEventListener","buildHtml","iframeUrl","createElement","classList","add","setAttribute","privateArray","split","length","innerHTML","$videoWrapper","querySelector","appendChild","focusFirstDescendant","script","e","key","which","keyCode","preventDefault","target","contains","remove","removeChild","focus","stopPropagation","activeElement","focusLastDescendant","element","i","childNodes","child","attemptFocus","isFocusable"],"mappings":"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","file":"89.5d22f3.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { isFocusable } from '../helpers';\n\nclass Module extends Component {\n  setupDefaults() {\n    this.videoId = this.el.dataset.videoId;\n    this.service = this.el.dataset.videoService;\n    this.accountId = window?.ue?.brightcoveAccountId;\n    this.ignoreUtilFocusChanges = false;\n    this.lastFocus = null;\n\n    this.handleVideoModalClose = this.handleVideoModalClose.bind(this);\n    this.handleEscape = this.handleEscape.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n\n    this.dom = {\n      $body: document._$('body'),\n      $link: this.el._$('.video-modal__trigger')\n    };\n  }\n\n  addListeners() {\n    this.el._on('click', this.handleVideoModalOpen.bind(this));\n    this.dom.$link._on('keypress', this.handleModalOpenKeyboard.bind(this));\n  }\n\n  removeListeners() {\n    this.dom.$videoModal.removeEventListener(\n      'click',\n      this.handleVideoModalClose\n    );\n    document.removeEventListener('keyup', this.handleEscape);\n    document.removeEventListener('focus', this.handleFocus, true);\n  }\n\n  buildHtml() {\n    let iframeUrl = `https://player.vimeo.com/video/${this.videoId}?autoplay=1`;\n\n    this.dom.$videoModal = document.createElement('div');\n    this.dom.$videoModal.classList.add('video-modal');\n    this.dom.$videoModal.setAttribute('role', 'dialog');\n    this.dom.$videoModal.setAttribute('aria-modal', 'true');\n\n    const privateArray = this.videoId?.split('/');\n\n    if (privateArray && privateArray.length > 1) {\n      iframeUrl = `https://player.vimeo.com/video/${privateArray[0]}?h=${privateArray[1]}&autoplay=1`;\n    }\n\n    if (this.service === 'vimeo') {\n      this.dom.$videoModal.innerHTML = `\n        <div class=\"video-modal__inner\">\n          <div class=\"video-modal__inner-height\">\n            <div class=\"video-modal__video-wrapper\">\n            <iframe\n              src=\"${iframeUrl}\"\n              width=\"100%\"\n              height=\"100%\"\n              frameborder=\"0\"\n              allow=\"fullscreen\"\n              webkitallowfullscreen\n              mozallowfullscreen\n              allowfullscreen>\n            </iframe>\n            </div>\n          </div>\n        </div>\n        <button aria-label=\"close button\" class=\"video-modal__close-btn\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 10 10\">\n            <use xlink:href=\"#close\" />\n          </svg>\n        <button>\n      `;\n    } else if (this.service === 'brightcove') {\n      this.dom.$videoModal.innerHTML = `\n        <div class=\"video-modal__inner\">\n          <div class=\"video-modal__inner-height\">\n            <div class=\"video-modal__video-wrapper\">\n              <video data-video-id=\"${this.videoId}\"\n                data-account=\"${this.accountId}\"\n                data-player=\"default\"\n                data-embed=\"default\"\n                data-application-id\n                autoplay\n                class=\"video-js\"\n                controls></video>\n            </div>\n          </div>\n        </div>\n        <button aria-label=\"close button\" class=\"video-modal__close-btn\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 10 10\">\n            <use xlink:href=\"#close\" />\n          </svg>\n        <button>\n      `;\n    }\n\n    this.dom.$videoWrapper = this.dom.$videoModal.querySelector(\n      '.video-modal__video-wrapper'\n    );\n    this.dom.$videoModal._on('click', this.handleVideoModalClose);\n    document._on('keyup', this.handleEscape);\n    document._on('focus', this.handleFocus, true);\n  }\n\n  handleVideoModalOpen() {\n    this.buildHtml();\n\n    this.dom.$body.classList.add('has-modal');\n    this.dom.$body.appendChild(this.dom.$videoModal);\n    this.focusFirstDescendant(this.dom.$videoModal);\n\n    if (this.videoId && this.accountId) {\n      const script = document.createElement('script');\n      script.setAttribute(\n        'src',\n        `//players.brightcove.net/${this.accountId}/default_default/index.min.js`\n      );\n      script.setAttribute('type', 'text/javascript');\n      this.dom.$videoModal.appendChild(script);\n    }\n  }\n\n  handleModalOpenKeyboard(e) {\n    const key = e.which || e.keyCode;\n\n    if (key === 13 || key === 32) {\n      e.preventDefault();\n      this.handleVideoModalOpen();\n    }\n  }\n\n  handleVideoModalClose(e) {\n    if (\n      e.target === this.dom.$videoWrapper ||\n      this.dom.$videoWrapper.contains(e.target)\n    ) {\n      return;\n    }\n    this.removeListeners();\n\n    this.dom.$body.classList.remove('has-modal');\n    this.dom.$body.removeChild(this.dom.$videoModal);\n    this.dom.$link.focus();\n  }\n\n  handleEscape(e) {\n    const key = e.which || e.keyCode;\n\n    if (key === 27) {\n      e.stopPropagation();\n      this.removeListeners();\n      this.dom.$body.classList.remove('has-modal');\n      this.dom.$body.removeChild(this.dom.$videoModal);\n      this.el.querySelector('.video-modal__trigger').focus();\n    }\n  }\n\n  handleFocus(e) {\n    if (this.ignoreUtilFocusChanges) return;\n\n    if (this.dom.$videoModal.contains(e.target)) {\n      this.lastFocus = e.target;\n    } else {\n      this.focusFirstDescendant(this.dom.$videoModal);\n\n      if (this.lastFocus === document.activeElement) {\n        this.focusLastDescendant(this.dom.$videoModal);\n      }\n      this.lastFocus = document.activeElement;\n    }\n  }\n\n  focusFirstDescendant(element) {\n    for(let i = 0; i < element.childNodes.length; i++) {\n      const child = element.childNodes[i];\n      if (this.attemptFocus(child) || this.focusFirstDescendant(child)) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  focusLastDescendant(element) {\n    for(let i = element.childNodes.length - 1; i >= 0; i--) {\n      const child = element.childNodes[i];\n      if (this.attemptFocus(child) || this.focusLastDescendant(child)) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  attemptFocus(element) {\n    if (\n      !isFocusable(element) ||\n      element.classList.contains('video-modal__close-btn')\n    ) {\n      return false;\n    }\n\n    this.ignoreUtilFocusChanges = true;\n    try {\n      element.focus();\n    } catch (e) {\n      return;\n    }\n    this.ignoreUtilFocusChanges = false;\n    return document.activeElement === element;\n  }\n}\n\nexport default Module;\n"],"sourceRoot":""}