{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/components/VideoFigure.js","webpack://@verndale/toolkit/./node_modules/youtube-iframe/index.js"],"names":[],"mappings":"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","file":"scripts/9723.b6da29ebdc02106d5db2.js","sourcesContent":["import { Component } from '@verndale/core';\nimport YouTubeIframeLoader from 'youtube-iframe';\n\nclass VideoFigure extends Component {\n  setupDefaults() {\n    this.dom = {\n      videoTrigger: this.el.querySelector('.figure__media-button'),\n      localVideo: this.el.querySelector('video'),\n      captionOverlay: this.el.querySelector('.figure__caption--overlay'),\n      buttonSvg: this.el.querySelectorAll('.figure__media-button svg'),\n      youtubeImg: this.el.querySelector('.figure__media-youtube-img'),\n      iframe: this.el.querySelector('.iframe')\n    };\n\n    this.isBicentennial = this.el.closest('.bicentennial-full-width-row');\n\n    this.homeMasthead = this.el.classList.contains(\n      'home-simple-masthead__video'\n    );\n    this.src = this.el.dataset.url;\n    this.pauseLabel = this.el.dataset.pauseLabel;\n    this.playLabel = this.el.dataset.playLabel;\n    this.autoplay = this.el.dataset.autoplay;\n    this.hidePlayButton = this.el.dataset.hidePlayButton;\n    this.muted = this.el.dataset.muted;\n    this.playing = false;\n    this.loop = this.el.dataset.loop;\n\n    if (this.dom.iframe) {\n      YouTubeIframeLoader.load(this.handleIframeLoader.bind(this));\n    }\n\n    if (this.dom.localVideo && this.autoplay) {\n      this.dom.localVideo.muted = true;\n      this.handleVideoClick();\n    }\n\n    this.lastEvent = false;\n  }\n\n  addListeners() {\n    this.dom.videoTrigger?.addEventListener(\n      'click',\n      this.handleVideoClick.bind(this)\n    );\n\n    if (this.dom.localVideo) {\n      this.dom.localVideo.addEventListener(\n        'play',\n        this.handleVideoPlay.bind(this)\n      );\n      this.dom.localVideo.addEventListener(\n        'pause',\n        this.handleVideoPause.bind(this)\n      );\n      this.dom.localVideo.addEventListener(\n        'ended',\n        this.handleVideoEnd.bind(this)\n      );\n    }\n\n    if (this.isBicentennial) {\n      this.dom.youtubeImg?.addEventListener(\n        'click',\n        this.handleVideoClick.bind(this)\n      );\n    }\n  }\n\n  async handleVideoClick() {\n    if (this.dom.localVideo) {\n      if (this.dom.localVideo.paused) {\n        this.dom.localVideo.play();\n      } else {\n        this.dom.localVideo.pause();\n      }\n    }\n\n    if (this.dom.iframe) {\n      if (!this.playing) {\n        this.player.playVideo();\n        this.handleVideoPlay();\n        this.playing = true;\n      } else {\n        this.player.pauseVideo();\n        this.handleVideoPause();\n        this.playing = false;\n      }\n    }\n  }\n\n  handleIframeLoader(YT) {\n    const defaults = {\n      modestbranding: 1,\n      rel: 0,\n      showinfo: 0,\n      autohide: 0,\n      playsinline: 1,\n      controls: 2,\n      cc_load_policy: 1\n    };\n\n    const autoplayConfig = {\n      autoplay: 1,\n      mute: 1\n    };\n\n    this.config = {\n      ...defaults\n    };\n\n    if (this.muted) {\n      this.config = {\n        ...defaults,\n        mute: 1\n      };\n    }\n\n    if (this.autoplay) {\n      this.config = {\n        ...defaults,\n        ...autoplayConfig\n      };\n    }\n\n    if (this.homeMasthead) {\n      this.config = {\n        ...defaults,\n        controls: 0\n      };\n\n      if (this.autoplay) {\n        this.config = {\n          ...defaults,\n          ...autoplayConfig,\n          controls: 0\n        };\n      }\n    }\n\n    this.config = {\n      ...this.config,\n      loop: this.loop,\n      playlist: [this.src]\n    };\n\n    this.player = new YT.Player(this.dom.iframe, {\n      height: '390',\n      width: '640',\n      videoId: this.src,\n      playerVars: this.config,\n      events: {\n        onStateChange: this.handleStateChange.bind(this)\n      }\n    });\n\n    if (this.autoplay) {\n      this.handleVideoPlay();\n    }\n  }\n\n  handleStateChange(event) {\n    this.lastEvent = event.data;\n    if (event.data === 1) {\n      this.handleVideoPlay();\n      this.player.playVideo();\n    }\n\n    if (event.data === 2) {\n      setTimeout(() => this.handleVideoPause(), 250);\n    }\n\n    if (this.homeMasthead) {\n      if (event.data === 0) {\n        this.player.playVideo();\n      }\n    }\n  }\n\n  handleVideoPlay() {\n    this.el.classList.add('figure-video--playing');\n    if (this.dom.localVideo) {\n      if (!this.homeMasthead) {\n        this.dom.localVideo.setAttribute('controls', 'controls');\n        this.dom.localVideo.setAttribute('tabindex', '0');\n        this.dom.videoTrigger.setAttribute('tabindex', '-1');\n        this.dom.localVideo.focus();\n      } else {\n        this.dom.buttonSvg[0]?.classList.add(\n          'figure__media-button-svg--hidden'\n        );\n        this.dom.buttonSvg[1]?.classList.remove(\n          'figure__media-button-svg--hidden'\n        );\n      }\n    }\n\n    if (this.dom.iframe) {\n      if (this.dom.youtubeImg?.style) {\n        this.dom.youtubeImg.style = 'display:none';\n      }\n      this.dom.videoTrigger?.setAttribute('aria-label', this.pauseLabel);\n      this.dom.buttonSvg[0]?.classList.add('figure__media-button-svg--hidden');\n      this.dom.buttonSvg[1]?.classList.remove(\n        'figure__media-button-svg--hidden'\n      );\n    }\n  }\n\n  handleVideoPause() {\n    if (this.lastEvent === 2 && !this.hidePlayButton) {\n      this.el.classList.remove('figure-video--playing');\n      if (this.dom.localVideo) {\n        if (!this.homeMasthead) {\n          this.dom.localVideo.removeAttribute('controls');\n          this.dom.localVideo.setAttribute('tabindex', '-1');\n          this.dom.videoTrigger.setAttribute('tabindex', '0');\n        } else {\n          this.dom.buttonSvg[0]?.classList.remove(\n            'figure__media-button-svg--hidden'\n          );\n          this.dom.buttonSvg[1]?.classList.add(\n            'figure__media-button-svg--hidden'\n          );\n        }\n      }\n\n      if (this.dom.iframe) {\n        if (this.dom.youtubeImg?.style) {\n          this.dom.youtubeImg.style = 'display:block';\n        }\n        this.dom.videoTrigger.setAttribute('aria-label', this.playLabel);\n        this.dom.buttonSvg[0]?.classList.remove(\n          'figure__media-button-svg--hidden'\n        );\n        this.dom.buttonSvg[1]?.classList.add(\n          'figure__media-button-svg--hidden'\n        );\n      }\n\n      this.playing = false;\n    }\n  }\n\n  handleVideoEnd() {\n    this.el.classList.remove('figure-video--playing');\n\n    if (this.dom.localVideo) {\n      this.dom.localVideo.currentTime = 0;\n      this.dom.localVideo.load();\n      this.dom.localVideo.removeAttribute('controls');\n    }\n  }\n}\n\nexport default VideoFigure;\n","(function(window) {\n\tvar YouTubeIframeLoader = {\n\t\tsrc: 'https://www.youtube.com/iframe_api',\n\t\tloading: false,\n\t\tloaded: false,\n\t\tlisteners: [],\n\n\t\tload: function(callback) {\n\t\t\tvar _this = this;\n\t\t\tthis.listeners.push(callback);\n\n\t\t\tif(this.loaded) {\n\t\t\t\tsetTimeout(function() {\n\t\t\t\t\t_this.done();\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif(this.loading) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.loading = true;\n\n\t\t\twindow.onYouTubeIframeAPIReady = function() {\n\t\t\t\t_this.loaded = true;\n\t\t\t\t_this.done();\n\t\t\t};\n\n\t\t\tvar script = document.createElement('script');\n\t\t\tscript.type = 'text/javascript';\n\t\t\tscript.src = this.src;\n\t\t\tdocument.body.appendChild(script);\n\t\t},\n\n\t\tdone: function() {\n\t\t\tdelete window.onYouTubeIframeAPIReady;\n\n\t\t\twhile(this.listeners.length) {\n\t\t\t\tthis.listeners.pop()(window.YT);\n\t\t\t}\n\t\t}\n\t};\n\n\tif(typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = YouTubeIframeLoader;\n\t} else {\n\t\twindow.YouTubeIframeLoader = YouTubeIframeLoader;\n\t}\n}(window));\n"],"sourceRoot":""}