{"version":3,"sources":["webpack:///./src/js/modules/defaultVideo.js"],"names":["DefaultVideo","this","videoId","el","dataset","videoProvider","toLowerCase","isVideoPlaying","dom","iframeContainer","querySelector","videoProgressBar","videoStatusToggle","videoStatusLabel","videoPauseIcon","videoPlayIcon","videoVolumeButton","videoVolumeControl","videoVolumeInput","setupVideo","setVolume","value","addEventListener","onVideoStatusClick","bind","onVideoVolumeToggle","onVideoVolumeChange","iframe","removeAttribute","setupVimeoPlayer","setupYouTubePlayer","vimeoPlayer","Player","id","controls","loop","title","volume","ready","then","addListeners","catch","error","console","handleVideoError","on","cleanIframeAttributes","getDuration","duration","setInterval","getCurrentTime","currentTime","style","width","volumenControls","display","backgroundImage","iframeElement","document","createElement","append","youTubePlayer","YouTubePlayer","playerVars","autohide","showinfo","modestbranding","disablekb","playlist","fs","event","pause","pauseVideo","play","classList","add","playVideo","updateVideoStatusLabel","dataAttr","innerText","updateActiveIcon","status","remove","e","target","currentTarget","parentNode","contains","setTimeout","background","Component"],"mappings":"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","file":"57.9d692612b8d486efc629.js","sourcesContent":["import { Component } from '@verndale/core';\nimport Player from '@vimeo/player';\nimport YouTubePlayer from 'youtube-player';\n\nclass DefaultVideo extends Component {\n  setupDefaults() {\n    this.videoId = this.el.dataset.videoId;\n    this.videoProvider = `${this.el.dataset.videoProvider}`.toLowerCase();\n    this.isVideoPlaying = false;\n    this.dom = {\n      iframeContainer: this.el.querySelector(\n        '.default-video__iframe-container'\n      ),\n      videoProgressBar: this.el.querySelector('.default-video__progress-bar'),\n      videoStatusToggle: this.el.querySelector(\n        '.default-video__playback-control'\n      ),\n      videoStatusLabel: this.el.querySelector(\n        '.default-video__playback-status-label'\n      ),\n      videoPauseIcon: this.el.querySelector(\n        '.default-video__playback-status-icon .status-icon__pause'\n      ),\n      videoPlayIcon: this.el.querySelector(\n        '.default-video__playback-status-icon .status-icon__play'\n      ),\n      videoVolumeButton: this.el.querySelector(\n        '.default-video__volume-button button'\n      ),\n      videoVolumeControl: this.el.querySelector(\n        '.default-video__volume-control'\n      ),\n      videoVolumeInput: this.el.querySelector(\n        '.default-video__volume-control input'\n      )\n    };\n    this.setupVideo();\n    this.setVolume(this.dom.videoVolumeInput.value);\n  }\n\n  addListeners() {\n    this.dom.videoStatusToggle.addEventListener(\n      'click',\n      this.onVideoStatusClick.bind(this)\n    );\n\n    this.dom.videoVolumeButton.addEventListener(\n      'click',\n      this.onVideoVolumeToggle.bind(this)\n    );\n\n    this.dom.videoVolumeControl.addEventListener(\n      'input',\n      this.onVideoVolumeChange.bind(this)\n    );\n  }\n\n  cleanIframeAttributes() {\n    const iframe = this.dom.iframeContainer.querySelector('iframe');\n    iframe.removeAttribute('width');\n    iframe.removeAttribute('height');\n    iframe.removeAttribute('frameborder');\n  }\n\n  setupVideo() {\n    if (this.videoProvider === 'vimeo') return this.setupVimeoPlayer();\n    if (this.videoProvider === 'youtube') return this.setupYouTubePlayer();\n  }\n\n  async setupVimeoPlayer() {\n    // If theres no videoId return\n    if (!this.videoId) return;\n    // Create new vimeo player\n    try {\n      this.vimeoPlayer = new Player(this.dom.iframeContainer, {\n        id: this.videoId,\n        controls: false,\n        loop: true,\n        title: 0,\n        volume: 1\n      });\n\n      // Add event listeners only if player initializes successfully\n      this.vimeoPlayer.ready().then(() => {\n        this.addListeners();\n      }).catch(error => {\n        console.error('Vimeo Player ready error:', error);\n        this.handleVideoError();\n      });\n\n    } catch (error) {\n      console.error('Vimeo Player initialization error:', error);\n      this.handleVideoError();\n    }\n\n    this.vimeoPlayer.on('play', () => this.cleanIframeAttributes());\n    const duration = await this.vimeoPlayer.getDuration();\n    // Update video progress bar\n    setInterval(async () => {\n      const currentTime = await this.vimeoPlayer.getCurrentTime();\n      this.dom.videoProgressBar.style.width = `${\n        (currentTime * 100) / duration\n      }%`;\n    }, 300);\n  }\n\n  handleVideoError() {\n    const volumenControls = this.el.querySelector('.default-video__volume');\n    if (this.dom.videoStatusToggle) {\n      this.dom.videoStatusToggle.style.display = 'none';\n    }\n    if (volumenControls) {\n      volumenControls.style.display = 'none';\n    }\n  }\n\n  async setupYouTubePlayer() {\n    // Set the image background\n    this.dom.iframeContainer.style.backgroundImage = `url(https://img.youtube.com/vi/${this.videoId}/maxresdefault.jpg)`;\n\n    const iframeElement = document.createElement('div');\n    this.dom.iframeContainer.append(iframeElement);\n    this.youTubePlayer = YouTubePlayer(iframeElement, {\n      videoId: this.videoId,\n      playerVars: {\n        autohide: 1,\n        showinfo: 0,\n        controls: 0,\n        modestbranding: 1,\n        disablekb: 1,\n        loop: 1,\n        playlist: this.videoId,\n        fs: 0\n      }\n    });\n    this.youTubePlayer.on('ready', event => this.cleanIframeAttributes());\n    const duration = await this.youTubePlayer.getDuration();\n    setInterval(async () => {\n      const currentTime = await this.youTubePlayer.getCurrentTime();\n      this.dom.videoProgressBar.style.width = `${\n        (currentTime * 100) / duration\n      }%`;\n    }, 300);\n  }\n\n  pauseVideo() {\n    if (this.videoProvider === 'vimeo') return this.vimeoPlayer.pause();\n    if (this.videoProvider === 'youtube')\n      return this.youTubePlayer.pauseVideo();\n  }\n\n  playVideo() {\n    if (this.videoProvider === 'vimeo') return this.vimeoPlayer.play();\n    if (this.videoProvider === 'youtube') {\n      this.dom.iframeContainer.classList.add(\n        'default-video__iframe-container--ready'\n      );\n      return this.youTubePlayer.playVideo();\n    }\n  }\n\n  onVideoStatusClick() {\n    // Update label of the video control (ie: play/pause)\n    const updateVideoStatusLabel = dataAttr => {\n      this.dom.videoStatusLabel.innerText = this.dom.videoStatusToggle.dataset[\n        dataAttr\n      ];\n    };\n    // Update active svg icon\n    const updateActiveIcon = status => {\n      if (status === 'play') {\n        this.dom.videoPlayIcon.classList.add('active');\n        this.dom.videoPauseIcon.classList.remove('active');\n      } else if (status === 'pause') {\n        this.dom.videoPlayIcon.classList.remove('active');\n        this.dom.videoPauseIcon.classList.add('active');\n      }\n    };\n    // Handle pause video\n    if (this.isVideoPlaying) {\n      this.pauseVideo();\n      this.isVideoPlaying = false;\n      updateVideoStatusLabel('playLabel');\n      updateActiveIcon('play');\n      // Handle play video\n    } else {\n      this.playVideo();\n      this.isVideoPlaying = true;\n      updateVideoStatusLabel('pauseLabel');\n      updateActiveIcon('pause');\n    }\n  }\n\n  onVideoVolumeToggle(e) {\n    const { currentTarget } = e;\n    const target = currentTarget.parentNode;\n\n    if (target.classList.contains('default-video__volume-button--open')) {\n      target.classList.remove('default-video__volume-button--open');\n\n      setTimeout(() => {\n        target.classList.remove('default-video__volume-button--animate');\n      }, 300);\n    } else {\n      target.classList.add('default-video__volume-button--open');\n      target.classList.add('default-video__volume-button--animate');\n    }\n  }\n\n  onVideoVolumeChange(e) {\n    const { value } = e.target;\n    this.setVolume(value);\n  }\n\n  setVolume(volume) {\n    this.dom.videoVolumeInput.style.background = `linear-gradient(to right, #f7f9fb 0%, #f7f9fb ${volume}%, #707278 ${volume}%, #707278 100%)`;\n\n    if (this.videoProvider === 'vimeo') {\n      this.vimeoPlayer.setVolume(volume / 100);\n    }\n    if (this.videoProvider === 'youtube') {\n      this.youTubePlayer.setVolume(volume);\n    }\n  }\n}\n\nexport default DefaultVideo;\n"],"sourceRoot":""}