https://www.restickity.com/cdn/shop/t/167/assets/video-player.js?v=83045806141655477371781696425

1/*! Copyright (c) Safe As Milk. All rights reserved. */const VIDEO_TYPES=["html5","youtube","vimeo"];class VideoPlayer extends HTMLElement{static YoutubeAPIStatus="NOT_LOADED";static VimeoAPIStatus="NOT_LOADED";#boundPlay;#isPlaying=!1;#isPlayScheduled=!1;#loading=!1;#loadingIndicator=null;#player=null;#playButton=null;#posterUrl="";#posterElement=null;#type;#videoElementContainer=null;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.#playButton=this.querySelector(".video-play-button"),this.#posterUrl=this.dataset.poster,this.#posterElement=this.querySelector("video-poster"),this.#type!=="html5"&&VideoPlayer.loadVideoAPI(this.#type),this.#posterElement&&this.#posterElement.addEventListener("click",this.loadContent.bind(this),{once:!0})}disconnectedCallback(){this.#loading=!1,this.reset(),this.#isPlayScheduled&&(this.removeEventListener("on:video-player:playing",this.#boundPlay),this.#isPlayScheduled=!1)}get playing(){return this.#isPlaying}loadContent(){return this.hasAttribute("loaded")||this.#loading?this:(this.classList.add("is-loading"),this.#videoElementContainer.appendChild(this.querySelector("template").content.firstElementChild.cloneNode(!0)),this.#type==="html5"?(this.#player=this.querySelector("video"),this.#loadingIndicator&&this.#loadingIndicator.setAttribute("hidden",""),this.#playButton&&(this.#playButton.removeAttribute("hidden"),this.#playButton.addEventListener("click",this.#boundPlay)),this.#player.addEventListener("play",(()=>{this.#isPlaying=!0,this.classList.add("is-playing"),this.classList.remove("is-suspended"),this.hasAttribute("data-controls")&&this.#player.setAttribute("controls","controls"),this.#posterElement&&this.#posterElement.classList.add("is-hidden"),this.#loadingIndicator&&this.#loadingIndicator.setAttribute("hidden",""),this.dispatchEvent(new CustomEvent("on:video-player:playing",{detail:{player:this.#player}}))})),this.#player.addEventListener("pause",(()=>{this.#isPlaying=!1,this.classList.remove("is-playing"),this.hasAttribute("data-controls")&&this.#type!=="html5"&&this.#player.removeAttribute("controls"),this.dispatchEvent(new CustomEvent("on:video-player:paused",{detail:{player:this.#player}}))})),this.#player.addEventListener("suspend",(()=>{this.classList.add("is-suspended"),this.dispatchEvent(new CustomEvent("on:video-player:suspended",{detail:{player:this.#player}}))})),this.dispatchEvent(new CustomEvent("on:video-player:ready",{detail:{player:this.#player}})),this.classList.remove("is-loading"),this.setAttribute("loaded","")):this.#type==="youtube"?VideoPlayer.YoutubeAPIStatus==="LOADED"?this.#initYoutubePlayer():document.addEventListener("on:youtube-api:loaded",this.#initYoutubePlayer.bind(this),{once:!0}):this.#type==="vimeo"&&(VideoPlayer.VimeoAPIStatus==="LOADED"?this.#initVimeoPlayer():document.addEventListener("on:vimeo-api:loaded",this.#initVimeoPlayer.bind(this),{once:!0})),this)}#initYoutubePlayer(){if(this.hasAttribute("loaded"))return;const iframe=this.querySelector("iframe");!iframe||VideoPlayer.YoutubeAPIStatus!=="LOADED"||(this.classList.add("is-loading"),this.#loadingIndicator&&this.#loadingIndicator.removeAttribute("hidden"),this.#player=new window.YT.Player(iframe,{events:{onReady:()=>{this.#handleHostedPlayerReadyEvent()},onStateChange:({data})=>{data===window.YT.PlayerState.PLAYING?this.#handleHostedPlayerPlayEvent():data===window.YT.PlayerState.PAUSED?this.#handleHostedPlayerPauseEvent():data===window.YT.PlayerState.ENDED&&this.#handleHostedPlayerEndEvent()}}}))}#initVimeoPlayer(){if(this.hasAttribute("loaded"))return;const iframe=this.querySelector("iframe");!iframe||VideoPlayer.VimeoAPIStatus!=="LOADED"||(this.classList.add("is-loading"),this.#loadingIndicator&&this.#loadingIndicator.removeAttribute("hidden"),this.#player=new window.Vimeo.Player(iframe),this.#player.on("loaded",(()=>{this.#handleHostedPlayerReadyEvent()})),this.#player.on("play",(()=>{this.#handleHostedPlayerPlayEvent()})),this.#player.on("pause",(()=>{this.#handleHostedPlayerPauseEvent()})),this.#player.on("ended",(()=>{this.#handleHostedPlayerEndEvent()})))}#handleHostedPlayerReadyEvent(){this.#loading=!1,this.setAttribute("loaded",""),this.classList.remove("is-loading"),this.#loadingIndicator&&this.#loadingIndicator.setAttribute("hidden",""),this.#playButton&&(this.#playButton.removeAttribute("hidden"),this.#playButton.addEventListener("click",this.#boundPlay)),this.dispatchEvent(new CustomEvent("on:video-player:ready",{detail:{player:this.#player}}))}#handleHostedPlayerPlayEvent(){this.#isPlaying=!0,this.classList.add("is-playing"),this.classList.remove("is-suspended"),this.#posterElement&&this.#posterElement.classList.add("is-hidden"),this.#playButton&&this.#playButton.setAttribute("hidden",""),this.dispatchEvent(new CustomEvent("on:video-player:playing",{detail:{player:this.#player}}))}#handleHostedPlayerPauseEvent(){this.#isPlaying=!1,this.classList.remove("is-playing"),this.dispatchEvent(new CustomEvent("on:video-player:paused",{detail:{player:this.#player}}))}#handleHostedPlayerEndEvent(){this.#isPlaying=!1,this.classList.remove("is-playing"),this.dispatchEvent(new CustomEvent("on:video-player:ended",{detail:{player:this.#player}}))}play(){return this.#isPlaying?this:(this.#player&&this.#type==="html5"?this.#player.play().catch((e=>{e.name==="NotAllowedError"&&(this.#posterElement&&this.#posterElement.classList.remove("is-hidden"),this.#player.pause())})):this.#player&&this.#type==="youtube"&&this.hasAttribute("loaded")?this.#player.playVideo():this.#player&&this.#type==="vimeo"&&this.hasAttribute("loaded")?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.#type==="html5"||this.#type==="vimeo")?this.#player.pause():this.#player&&this.#type==="youtube"?this.#player.pauseVideo():this.#isPlayScheduled&&(this.#isPlayScheduled=!1,this.removeEventListener("on:video-player:ready",this.#boundPlay)),this):this}reset(){return this.#player?((this.#type==="youtube"||this.#type==="vimeo")&&this.#player.destroy(),this.#player=null,this.#videoElementContainer.innerHTML="",this.removeAttribute("loaded"),this):this}on(type,handler,options){return this.addEventListener(type,handler,options),this}off(type,handler,options){return this.removeEventListener(type,handler,options),this}static loadVideoAPI(type){if(type==="youtube"&&VideoPlayer.YoutubeAPIStatus==="NOT_LOADED"){VideoPlayer.YoutubeAPIStatus="LOADING";const tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api",document.head.appendChild(tag),document.dispatchEvent(new CustomEvent("on:youtube-api:loading")),window.onYouTubeIframeAPIReady=()=>{VideoPlayer.YoutubeAPIStatus="LOADED",document.dispatchEvent(new CustomEvent("on:youtube-api:loaded"))}}else if(type==="vimeo"&&VideoPlayer.VimeoAPIStatus==="NOT_LOADED"){VideoPlayer.VimeoAPIStatus="LOADING";const tag=document.createElement("script");tag.src="https://player.vimeo.com/api/player.js",document.head.appendChild(tag);const intervalId=setInterval((()=>{window.Vimeo&&(VideoPlayer.VimeoAPIStatus="LOADED",document.dispatchEvent(new CustomEvent("on:vimeo-api:loaded")),clearInterval(intervalId))}),100)}}}customElements.define("video-player",VideoPlayer);
2//# sourceMappingURL=/cdn/shop/t/167/assets/video-player.js.map?v=83045806141655477371781696425