@maveio/components 0.0.132 → 0.0.134

package/dist/chunk-5KN6H4Y2.js

@@ -0,0 +1,48 @@
+import { a as a$2 } from './chunk-AEKWMZ2I.js';
+import { b as b$2, a as a$1, c as c$2 } from './chunk-NR4EI5W5.js';
+import { a as a$3 } from './chunk-MK4VIJT3.js';
+import { b as b$4 } from './chunk-DBCDDWFV.js';
+import { a, b as b$3 } from './chunk-R2QJ6RON.js';
+import { h, i, c as c$1 } from './chunk-IFM2GZME.js';
+import { a as a$4 } from './chunk-JBV2AYRP.js';
+import { b as b$1, c, e, f as f$1, d as d$1 } from './chunk-ZFZIJ4A5.js';
+
+var P=b$1(b$2(),1);var f,k,l,m,u,v,b,x,w,H,p,E,$,N,z,R,O,U,d=class extends i{constructor(){super(...arguments);e(this,f);e(this,l);e(this,u);e(this,b);e(this,w);e(this,p);e(this,$);e(this,z);e(this,O);this.autoplay="lazy";this.quality="auto";this.fallback="placeholder";this._queue=[];this._failedPlay=!1;this._intersectionObserver=new a$1(this,{callback:f$1(this,z,R).bind(this)});this.embedController=new b$4(this);}get embed(){return this._embedId}set embed(t){this._embedId!=t&&(this._embedId=t,this.requestUpdate("embed"),this.embedController.embed=this.embed);}set loop(t){this._loop=(t===""||t=="true"||t==!0)??!1;}get loop(){return this._loop}get poster(){return this.embedController.embedFile(`${this.fallback}.jpg`)}set poster(t){if(t){let i=this._poster;this._poster=t,this.requestUpdate("poster",i);}}get token(){return this._token}set token(t){this._token!=t&&(this._token=t,this.requestUpdate("token"),this.embedController.token=this._token);}get sources(){let t=this.autoplay==="scroll"?["clip_keyframes"]:["video","clip"],i=this._embed.video.renditions.filter(e=>(this.quality=="auto"?e.size!=="uhd":d$1(this,l,m).indexOf(e.size)<=d$1(this,l,m).indexOf(this.quality))&&e.container==="mp4"&&d$1(this,u,v).includes(e.codec)&&(!e.type||t.includes(e.type))).sort((e,s)=>e.size===s.size?d$1(this,u,v).indexOf(e.codec)-d$1(this,u,v).indexOf(s.codec):d$1(this,l,m).indexOf(s.size)-d$1(this,l,m).indexOf(e.size)).map(e=>{let s=d$1(this,w,H).find(M=>M.size===e.size)?.media,_=`${e.codec}_${e.size}${e.type&&e.type!="video"?`_${e.type}`:""}.mp4`;return {media:s,src:this.embedController.embedFile(_),codec:d$1(this,b,x)[e.codec]}}),n=this._embed.video.renditions.filter(e=>d$1(this,l,m).indexOf(e.size)<=d$1(this,l,m).indexOf("fhd")&&e.container==="mp4"&&d$1(this,u,v).includes(e.codec)&&(!e.type||t.includes(e.type))).sort((e,s)=>d$1(this,l,m).indexOf(s.size)-d$1(this,l,m).indexOf(e.size));if(n.length>0){let e=n[0],s=`${e.codec}_${e.size}${e.type&&e.type!="video"?`_${e.type}`:""}.mp4`,_={media:void 0,src:this.embedController.embedFile(s),codec:d$1(this,b,x)[e.codec]};i.push(_);}return i}connectedCallback(){super.connectedCallback(),this.autoplay==="scroll"&&document.addEventListener("scroll",f$1(this,f,k).bind(this));}disconnectedCallback(){super.disconnectedCallback(),this.autoplay==="scroll"&&document.removeEventListener("scroll",f$1(this,f,k).bind(this)),this._metricsInstance?.demonitor();}set muted(t){this._videoElement?this._videoElement.muted=t:this._queue.push(()=>this._videoElement.muted=t);}get muted(){return this._videoElement?.muted||!1}get paused(){return this._videoElement?.paused||!0}get duration(){return new Promise((t,i)=>{if(this._videoElement&&!isNaN(this._videoElement.duration))return t(this._videoElement.duration);let n=()=>{this._videoElement?.addEventListener("loadedmetadata",()=>{this._videoElement&&t(this._videoElement.duration);}),this._videoElement?.addEventListener("error",e=>{i(new Error("Failed to load video metadata."));});};this._videoElement?n():this.addEventListener("mave:video_element_ready",()=>{n();});})}set currentTime(t){this._videoElement?this._videoElement.currentTime=t:this._queue.push(()=>this._videoElement.currentTime=t);}get currentTime(){return this._videoElement?this._videoElement?.currentTime:0}play(){this._videoElement?f$1(this,p,E).call(this):this._queue.push(()=>f$1(this,p,E).call(this));}pause(){this._videoElement?this._videoElement.pause():this._queue.push(()=>this._videoElement?.pause());}render(){return c$1`
+      ${this.embedController.render({complete:t=>{if(this._embed=t,!!t)return c$1`
+            <video
+              @click=${f$1(this,O,U)}
+              preload="metadata"
+              style=${a$2(this._failedPlay||this.autoplay==="off"?"cursor: pointer":void 0)}
+              muted
+              playsinline
+              poster=${a$2(this._failedPlay?this.poster:void 0)}
+              ${c$2(f$1(this,$,N))}
+              ?autoplay=${this.autoplay==="always"}
+              ?loop=${this.loop||!0}
+            >
+              ${this.sources.map(i=>c$1`
+                  <source
+                    media=${a$2(i.media?`(min-width: ${i.media}px)`:void 0)}
+                    src=${i.src}
+                    type=${`video/mp4; ${i.codec}`}
+                  />
+                `)}
+            </video>
+          `}})}
+    `}};f=new WeakSet,k=function(){let{height:t,top:i,bottom:n}=this.getBoundingClientRect(),e=window.innerHeight;if(this._videoElement){this._videoElement.duration||this._videoElement.load();let s=0;if(i<e&&n>0){let _=t+e;s=(e-i)/_*this._videoElement.duration;}s>=0&&s<=this._videoElement.duration&&(this._videoElement.currentTime=s);}},l=new WeakSet,m=function(){return ["sd","hd","fhd","qhd","uhd"]},u=new WeakSet,v=function(){let t=navigator.userAgent,i=/Edg/.test(t)&&/Mac OS/.test(t),n=/Safari/.test(t)&&!/Chrome/.test(t),e=/Mac OS/.test(t),s=/iPhone|iPad/.test(t);return e&&(n||i)||s?["hevc","h264"]:["av1","h264"]},b=new WeakSet,x=function(){return {av1:"av01.0.08M.08.0.110.01.01.01.0,opus",hevc:"hevc.01.00.78,mp4a.40.2",h264:"avc1.64.00.28,mp4a.40.2"}},w=new WeakSet,H=function(){return [{size:"qhd",media:1280},{size:"fhd",media:1080},{size:"hd",media:720},{size:"sd",media:640}]},p=new WeakSet,E=function(){this._metricsInstance?.monitor(),this._videoElement&&(this._videoElement.muted=!0,this._videoElement.play().catch(t=>{this._failedPlay=!0;}));},$=new WeakSet,N=function(t){if(this._videoElement||(this._videoElement=t,this.dispatchEvent(new CustomEvent("mave:video_element_ready",{detail:this._videoElement,bubbles:!0,composed:!0}))),this._intersectionObserver.observe(this._videoElement),this._videoElement&&this._embed){a$3.forEach(n=>{this._videoElement?.addEventListener(n,e=>{!this._canPlay&&this.autoplay==="scroll"&&n==="canplay"&&(this._canPlay=!0,f$1(this,f,k).call(this)),this.dispatchEvent(new CustomEvent(n,{detail:e,bubbles:!0,composed:!0}));});});let i={component:"clip",video_id:this._embed.video.id,space_id:this._embed.space_id};P.Metrics.config={socketPath:a$4.metrics.socket,apiKey:this._embed.metrics_key},a$4.metrics.enabled&&(this._metricsInstance=new P.Metrics(this._videoElement,this.embed,i));}this._queue.length&&(this._queue.forEach(i=>i()),this._queue=[]);},z=new WeakSet,R=function(t){for(let{isIntersecting:i}of t){if(this.autoplay==="always")return;i&&(this.autoplay==="lazy"||this.autoplay==="true")?this._videoElement?.paused&&f$1(this,p,E).call(this):this._videoElement?.paused||this._videoElement?.pause();}},O=new WeakSet,U=function(){(this.autoplay==="off"||this._failedPlay)&&(this._videoElement?.paused?f$1(this,p,E).call(this):this._videoElement?.pause());},d.styles=h`
+    :host {
+      display: block;
+      position: relative;
+      overflow: hidden;
+    }
+
+    video {
+      all: initial;
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  `,c([a()],d.prototype,"embed",1),c([a()],d.prototype,"autoplay",2),c([a()],d.prototype,"quality",2),c([a()],d.prototype,"fallback",2),c([a()],d.prototype,"loop",1),c([a()],d.prototype,"poster",1),c([a()],d.prototype,"token",1),c([b$3()],d.prototype,"_failedPlay",2);window&&window.customElements&&(window.customElements.get("mave-clip")||window.customElements.define("mave-clip",d));
+
+export { d as a };