{"version":3,"sources":["webpack:///./src/js/modules/vimeoVideo.js"],"names":["VimeoVideo","this","videoId","el","dataset","videoProvider","toLowerCase","isVideoPlaying","dom","iframeContainer","querySelector","videoProgressBar","videoStatusToggle","videoStatusLabel","videoPauseIcon","videoPlayIcon","setupVideo","addEventListener","onVideoStatusClick","iframe","removeAttribute","setupVimeoPlayer","setupYouTubePlayer","vimeoVideoPlayer","Player","id","autoplay","background","controls","loop","title","on","cleanIframeAttributes","getDuration","duration","setInterval","getCurrentTime","currentTime","style","width","iframeElement","document","createElement","append","youTubePlayer","YouTubePlayer","playerVars","autohide","showinfo","modestbranding","disablekb","playlist","mute","fs","event","pause","pauseVideo","play","playVideo","updateVideoStatusLabel","dataAttr","innerText","updateActiveIcon","status","classList","add","remove","Component"],"mappings":"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","file":"69.199a0913657fa0e9164c.js","sourcesContent":["import { Component } from '@verndale/core';\nimport Player from '@vimeo/player';\nimport YouTubePlayer from 'youtube-player';\n\nclass VimeoVideo extends Component {\n  setupDefaults() {\n    this.videoId = this.el.dataset.videoId;\n    this.videoProvider = `${this.el.dataset.videoProvider}`.toLowerCase();\n    this.isVideoPlaying = true;\n    this.dom = {\n      iframeContainer: this.el.querySelector('.vimeo-video__iframe-container'),\n      videoProgressBar: this.el.querySelector('.vimeo-video__progress-bar'),\n      videoStatusToggle: this.el.querySelector('.vimeo-video__playback-control'),\n      videoStatusLabel: this.el.querySelector('.vimeo-video__playback-status-label'),\n      videoPauseIcon: this.el.querySelector('.vimeo-video__playback-status-icon .status-icon__pause'),\n      videoPlayIcon: this.el.querySelector('.vimeo-video__playback-status-icon .status-icon__play')\n    };\n    this.setupVideo();\n  }\n\n  addListeners() {\n    this.dom.videoStatusToggle.addEventListener('click', () => this.onVideoStatusClick())\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    this.vimeoVideoPlayer = new Player(\n      this.dom.iframeContainer,\n      {\n        id: this.videoId,\n        autoplay: true,\n        background: true,\n        controls: false,\n        loop: true,\n        title: 0\n      }\n    );\n    this.vimeoVideoPlayer.on('play', () => this.cleanIframeAttributes())\n    const duration = await this.vimeoVideoPlayer.getDuration();\n    // Update video progress bar\n    setInterval(async () => {\n      const currentTime = await this.vimeoVideoPlayer.getCurrentTime();\n      this.dom.videoProgressBar.style.width = `${currentTime * 100 / duration}%`\n    }, 300)\n  }\n\n  async setupYouTubePlayer() {\n    // Create element that will be replaced by the YouTube iframe\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        autoplay: 1,\n        showinfo: 0,\n        controls: 0,\n        modestbranding: 1,\n        disablekb: 1,\n        loop: 1,\n        playlist: this.videoId,\n        mute: 1,\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 = `${currentTime * 100 / duration}%`\n    }, 300);\n  }\n\n  pauseVideo() {\n    if (this.videoProvider === 'vimeo') return this.vimeoVideoPlayer.pause();\n    if (this.videoProvider === 'youtube') return this.youTubePlayer.pauseVideo();\n  }\n\n  playVideo() {\n    if (this.videoProvider === 'vimeo') return this.vimeoVideoPlayer.play();\n    if (this.videoProvider === 'youtube') return this.youTubePlayer.playVideo();\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[dataAttr]\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\nexport default VimeoVideo;\n"],"sourceRoot":""}