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