aptechka 0.37.2 → 0.38.0

package/lib/media-elements/index.cjs

@@ -1,5 +1,5 @@
-"use strict";var X=r=>{throw TypeError(r)};var F=(r,s,t)=>s.has(r)||X("Cannot "+t);var e=(r,s,t)=>(F(r,s,"read from private field"),t?t.call(r):s.get(r)),i=(r,s,t)=>s.has(r)?X("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(r):s.set(r,t),a=(r,s,t,n)=>(F(r,s,"write to private field"),n?n.call(r,t):s.set(r,t),t),B=(r,s,t)=>(F(r,s,"access private method"),t);var Y=(r,s,t)=>new Promise((n,l)=>{var y=d=>{try{g(t.next(d))}catch(c){l(c)}},T=d=>{try{g(t.throw(d))}catch(c){l(c)}},g=d=>d.done?n(d.value):Promise.resolve(d.value).then(y,T);g((t=t.apply(r,s)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ie=require("../device/index.cjs"),re=require("../source/index.cjs"),ne=require("../class-linked-status/index.cjs"),Q=require("../browser-CpzFX2xg.cjs"),K=require("../events-KVanG9sR.cjs"),oe=require("../string-DhgS_iFl.cjs"),U=require("../loading/index.cjs"),H=require("../css-property/index.cjs"),G=require("../element-resizer/vanilla/index.cjs"),J=require("../canvas-CU5Xjahf.cjs"),ae=require("../canvas/index.cjs"),D=require("../ticker/vanilla/index.cjs");let ce=0;var u,o,p,q,m,z,C,h,I,P,O,W,_,V;class j extends HTMLElement{constructor(){super();i(this,P);i(this,u,null);i(this,o,null);i(this,p,!1);i(this,q,!1);i(this,m,!1);i(this,z,"");i(this,C,"");i(this,h,new ne.ClassLinkedStatus(this,{loading:!1,loaded:!1,error:!1}));i(this,I,null);i(this,W,t=>{const n=t[0];e(this,m)&&(!e(this,q)||this.hasAttribute("reload-source"))&&n.isIntersecting&&this.triggerLazyLoad(),n.isIntersecting?K.dispatchEvent(this,"sourceCapture",{custom:!0}):(this.hasAttribute("reload-source")&&B(this,P,O).call(this,void 0),K.dispatchEvent(this,"sourceRelease",{custom:!0}))});i(this,_,()=>{e(this,h).set("loaded",!0),e(this,h).set("error",!1),e(this,h).set("loading",!1),!e(this,m)&&!e(this,p)&&U.loading.complete(e(this,C)),a(this,p,!0)});i(this,V,t=>{e(this,h).set("loaded",!1),e(this,h).set("error",!0),e(this,h).set("loading",!1),!e(this,m)&&!e(this,p)&&U.loading.error(e(this,C)),a(this,p,!0)});Q.isBrowser&&window.IntersectionObserver&&(a(this,z,`source-consumer-${++ce}`),a(this,I,new IntersectionObserver(e(this,W))))}get consumerElement(){return e(this,o)}get sourceManager(){return e(this,u)}get status(){return e(this,h)}get isLazy(){return e(this,m)}triggerLazyLoad(){e(this,u).current&&e(this,u).current!==e(this,u).previous&&B(this,P,O).call(this,e(this,u).current),a(this,q,!0)}connectedCallback(){const t=this.getAttribute("srcset");t&&(a(this,o,this.createConsumer()),e(this,o).style.cssText=`
+"use strict";var oe=a=>{throw TypeError(a)};var se=(a,r,t)=>r.has(a)||oe("Cannot "+t);var e=(a,r,t)=>(se(a,r,"read from private field"),t?t.call(a):r.get(a)),s=(a,r,t)=>r.has(a)?oe("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(a):r.set(a,t),n=(a,r,t,i)=>(se(a,r,"write to private field"),i?i.call(a,t):r.set(a,t),t),x=(a,r,t)=>(se(a,r,"access private method"),t);var he=(a,r,t)=>new Promise((i,c)=>{var b=m=>{try{g(t.next(m))}catch(l){c(l)}},N=m=>{try{g(t.throw(m))}catch(l){c(l)}},g=m=>m.done?i(m.value):Promise.resolve(m.value).then(b,N);g((t=t.apply(a,r)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ye=require("../device/index.cjs"),ge=require("../source/index.cjs"),Ee=require("../class-linked-status/index.cjs"),le=require("../browser-CpzFX2xg.cjs"),X=require("../events-KVanG9sR.cjs"),de=require("../string-DhgS_iFl.cjs"),ie=require("../loading/index.cjs"),D=require("../css-property/index.cjs"),ce=require("../element-resizer/vanilla/index.cjs"),ue=require("../canvas-CU5Xjahf.cjs"),ve=require("../canvas/index.cjs"),re=require("../ticker/vanilla/index.cjs");let Se=0;var d,o,E,_,f,$,C,u,q,V,v,z,K,J,H,Q;class F extends HTMLElement{constructor(){super();s(this,z);s(this,d,null);s(this,o,null);s(this,E,!1);s(this,_,!1);s(this,f,!1);s(this,$,"");s(this,C,"");s(this,u,new Ee.ClassLinkedStatus(this,{loading:!1,loaded:!1,error:!1,clear:!1}));s(this,q,null);s(this,V);s(this,v,null);s(this,J,t=>{const i=t[0];e(this,f)&&(!e(this,_)||this.hasAttribute("reload-source"))&&i.isIntersecting&&this.triggerLazyLoad(),i.isIntersecting?X.dispatchEvent(this,"sourceCapture",{custom:!0}):(this.hasAttribute("reload-source")&&x(this,z,K).call(this,void 0),X.dispatchEvent(this,"sourceRelease",{custom:!0}))});s(this,H,()=>{e(this,u).set("loaded",!0),e(this,u).set("error",!1),e(this,u).set("loading",!1),!e(this,f)&&!e(this,E)&&ie.loading.complete(e(this,C));const t=getComputedStyle(this).getPropertyValue("--clear-duration");t&&n(this,V,setTimeout(()=>{e(this,u).set("clear",!0)},parseFloat(t)*1e3)),n(this,E,!0)});s(this,Q,t=>{e(this,u).set("loaded",!1),e(this,u).set("error",!0),e(this,u).set("loading",!1),!e(this,f)&&!e(this,E)&&ie.loading.error(e(this,C)),n(this,E,!0)});le.isBrowser&&window.IntersectionObserver&&(n(this,$,`source-consumer-${++Se}`),n(this,q,new IntersectionObserver(e(this,J))))}get consumerElement(){return e(this,o)}get sourceManager(){return e(this,d)}get status(){return e(this,u)}get isLazy(){return e(this,f)}get currentURL(){return e(this,v)}triggerLazyLoad(){e(this,d).current&&e(this,d).current!==e(this,d).previous&&x(this,z,K).call(this,e(this,d).current),n(this,_,!0)}connectedCallback(){const t=this.getAttribute("srcset");t&&(n(this,o,this.createConsumer()),e(this,o).style.cssText=`
         display: block;
         width: 100%;
         height: 100%;
-      `,e(this,o).classList.add("source-consumer"),Array.from(this.attributes).forEach(n=>{if(n.name!=="srcset"){const l=n.nodeValue||"",y=oe.kebabToCamel(n.name);y in e(this,o)&&(e(this,o)[y]=l||!0)}}),this.appendChild(e(this,o)),a(this,u,new re.SourceManager({srcset:t})),a(this,m,this.hasAttribute("lazy")),e(this,u).subscribe(n=>{(!e(this,m)||e(this,m)&&e(this,q))&&B(this,P,O).call(this,n.current)}),e(this,I).observe(this),e(this,u).connect())}disconnectedCallback(){e(this,I).disconnect(),e(this,u).close(),e(this,o).onloadeddata=null,e(this,o).onload=null,e(this,o).onerror=null,e(this,o).remove(),e(this,h).reset()}}u=new WeakMap,o=new WeakMap,p=new WeakMap,q=new WeakMap,m=new WeakMap,z=new WeakMap,C=new WeakMap,h=new WeakMap,I=new WeakMap,P=new WeakSet,O=function(t){if(e(this,o).onloadeddata=null,e(this,o).onload=null,e(this,o).onerror=null,e(this,h).set("loaded",!1),e(this,h).set("error",!1),e(this,h).set("loading",!1),t){a(this,C,`${e(this,z)}-${t.url}`);const n=this.hasAttribute("keep-source-parameters");e(this,h).set("loading",!0);const l=n?t.url:t.name+t.extension;this.consumeSource(l),!e(this,m)&&!e(this,p)&&U.loading.add(e(this,C)),e(this,o).onloadeddata=()=>{e(this,_).call(this)},e(this,o).onload=()=>{e(this,_).call(this)},e(this,o).onerror=()=>{e(this,V).call(this,l)}}else this.consumeSource(null)},W=new WeakMap,_=new WeakMap,V=new WeakMap;class Z extends j{createConsumer(){return document.createElement("img")}consumeSource(s){if(s&&this.hasAttribute("webp")&&ie.device.isWebp){const t=s.split(".").slice(0,-1).join(".")+".webp";this.consumerElement.src=t}else this.consumerElement.src=s||""}}customElements.get("e-image")||customElements.define("e-image",Z);function he(r){const s=r.match(/\{([\d-]+)\}/);if(s){const t=s[1].split("-");if(t.length===2){const n=parseInt(t[0],10),l=parseInt(t[1],10);return{start:n,end:l}}}return null}var f,w,R,E,v,L,k,M,b,S;class ee extends j{constructor(t){super();i(this,f,[]);i(this,w,new H.CSSProperty(this,"--fit","contain"));i(this,R,new H.CSSProperty(this,"--autoplay",!1));i(this,E,new H.CSSProperty(this,"--offset-x",.5));i(this,v,new H.CSSProperty(this,"--offset-y",.5));i(this,L,null);i(this,k,0);i(this,M,1);i(this,b,()=>{if(e(this,f).length){const t=e(this,f)[0];e(this,w).current==="cover"?a(this,L,J.cover(t.naturalWidth,t.naturalHeight,this.consumerElement.width,this.consumerElement.height,e(this,E).current,e(this,v).current)):a(this,L,J.contain(t.naturalWidth,t.naturalHeight,this.consumerElement.width,this.consumerElement.height,e(this,E).current,e(this,v).current))}});i(this,S,t=>{if(this.status.isFalse("loaded")||!e(this,L))return;t.detail.context.clearRect(0,0,t.detail.width,t.detail.height);const n=e(this,f)[e(this,k)];n&&t.detail.context.drawImage(n,...e(this,L)),e(this,R).current&&a(this,k,(e(this,k)+1)%e(this,f).length)});Q.isBrowser&&(a(this,M,parseInt(((t==null?void 0:t.pad)||this.getAttribute("pad")||"1").toString())),e(this,w).subscribe(e(this,b)),e(this,E).subscribe(e(this,b)),e(this,v).subscribe(e(this,b)),this.addEventListener("sourceCapture",n=>{this.consumerElement.addEventListener("canvasRender",e(this,S))}),this.addEventListener("sourceRelease",n=>{this.consumerElement.removeEventListener("canvasRender",e(this,S))}))}setProgress(t){e(this,f).length&&a(this,k,Math.floor((e(this,f).length-1)*t))}connectedCallback(){super.connectedCallback(),e(this,R).observe(),e(this,w).observe(),e(this,E).observe(),e(this,v).observe(),G.elementResizer.subscribe(this,e(this,b))}disconnectedCallback(){super.disconnectedCallback(),e(this,R).unobserve(),e(this,w).unobserve(),e(this,E).unobserve(),e(this,v).unobserve(),a(this,f,[]),G.elementResizer.unsubscribe(e(this,b)),this.consumerElement.removeEventListener("canvasRender",e(this,S))}createConsumer(){return new ae.CanvasElement}consumeSource(t){return Y(this,null,function*(){var n,l,y,T;if(t){this.consumerElement.removeEventListener("canvasRender",e(this,S));const g=[],d=he(t);if(d)for(let c=d.start;c<=d.end;c++){const N=t.replace(/\{([^}]+)\}/,c.toString().padStart(e(this,M),"0")),$=new Image;$.src=N,g.push($)}else{const c=new Image;c.src=t,g.push(c)}try{yield Promise.all(g.map((c,N)=>new Promise(($,se)=>{c.onload=()=>{$()},c.onerror=le=>{se(`${c.src} Image not found`)}}))),a(this,f,g),e(this,b).call(this),(l=(n=this.consumerElement).onload)==null||l.call(n,new Event("load")),this.isLazy||this.consumerElement.addEventListener("canvasRender",e(this,S))}catch(c){console.error(c),(T=(y=this.consumerElement).onerror)==null||T.call(y,new Event("error"))}}})}}f=new WeakMap,w=new WeakMap,R=new WeakMap,E=new WeakMap,v=new WeakMap,L=new WeakMap,k=new WeakMap,M=new WeakMap,b=new WeakMap,S=new WeakMap;customElements.get("e-sequence")||customElements.define("e-sequence",ee);var x,A;class te extends j{constructor(){super(...arguments);i(this,x,0);i(this,A,()=>{this.classList.add(`state-${this.consumerElement.readyState}`);const t=this.consumerElement.readyState/4;t>e(this,x)&&a(this,x,t),K.dispatchEvent(this,"videoReadyStateChange",{detail:{readyState:this.consumerElement.readyState,progress:e(this,x)}}),this.consumerElement.readyState===4&&D.ticker.unsubscribe(e(this,A))})}connectedCallback(){super.connectedCallback(),this.addEventListener("sourceCapture",()=>{D.ticker.subscribe(e(this,A)),this.hasAttribute("capture-autoplay")&&this.consumerElement.play()}),this.addEventListener("sourceRelease",()=>{this.hasAttribute("capture-autoplay")&&(this.consumerElement.pause(),this.hasAttribute("replay")&&(this.consumerElement.currentTime=0)),this.hasAttribute("reload-source")&&this.classList.remove("state-0","state-1","state-2","state-3","state-4")})}disconnectedCallback(){super.disconnectedCallback(),D.ticker.unsubscribe(e(this,A)),a(this,x,0)}createConsumer(){return document.createElement("video")}consumeSource(t){this.consumerElement.src=t||"",this.consumerElement.autoplay=!0}}x=new WeakMap,A=new WeakMap;customElements.get("e-video")||customElements.define("e-video",te);exports.ImageElement=Z;exports.SequenceElement=ee;exports.SourceElement=j;exports.VideoElement=te;
+      `,e(this,o).classList.add("source-consumer"),Array.from(this.attributes).forEach(i=>{if(i.name!=="srcset"){const c=i.nodeValue||"",b=de.kebabToCamel(i.name);b in e(this,o)&&(e(this,o)[b]=c||!0)}}),this.appendChild(e(this,o)),n(this,d,new ge.SourceManager({srcset:t})),n(this,f,this.hasAttribute("lazy")),e(this,d).subscribe(i=>{(!e(this,f)||e(this,f)&&e(this,_))&&x(this,z,K).call(this,i.current)}),e(this,q).observe(this),e(this,d).connect())}disconnectedCallback(){e(this,q).disconnect(),e(this,d).close(),e(this,o).onloadeddata=null,e(this,o).onload=null,e(this,o).onerror=null,e(this,o).remove(),e(this,u).reset(),clearTimeout(e(this,V))}}d=new WeakMap,o=new WeakMap,E=new WeakMap,_=new WeakMap,f=new WeakMap,$=new WeakMap,C=new WeakMap,u=new WeakMap,q=new WeakMap,V=new WeakMap,v=new WeakMap,z=new WeakSet,K=function(t){if(clearTimeout(e(this,V)),e(this,o).onloadeddata=null,e(this,o).onload=null,e(this,o).onerror=null,e(this,u).set("loaded",!1),e(this,u).set("error",!1),e(this,u).set("loading",!1),e(this,u).set("clear",!1),t){n(this,C,`${e(this,$)}-${t.url}`);const i=this.hasAttribute("keep-source-parameters");e(this,u).set("loading",!0),n(this,v,i?t.url:t.name+t.extension),this.consumeSource(e(this,v)),!e(this,f)&&!e(this,E)&&ie.loading.add(e(this,C)),e(this,o).onloadeddata=()=>{e(this,H).call(this)},e(this,o).onload=()=>{e(this,H).call(this)},e(this,o).onerror=()=>{e(this,Q).call(this,e(this,v))}}else n(this,v,null),this.consumeSource(null)},J=new WeakMap,H=new WeakMap,Q=new WeakMap;class me extends F{createConsumer(){return document.createElement("img")}consumeSource(r){if(r&&this.hasAttribute("webp")&&ye.device.isWebp){const t=r.split(".").slice(0,-1).join(".")+".webp";this.consumerElement.src=t}else this.consumerElement.src=r||""}}customElements.get("e-image")||customElements.define("e-image",me);function we(a){const r=a.match(/\{([\d-]+)\}/);if(r){const t=r[1].split("-");if(t.length===2){const i=parseInt(t[0],10),c=parseInt(t[1],10);return{start:i,end:c}}}return null}var p,R,U,S,w,I,A,O,y,L;class fe extends F{constructor(t){super();s(this,p,[]);s(this,R,new D.CSSProperty(this,"--fit","contain"));s(this,U,new D.CSSProperty(this,"--autoplay",!1));s(this,S,new D.CSSProperty(this,"--offset-x",.5));s(this,w,new D.CSSProperty(this,"--offset-y",.5));s(this,I,null);s(this,A,0);s(this,O,1);s(this,y,()=>{if(e(this,p).length){const t=e(this,p)[0];e(this,R).current==="cover"?n(this,I,ue.cover(t.naturalWidth,t.naturalHeight,this.consumerElement.width,this.consumerElement.height,e(this,S).current,e(this,w).current)):n(this,I,ue.contain(t.naturalWidth,t.naturalHeight,this.consumerElement.width,this.consumerElement.height,e(this,S).current,e(this,w).current))}});s(this,L,t=>{if(this.status.isFalse("loaded")||!e(this,I))return;t.detail.context.clearRect(0,0,t.detail.width,t.detail.height);const i=e(this,p)[e(this,A)];i&&t.detail.context.drawImage(i,...e(this,I)),e(this,U).current&&n(this,A,(e(this,A)+1)%e(this,p).length)});le.isBrowser&&(n(this,O,parseInt(((t==null?void 0:t.pad)||this.getAttribute("pad")||"1").toString())),e(this,R).subscribe(e(this,y)),e(this,S).subscribe(e(this,y)),e(this,w).subscribe(e(this,y)),this.addEventListener("sourceCapture",i=>{this.consumerElement.addEventListener("canvasRender",e(this,L))}),this.addEventListener("sourceRelease",i=>{this.consumerElement.removeEventListener("canvasRender",e(this,L))}))}setProgress(t){e(this,p).length&&n(this,A,Math.floor((e(this,p).length-1)*t))}connectedCallback(){super.connectedCallback(),e(this,U).observe(),e(this,R).observe(),e(this,S).observe(),e(this,w).observe(),ce.elementResizer.subscribe(this,e(this,y))}disconnectedCallback(){super.disconnectedCallback(),e(this,U).unobserve(),e(this,R).unobserve(),e(this,S).unobserve(),e(this,w).unobserve(),n(this,p,[]),ce.elementResizer.unsubscribe(e(this,y)),this.consumerElement.removeEventListener("canvasRender",e(this,L))}createConsumer(){return new ve.CanvasElement}consumeSource(t){return he(this,null,function*(){var i,c,b,N;if(t){this.consumerElement.removeEventListener("canvasRender",e(this,L));const g=[],m=we(t);if(m)for(let l=m.start;l<=m.end;l++){const ae=t.replace(/\{([^}]+)\}/,l.toString().padStart(e(this,O),"0")),j=new Image;j.src=ae,g.push(j)}else{const l=new Image;l.src=t,g.push(l)}try{yield Promise.all(g.map((l,ae)=>new Promise((j,be)=>{l.onload=()=>{j()},l.onerror=Le=>{be(`${l.src} Image not found`)}}))),n(this,p,g),e(this,y).call(this),(c=(i=this.consumerElement).onload)==null||c.call(i,new Event("load")),this.isLazy||this.consumerElement.addEventListener("canvasRender",e(this,L))}catch(l){console.error(l),(N=(b=this.consumerElement).onerror)==null||N.call(b,new Event("error"))}}})}}p=new WeakMap,R=new WeakMap,U=new WeakMap,S=new WeakMap,w=new WeakMap,I=new WeakMap,A=new WeakMap,O=new WeakMap,y=new WeakMap,L=new WeakMap;customElements.get("e-sequence")||customElements.define("e-sequence",fe);var P,B;class pe extends F{constructor(){super(...arguments);s(this,P,0);s(this,B,()=>{this.classList.add(`state-${this.consumerElement.readyState}`);const t=this.consumerElement.readyState/4;t>e(this,P)&&n(this,P,t),X.dispatchEvent(this,"videoReadyStateChange",{detail:{readyState:this.consumerElement.readyState,progress:e(this,P)}}),this.consumerElement.readyState===4&&re.ticker.unsubscribe(e(this,B))})}connectedCallback(){super.connectedCallback(),this.addEventListener("sourceCapture",()=>{re.ticker.subscribe(e(this,B)),this.hasAttribute("capture-autoplay")&&this.consumerElement.play()}),this.addEventListener("sourceRelease",()=>{this.hasAttribute("capture-autoplay")&&(this.consumerElement.pause(),this.hasAttribute("replay")&&(this.consumerElement.currentTime=0)),this.hasAttribute("reload-source")&&this.classList.remove("state-0","state-1","state-2","state-3","state-4")})}disconnectedCallback(){super.disconnectedCallback(),re.ticker.unsubscribe(e(this,B)),n(this,P,0)}createConsumer(){return document.createElement("video")}consumeSource(t){this.consumerElement.src=t||"",this.consumerElement.autoplay=!0}}P=new WeakMap,B=new WeakMap;customElements.get("e-video")||customElements.define("e-video",pe);var h,M,k,W,Z,ee,te,Y,ne;const T=class T extends F{constructor(){super();s(this,Y);s(this,h);s(this,M);s(this,k,!1);s(this,W,()=>{n(this,k,this.hasAttribute("autoplay")&&!this.hasAttribute("capture-autoplay")),n(this,h,new window.YT.Player(e(this,M),{playerVars:{mute:this.hasAttribute("muted")?1:0,controls:this.hasAttribute("controls")?1:0},events:{onReady:e(this,Z),onError:e(this,ee),onStateChange:e(this,te)}}))});s(this,Z,()=>{x(this,Y,ne).call(this)});s(this,ee,t=>{var i,c;console.error("YouTube: Ошибка при загрузке видео:",this.currentURL,t),(c=(i=this.consumerElement).onerror)==null||c.call(i,new Event("error"))});s(this,te,()=>{});n(this,M,"yt-"+de.generateId(10)),T.__apiReady||(window.onYouTubeIframeAPIReady=()=>{T.__apiReady=!0,X.dispatchEvent(window,"youTubeIframeAPIReady")}),this.addEventListener("sourceCapture",()=>{this.hasAttribute("capture-autoplay")&&(e(this,h)?e(this,h).playVideo():n(this,k,!0))}),this.addEventListener("sourceRelease",()=>{e(this,h)&&this.hasAttribute("capture-autoplay")&&(e(this,h).pauseVideo(),this.hasAttribute("replay")&&e(this,h).seekTo(0))})}static __onYouTubeIframeAPIReady(){this.__apiReady=!0}createConsumer(){const t=document.createElement("div");return t.id=e(this,M),t}consumeSource(t){var i;if(t){if(!document.getElementById("youtube-script")){const c=document.createElement("script");c.id,c.src="https://www.youtube.com/iframe_api";const b=document.getElementsByTagName("script")[0];(i=b.parentNode)==null||i.insertBefore(c,b)}e(this,h)?x(this,Y,ne).call(this):T.__apiReady?e(this,W).call(this):addEventListener("youTubeIframeAPIReady",e(this,W))}else e(this,h)&&e(this,h).stopVideo()}disconnectedCallback(){super.disconnectedCallback(),e(this,h)&&e(this,h).destroy(),removeEventListener("youTubeIframeAPIReady",e(this,W))}};h=new WeakMap,M=new WeakMap,k=new WeakMap,W=new WeakMap,Z=new WeakMap,ee=new WeakMap,te=new WeakMap,Y=new WeakSet,ne=function(){var t,i;this.currentURL&&(this.currentURL.startsWith("http")?e(this,h).loadVideoByUrl(this.currentURL):e(this,h).loadVideoById(this.currentURL)),e(this,k)?e(this,h).playVideo():e(this,h).stopVideo(),n(this,k,!1),(i=(t=this.consumerElement).onload)==null||i.call(t,new Event("load"))},T.__apiReady=!1;let G=T;customElements.get("e-youtube")||customElements.define("e-youtube",G);exports.ImageElement=me;exports.SequenceElement=fe;exports.SourceElement=F;exports.VideoElement=pe;exports.YouTubeElement=G;

package/lib/media-elements/index.d.ts

@@ -2,3 +2,4 @@ export { ImageElement } from './image';
 export { SequenceElement, type SequenceElementParameters } from './sequence';
 export { SourceElement, type SourceEvents } from './source';
 export { VideoElement, type VideoEvents } from './video';
+export { YouTubeElement } from './youtube';

package/lib/media-elements/index.js

@@ -1,279 +1,287 @@
-var Y = (r) => {
-  throw TypeError(r);
+var oe = (a) => {
+  throw TypeError(a);
 };
-var V = (r, s, t) => s.has(r) || Y("Cannot " + t);
-var e = (r, s, t) => (V(r, s, "read from private field"), t ? t.call(r) : s.get(r)), i = (r, s, t) => s.has(r) ? Y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(r) : s.set(r, t), a = (r, s, t, n) => (V(r, s, "write to private field"), n ? n.call(r, t) : s.set(r, t), t), q = (r, s, t) => (V(r, s, "access private method"), t);
-var G = (r, s, t) => new Promise((n, l) => {
-  var S = (m) => {
+var te = (a, r, t) => r.has(a) || oe("Cannot " + t);
+var e = (a, r, t) => (te(a, r, "read from private field"), t ? t.call(a) : r.get(a)), s = (a, r, t) => r.has(a) ? oe("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), n = (a, r, t, i) => (te(a, r, "write to private field"), i ? i.call(a, t) : r.set(a, t), t), T = (a, r, t) => (te(a, r, "access private method"), t);
+var he = (a, r, t) => new Promise((i, c) => {
+  var b = (m) => {
     try {
-      b(t.next(m));
-    } catch (h) {
-      l(h);
+      g(t.next(m));
+    } catch (l) {
+      c(l);
     }
-  }, T = (m) => {
+  }, O = (m) => {
     try {
-      b(t.throw(m));
-    } catch (h) {
-      l(h);
+      g(t.throw(m));
+    } catch (l) {
+      c(l);
     }
-  }, b = (m) => m.done ? n(m.value) : Promise.resolve(m.value).then(S, T);
-  b((t = t.apply(r, s)).next());
+  }, g = (m) => m.done ? i(m.value) : Promise.resolve(m.value).then(b, O);
+  g((t = t.apply(a, r)).next());
 });
-import { device as _ } from "../device/index.js";
-import { SourceManager as ee } from "../source/index.js";
-import { ClassLinkedStatus as te } from "../class-linked-status/index.js";
-import { i as Q } from "../browser-0zX67oeU.js";
+import { device as de } from "../device/index.js";
+import { SourceManager as me } from "../source/index.js";
+import { ClassLinkedStatus as fe } from "../class-linked-status/index.js";
+import { i as ue } from "../browser-0zX67oeU.js";
 import { d as K } from "../events-CsVF98U6.js";
-import { k as se } from "../string-f0Dnk0L1.js";
-import { loading as j } from "../loading/index.js";
-import { CSSProperty as B } from "../css-property/index.js";
-import { elementResizer as J } from "../element-resizer/vanilla/index.js";
-import { c as ie, a as re } from "../canvas-DeZ0SLUJ.js";
-import { CanvasElement as ne } from "../canvas/index.js";
-import { ticker as D } from "../ticker/vanilla/index.js";
-let oe = 0;
-var u, o, g, x, d, M, C, c, A, R, O, F, $, U;
-class N extends HTMLElement {
+import { k as pe, g as be } from "../string-f0Dnk0L1.js";
+import { loading as se } from "../loading/index.js";
+import { CSSProperty as D } from "../css-property/index.js";
+import { elementResizer as ce } from "../element-resizer/vanilla/index.js";
+import { c as ye, a as ge } from "../canvas-DeZ0SLUJ.js";
+import { CanvasElement as Ee } from "../canvas/index.js";
+import { ticker as ie } from "../ticker/vanilla/index.js";
+let ve = 0;
+var d, o, E, V, f, H, S, u, U, z, v, _, j, X, q, G;
+class ee extends HTMLElement {
   constructor() {
     super();
-    i(this, R);
-    i(this, u, null);
-    i(this, o, null);
-    i(this, g, !1);
-    i(this, x, !1);
-    i(this, d, !1);
-    i(this, M, "");
-    i(this, C, "");
-    i(this, c, new te(this, {
+    s(this, _);
+    s(this, d, null);
+    s(this, o, null);
+    s(this, E, !1);
+    s(this, V, !1);
+    s(this, f, !1);
+    s(this, H, "");
+    s(this, S, "");
+    s(this, u, new fe(this, {
       loading: !1,
       loaded: !1,
-      error: !1
+      error: !1,
+      clear: !1
     }));
-    i(this, A, null);
-    i(this, F, (t) => {
-      const n = t[0];
-      e(this, d) && (!e(this, x) || this.hasAttribute("reload-source")) && n.isIntersecting && this.triggerLazyLoad(), n.isIntersecting ? K(this, "sourceCapture", { custom: !0 }) : (this.hasAttribute("reload-source") && q(this, R, O).call(this, void 0), K(this, "sourceRelease", { custom: !0 }));
+    s(this, U, null);
+    s(this, z);
+    s(this, v, null);
+    s(this, X, (t) => {
+      const i = t[0];
+      e(this, f) && (!e(this, V) || this.hasAttribute("reload-source")) && i.isIntersecting && this.triggerLazyLoad(), i.isIntersecting ? K(this, "sourceCapture", { custom: !0 }) : (this.hasAttribute("reload-source") && T(this, _, j).call(this, void 0), K(this, "sourceRelease", { custom: !0 }));
     });
-    i(this, $, () => {
-      e(this, c).set("loaded", !0), e(this, c).set("error", !1), e(this, c).set("loading", !1), !e(this, d) && !e(this, g) && j.complete(e(this, C)), a(this, g, !0);
+    s(this, q, () => {
+      e(this, u).set("loaded", !0), e(this, u).set("error", !1), e(this, u).set("loading", !1), !e(this, f) && !e(this, E) && se.complete(e(this, S));
+      const t = getComputedStyle(this).getPropertyValue("--clear-duration");
+      t && n(this, z, setTimeout(() => {
+        e(this, u).set("clear", !0);
+      }, parseFloat(t) * 1e3)), n(this, E, !0);
     });
-    i(this, U, (t) => {
-      e(this, c).set("loaded", !1), e(this, c).set("error", !0), e(this, c).set("loading", !1), !e(this, d) && !e(this, g) && j.error(e(this, C)), a(this, g, !0);
+    s(this, G, (t) => {
+      e(this, u).set("loaded", !1), e(this, u).set("error", !0), e(this, u).set("loading", !1), !e(this, f) && !e(this, E) && se.error(e(this, S)), n(this, E, !0);
     });
-    Q && window.IntersectionObserver && (a(this, M, `source-consumer-${++oe}`), a(this, A, new IntersectionObserver(
-      e(this, F)
+    ue && window.IntersectionObserver && (n(this, H, `source-consumer-${++ve}`), n(this, U, new IntersectionObserver(
+      e(this, X)
     )));
   }
   get consumerElement() {
     return e(this, o);
   }
   get sourceManager() {
-    return e(this, u);
+    return e(this, d);
   }
   get status() {
-    return e(this, c);
+    return e(this, u);
   }
   get isLazy() {
-    return e(this, d);
+    return e(this, f);
+  }
+  get currentURL() {
+    return e(this, v);
   }
   triggerLazyLoad() {
-    e(this, u).current && e(this, u).current !== e(this, u).previous && q(this, R, O).call(this, e(this, u).current), a(this, x, !0);
+    e(this, d).current && e(this, d).current !== e(this, d).previous && T(this, _, j).call(this, e(this, d).current), n(this, V, !0);
   }
   connectedCallback() {
     const t = this.getAttribute("srcset");
-    t && (a(this, o, this.createConsumer()), e(this, o).style.cssText = `
+    t && (n(this, o, this.createConsumer()), e(this, o).style.cssText = `
         display: block;
         width: 100%;
         height: 100%;
-      `, e(this, o).classList.add("source-consumer"), Array.from(this.attributes).forEach((n) => {
-      if (n.name !== "srcset") {
-        const l = n.nodeValue || "", S = se(n.name);
-        S in e(this, o) && (e(this, o)[S] = l || !0);
+      `, e(this, o).classList.add("source-consumer"), Array.from(this.attributes).forEach((i) => {
+      if (i.name !== "srcset") {
+        const c = i.nodeValue || "", b = pe(i.name);
+        b in e(this, o) && (e(this, o)[b] = c || !0);
       }
-    }), this.appendChild(e(this, o)), a(this, u, new ee({
+    }), this.appendChild(e(this, o)), n(this, d, new me({
       srcset: t
-    })), a(this, d, this.hasAttribute("lazy")), e(this, u).subscribe((n) => {
-      (!e(this, d) || e(this, d) && e(this, x)) && q(this, R, O).call(this, n.current);
-    }), e(this, A).observe(this), e(this, u).connect());
+    })), n(this, f, this.hasAttribute("lazy")), e(this, d).subscribe((i) => {
+      (!e(this, f) || e(this, f) && e(this, V)) && T(this, _, j).call(this, i.current);
+    }), e(this, U).observe(this), e(this, d).connect());
   }
   disconnectedCallback() {
-    e(this, A).disconnect(), e(this, u).close(), e(this, o).onloadeddata = null, e(this, o).onload = null, e(this, o).onerror = null, e(this, o).remove(), e(this, c).reset();
+    e(this, U).disconnect(), e(this, d).close(), e(this, o).onloadeddata = null, e(this, o).onload = null, e(this, o).onerror = null, e(this, o).remove(), e(this, u).reset(), clearTimeout(e(this, z));
   }
 }
-u = new WeakMap(), o = new WeakMap(), g = new WeakMap(), x = new WeakMap(), d = new WeakMap(), M = new WeakMap(), C = new WeakMap(), c = new WeakMap(), A = new WeakMap(), R = new WeakSet(), O = function(t) {
-  if (e(this, o).onloadeddata = null, e(this, o).onload = null, e(this, o).onerror = null, e(this, c).set("loaded", !1), e(this, c).set("error", !1), e(this, c).set("loading", !1), t) {
-    a(this, C, `${e(this, M)}-${t.url}`);
-    const n = this.hasAttribute("keep-source-parameters");
-    e(this, c).set("loading", !0);
-    const l = n ? t.url : t.name + t.extension;
-    this.consumeSource(l), !e(this, d) && !e(this, g) && j.add(e(this, C)), e(this, o).onloadeddata = () => {
-      e(this, $).call(this);
+d = new WeakMap(), o = new WeakMap(), E = new WeakMap(), V = new WeakMap(), f = new WeakMap(), H = new WeakMap(), S = new WeakMap(), u = new WeakMap(), U = new WeakMap(), z = new WeakMap(), v = new WeakMap(), _ = new WeakSet(), j = function(t) {
+  if (clearTimeout(e(this, z)), e(this, o).onloadeddata = null, e(this, o).onload = null, e(this, o).onerror = null, e(this, u).set("loaded", !1), e(this, u).set("error", !1), e(this, u).set("loading", !1), e(this, u).set("clear", !1), t) {
+    n(this, S, `${e(this, H)}-${t.url}`);
+    const i = this.hasAttribute("keep-source-parameters");
+    e(this, u).set("loading", !0), n(this, v, i ? t.url : t.name + t.extension), this.consumeSource(e(this, v)), !e(this, f) && !e(this, E) && se.add(e(this, S)), e(this, o).onloadeddata = () => {
+      e(this, q).call(this);
     }, e(this, o).onload = () => {
-      e(this, $).call(this);
+      e(this, q).call(this);
     }, e(this, o).onerror = () => {
-      e(this, U).call(this, l);
+      e(this, G).call(this, e(this, v));
     };
   } else
-    this.consumeSource(null);
-}, F = new WeakMap(), $ = new WeakMap(), U = new WeakMap();
-class ae extends N {
+    n(this, v, null), this.consumeSource(null);
+}, X = new WeakMap(), q = new WeakMap(), G = new WeakMap();
+class we extends ee {
   createConsumer() {
     return document.createElement("img");
   }
-  consumeSource(s) {
-    if (s && this.hasAttribute("webp") && _.isWebp) {
-      const t = s.split(".").slice(0, -1).join(".") + ".webp";
+  consumeSource(r) {
+    if (r && this.hasAttribute("webp") && de.isWebp) {
+      const t = r.split(".").slice(0, -1).join(".") + ".webp";
       this.consumerElement.src = t;
     } else
-      this.consumerElement.src = s || "";
+      this.consumerElement.src = r || "";
   }
 }
-customElements.get("e-image") || customElements.define("e-image", ae);
-function he(r) {
-  const s = r.match(/\{([\d-]+)\}/);
-  if (s) {
-    const t = s[1].split("-");
+customElements.get("e-image") || customElements.define("e-image", we);
+function Le(a) {
+  const r = a.match(/\{([\d-]+)\}/);
+  if (r) {
+    const t = r[1].split("-");
     if (t.length === 2) {
-      const n = parseInt(t[0], 10), l = parseInt(t[1], 10);
-      return { start: n, end: l };
+      const i = parseInt(t[0], 10), c = parseInt(t[1], 10);
+      return { start: i, end: c };
     }
   }
   return null;
 }
-var f, w, P, E, v, L, k, H, p, y;
-class ce extends N {
+var p, R, B, w, L, I, A, F, y, C;
+class Ce extends ee {
   constructor(t) {
     super();
-    i(this, f, []);
-    i(this, w, new B(
+    s(this, p, []);
+    s(this, R, new D(
       this,
       "--fit",
       "contain"
     ));
-    i(this, P, new B(this, "--autoplay", !1));
-    i(this, E, new B(this, "--offset-x", 0.5));
-    i(this, v, new B(this, "--offset-y", 0.5));
-    i(this, L, null);
-    i(this, k, 0);
-    i(this, H, 1);
-    i(this, p, () => {
-      if (e(this, f).length) {
-        const t = e(this, f)[0];
-        e(this, w).current === "cover" ? a(this, L, ie(
+    s(this, B, new D(this, "--autoplay", !1));
+    s(this, w, new D(this, "--offset-x", 0.5));
+    s(this, L, new D(this, "--offset-y", 0.5));
+    s(this, I, null);
+    s(this, A, 0);
+    s(this, F, 1);
+    s(this, y, () => {
+      if (e(this, p).length) {
+        const t = e(this, p)[0];
+        e(this, R).current === "cover" ? n(this, I, ye(
           t.naturalWidth,
           t.naturalHeight,
           this.consumerElement.width,
           this.consumerElement.height,
-          e(this, E).current,
-          e(this, v).current
-        )) : a(this, L, re(
+          e(this, w).current,
+          e(this, L).current
+        )) : n(this, I, ge(
           t.naturalWidth,
           t.naturalHeight,
           this.consumerElement.width,
           this.consumerElement.height,
-          e(this, E).current,
-          e(this, v).current
+          e(this, w).current,
+          e(this, L).current
         ));
       }
     });
-    i(this, y, (t) => {
-      if (this.status.isFalse("loaded") || !e(this, L))
+    s(this, C, (t) => {
+      if (this.status.isFalse("loaded") || !e(this, I))
         return;
       t.detail.context.clearRect(0, 0, t.detail.width, t.detail.height);
-      const n = e(this, f)[e(this, k)];
-      n && t.detail.context.drawImage(n, ...e(this, L)), e(this, P).current && a(this, k, (e(this, k) + 1) % e(this, f).length);
+      const i = e(this, p)[e(this, A)];
+      i && t.detail.context.drawImage(i, ...e(this, I)), e(this, B).current && n(this, A, (e(this, A) + 1) % e(this, p).length);
     });
-    Q && (a(this, H, parseInt(
+    ue && (n(this, F, parseInt(
       ((t == null ? void 0 : t.pad) || this.getAttribute("pad") || "1").toString()
-    )), e(this, w).subscribe(e(this, p)), e(this, E).subscribe(e(this, p)), e(this, v).subscribe(e(this, p)), this.addEventListener("sourceCapture", (n) => {
+    )), e(this, R).subscribe(e(this, y)), e(this, w).subscribe(e(this, y)), e(this, L).subscribe(e(this, y)), this.addEventListener("sourceCapture", (i) => {
       this.consumerElement.addEventListener(
         "canvasRender",
-        e(this, y)
+        e(this, C)
       );
-    }), this.addEventListener("sourceRelease", (n) => {
+    }), this.addEventListener("sourceRelease", (i) => {
       this.consumerElement.removeEventListener(
         "canvasRender",
-        e(this, y)
+        e(this, C)
       );
     }));
   }
   setProgress(t) {
-    e(this, f).length && a(this, k, Math.floor((e(this, f).length - 1) * t));
+    e(this, p).length && n(this, A, Math.floor((e(this, p).length - 1) * t));
   }
   connectedCallback() {
-    super.connectedCallback(), e(this, P).observe(), e(this, w).observe(), e(this, E).observe(), e(this, v).observe(), J.subscribe(this, e(this, p));
+    super.connectedCallback(), e(this, B).observe(), e(this, R).observe(), e(this, w).observe(), e(this, L).observe(), ce.subscribe(this, e(this, y));
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), e(this, P).unobserve(), e(this, w).unobserve(), e(this, E).unobserve(), e(this, v).unobserve(), a(this, f, []), J.unsubscribe(e(this, p)), this.consumerElement.removeEventListener(
+    super.disconnectedCallback(), e(this, B).unobserve(), e(this, R).unobserve(), e(this, w).unobserve(), e(this, L).unobserve(), n(this, p, []), ce.unsubscribe(e(this, y)), this.consumerElement.removeEventListener(
       "canvasRender",
-      e(this, y)
+      e(this, C)
     );
   }
   createConsumer() {
-    return new ne();
+    return new Ee();
   }
   consumeSource(t) {
-    return G(this, null, function* () {
-      var n, l, S, T;
+    return he(this, null, function* () {
+      var i, c, b, O;
       if (t) {
         this.consumerElement.removeEventListener(
           "canvasRender",
-          e(this, y)
+          e(this, C)
         );
-        const b = [], m = he(t);
+        const g = [], m = Le(t);
         if (m)
-          for (let h = m.start; h <= m.end; h++) {
-            const X = t.replace(
+          for (let l = m.start; l <= m.end; l++) {
+            const ae = t.replace(
               /\{([^}]+)\}/,
-              h.toString().padStart(e(this, H), "0")
-            ), W = new Image();
-            W.src = X, b.push(W);
+              l.toString().padStart(e(this, F), "0")
+            ), Y = new Image();
+            Y.src = ae, g.push(Y);
           }
         else {
-          const h = new Image();
-          h.src = t, b.push(h);
+          const l = new Image();
+          l.src = t, g.push(l);
         }
         try {
           yield Promise.all(
-            b.map((h, X) => new Promise((W, Z) => {
-              h.onload = () => {
-                W();
-              }, h.onerror = (ue) => {
-                Z(`${h.src} Image not found`);
+            g.map((l, ae) => new Promise((Y, le) => {
+              l.onload = () => {
+                Y();
+              }, l.onerror = (Re) => {
+                le(`${l.src} Image not found`);
               };
             }))
-          ), a(this, f, b), e(this, p).call(this), (l = (n = this.consumerElement).onload) == null || l.call(n, new Event("load")), this.isLazy || this.consumerElement.addEventListener(
+          ), n(this, p, g), e(this, y).call(this), (c = (i = this.consumerElement).onload) == null || c.call(i, new Event("load")), this.isLazy || this.consumerElement.addEventListener(
             "canvasRender",
-            e(this, y)
+            e(this, C)
           );
-        } catch (h) {
-          console.error(h), (T = (S = this.consumerElement).onerror) == null || T.call(S, new Event("error"));
+        } catch (l) {
+          console.error(l), (O = (b = this.consumerElement).onerror) == null || O.call(b, new Event("error"));
         }
       }
     });
   }
 }
-f = new WeakMap(), w = new WeakMap(), P = new WeakMap(), E = new WeakMap(), v = new WeakMap(), L = new WeakMap(), k = new WeakMap(), H = new WeakMap(), p = new WeakMap(), y = new WeakMap();
-customElements.get("e-sequence") || customElements.define("e-sequence", ce);
-var I, z;
-class le extends N {
+p = new WeakMap(), R = new WeakMap(), B = new WeakMap(), w = new WeakMap(), L = new WeakMap(), I = new WeakMap(), A = new WeakMap(), F = new WeakMap(), y = new WeakMap(), C = new WeakMap();
+customElements.get("e-sequence") || customElements.define("e-sequence", Ce);
+var k, M;
+class Se extends ee {
   constructor() {
     super(...arguments);
-    i(this, I, 0);
-    i(this, z, () => {
+    s(this, k, 0);
+    s(this, M, () => {
       this.classList.add(`state-${this.consumerElement.readyState}`);
       const t = this.consumerElement.readyState / 4;
-      t > e(this, I) && a(this, I, t), K(this, "videoReadyStateChange", {
+      t > e(this, k) && n(this, k, t), K(this, "videoReadyStateChange", {
         detail: {
           readyState: this.consumerElement.readyState,
-          progress: e(this, I)
+          progress: e(this, k)
         }
-      }), this.consumerElement.readyState === 4 && D.unsubscribe(e(this, z));
+      }), this.consumerElement.readyState === 4 && ie.unsubscribe(e(this, M));
     });
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("sourceCapture", () => {
-      D.subscribe(e(this, z)), this.hasAttribute("capture-autoplay") && this.consumerElement.play();
+      ie.subscribe(e(this, M)), this.hasAttribute("capture-autoplay") && this.consumerElement.play();
     }), this.addEventListener("sourceRelease", () => {
       this.hasAttribute("capture-autoplay") && (this.consumerElement.pause(), this.hasAttribute("replay") && (this.consumerElement.currentTime = 0)), this.hasAttribute("reload-source") && this.classList.remove(
         "state-0",
@@ -285,7 +293,7 @@ class le extends N {
     });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), D.unsubscribe(e(this, z)), a(this, I, 0);
+    super.disconnectedCallback(), ie.unsubscribe(e(this, M)), n(this, k, 0);
   }
   createConsumer() {
     return document.createElement("video");
@@ -294,11 +302,79 @@ class le extends N {
     this.consumerElement.src = t || "", this.consumerElement.autoplay = !0;
   }
 }
-I = new WeakMap(), z = new WeakMap();
-customElements.get("e-video") || customElements.define("e-video", le);
+k = new WeakMap(), M = new WeakMap();
+customElements.get("e-video") || customElements.define("e-video", Se);
+var h, W, P, $, J, Q, Z, N, ne;
+const x = class x extends ee {
+  constructor() {
+    super();
+    s(this, N);
+    s(this, h);
+    s(this, W);
+    s(this, P, !1);
+    s(this, $, () => {
+      n(this, P, this.hasAttribute("autoplay") && !this.hasAttribute("capture-autoplay")), n(this, h, new window.YT.Player(e(this, W), {
+        playerVars: {
+          mute: this.hasAttribute("muted") ? 1 : 0,
+          controls: this.hasAttribute("controls") ? 1 : 0
+        },
+        events: {
+          onReady: e(this, J),
+          onError: e(this, Q),
+          onStateChange: e(this, Z)
+        }
+      }));
+    });
+    s(this, J, () => {
+      T(this, N, ne).call(this);
+    });
+    s(this, Q, (t) => {
+      var i, c;
+      console.error("YouTube: Ошибка при загрузке видео:", this.currentURL, t), (c = (i = this.consumerElement).onerror) == null || c.call(i, new Event("error"));
+    });
+    s(this, Z, () => {
+    });
+    n(this, W, "yt-" + be(10)), x.__apiReady || (window.onYouTubeIframeAPIReady = () => {
+      x.__apiReady = !0, K(window, "youTubeIframeAPIReady");
+    }), this.addEventListener("sourceCapture", () => {
+      this.hasAttribute("capture-autoplay") && (e(this, h) ? e(this, h).playVideo() : n(this, P, !0));
+    }), this.addEventListener("sourceRelease", () => {
+      e(this, h) && this.hasAttribute("capture-autoplay") && (e(this, h).pauseVideo(), this.hasAttribute("replay") && e(this, h).seekTo(0));
+    });
+  }
+  static __onYouTubeIframeAPIReady() {
+    this.__apiReady = !0;
+  }
+  createConsumer() {
+    const t = document.createElement("div");
+    return t.id = e(this, W), t;
+  }
+  consumeSource(t) {
+    var i;
+    if (t) {
+      if (!document.getElementById("youtube-script")) {
+        const c = document.createElement("script");
+        c.id, c.src = "https://www.youtube.com/iframe_api";
+        const b = document.getElementsByTagName("script")[0];
+        (i = b.parentNode) == null || i.insertBefore(c, b);
+      }
+      e(this, h) ? T(this, N, ne).call(this) : x.__apiReady ? e(this, $).call(this) : addEventListener("youTubeIframeAPIReady", e(this, $));
+    } else e(this, h) && e(this, h).stopVideo();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), e(this, h) && e(this, h).destroy(), removeEventListener("youTubeIframeAPIReady", e(this, $));
+  }
+};
+h = new WeakMap(), W = new WeakMap(), P = new WeakMap(), $ = new WeakMap(), J = new WeakMap(), Q = new WeakMap(), Z = new WeakMap(), N = new WeakSet(), ne = function() {
+  var t, i;
+  this.currentURL && (this.currentURL.startsWith("http") ? e(this, h).loadVideoByUrl(this.currentURL) : e(this, h).loadVideoById(this.currentURL)), e(this, P) ? e(this, h).playVideo() : e(this, h).stopVideo(), n(this, P, !1), (i = (t = this.consumerElement).onload) == null || i.call(t, new Event("load"));
+}, x.__apiReady = !1;
+let re = x;
+customElements.get("e-youtube") || customElements.define("e-youtube", re);
 export {
-  ae as ImageElement,
-  ce as SequenceElement,
-  N as SourceElement,
-  le as VideoElement
+  we as ImageElement,
+  Ce as SequenceElement,
+  ee as SourceElement,
+  Se as VideoElement,
+  re as YouTubeElement
 };

package/lib/media-elements/source/index.d.ts

@@ -14,8 +14,10 @@ export declare abstract class SourceElement<T extends HTMLElement> extends HTMLE
         loading: false;
         loaded: false;
         error: false;
+        clear: false;
     }>;
     get isLazy(): boolean;
+    get currentURL(): string | null;
     triggerLazyLoad(): void;
     protected abstract createConsumer(): T;
     protected abstract consumeSource(url: string | null): void;

package/lib/media-elements/youtube/index.d.ts

@@ -0,0 +1,23 @@
+import { SourceElement } from '../source';
+
+export declare class YouTubeElement extends SourceElement<HTMLDivElement> {
+    #private;
+    static __apiReady: boolean;
+    static __onYouTubeIframeAPIReady(): void;
+    constructor();
+    protected createConsumer(): HTMLDivElement;
+    protected consumeSource(id: string | null): void;
+    protected disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        onYouTubeIframeAPIReady: () => void;
+        YT: any;
+    }
+    interface WindowEventMap {
+        youTubeIframeAPIReady: CustomEvent;
+    }
+    interface HTMLElementTagNameMap {
+        'e-youtube': YouTubeElement;
+    }
+}

package/lib/source/index.cjs

@@ -1 +1 @@
-"use strict";var b=a=>{throw TypeError(a)};var T=(a,e,t)=>e.has(a)||b("Cannot "+t);var s=(a,e,t)=>(T(a,e,"read from private field"),t?t.call(a):e.get(a)),o=(a,e,t)=>e.has(a)?b("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(a):e.set(a,t),n=(a,e,t,r)=>(T(a,e,"write to private field"),r?r.call(a,t):e.set(a,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../order/index.cjs"),_=require("../window-resizer/vanilla/index.cjs"),B=require("../Store-CDb6RMce.cjs");var g,f,q,d,c,u,w;class k{constructor(e){o(this,g);o(this,f);o(this,q);o(this,d);o(this,c);o(this,u);o(this,w);n(this,g,e);const t=e.indexOf("?");t>=0&&(e=e.slice(0,t));const r=e.split(".");n(this,f,r.slice(0,-1).join("."));const x=/\d+x/g,h=r.find(m=>m.match(x));n(this,q,h?parseInt(h):1);const y=/\d+max/g,S=/\d+min/g,i=/\d+mar/g,l=/\d+mir/g,E=r.find(m=>m.match(y)),I=r.find(m=>m.match(S)),V=r.find(m=>m.match(i)),$=r.find(m=>m.match(l));V?(n(this,c,parseInt(V)),n(this,u,"max"),n(this,d,`(max-aspect-ratio: ${s(this,c)})`)):$?(n(this,c,parseInt($)),n(this,u,"max"),n(this,d,`(min-aspect-ratio: ${s(this,c)})`)):E?(n(this,c,parseInt(E)),n(this,u,"max"),n(this,d,`(max-width: ${s(this,c)}px)`)):I?(n(this,c,parseInt(I)),n(this,d,`(min-width: ${s(this,c)}px)`),n(this,u,"min")):(n(this,c,0),n(this,d,`(min-width: ${s(this,c)}px)`),n(this,u,"min")),n(this,f,s(this,f).replace(`.${s(this,c)}${s(this,u)}`,"")),n(this,w,"."+r[r.length-1])}get url(){return s(this,g)}get name(){return s(this,f)}get density(){return s(this,q)}get query(){return s(this,d)}get extension(){return s(this,w)}get queryType(){return s(this,u)}get queryValue(){return s(this,c)}}g=new WeakMap,f=new WeakMap,q=new WeakMap,d=new WeakMap,c=new WeakMap,u=new WeakMap,w=new WeakMap;var p;class z{constructor(e){o(this,p);n(this,p,new Map);const t=typeof e=="string"?e.trim().split(",").map(i=>i.trim()).filter(i=>!!i):e,r=[];t.forEach(i=>{const l=new k(i);r.push([l.query,l])});const x=r.filter(i=>i[1].queryType.includes("max")).sort((i,l)=>l[1].queryValue-i[1].queryValue),h=r.filter(i=>i[1].queryType.includes("min")&&i[1].queryValue!==0).sort((i,l)=>i[1].queryValue-l[1].queryValue),y=r.filter(i=>i[0]==="(min-width: 0px)");(y?[...y,...x,...h]:[...x,...h]).forEach(i=>{s(this,p).has(i[0])||s(this,p).set(i[0],[]),s(this,p).get(i[0]).push(i[1])})}get mediaBuckets(){return s(this,p)}}p=new WeakMap;var R,M;class O extends B.Store{constructor(t){super(void 0);o(this,R);o(this,M,()=>{let t;s(this,R).mediaBuckets.forEach((h,y)=>{matchMedia(y).matches&&(t=h)});let r,x=0;t==null||t.forEach(h=>{h.density>x&&h.density<=Math.max(devicePixelRatio,1)&&(x=h.density,r=h)}),t!=null&&t.length&&!r&&(r=t[0]),this.current=r});n(this,R,new z(t.srcset))}close(){super.close(),this.disconnect()}connect(){_.windowResizer.subscribe(s(this,M),A.RESIZE_ORDER.SOURCE_MANAGER)}disconnect(){_.windowResizer.unsubscribe(s(this,M))}}R=new WeakMap,M=new WeakMap;exports.Source=k;exports.SourceManager=O;exports.SourceSet=z;
+"use strict";var b=r=>{throw TypeError(r)};var I=(r,n,t)=>n.has(r)||b("Cannot "+t);var e=(r,n,t)=>(I(r,n,"read from private field"),t?t.call(r):n.get(r)),o=(r,n,t)=>n.has(r)?b("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(r):n.set(r,t),i=(r,n,t,h)=>(I(r,n,"write to private field"),h?h.call(r,t):n.set(r,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("../order/index.cjs"),T=require("../window-resizer/vanilla/index.cjs"),A=require("../Store-CDb6RMce.cjs");var q,x,w,d,a,u,f;class _{constructor(n){o(this,q);o(this,x);o(this,w);o(this,d);o(this,a);o(this,u);o(this,f);i(this,q,n);const t=n.split(".");i(this,x,t.length>1?t.slice(0,-1).join("."):t.join("."));const h=/\d+x/g,p=t.find(l=>l.match(h));i(this,w,p?parseInt(p):1);const c=/\d+max/g,g=/\d+min/g,S=/\d+mar/g,s=/\d+mir/g,m=t.find(l=>l.match(c)),E=t.find(l=>l.match(g)),$=t.find(l=>l.match(S)),V=t.find(l=>l.match(s));$?(i(this,a,parseInt($)),i(this,u,"max"),i(this,d,`(max-aspect-ratio: ${e(this,a)})`)):V?(i(this,a,parseInt(V)),i(this,u,"max"),i(this,d,`(min-aspect-ratio: ${e(this,a)})`)):m?(i(this,a,parseInt(m)),i(this,u,"max"),i(this,d,`(max-width: ${e(this,a)}px)`)):E?(i(this,a,parseInt(E)),i(this,d,`(min-width: ${e(this,a)}px)`),i(this,u,"min")):(i(this,a,0),i(this,d,`(min-width: ${e(this,a)}px)`),i(this,u,"min")),i(this,x,e(this,x).replace(`.${e(this,a)}${e(this,u)}`,"")),i(this,f,t[t.length-1]===e(this,x)?"":"."+t[t.length-1]),i(this,f,e(this,f).replace(`.${e(this,a)}${e(this,u)}`,""))}get url(){return e(this,q)}get name(){return e(this,x)}get density(){return e(this,w)}get query(){return e(this,d)}get extension(){return e(this,f)}get queryType(){return e(this,u)}get queryValue(){return e(this,a)}}q=new WeakMap,x=new WeakMap,w=new WeakMap,d=new WeakMap,a=new WeakMap,u=new WeakMap,f=new WeakMap;var y;class k{constructor(n){o(this,y);i(this,y,new Map);const t=typeof n=="string"?n.trim().split(",").map(s=>s.trim()).filter(s=>!!s):n,h=[];t.forEach(s=>{const m=new _(s);h.push([m.query,m])});const p=h.filter(s=>s[1].queryType.includes("max")).sort((s,m)=>m[1].queryValue-s[1].queryValue),c=h.filter(s=>s[1].queryType.includes("min")&&s[1].queryValue!==0).sort((s,m)=>s[1].queryValue-m[1].queryValue),g=h.filter(s=>s[0]==="(min-width: 0px)");(g?[...g,...p,...c]:[...p,...c]).forEach(s=>{e(this,y).has(s[0])||e(this,y).set(s[0],[]),e(this,y).get(s[0]).push(s[1])})}get mediaBuckets(){return e(this,y)}}y=new WeakMap;var R,M;class B extends A.Store{constructor(t){super(void 0);o(this,R);o(this,M,()=>{let t;e(this,R).mediaBuckets.forEach((c,g)=>{matchMedia(g).matches&&(t=c)});let h,p=0;t==null||t.forEach(c=>{c.density>p&&c.density<=Math.max(devicePixelRatio,1)&&(p=c.density,h=c)}),t!=null&&t.length&&!h&&(h=t[0]),this.current=h});i(this,R,new k(t.srcset))}close(){super.close(),this.disconnect()}connect(){T.windowResizer.subscribe(e(this,M),z.RESIZE_ORDER.SOURCE_MANAGER)}disconnect(){T.windowResizer.unsubscribe(e(this,M))}}R=new WeakMap,M=new WeakMap;exports.Source=_;exports.SourceManager=B;exports.SourceSet=k;

package/lib/source/index.js

@@ -1,107 +1,108 @@
-var k = (a) => {
-  throw TypeError(a);
+var b = (r) => {
+  throw TypeError(r);
 };
-var A = (a, e, t) => e.has(a) || k("Cannot " + t);
-var i = (a, e, t) => (A(a, e, "read from private field"), t ? t.call(a) : e.get(a)), o = (a, e, t) => e.has(a) ? k("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), n = (a, e, t, r) => (A(a, e, "write to private field"), r ? r.call(a, t) : e.set(a, t), t);
-import { RESIZE_ORDER as S } from "../order/index.js";
-import { windowResizer as B } from "../window-resizer/vanilla/index.js";
-import { S as T } from "../Store-OTdcl6SX.js";
-var g, x, q, d, h, m, w;
-class O {
-  constructor(e) {
-    o(this, g);
-    o(this, x);
+var k = (r, n, t) => n.has(r) || b("Cannot " + t);
+var e = (r, n, t) => (k(r, n, "read from private field"), t ? t.call(r) : n.get(r)), o = (r, n, t) => n.has(r) ? b("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, t), s = (r, n, t, a) => (k(r, n, "write to private field"), a ? a.call(r, t) : n.set(r, t), t);
+import { RESIZE_ORDER as B } from "../order/index.js";
+import { windowResizer as A } from "../window-resizer/vanilla/index.js";
+import { S } from "../Store-OTdcl6SX.js";
+var q, f, w, p, h, m, y;
+class T {
+  constructor(n) {
     o(this, q);
-    o(this, d);
+    o(this, f);
+    o(this, w);
+    o(this, p);
     o(this, h);
     o(this, m);
-    o(this, w);
-    n(this, g, e);
-    const t = e.indexOf("?");
-    t >= 0 && (e = e.slice(0, t));
-    const r = e.split(".");
-    n(this, x, r.slice(0, -1).join("."));
-    const f = /\d+x/g, c = r.find((u) => u.match(f));
-    n(this, q, c ? parseInt(c) : 1);
-    const y = /\d+max/g, M = /\d+min/g, s = /\d+mar/g, p = /\d+mir/g, I = r.find((u) => u.match(y)), V = r.find((u) => u.match(M)), $ = r.find((u) => u.match(s)), b = r.find((u) => u.match(p));
-    $ ? (n(this, h, parseInt($)), n(this, m, "max"), n(this, d, `(max-aspect-ratio: ${i(this, h)})`)) : b ? (n(this, h, parseInt(b)), n(this, m, "max"), n(this, d, `(min-aspect-ratio: ${i(this, h)})`)) : I ? (n(this, h, parseInt(I)), n(this, m, "max"), n(this, d, `(max-width: ${i(this, h)}px)`)) : V ? (n(this, h, parseInt(V)), n(this, d, `(min-width: ${i(this, h)}px)`), n(this, m, "min")) : (n(this, h, 0), n(this, d, `(min-width: ${i(this, h)}px)`), n(this, m, "min")), n(this, x, i(this, x).replace(
-      `.${i(this, h)}${i(this, m)}`,
+    o(this, y);
+    s(this, q, n);
+    const t = n.split(".");
+    s(this, f, t.length > 1 ? t.slice(0, -1).join(".") : t.join("."));
+    const a = /\d+x/g, d = t.find((l) => l.match(a));
+    s(this, w, d ? parseInt(d) : 1);
+    const c = /\d+max/g, g = /\d+min/g, $ = /\d+mar/g, i = /\d+mir/g, u = t.find((l) => l.match(c)), M = t.find((l) => l.match(g)), V = t.find((l) => l.match($)), I = t.find((l) => l.match(i));
+    V ? (s(this, h, parseInt(V)), s(this, m, "max"), s(this, p, `(max-aspect-ratio: ${e(this, h)})`)) : I ? (s(this, h, parseInt(I)), s(this, m, "max"), s(this, p, `(min-aspect-ratio: ${e(this, h)})`)) : u ? (s(this, h, parseInt(u)), s(this, m, "max"), s(this, p, `(max-width: ${e(this, h)}px)`)) : M ? (s(this, h, parseInt(M)), s(this, p, `(min-width: ${e(this, h)}px)`), s(this, m, "min")) : (s(this, h, 0), s(this, p, `(min-width: ${e(this, h)}px)`), s(this, m, "min")), s(this, f, e(this, f).replace(
+      `.${e(this, h)}${e(this, m)}`,
       ""
-    )), n(this, w, "." + r[r.length - 1]);
+    )), s(this, y, t[t.length - 1] === e(this, f) ? "" : "." + t[t.length - 1]), s(this, y, e(this, y).replace(
+      `.${e(this, h)}${e(this, m)}`,
+      ""
+    ));
   }
   get url() {
-    return i(this, g);
+    return e(this, q);
   }
   get name() {
-    return i(this, x);
+    return e(this, f);
   }
   get density() {
-    return i(this, q);
+    return e(this, w);
   }
   get query() {
-    return i(this, d);
+    return e(this, p);
   }
   get extension() {
-    return i(this, w);
+    return e(this, y);
   }
   get queryType() {
-    return i(this, m);
+    return e(this, m);
   }
   get queryValue() {
-    return i(this, h);
+    return e(this, h);
   }
 }
-g = new WeakMap(), x = new WeakMap(), q = new WeakMap(), d = new WeakMap(), h = new WeakMap(), m = new WeakMap(), w = new WeakMap();
-var l;
+q = new WeakMap(), f = new WeakMap(), w = new WeakMap(), p = new WeakMap(), h = new WeakMap(), m = new WeakMap(), y = new WeakMap();
+var x;
 class P {
-  constructor(e) {
-    o(this, l);
-    n(this, l, /* @__PURE__ */ new Map());
-    const t = typeof e == "string" ? e.trim().split(",").map((s) => s.trim()).filter((s) => !!s) : e, r = [];
-    t.forEach((s) => {
-      const p = new O(s);
-      r.push([p.query, p]);
+  constructor(n) {
+    o(this, x);
+    s(this, x, /* @__PURE__ */ new Map());
+    const t = typeof n == "string" ? n.trim().split(",").map((i) => i.trim()).filter((i) => !!i) : n, a = [];
+    t.forEach((i) => {
+      const u = new T(i);
+      a.push([u.query, u]);
     });
-    const f = r.filter((s) => s[1].queryType.includes("max")).sort((s, p) => p[1].queryValue - s[1].queryValue), c = r.filter((s) => s[1].queryType.includes("min") && s[1].queryValue !== 0).sort((s, p) => s[1].queryValue - p[1].queryValue), y = r.filter((s) => s[0] === "(min-width: 0px)");
-    (y ? [...y, ...f, ...c] : [...f, ...c]).forEach((s) => {
-      i(this, l).has(s[0]) || i(this, l).set(s[0], []), i(this, l).get(s[0]).push(s[1]);
+    const d = a.filter((i) => i[1].queryType.includes("max")).sort((i, u) => u[1].queryValue - i[1].queryValue), c = a.filter((i) => i[1].queryType.includes("min") && i[1].queryValue !== 0).sort((i, u) => i[1].queryValue - u[1].queryValue), g = a.filter((i) => i[0] === "(min-width: 0px)");
+    (g ? [...g, ...d, ...c] : [...d, ...c]).forEach((i) => {
+      e(this, x).has(i[0]) || e(this, x).set(i[0], []), e(this, x).get(i[0]).push(i[1]);
     });
   }
   get mediaBuckets() {
-    return i(this, l);
+    return e(this, x);
   }
 }
-l = new WeakMap();
+x = new WeakMap();
 var E, R;
-class C extends T {
+class _ extends S {
   constructor(t) {
     super(void 0);
     o(this, E);
     o(this, R, () => {
       let t;
-      i(this, E).mediaBuckets.forEach((c, y) => {
-        matchMedia(y).matches && (t = c);
+      e(this, E).mediaBuckets.forEach((c, g) => {
+        matchMedia(g).matches && (t = c);
       });
-      let r, f = 0;
+      let a, d = 0;
       t == null || t.forEach((c) => {
-        c.density > f && c.density <= Math.max(devicePixelRatio, 1) && (f = c.density, r = c);
-      }), t != null && t.length && !r && (r = t[0]), this.current = r;
+        c.density > d && c.density <= Math.max(devicePixelRatio, 1) && (d = c.density, a = c);
+      }), t != null && t.length && !a && (a = t[0]), this.current = a;
     });
-    n(this, E, new P(t.srcset));
+    s(this, E, new P(t.srcset));
   }
   close() {
     super.close(), this.disconnect();
   }
   connect() {
-    B.subscribe(i(this, R), S.SOURCE_MANAGER);
+    A.subscribe(e(this, R), B.SOURCE_MANAGER);
   }
   disconnect() {
-    B.unsubscribe(i(this, R));
+    A.unsubscribe(e(this, R));
   }
 }
 E = new WeakMap(), R = new WeakMap();
 export {
-  O as Source,
-  C as SourceManager,
+  T as Source,
+  _ as SourceManager,
   P as SourceSet
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aptechka",
-  "version": "0.37.2",
+  "version": "0.38.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/denisavitski/aptechka.git"