{"version":3,"sources":["webpack:///./src/js/components/full-width-media.js"],"names":["FullWidthMedia","_Component","_classCallCheck","_callSuper","arguments","_inherits","key","value","this","dom","$image","el","_$","$overlay","$wrapper","playButtonLabel","dataset","videoTitle","videoId","containerId","concat","nanoid","addVideoPlayer","_on","handleClick","bind","e","$button","target","closest","removeOverlay","removeImage","hideGradient","_this$dom","youtubeVideo","$iframe","removeAttribute","isIE","src","play","focus","parentNode","removeChild","_this","_this$dom2","insertAdjacentHTML","getIframe","getPlayButton","createVideoPlayer","then","module","YTPlayer","default","element","related","modestBranding","host","load","window","YT","onYouTubeIframeAPIReady","Component"],"mappings":"qsDAGyC,IAEnCA,EAAc,SAAAC,GAAA,SAAAD,IAAA,OAAAE,EAAA,KAAAF,GAAAG,EAAA,KAAAH,EAAAI,WAAA,O,qRAAAC,CAAAL,EAAAC,G,EAAAD,G,EAAA,EAAAM,IAAA,gBAAAC,MAClB,WACEC,KAAKC,IAAM,CACTC,OAAQF,KAAKG,GAAGC,GAAG,+BACnBC,SAAUL,KAAKG,GAAGC,GAAG,8BACrBE,SAAUN,KAAKG,GAAGC,GAAG,+BAGvBJ,KAAKO,gBAAkBP,KAAKG,GAAGK,QAAQD,gBACvCP,KAAKS,WAAaT,KAAKG,GAAGK,QAAQC,WAClCT,KAAKU,QAAUV,KAAKG,GAAGK,QAAQE,QAC/BV,KAAKW,YAAc,SAAHC,OAAYC,eAC5Bb,KAAKc,mBACN,CAAAhB,IAAA,eAAAC,MAED,WACuBC,KAAKC,IAAlBI,SAECU,IAAI,QAAWf,KAAKgB,YAAWC,KAAhBjB,SACzB,CAAAF,IAAA,cAAAC,MAED,SAAYmB,GACV,IAAMC,EAAUD,EAAEE,OAAOC,QAAQ,kCAE7BF,IACFnB,KAAKsB,cAAcH,GACnBnB,KAAKuB,cACLvB,KAAKG,GAAGK,QAAQgB,aAAe,UAElC,CAAA1B,IAAA,gBAAAC,MAED,SAAcoB,GACZ,GAAIA,EAAS,CACX,IAAAM,EAA6CzB,KAAKC,IAA1CI,EAAQoB,EAARpB,SAAUqB,EAAYD,EAAZC,aACZC,EADkCF,EAARnB,SACPF,GAAG,UAC5BuB,EAAQC,gBAAgB,YAEpBC,IACFF,EAAQG,IAAM,GAAHlB,OAAMe,EAAQG,IAAG,qBAE5BJ,WAAcK,OAGhBJ,EAAQK,QACR3B,EAAS4B,WAAWC,YAAY7B,MAEnC,CAAAP,IAAA,cAAAC,MAED,WACE,IAAQG,EAAWF,KAAKC,IAAhBC,OAEJA,GACFA,EAAO+B,WAAWC,YAAYhC,KAEjC,CAAAJ,IAAA,iBAAAC,MAED,WAAiB,IAAAoC,EAAA,KACfC,EAA+BpC,KAAKC,IAA5BK,EAAQ8B,EAAR9B,SAAUD,EAAQ+B,EAAR/B,SAIlB,GAFAC,EAAS+B,mBAAmB,aAAcrC,KAAKsC,aAE3CT,IACF,OAAOxB,EAASgC,mBAAmB,aAAcrC,KAAKuC,iBAExD,IAAMC,EAAoB,WACxB,kCAAoBC,MAAK,SAACC,GACxB,IAAMC,EAAWD,EAAOE,QAClBC,EAAUV,EAAKhC,GAAGC,GAAG,IAADQ,OAAKuB,EAAKxB,cAEpCwB,EAAKlC,IAAIyB,aAAe,IAAIiB,EAASE,EAAS,CAC5CC,SAAS,EACTC,gBAAgB,EAChBC,KAAM,kBAERb,EAAKlC,IAAIyB,aAAauB,KAAKd,EAAKzB,SAChCL,EAASgC,mBAAmB,aAAcF,EAAKI,qBAInD,GAAIW,OAAOC,GAAI,OAAOX,IACtBU,OAAOE,wBAA0BZ,IAClC,CAAA1C,IAAA,YAAAC,MAED,WACE,OAAO8B,IAAI,0IAAAjB,OAKgCZ,KAAKU,QAAO,qSAAAE,OAMxCZ,KAAKS,WAAU,4IAAAG,OAOZZ,KAAKW,YAAW,gDAGnC,CAAAb,IAAA,gBAAAC,MAED,WACE,MAAO,qEAAPa,OAC8DZ,KAAKO,gBAAe,kI,0FA7GlE,CAAS8C,aAsHd7D","file":"56.0c7174.js","sourcesContent":["import { Component } from '@verndale/core';\r\nimport { nanoid } from 'nanoid';\r\n\r\nimport { isIE } from '../utils/browsers';\r\n\r\nclass FullWidthMedia extends Component {\r\n  setupDefaults() {\r\n    this.dom = {\r\n      $image: this.el._$('img.full-width-media__media'),\r\n      $overlay: this.el._$('.full-width-media__overlay'),\r\n      $wrapper: this.el._$('.full-width-media__wrapper')\r\n    };\r\n\r\n    this.playButtonLabel = this.el.dataset.playButtonLabel;\r\n    this.videoTitle = this.el.dataset.videoTitle;\r\n    this.videoId = this.el.dataset.videoId;\r\n    this.containerId = `video-${nanoid()}`;\r\n    this.addVideoPlayer();\r\n  }\r\n\r\n  addListeners() {\r\n    const { $overlay } = this.dom;\r\n\r\n    $overlay._on('click', ::this.handleClick);\r\n  }\r\n\r\n  handleClick(e) {\r\n    const $button = e.target.closest('.full-width-media__play-button');\r\n\r\n    if ($button) {\r\n      this.removeOverlay($button);\r\n      this.removeImage();\r\n      this.el.dataset.hideGradient = 'true';\r\n    }\r\n  }\r\n\r\n  removeOverlay($button) {\r\n    if ($button) {\r\n      const { $overlay, youtubeVideo, $wrapper } = this.dom;\r\n      const $iframe = $wrapper._$('iframe');\r\n      $iframe.removeAttribute('tabindex');\r\n\r\n      if (isIE) {\r\n        $iframe.src = `${$iframe.src}?autoplay=1&rel=0`;\r\n      } else {\r\n        youtubeVideo?.play();\r\n      }\r\n\r\n      $iframe.focus();\r\n      $overlay.parentNode.removeChild($overlay);\r\n    }\r\n  }\r\n\r\n  removeImage() {\r\n    const { $image } = this.dom;\r\n\r\n    if ($image) {\r\n      $image.parentNode.removeChild($image);\r\n    }\r\n  }\r\n\r\n  addVideoPlayer() {\r\n    const { $wrapper, $overlay } = this.dom;\r\n\r\n    $wrapper.insertAdjacentHTML('afterbegin', this.getIframe());\r\n\r\n    if (isIE) {\r\n      return $overlay.insertAdjacentHTML('afterbegin', this.getPlayButton());\r\n    }\r\n    const createVideoPlayer = () => {\r\n      import('yt-player').then((module) => {\r\n        const YTPlayer = module.default;\r\n        const element = this.el._$(`.${this.containerId}`);\r\n\r\n        this.dom.youtubeVideo = new YTPlayer(element, {\r\n          related: false,\r\n          modestBranding: true,\r\n          host: '//youtube.com'\r\n        });\r\n        this.dom.youtubeVideo.load(this.videoId);\r\n        $overlay.insertAdjacentHTML('afterbegin', this.getPlayButton());\r\n      });\r\n    };\r\n\r\n    if (window.YT) return createVideoPlayer();\r\n    window.onYouTubeIframeAPIReady = createVideoPlayer;\r\n  }\r\n\r\n  getIframe() {\r\n    return isIE\r\n      ? `\r\n      <div class=\"full-width-media__media\">\r\n        <iframe\r\n          loading=\"lazy\"\r\n          src=\"https://www.youtube.com/embed/${this.videoId}\"\r\n          frameborder=\"0\"\r\n          allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\r\n          allowfullscreen=\"allowfullscreen\"\r\n          msallowfullscreen=\"msallowfullscreen\"\r\n          webkitallowfullscreen=\"webkitallowfullscreen\"\r\n          title=\"${this.videoTitle}\"\r\n          tabindex=\"-1\"\r\n        ></iframe>\r\n      </div>\r\n    `\r\n      : `\r\n      <div class=\"full-width-media__media\">\r\n        <div class=\"${this.containerId}\" tabindex=\"-1\"></div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  getPlayButton() {\r\n    return `\r\n      <button class=\"full-width-media__play-button\" aria-label=\"${this.playButtonLabel}\">\r\n        <svg aria-hidden=\"true\">\r\n          <use xlink:href=\"#play-outline\" />\r\n        </svg>\r\n      </button>\r\n    `;\r\n  }\r\n}\r\n\r\nexport default FullWidthMedia;\r\n"],"sourceRoot":""}