{"version":3,"file":"videoModule-DJxIDLge.js","sources":["../../src/scripts/modules/videoModule.ts"],"sourcesContent":["import { Component } from '@verndale/core';\r\nimport YouTubeIframeLoader from 'youtube-iframe';\r\nimport Player from '@vimeo/player';\r\n\r\ntype YouTubePlayer = {\r\n  on: (event: string, callback: () => void) => void;\r\n  playVideo: () => void;\r\n  pauseVideo: () => void;\r\n  mute: () => void;\r\n};\r\n\r\nclass VideoModule extends Component {\r\n  videoId: string | undefined = undefined;\r\n  provider: string | undefined = undefined;\r\n  player: YouTubePlayer | Player | undefined;\r\n  isPlaying: boolean;\r\n  playLabel: string;\r\n  pauseLabel: string;\r\n  videoReady: boolean = false;\r\n\r\n  constructor(el: HTMLElement) {\r\n    super(el);\r\n    if (this.el.dataset.textural && this.el.dataset.textural === 'true') this.isPlaying = true;\r\n    else this.isPlaying = false;\r\n    this.playLabel = this.el.dataset.playLabel || 'Play';\r\n    this.pauseLabel = this.el.dataset.pauseLabel || 'Pause';\r\n    if (this.dom.playButtonLabel)\r\n      (this.dom.playButtonLabel as HTMLElement).textContent = this.isPlaying\r\n        ? this.pauseLabel\r\n        : this.playLabel;\r\n\r\n    this.provider = (this.dom.el as HTMLElement).dataset.provider;\r\n    this.videoId = (this.dom.el as HTMLElement).dataset.videoId;\r\n    this.buildHtml();\r\n  }\r\n\r\n  setupDefaults() {\r\n    this.dom = {\r\n      el: this.el,\r\n      videoPlaceholder: this.el.querySelector('.video-placeholder') as HTMLElement,\r\n      backgroundImage: this.el.querySelector('.picture') as HTMLImageElement,\r\n      playButton: this.el.querySelector('.play-button') as HTMLElement,\r\n      playButtonLabel: this.el.querySelector('.play-button-label') as HTMLElement,\r\n      playIcon: this.el.querySelector('.play-icon') as HTMLElement,\r\n      pauseIcon: this.el.querySelector('.pause-icon') as HTMLElement,\r\n      localVideo: this.el.querySelector('video') as HTMLVideoElement\r\n    };\r\n  }\r\n\r\n  addListeners() {\r\n    (this.dom.playButton as HTMLButtonElement)?.addEventListener(\r\n      'click',\r\n      this.handlePlayButtonClick.bind(this)\r\n    );\r\n\r\n    if (this.dom.localVideo && (this.dom.localVideo as HTMLVideoElement).readyState === 4) {\r\n      (this.el as HTMLElement).classList.add('loaded');\r\n      (this.dom.playButton as HTMLElement).removeAttribute('disabled');\r\n      this.videoReady = true;\r\n    }\r\n    //add load listener to localVideo\r\n    if (this.dom.localVideo && (this.dom.localVideo as HTMLVideoElement).readyState < 3)\r\n      (this.dom.localVideo as HTMLVideoElement).addEventListener('loadeddata', () => {\r\n        (this.el as HTMLElement).classList.add('loaded');\r\n        (this.dom.playButton as HTMLElement).removeAttribute('disabled');\r\n        this.videoReady = true;\r\n      });\r\n  }\r\n\r\n  checkIconsAndLabelsState() {\r\n    if (this.dom.playButtonLabel as HTMLElement)\r\n      (this.dom.playButtonLabel as HTMLElement).innerHTML = this.isPlaying\r\n        ? this.pauseLabel\r\n        : this.playLabel;\r\n\r\n    if (this.dom.playIcon && this.dom.pauseIcon) {\r\n      if (this.isPlaying) {\r\n        (this.dom.playIcon as HTMLElement).style.display = 'none';\r\n        (this.dom.pauseIcon as HTMLElement).style.display = 'block';\r\n      } else {\r\n        (this.dom.playIcon as HTMLElement).style.display = 'block';\r\n        (this.dom.pauseIcon as HTMLElement).style.display = 'none';\r\n      }\r\n    }\r\n  }\r\n\r\n  buildHtml() {\r\n    if (this.provider === 'vimeo') {\r\n      this.initVimeoVideo();\r\n    } else if (this.provider === 'youtube') {\r\n      this.initYoutubeVideo();\r\n    }\r\n    if (this.dom.localVideo) {\r\n      this.initLocalVideo();\r\n    }\r\n    this.checkIconsAndLabelsState();\r\n  }\r\n\r\n  initLocalVideo() {\r\n    (this.el as HTMLElement).classList.add('loaded');\r\n    if (this.dom.playButton) {\r\n      (this.dom.playButton as HTMLElement).removeAttribute('disabled');\r\n    }\r\n    this.videoReady = true;\r\n    if (this.el.dataset.textural && this.el.dataset.textural === 'true') {\r\n      (this.dom.videoPlaceholder as HTMLElement).style.display = 'block';\r\n    }\r\n  }\r\n\r\n  initYoutubeVideo() {\r\n    YouTubeIframeLoader.load(YT => {\r\n      this.player = new YT.Player(this.dom.videoPlaceholder, {\r\n        height: '100%',\r\n        width: '100%',\r\n        host: 'https://www.youtube-nocookie.com',\r\n        videoId: this.videoId,\r\n        origin: window.location.origin,\r\n        playerVars: {\r\n          controls: 1,\r\n          rel: 0\r\n        },\r\n        events: {\r\n          onReady: () => {\r\n            (this.dom.playButton as HTMLElement).removeAttribute('disabled');\r\n            (this.dom.el as HTMLElement).classList.add('loaded');\r\n            this.videoReady = true;\r\n          },\r\n          onStateChange: (event: { data: unknown }) => {\r\n            if (event.data === YT.PlayerState.ENDED) {\r\n              this.isPlaying = false;\r\n              this.checkIconsAndLabelsState();\r\n            }\r\n          }\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  initVimeoVideo() {\r\n    const options = {\r\n      id: parseInt(this.videoId as string)\r\n    };\r\n\r\n    const player = new Player(this.dom.videoPlaceholder as HTMLElement, options);\r\n    player.on('loaded', () => {\r\n      (this.dom.playButton as HTMLElement).removeAttribute('disabled');\r\n      (this.dom.el as HTMLElement).classList.add('loaded');\r\n      this.videoReady = true;\r\n    });\r\n    this.player = player;\r\n  }\r\n\r\n  handlePlayButtonClick() {\r\n    if (!this.videoReady) return;\r\n    if (this.dom.backgroundImage)\r\n      (this.dom.backgroundImage as HTMLImageElement).style.display = 'none';\r\n    if (this.isPlaying) {\r\n      if (this.provider === 'vimeo') {\r\n        (this.player as Player).pause();\r\n      } else if (this.provider === 'youtube') {\r\n        (this.player as YouTubePlayer).pauseVideo();\r\n      } else if (this.dom.localVideo) {\r\n        (this.dom.localVideo as HTMLVideoElement).pause();\r\n      }\r\n      this.isPlaying = false;\r\n    } else if (!this.isPlaying) {\r\n      if (this.provider === 'vimeo') {\r\n        (this.player as Player).play();\r\n        (this.dom.videoPlaceholder as HTMLElement).style.display = 'block';\r\n      } else if (this.provider === 'youtube') {\r\n        (this.player as YouTubePlayer).playVideo();\r\n        (this.dom.videoPlaceholder as HTMLElement).style.display = 'block';\r\n        if (this.el.querySelector('.video-placeholder'))\r\n          (this.el.querySelector('.video-placeholder') as HTMLElement).style.display = 'block';\r\n      } else if (this.dom.localVideo) {\r\n        (this.dom.localVideo as HTMLVideoElement).play();\r\n        (this.dom.videoPlaceholder as HTMLElement).style.display = 'block';\r\n      }\r\n      this.isPlaying = true;\r\n    }\r\n    if (this.dom.playButton) {\r\n      if (this.el.dataset.textural && this.el.dataset.textural === 'true') {\r\n        if (!this.isPlaying) {\r\n          (this.dom.playIcon as HTMLElement).style.display = 'none';\r\n          (this.dom.pauseIcon as HTMLElement).style.display = 'block';\r\n        } else {\r\n          (this.dom.playIcon as HTMLElement).style.display = 'block';\r\n          (this.dom.pauseIcon as HTMLElement).style.display = 'none';\r\n        }\r\n      } else {\r\n        (this.dom.playButton as HTMLElement).style.display = 'none';\r\n      }\r\n    }\r\n\r\n    this.checkIconsAndLabelsState();\r\n  }\r\n}\r\n\r\nexport default VideoModule;\r\n"],"names":["VideoModule","Component","el","__publicField","_a","YouTubeIframeLoader","YT","event","options","player","Player"],"mappings":"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"}