{"version":3,"file":"youtube-player.js","sources":["../src/components/youtube-player/index.tsx"],"sourcesContent":["import {html, LitElement} from 'lit'\nimport {customElement, property, state} from 'lit/decorators.js'\nimport {i18nService} from '../../services/i18nService';\nimport style from \"./style.scss?inline\";\nimport OnStateChangeEvent = YT.OnStateChangeEvent;\nimport PlayerEvent = YT.PlayerEvent;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'youtube-player': YoutubePlayer\n }\n\n interface Window {\n onYouTubeIframeAPIReady: () => void;\n }\n}\n\nconst Icons = {\n PLAY: 'M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26',\n PAUSE: 'M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28',\n REPLAY: 'M 16.144531 11.222656 C 15.566406 14.089844 13.023438 16.171875 10.097656 ' +\n '16.171875 C 6.695312 16.171875 3.925781 13.402344 3.925781 9.996094 C 3.925781 ' +\n '6.59375 6.691406 3.824219 10.097656 3.824219 C 11.71875 3.824219 13.253906 4.480469 ' +\n '14.402344 5.597656 L 12.496094 7.523438 L 18.773438 7.523438 L 18.773438 1.21875 L ' +\n '17.042969 2.945312 C 15.195312 1.128906 12.71875 0.101562 10.101562 0.101562 C ' +\n '4.640625 0.101562 0.199219 4.542969 0.199219 9.996094 C 0.199219 15.457031 4.640625 ' +\n '19.894531 10.097656 19.894531 C 14.792969 19.898438 18.875 16.558594 19.800781 ' +\n '11.960938 Z M 16.144531 11.222656'\n};\n\n@customElement('youtube-player')\nexport class YoutubePlayer extends LitElement {\n @property() public url = ''\n @property() public customControl = false;\n\n @state() progress = 0;\n @state() playerState: YT.PlayerState = -1;\n @state() i18nInitialized: boolean = false\n\n player: YT.Player | undefined;\n playerId = \"embed-player\" + this.guid();\n interval: number | undefined;\n\n constructor() {\n super();\n this.initPlayer = this.initPlayer.bind(this);\n this.updateProgressBar = this.updateProgressBar.bind(this);\n }\n\n async connectedCallback() {\n super.connectedCallback();\n await i18nService.initTranslations();\n this.i18nInitialized = true;\n this.loadPlayer();\n }\n\n render() {\n if (!this.i18nInitialized) return;\n\n return html`\n \n \n ${this.renderPlayer()}\n
\n `\n }\n\n loadPlayer() {\n const script = document.createElement(\"script\");\n script.src = \"https://www.youtube.com/iframe_api\";\n this.renderRoot.appendChild(script);\n\n window.onYouTubeIframeAPIReady = this.initPlayer;\n }\n\n initPlayer() {\n new YT.Player(this.playerId, {\n events: {\n 'onStateChange': (event: OnStateChangeEvent) => {\n this.playerState = event.data;\n\n if (event.data == YT.PlayerState.PLAYING) {\n this.interval = setInterval(this.updateProgressBar, 300);\n } else {\n clearInterval(this.interval);\n }\n },\n 'onReady': (event: PlayerEvent) => {\n this.player = event.target;\n this.player.stopVideo();\n this.player.playVideo();\n }\n }\n });\n }\n\n\n renderPlayer() {\n if (this.customControl) {\n return html`\n \n \n ${this.renderActionButton()}\n ${this.renderProgressBar()}\n
\n `\n }\n return html`\n \n `\n }\n\n renderActionButton() {\n return html`\n \n `\n }\n\n renderProgressBar() {\n return html`\n \n \n `\n }\n\n handleVideoAction(state: number) {\n if (!state || !this.player) return;\n\n if (this.playerState === YT.PlayerState.PLAYING) {\n this.player.pauseVideo();\n this.playerState = YT.PlayerState.PAUSED;\n } else if (this.playerState === YT.PlayerState.PAUSED) {\n this.player.playVideo();\n this.playerState = YT.PlayerState.PLAYING;\n } else if (this.playerState === YT.PlayerState.ENDED) {\n this.player.playVideo();\n this.playerState = YT.PlayerState.PLAYING;\n }\n }\n\n getIcon(state: number) {\n if (state === 1) return Icons.PLAY;\n if (state === 0) return Icons.REPLAY;\n return Icons.PAUSE;\n }\n\n handleClick(event: Event) {\n if (!this.player) return;\n const newTime = this.player.getDuration() * ((event.target as HTMLInputElement).valueAsNumber / 100);\n this.player.seekTo(newTime, true);\n }\n\n updateProgressBar() {\n if (!this.player) return;\n this.progress = (this.player.getCurrentTime() / this.player.getDuration()) * 100;\n }\n\n guid() {\n function s4() {\n return Math.floor((1 + Math.random()) * 0x10000)\n .toString(16)\n .substring(1);\n }\n\n return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();\n }\n}\n"],"names":["Icons","YoutubePlayer","LitElement","i18nService","html","style","script","event","state","newTime","s4","__decorateClass","property","customElement"],"mappings":"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"}