const s={VIDEO_READY:"video:ready"};class a extends HTMLElement{constructor(){super(...arguments),this.ready=!1,this.playHandler=()=>{this.ready||(this.ready=!0,this.classList.add("ready")),this.toggleButton?.setAttribute("aria-pressed","true")},this.pauseHandler=()=>{this.toggleButton?.setAttribute("aria-pressed","false"),this.activeVideo.el.ended&&!this.loop?this.toggleButton?.setAttribute("data-replay",""):this.toggleButton?.removeAttribute("data-replay")},this.endedHandler=()=>{this.dispatchEvent(new Event("ended"))},this.resetHandler=()=>{this.toggleButton?.removeAttribute("data-replay"),this.videos.forEach(e=>{e.pause(!0)})}}connectedCallback(){this.playWhenInview=this.hasAttribute("playWhenInview"),this.useGetComputedStyle=this.hasAttribute("useGetComputedStyle"),this.loop=this.hasAttribute("loop"),this.intersectionObs=new IntersectionObserver(e=>{e.forEach(t=>{this.activeVideo&&this.playWhenInview&&(this.loop?t.isIntersecting?this.activeVideo.play():this.activeVideo.pause():t.isIntersecting&&(this.activeVideo.play(),this.intersectionObs.unobserve(this.activeVideo.el)))})},{threshold:.3}),this.videos=Array.from(this.querySelectorAll("video")).map(e=>new r(e)),this.toggleButton=this.getSlotElement("toggle-button"),this.toggleButton&&this.toggleButton.addEventListener("click",()=>this.toggle()),window.addEventListener("resize",()=>this.onResize(),{passive:!0}),this.onResize(),this.classList.add(s.VIDEO_READY),this.addEventListener("play",()=>{this.toggle()}),this.addEventListener("reset",()=>{this.resetHandler()})}onResize(){const e=this.getActiveVideo();e!==this.activeVideo&&(this.activeVideo&&(this.activeVideo.removeEventListener("play",this.playHandler),this.activeVideo.removeEventListener("pause",this.pauseHandler),this.activeVideo.addEventListener("ended",this.endedHandler),this.intersectionObs.unobserve(this.activeVideo.el),this.activeVideo=null),this.activeVideo=e,this.activeVideo&&(this.activeVideo.addEventListener("play",this.playHandler),this.activeVideo.addEventListener("pause",this.pauseHandler),this.activeVideo.addEventListener("ended",this.endedHandler),this.activeVideo.loadMetadata().then(()=>{this.intersectionObs.observe(this.activeVideo.el),this.activeVideo.el.paused?this.pauseHandler():this.playHandler()}))),this.videos.forEach(t=>{t!==this.activeVideo&&!t.el.paused&&t.pause()})}toggle(){this.activeVideo&&(this.activeVideo.el.paused?(this.activeVideo.play(),this.playWhenInview=!0,this.dispatchEvent(new CustomEvent("playing"))):(this.activeVideo.pause(),this.playWhenInview=!1))}getActiveVideo(){return this.videos.find(t=>d(t.el,this.useGetComputedStyle))}getSlotElement(e){return this.querySelector(`[data-slot="${e}"]`)||null}}class r{constructor(e){this.playPromise=null,this.pausePressed=!1,this.videoLoaded=!1,this.isSrcAttrUpdated=!1,this.el=e}play(){if(this.playPromise){this.pausePressed=!1;return}this.updateSrcAttr(),this.playPromise=this.el.play(),this.playPromise.then(()=>{this.playPromise=null,this.pausePressed&&this.pause()}).catch(e=>{console.error("video play failed:",e),this.playPromise=null})}updateSrcAttr(){if(this.isSrcAttrUpdated)return;const e=this.el.firstElementChild;if(e&&e.tagName==="SOURCE"){const t=e.getAttribute("data-src");t&&(e.src=t)}this.isSrcAttrUpdated=!0}loadMetadata(){return this.videoLoaded?Promise.resolve():new Promise(e=>{this.el.addEventListener("loadedmetadata",()=>{this.videoLoaded=!0,this.el.currentTime=.1,e()},{once:!0}),this.updateSrcAttr(),this.el.load()})}onVideoLoaded(){return this.videoLoaded=!0,this.el.play()}pause(e=!1){if(this.playPromise){this.pausePressed=!0;return}this.pausePressed=!1,this.el.pause(),e&&(this.el.currentTime=0)}addEventListener(e,t){this.el.addEventListener(e,t)}removeEventListener(e,t){this.el.removeEventListener(e,t)}}function d(i,e){return e?["flex","block"].includes(getComputedStyle(i,null).display):i.offsetParent!==null}customElements.get("photos-responsive-video")||customElements.define("photos-responsive-video",a);