/*! Copyright (c) Safe As Milk. All rights reserved. */import Player,{YoutubeProvider,VimeoProvider}from"vlite";const VIDEO_TYPES=["html5","youtube","vimeo"];Player.registerProvider("youtube",YoutubeProvider),Player.registerProvider("vimeo",VimeoProvider);class VideoPlayer extends HTMLElement{#boundPlay;#isReady=!1;#isPlaying=!1;#loading=!1;#loadingIndicator;#player=null;#posterElement;#posterUrl;#isPlayScheduled=!1;#type;#videoElementContainer;constructor(){super(),this.#boundPlay=this.play.bind(this)}connectedCallback(){if(this.#type=this.dataset.type,!this.#type||!VIDEO_TYPES.includes(this.#type))throw new Error('Video type must be provided and one of: "html5", "Youtube", "Vimeo"');this.#videoElementContainer=this.querySelector("video-element"),this.#loadingIndicator=this.querySelector("video-loading-indicator"),this.#posterUrl=this.dataset.poster,this.#posterElement=this.querySelector("video-poster"),this.#posterElement&&(this.#posterElement.addEventListener("click",this.loadContent.bind(this),{once:!0}),this.#type==="vimeo"&&this.#updateVimeoPoster())}disconnectedCallback(){this.#loading=!1,this.#player&&(this.#player.destroy(),this.#player=null,this.#isReady=!1,this.#videoElementContainer.innerHTML="",this.removeAttribute("loaded")),this.#isPlayScheduled&&(this.removeEventListener("on:video-player:play",this.#isPlayScheduled),this.#isPlayScheduled=null),this.#loadingIndicator&&this.#loadingIndicator.setAttribute("hidden","")}get ready(){return this.#isReady}loadContent(){if(this.hasAttribute("loaded")||this.#loading)return this;this.#videoElementContainer.appendChild(this.querySelector("template").content.firstElementChild.cloneNode(!0));const videoElement=this.querySelector("[video-element]");if(!videoElement)throw new Error("Video element not found");this.#loadingIndicator&&this.#loadingIndicator.removeAttribute("hidden","");const createPlayer=()=>{new Player(videoElement,{options:{autoHide:!0,...this.#posterUrl?{poster:this.#posterUrl}:{}},provider:this.#type,onReady:player=>{this.#player=player,this.#isReady=!0,this.#loading=!1,this.setAttribute("loaded",""),this.#loadingIndicator&&this.#loadingIndicator.setAttribute("hidden","");const playButton=this.querySelector(".v-bigPlay");if(playButton){const playIcon=document.getElementById("template-icon-play").content;playButton.innerHTML="",playButton.appendChild(playIcon.cloneNode(!0))}this.#player.on("play",()=>{this.#isPlaying=!0,this.classList.add("is-playing"),this.#posterElement&&this.#posterElement.classList.add("is-hidden"),this.dispatchEvent(new CustomEvent("on:video-player:playing"))}),this.#player.on("pause",()=>{this.#isPlaying=!1,this.classList.remove("is-playing"),this.dispatchEvent(new CustomEvent("on:video-player:paused"))}),this.#player.on("ended",()=>{this.#isPlaying=!1,this.classList.remove("is-playing"),this.dispatchEvent(new CustomEvent("on:video-player:ended"))}),this.dispatchEvent(new CustomEvent("on:video-player:ready"))}})};if(this.#type==="vimeo"&&this.#posterElement.dataset.videoId&&this.#posterElement.children.length===0&&this.#posterUrl===void 0){const interval=setInterval(()=>{typeof this.#posterUrl=="string"&&(createPlayer(),clearInterval(interval))},50)}else createPlayer();return this}play(){return this.#isPlaying?this:(this.#player?(this.#isPlayScheduled=!1,this.#player.play()):this.#isPlayScheduled||(this.#isPlayScheduled=!0,this.addEventListener("on:video-player:ready",this.#boundPlay,{once:!0})),this)}pause(){return this.#isPlaying?(this.#player?this.#player.pause():this.#isPlayScheduled&&(this.#isPlayScheduled=!1,this.removeEventListener("on:video-player:ready",this.#boundPlay)),this):this}on(type,handler,options){return this.addEventListener(type,handler,options),this}off(type,handler,options){return this.removeEventListener(type,handler,options),this}async#updateVimeoPoster(){if(this.#posterElement&&this.#posterElement.dataset.videoId&&this.#posterElement.children.length===0)try{const data=await fetch(`https://vimeo.com/api/v2/video/${this.#posterElement.dataset.videoId}.json`),[videoData]=await data.json(),{thumbnail_large:thumbnail}=videoData;this.#posterUrl=thumbnail,this.#posterElement.innerHTML=`<img src="${thumbnail}">`}catch(e){this.#posterUrl="",console.error(`Could not load Vimeo poster: ${e}`)}}}customElements.define("video-player",VideoPlayer);
//# sourceMappingURL=/cdn/shop/t/100/assets/video-player.js.map?v=88246136500254577801751575325