@alpha-video-kit/svg 0.3.1 → 0.3.2

package/dist/{canvas-component-zHBwAZuP.js → canvas-component-BJ29dbCJ.js}

@@ -41,36 +41,36 @@ const Y = [
   "resize",
   "volumechange"
 ];
-var s, L, E, O, N, y, T, c, _, G, W;
+var s, L, O, T, N, y, C, c, _, G, W;
 class it extends HTMLElement {
   constructor() {
     super();
     u(this, c);
     u(this, s);
     u(this, L);
-    u(this, E);
     u(this, O);
+    u(this, T);
     u(this, N);
     u(this, y, null);
-    u(this, T);
+    u(this, C);
     const t = this.attachShadow({ mode: "open" });
-    a(this, T, `avk-${Math.random().toString(36).slice(2, 8)}`), t.innerHTML = `<style>
+    a(this, C, `avk-${Math.random().toString(36).slice(2, 8)}`), t.innerHTML = `<style>
 :host{display:inline-block;overflow:hidden}
 svg{display:block;width:100%;height:auto}
 video{display:block;width:100%;height:100%}
 </style>
 <svg viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet">
 <defs>
-<filter id="${e(this, T)}" filterUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<filter id="${e(this, C)}" filterUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
 <feOffset in="SourceGraphic" dy="0" result="s"/>
 <feColorMatrix in="s" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0" result="a"/>
 <feComposite in="SourceGraphic" in2="a" operator="in"/>
 </filter>
 </defs>
-<foreignObject width="1" height="1" filter="url(#${e(this, T)})">
+<foreignObject width="1" height="1" filter="url(#${e(this, C)})">
 <video></video>
 </foreignObject>
-</svg>`, a(this, L, t.querySelector("svg")), a(this, E, t.querySelector("foreignObject")), a(this, O, t.querySelector("filter")), a(this, N, t.querySelector("feOffset")), a(this, s, t.querySelector("video"));
+</svg>`, a(this, L, t.querySelector("svg")), a(this, O, t.querySelector("foreignObject")), a(this, T, t.querySelector("filter")), a(this, N, t.querySelector("feOffset")), a(this, s, t.querySelector("video"));
     for (const r of et)
       e(this, s).addEventListener(r, (o) => {
         this.dispatchEvent(new Event(o.type, { bubbles: !1, cancelable: !1 }));
@@ -203,11 +203,11 @@ video{display:block;width:100%;height:100%}
     return e(this, s).canPlayType(t);
   }
 }
-s = new WeakMap(), L = new WeakMap(), E = new WeakMap(), O = new WeakMap(), N = new WeakMap(), y = new WeakMap(), T = new WeakMap(), c = new WeakSet(), _ = function() {
+s = new WeakMap(), L = new WeakMap(), O = new WeakMap(), T = new WeakMap(), N = new WeakMap(), y = new WeakMap(), C = new WeakMap(), c = new WeakSet(), _ = function() {
   const t = e(this, s).videoWidth, r = e(this, s).videoHeight;
   if (!t || !r) return;
   const o = Math.floor(r / 2);
-  e(this, L).setAttribute("viewBox", `0 0 ${t} ${o}`), e(this, E).setAttribute("width", String(t)), e(this, E).setAttribute("height", String(r)), e(this, O).setAttribute("width", String(t)), e(this, O).setAttribute("height", String(r)), e(this, N).setAttribute("dy", String(-o));
+  e(this, L).setAttribute("viewBox", `0 0 ${t} ${o}`), e(this, O).setAttribute("width", String(t)), e(this, O).setAttribute("height", String(r)), e(this, T).setAttribute("width", String(t)), e(this, T).setAttribute("height", String(r)), e(this, N).setAttribute("dy", String(-o));
 }, G = function(t, r) {
   tt.has(t) ? e(this, s)[t] = r !== null : r === null ? e(this, s).removeAttribute(t) : e(this, s).setAttribute(t, r);
 }, W = function() {
@@ -215,7 +215,7 @@ s = new WeakMap(), L = new WeakMap(), E = new WeakMap(), O = new WeakMap(), N =
     e(this, s).appendChild(t.cloneNode(!0));
   }), e(this, s).querySelectorAll("source").length > 0 && !e(this, s).src && e(this, s).load();
 }, V(it, "observedAttributes", [...Y]);
-const w = "http://www.w3.org/2000/svg", J = [
+const E = "http://www.w3.org/2000/svg", J = [
   "src",
   "crossorigin",
   "preload",
@@ -251,25 +251,25 @@ const w = "http://www.w3.org/2000/svg", J = [
   "resize",
   "volumechange"
 ];
-var i, m, C, g, R, v, A, p, b, f, M, S, k, q, h, B, K, P, D, z, Q, F, U;
+var i, m, R, g, v, A, S, p, b, f, M, k, w, q, h, B, K, P, D, z, Q, F, U;
 class at extends HTMLElement {
   constructor() {
     super();
     u(this, h);
     u(this, i);
     u(this, m);
-    u(this, C);
-    u(this, g);
     u(this, R);
-    u(this, v, null);
+    u(this, g);
+    u(this, v);
     u(this, A, null);
+    u(this, S, null);
     u(this, p, !1);
     u(this, b, 0);
     u(this, f, 0);
     // SVG filter (lives in document.body so ctx.filter url() can resolve it)
     u(this, M);
-    u(this, S, null);
     u(this, k, null);
+    u(this, w, null);
     u(this, q, null);
     const t = this.attachShadow({ mode: "open" });
     a(this, M, `avk-c-${Math.random().toString(36).slice(2, 8)}`), t.innerHTML = `<style>
@@ -278,7 +278,7 @@ video{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
 canvas{display:block;width:100%}
 </style>
 <video></video>
-<canvas></canvas>`, a(this, i, t.querySelector("video")), a(this, m, t.querySelector("canvas")), a(this, C, e(this, m).getContext("2d")), a(this, g, document.createElement("canvas")), a(this, R, e(this, g).getContext("2d"));
+<canvas></canvas>`, a(this, i, t.querySelector("video")), a(this, m, t.querySelector("canvas")), a(this, R, e(this, m).getContext("2d")), a(this, g, document.createElement("canvas")), a(this, v, e(this, g).getContext("2d"));
     for (const r of rt)
       e(this, i).addEventListener(r, (o) => {
         this.dispatchEvent(new Event(o.type, { bubbles: !1, cancelable: !1 }));
@@ -288,16 +288,16 @@ canvas{display:block;width:100%}
   connectedCallback() {
     for (const t of J)
       this.hasAttribute(t) && d(this, h, D).call(this, t, this.getAttribute(t));
-    d(this, h, z).call(this), a(this, A, new MutationObserver(() => d(this, h, z).call(this))), e(this, A).observe(this, { childList: !0 }), d(this, h, B).call(this), a(this, v, new IntersectionObserver(
+    d(this, h, z).call(this), a(this, S, new MutationObserver(() => d(this, h, z).call(this))), e(this, S).observe(this, { childList: !0 }), d(this, h, B).call(this), a(this, A, new IntersectionObserver(
       ([t]) => {
         a(this, p, t.isIntersecting), e(this, p) ? d(this, h, Q).call(this) : d(this, h, F).call(this);
       },
       { threshold: 0 }
-    )), e(this, v).observe(this);
+    )), e(this, A).observe(this);
   }
   disconnectedCallback() {
     var t, r;
-    d(this, h, F).call(this), (t = e(this, v)) == null || t.disconnect(), a(this, v, null), (r = e(this, A)) == null || r.disconnect(), a(this, A, null), d(this, h, K).call(this);
+    d(this, h, F).call(this), (t = e(this, A)) == null || t.disconnect(), a(this, A, null), (r = e(this, S)) == null || r.disconnect(), a(this, S, null), d(this, h, K).call(this);
   }
   attributeChangedCallback(t, r, o) {
     d(this, h, D).call(this, t, o);
@@ -416,26 +416,26 @@ canvas{display:block;width:100%}
     return e(this, i).canPlayType(t);
   }
 }
-i = new WeakMap(), m = new WeakMap(), C = new WeakMap(), g = new WeakMap(), R = new WeakMap(), v = new WeakMap(), A = new WeakMap(), p = new WeakMap(), b = new WeakMap(), f = new WeakMap(), M = new WeakMap(), S = new WeakMap(), k = new WeakMap(), q = new WeakMap(), h = new WeakSet(), B = function() {
-  if (e(this, S)) return;
-  const t = document.createElementNS(w, "svg");
+i = new WeakMap(), m = new WeakMap(), R = new WeakMap(), g = new WeakMap(), v = new WeakMap(), A = new WeakMap(), S = new WeakMap(), p = new WeakMap(), b = new WeakMap(), f = new WeakMap(), M = new WeakMap(), k = new WeakMap(), w = new WeakMap(), q = new WeakMap(), h = new WeakSet(), B = function() {
+  if (e(this, k)) return;
+  const t = document.createElementNS(E, "svg");
   t.setAttribute("width", "0"), t.setAttribute("height", "0"), t.style.cssText = "position:absolute;overflow:hidden";
-  const r = document.createElementNS(w, "defs"), o = document.createElementNS(w, "filter");
+  const r = document.createElementNS(E, "defs"), o = document.createElementNS(E, "filter");
   o.id = e(this, M), o.setAttribute("filterUnits", "userSpaceOnUse"), o.setAttribute("x", "0"), o.setAttribute("y", "0"), o.setAttribute("width", "1"), o.setAttribute("height", "1"), o.setAttribute("color-interpolation-filters", "sRGB");
-  const x = document.createElementNS(w, "feOffset");
+  const x = document.createElementNS(E, "feOffset");
   x.setAttribute("in", "SourceGraphic"), x.setAttribute("dy", "0"), x.setAttribute("result", "s");
-  const H = document.createElementNS(w, "feColorMatrix");
+  const H = document.createElementNS(E, "feColorMatrix");
   H.setAttribute("in", "s"), H.setAttribute("type", "matrix"), H.setAttribute("values", "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"), H.setAttribute("result", "a");
-  const I = document.createElementNS(w, "feComposite");
-  I.setAttribute("in", "SourceGraphic"), I.setAttribute("in2", "a"), I.setAttribute("operator", "in"), o.append(x, H, I), r.appendChild(o), t.appendChild(r), document.body.appendChild(t), a(this, S, t), a(this, k, o), a(this, q, x);
+  const I = document.createElementNS(E, "feComposite");
+  I.setAttribute("in", "SourceGraphic"), I.setAttribute("in2", "a"), I.setAttribute("operator", "in"), o.append(x, H, I), r.appendChild(o), t.appendChild(r), document.body.appendChild(t), a(this, k, t), a(this, w, o), a(this, q, x);
 }, K = function() {
   var t;
-  (t = e(this, S)) == null || t.remove(), a(this, S, null), a(this, k, null), a(this, q, null);
+  (t = e(this, k)) == null || t.remove(), a(this, k, null), a(this, w, null), a(this, q, null);
 }, P = function() {
   const t = e(this, i).videoWidth, r = e(this, i).videoHeight;
   if (!t || !r) return;
   const o = Math.floor(r / 2);
-  e(this, m).width = t, e(this, m).height = o, e(this, g).width = t, e(this, g).height = r, d(this, h, B).call(this), e(this, k).setAttribute("width", String(t)), e(this, k).setAttribute("height", String(r)), e(this, q).setAttribute("dy", String(-o));
+  e(this, m).width = t, e(this, m).height = o, e(this, g).width = t, e(this, g).height = r, d(this, h, B).call(this), e(this, w).setAttribute("width", String(t)), e(this, w).setAttribute("height", String(r)), e(this, q).setAttribute("dy", String(-o));
 }, D = function(t, r) {
   st.has(t) ? e(this, i)[t] = r !== null : r === null ? e(this, i).removeAttribute(t) : e(this, i).setAttribute(t, r);
 }, z = function() {
@@ -463,7 +463,7 @@ i = new WeakMap(), m = new WeakMap(), C = new WeakMap(), g = new WeakMap(), R =
   const t = e(this, i).videoWidth, r = e(this, i).videoHeight;
   if (!t || !r) return;
   const o = Math.floor(r / 2);
-  (e(this, g).width !== t || e(this, g).height !== r) && d(this, h, P).call(this), e(this, R).filter = `url(#${e(this, M)})`, e(this, R).drawImage(e(this, i), 0, 0), e(this, C).clearRect(0, 0, t, o), e(this, C).drawImage(e(this, g), 0, 0, t, o, 0, 0, t, o);
+  (e(this, g).width !== t || e(this, g).height !== r) && d(this, h, P).call(this), e(this, v).clearRect(0, 0, t, r), e(this, v).filter = `url(#${e(this, M)})`, e(this, v).drawImage(e(this, i), 0, 0), e(this, R).clearRect(0, 0, t, o), e(this, R).drawImage(e(this, g), 0, 0, t, o, 0, 0, t, o);
 }, V(at, "observedAttributes", [...J]);
 export {
   at as A,

package/dist/{canvas-component-Cu612Agl.cjs → canvas-component-BR3Vuf_h.cjs}

@@ -1,23 +1,23 @@
-"use strict";var tt=Object.defineProperty;var j=n=>{throw TypeError(n)};var et=(n,l,t)=>l in n?tt(n,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[l]=t;var F=(n,l,t)=>et(n,typeof l!="symbol"?l+"":l,t),$=(n,l,t)=>l.has(n)||j("Cannot "+t);var e=(n,l,t)=>($(n,l,"read from private field"),t?t.call(n):l.get(n)),u=(n,l,t)=>l.has(n)?j("Cannot add the same private member more than once"):l instanceof WeakSet?l.add(n):l.set(n,t),a=(n,l,t,r)=>($(n,l,"write to private field"),r?r.call(n,t):l.set(n,t),t),d=(n,l,t)=>($(n,l,"access private method"),t);const K=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],it=new Set(["autoplay","loop","muted","playsinline"]),st=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var s,L,E,O,N,y,C,c,_,G,W;class J extends HTMLElement{constructor(){super();u(this,c);u(this,s);u(this,L);u(this,E);u(this,O);u(this,N);u(this,y,null);u(this,C);const t=this.attachShadow({mode:"open"});a(this,C,`avk-${Math.random().toString(36).slice(2,8)}`),t.innerHTML=`<style>
+"use strict";var tt=Object.defineProperty;var j=n=>{throw TypeError(n)};var et=(n,l,t)=>l in n?tt(n,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[l]=t;var F=(n,l,t)=>et(n,typeof l!="symbol"?l+"":l,t),$=(n,l,t)=>l.has(n)||j("Cannot "+t);var e=(n,l,t)=>($(n,l,"read from private field"),t?t.call(n):l.get(n)),u=(n,l,t)=>l.has(n)?j("Cannot add the same private member more than once"):l instanceof WeakSet?l.add(n):l.set(n,t),a=(n,l,t,r)=>($(n,l,"write to private field"),r?r.call(n,t):l.set(n,t),t),d=(n,l,t)=>($(n,l,"access private method"),t);const K=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],it=new Set(["autoplay","loop","muted","playsinline"]),st=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var s,L,O,C,N,y,T,c,_,G,W;class J extends HTMLElement{constructor(){super();u(this,c);u(this,s);u(this,L);u(this,O);u(this,C);u(this,N);u(this,y,null);u(this,T);const t=this.attachShadow({mode:"open"});a(this,T,`avk-${Math.random().toString(36).slice(2,8)}`),t.innerHTML=`<style>
 :host{display:inline-block;overflow:hidden}
 svg{display:block;width:100%;height:auto}
 video{display:block;width:100%;height:100%}
 </style>
 <svg viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet">
 <defs>
-<filter id="${e(this,C)}" filterUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<filter id="${e(this,T)}" filterUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
 <feOffset in="SourceGraphic" dy="0" result="s"/>
 <feColorMatrix in="s" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0" result="a"/>
 <feComposite in="SourceGraphic" in2="a" operator="in"/>
 </filter>
 </defs>
-<foreignObject width="1" height="1" filter="url(#${e(this,C)})">
+<foreignObject width="1" height="1" filter="url(#${e(this,T)})">
 <video></video>
 </foreignObject>
-</svg>`,a(this,L,t.querySelector("svg")),a(this,E,t.querySelector("foreignObject")),a(this,O,t.querySelector("filter")),a(this,N,t.querySelector("feOffset")),a(this,s,t.querySelector("video"));for(const r of st)e(this,s).addEventListener(r,o=>{this.dispatchEvent(new Event(o.type,{bubbles:!1,cancelable:!1}))});e(this,s).addEventListener("loadedmetadata",()=>d(this,c,_).call(this)),e(this,s).addEventListener("resize",()=>d(this,c,_).call(this))}connectedCallback(){for(const t of K)this.hasAttribute(t)&&d(this,c,G).call(this,t,this.getAttribute(t));d(this,c,W).call(this),a(this,y,new MutationObserver(()=>d(this,c,W).call(this))),e(this,y).observe(this,{childList:!0})}disconnectedCallback(){var t;(t=e(this,y))==null||t.disconnect(),a(this,y,null)}attributeChangedCallback(t,r,o){d(this,c,G).call(this,t,o)}get src(){return e(this,s).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,s).currentSrc}get currentTime(){return e(this,s).currentTime}set currentTime(t){e(this,s).currentTime=t}get duration(){return e(this,s).duration}get paused(){return e(this,s).paused}get ended(){return e(this,s).ended}get readyState(){return e(this,s).readyState}get videoWidth(){return e(this,s).videoWidth}get videoHeight(){return Math.floor(e(this,s).videoHeight/2)}get volume(){return e(this,s).volume}set volume(t){e(this,s).volume=t}get playbackRate(){return e(this,s).playbackRate}set playbackRate(t){e(this,s).playbackRate=t}get defaultPlaybackRate(){return e(this,s).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,s).defaultPlaybackRate=t}get muted(){return e(this,s).muted}set muted(t){e(this,s).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,s).loop}set loop(t){e(this,s).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,s).autoplay}set autoplay(t){e(this,s).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,s).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,s).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,s).buffered}get seekable(){return e(this,s).seekable}get played(){return e(this,s).played}get networkState(){return e(this,s).networkState}get error(){return e(this,s).error}get seeking(){return e(this,s).seeking}play(){return e(this,s).play()}pause(){e(this,s).pause()}load(){e(this,s).load()}canPlayType(t){return e(this,s).canPlayType(t)}}s=new WeakMap,L=new WeakMap,E=new WeakMap,O=new WeakMap,N=new WeakMap,y=new WeakMap,C=new WeakMap,c=new WeakSet,_=function(){const t=e(this,s).videoWidth,r=e(this,s).videoHeight;if(!t||!r)return;const o=Math.floor(r/2);e(this,L).setAttribute("viewBox",`0 0 ${t} ${o}`),e(this,E).setAttribute("width",String(t)),e(this,E).setAttribute("height",String(r)),e(this,O).setAttribute("width",String(t)),e(this,O).setAttribute("height",String(r)),e(this,N).setAttribute("dy",String(-o))},G=function(t,r){it.has(t)?e(this,s)[t]=r!==null:r===null?e(this,s).removeAttribute(t):e(this,s).setAttribute(t,r)},W=function(){e(this,s).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,s).appendChild(t.cloneNode(!0))}),e(this,s).querySelectorAll("source").length>0&&!e(this,s).src&&e(this,s).load()},F(J,"observedAttributes",[...K]);const w="http://www.w3.org/2000/svg",Y=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],rt=new Set(["autoplay","loop","muted","playsinline"]),at=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var i,m,T,g,R,v,A,p,b,f,M,S,k,q,h,B,X,I,D,z,Z,P,U;class Q extends HTMLElement{constructor(){super();u(this,h);u(this,i);u(this,m);u(this,T);u(this,g);u(this,R);u(this,v,null);u(this,A,null);u(this,p,!1);u(this,b,0);u(this,f,0);u(this,M);u(this,S,null);u(this,k,null);u(this,q,null);const t=this.attachShadow({mode:"open"});a(this,M,`avk-c-${Math.random().toString(36).slice(2,8)}`),t.innerHTML=`<style>
+</svg>`,a(this,L,t.querySelector("svg")),a(this,O,t.querySelector("foreignObject")),a(this,C,t.querySelector("filter")),a(this,N,t.querySelector("feOffset")),a(this,s,t.querySelector("video"));for(const r of st)e(this,s).addEventListener(r,o=>{this.dispatchEvent(new Event(o.type,{bubbles:!1,cancelable:!1}))});e(this,s).addEventListener("loadedmetadata",()=>d(this,c,_).call(this)),e(this,s).addEventListener("resize",()=>d(this,c,_).call(this))}connectedCallback(){for(const t of K)this.hasAttribute(t)&&d(this,c,G).call(this,t,this.getAttribute(t));d(this,c,W).call(this),a(this,y,new MutationObserver(()=>d(this,c,W).call(this))),e(this,y).observe(this,{childList:!0})}disconnectedCallback(){var t;(t=e(this,y))==null||t.disconnect(),a(this,y,null)}attributeChangedCallback(t,r,o){d(this,c,G).call(this,t,o)}get src(){return e(this,s).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,s).currentSrc}get currentTime(){return e(this,s).currentTime}set currentTime(t){e(this,s).currentTime=t}get duration(){return e(this,s).duration}get paused(){return e(this,s).paused}get ended(){return e(this,s).ended}get readyState(){return e(this,s).readyState}get videoWidth(){return e(this,s).videoWidth}get videoHeight(){return Math.floor(e(this,s).videoHeight/2)}get volume(){return e(this,s).volume}set volume(t){e(this,s).volume=t}get playbackRate(){return e(this,s).playbackRate}set playbackRate(t){e(this,s).playbackRate=t}get defaultPlaybackRate(){return e(this,s).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,s).defaultPlaybackRate=t}get muted(){return e(this,s).muted}set muted(t){e(this,s).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,s).loop}set loop(t){e(this,s).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,s).autoplay}set autoplay(t){e(this,s).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,s).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,s).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,s).buffered}get seekable(){return e(this,s).seekable}get played(){return e(this,s).played}get networkState(){return e(this,s).networkState}get error(){return e(this,s).error}get seeking(){return e(this,s).seeking}play(){return e(this,s).play()}pause(){e(this,s).pause()}load(){e(this,s).load()}canPlayType(t){return e(this,s).canPlayType(t)}}s=new WeakMap,L=new WeakMap,O=new WeakMap,C=new WeakMap,N=new WeakMap,y=new WeakMap,T=new WeakMap,c=new WeakSet,_=function(){const t=e(this,s).videoWidth,r=e(this,s).videoHeight;if(!t||!r)return;const o=Math.floor(r/2);e(this,L).setAttribute("viewBox",`0 0 ${t} ${o}`),e(this,O).setAttribute("width",String(t)),e(this,O).setAttribute("height",String(r)),e(this,C).setAttribute("width",String(t)),e(this,C).setAttribute("height",String(r)),e(this,N).setAttribute("dy",String(-o))},G=function(t,r){it.has(t)?e(this,s)[t]=r!==null:r===null?e(this,s).removeAttribute(t):e(this,s).setAttribute(t,r)},W=function(){e(this,s).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,s).appendChild(t.cloneNode(!0))}),e(this,s).querySelectorAll("source").length>0&&!e(this,s).src&&e(this,s).load()},F(J,"observedAttributes",[...K]);const E="http://www.w3.org/2000/svg",Y=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],rt=new Set(["autoplay","loop","muted","playsinline"]),at=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var i,m,R,g,v,A,S,p,b,f,M,k,w,q,h,B,X,I,D,z,Z,P,U;class Q extends HTMLElement{constructor(){super();u(this,h);u(this,i);u(this,m);u(this,R);u(this,g);u(this,v);u(this,A,null);u(this,S,null);u(this,p,!1);u(this,b,0);u(this,f,0);u(this,M);u(this,k,null);u(this,w,null);u(this,q,null);const t=this.attachShadow({mode:"open"});a(this,M,`avk-c-${Math.random().toString(36).slice(2,8)}`),t.innerHTML=`<style>
 :host{display:inline-block;overflow:hidden}
 video{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
 canvas{display:block;width:100%}
 </style>
 <video></video>
-<canvas></canvas>`,a(this,i,t.querySelector("video")),a(this,m,t.querySelector("canvas")),a(this,T,e(this,m).getContext("2d")),a(this,g,document.createElement("canvas")),a(this,R,e(this,g).getContext("2d"));for(const r of at)e(this,i).addEventListener(r,o=>{this.dispatchEvent(new Event(o.type,{bubbles:!1,cancelable:!1}))});e(this,i).addEventListener("loadedmetadata",()=>d(this,h,I).call(this)),e(this,i).addEventListener("resize",()=>d(this,h,I).call(this))}connectedCallback(){for(const t of Y)this.hasAttribute(t)&&d(this,h,D).call(this,t,this.getAttribute(t));d(this,h,z).call(this),a(this,A,new MutationObserver(()=>d(this,h,z).call(this))),e(this,A).observe(this,{childList:!0}),d(this,h,B).call(this),a(this,v,new IntersectionObserver(([t])=>{a(this,p,t.isIntersecting),e(this,p)?d(this,h,Z).call(this):d(this,h,P).call(this)},{threshold:0})),e(this,v).observe(this)}disconnectedCallback(){var t,r;d(this,h,P).call(this),(t=e(this,v))==null||t.disconnect(),a(this,v,null),(r=e(this,A))==null||r.disconnect(),a(this,A,null),d(this,h,X).call(this)}attributeChangedCallback(t,r,o){d(this,h,D).call(this,t,o)}get src(){return e(this,i).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,i).currentSrc}get currentTime(){return e(this,i).currentTime}set currentTime(t){e(this,i).currentTime=t}get duration(){return e(this,i).duration}get paused(){return e(this,i).paused}get ended(){return e(this,i).ended}get readyState(){return e(this,i).readyState}get videoWidth(){return e(this,i).videoWidth}get videoHeight(){return Math.floor(e(this,i).videoHeight/2)}get volume(){return e(this,i).volume}set volume(t){e(this,i).volume=t}get playbackRate(){return e(this,i).playbackRate}set playbackRate(t){e(this,i).playbackRate=t}get defaultPlaybackRate(){return e(this,i).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,i).defaultPlaybackRate=t}get muted(){return e(this,i).muted}set muted(t){e(this,i).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,i).loop}set loop(t){e(this,i).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,i).autoplay}set autoplay(t){e(this,i).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,i).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,i).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,i).buffered}get seekable(){return e(this,i).seekable}get played(){return e(this,i).played}get networkState(){return e(this,i).networkState}get error(){return e(this,i).error}get seeking(){return e(this,i).seeking}play(){return e(this,i).play()}pause(){e(this,i).pause()}load(){e(this,i).load()}canPlayType(t){return e(this,i).canPlayType(t)}}i=new WeakMap,m=new WeakMap,T=new WeakMap,g=new WeakMap,R=new WeakMap,v=new WeakMap,A=new WeakMap,p=new WeakMap,b=new WeakMap,f=new WeakMap,M=new WeakMap,S=new WeakMap,k=new WeakMap,q=new WeakMap,h=new WeakSet,B=function(){if(e(this,S))return;const t=document.createElementNS(w,"svg");t.setAttribute("width","0"),t.setAttribute("height","0"),t.style.cssText="position:absolute;overflow:hidden";const r=document.createElementNS(w,"defs"),o=document.createElementNS(w,"filter");o.id=e(this,M),o.setAttribute("filterUnits","userSpaceOnUse"),o.setAttribute("x","0"),o.setAttribute("y","0"),o.setAttribute("width","1"),o.setAttribute("height","1"),o.setAttribute("color-interpolation-filters","sRGB");const H=document.createElementNS(w,"feOffset");H.setAttribute("in","SourceGraphic"),H.setAttribute("dy","0"),H.setAttribute("result","s");const x=document.createElementNS(w,"feColorMatrix");x.setAttribute("in","s"),x.setAttribute("type","matrix"),x.setAttribute("values","0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"),x.setAttribute("result","a");const V=document.createElementNS(w,"feComposite");V.setAttribute("in","SourceGraphic"),V.setAttribute("in2","a"),V.setAttribute("operator","in"),o.append(H,x,V),r.appendChild(o),t.appendChild(r),document.body.appendChild(t),a(this,S,t),a(this,k,o),a(this,q,H)},X=function(){var t;(t=e(this,S))==null||t.remove(),a(this,S,null),a(this,k,null),a(this,q,null)},I=function(){const t=e(this,i).videoWidth,r=e(this,i).videoHeight;if(!t||!r)return;const o=Math.floor(r/2);e(this,m).width=t,e(this,m).height=o,e(this,g).width=t,e(this,g).height=r,d(this,h,B).call(this),e(this,k).setAttribute("width",String(t)),e(this,k).setAttribute("height",String(r)),e(this,q).setAttribute("dy",String(-o))},D=function(t,r){rt.has(t)?e(this,i)[t]=r!==null:r===null?e(this,i).removeAttribute(t):e(this,i).setAttribute(t,r)},z=function(){e(this,i).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,i).appendChild(t.cloneNode(!0))}),e(this,i).querySelectorAll("source").length>0&&!e(this,i).src&&e(this,i).load()},Z=function(){if(e(this,p))if(d(this,h,P).call(this),"requestVideoFrameCallback"in e(this,i)){const t=()=>{e(this,p)&&(d(this,h,U).call(this),a(this,f,e(this,i).requestVideoFrameCallback(t)))};a(this,f,e(this,i).requestVideoFrameCallback(t))}else{const t=()=>{e(this,p)&&(d(this,h,U).call(this),a(this,b,requestAnimationFrame(t)))};a(this,b,requestAnimationFrame(t))}},P=function(){var t,r;e(this,f)&&((r=(t=e(this,i)).cancelVideoFrameCallback)==null||r.call(t,e(this,f)),a(this,f,0)),e(this,b)&&(cancelAnimationFrame(e(this,b)),a(this,b,0))},U=function(){if(e(this,i).readyState<2)return;const t=e(this,i).videoWidth,r=e(this,i).videoHeight;if(!t||!r)return;const o=Math.floor(r/2);(e(this,g).width!==t||e(this,g).height!==r)&&d(this,h,I).call(this),e(this,R).filter=`url(#${e(this,M)})`,e(this,R).drawImage(e(this,i),0,0),e(this,T).clearRect(0,0,t,o),e(this,T).drawImage(e(this,g),0,0,t,o,0,0,t,o)},F(Q,"observedAttributes",[...Y]);exports.AlphaVideoKitCanvas=Q;exports.AlphaVideoKitSVG=J;
+<canvas></canvas>`,a(this,i,t.querySelector("video")),a(this,m,t.querySelector("canvas")),a(this,R,e(this,m).getContext("2d")),a(this,g,document.createElement("canvas")),a(this,v,e(this,g).getContext("2d"));for(const r of at)e(this,i).addEventListener(r,o=>{this.dispatchEvent(new Event(o.type,{bubbles:!1,cancelable:!1}))});e(this,i).addEventListener("loadedmetadata",()=>d(this,h,I).call(this)),e(this,i).addEventListener("resize",()=>d(this,h,I).call(this))}connectedCallback(){for(const t of Y)this.hasAttribute(t)&&d(this,h,D).call(this,t,this.getAttribute(t));d(this,h,z).call(this),a(this,S,new MutationObserver(()=>d(this,h,z).call(this))),e(this,S).observe(this,{childList:!0}),d(this,h,B).call(this),a(this,A,new IntersectionObserver(([t])=>{a(this,p,t.isIntersecting),e(this,p)?d(this,h,Z).call(this):d(this,h,P).call(this)},{threshold:0})),e(this,A).observe(this)}disconnectedCallback(){var t,r;d(this,h,P).call(this),(t=e(this,A))==null||t.disconnect(),a(this,A,null),(r=e(this,S))==null||r.disconnect(),a(this,S,null),d(this,h,X).call(this)}attributeChangedCallback(t,r,o){d(this,h,D).call(this,t,o)}get src(){return e(this,i).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,i).currentSrc}get currentTime(){return e(this,i).currentTime}set currentTime(t){e(this,i).currentTime=t}get duration(){return e(this,i).duration}get paused(){return e(this,i).paused}get ended(){return e(this,i).ended}get readyState(){return e(this,i).readyState}get videoWidth(){return e(this,i).videoWidth}get videoHeight(){return Math.floor(e(this,i).videoHeight/2)}get volume(){return e(this,i).volume}set volume(t){e(this,i).volume=t}get playbackRate(){return e(this,i).playbackRate}set playbackRate(t){e(this,i).playbackRate=t}get defaultPlaybackRate(){return e(this,i).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,i).defaultPlaybackRate=t}get muted(){return e(this,i).muted}set muted(t){e(this,i).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,i).loop}set loop(t){e(this,i).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,i).autoplay}set autoplay(t){e(this,i).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,i).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,i).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,i).buffered}get seekable(){return e(this,i).seekable}get played(){return e(this,i).played}get networkState(){return e(this,i).networkState}get error(){return e(this,i).error}get seeking(){return e(this,i).seeking}play(){return e(this,i).play()}pause(){e(this,i).pause()}load(){e(this,i).load()}canPlayType(t){return e(this,i).canPlayType(t)}}i=new WeakMap,m=new WeakMap,R=new WeakMap,g=new WeakMap,v=new WeakMap,A=new WeakMap,S=new WeakMap,p=new WeakMap,b=new WeakMap,f=new WeakMap,M=new WeakMap,k=new WeakMap,w=new WeakMap,q=new WeakMap,h=new WeakSet,B=function(){if(e(this,k))return;const t=document.createElementNS(E,"svg");t.setAttribute("width","0"),t.setAttribute("height","0"),t.style.cssText="position:absolute;overflow:hidden";const r=document.createElementNS(E,"defs"),o=document.createElementNS(E,"filter");o.id=e(this,M),o.setAttribute("filterUnits","userSpaceOnUse"),o.setAttribute("x","0"),o.setAttribute("y","0"),o.setAttribute("width","1"),o.setAttribute("height","1"),o.setAttribute("color-interpolation-filters","sRGB");const H=document.createElementNS(E,"feOffset");H.setAttribute("in","SourceGraphic"),H.setAttribute("dy","0"),H.setAttribute("result","s");const x=document.createElementNS(E,"feColorMatrix");x.setAttribute("in","s"),x.setAttribute("type","matrix"),x.setAttribute("values","0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"),x.setAttribute("result","a");const V=document.createElementNS(E,"feComposite");V.setAttribute("in","SourceGraphic"),V.setAttribute("in2","a"),V.setAttribute("operator","in"),o.append(H,x,V),r.appendChild(o),t.appendChild(r),document.body.appendChild(t),a(this,k,t),a(this,w,o),a(this,q,H)},X=function(){var t;(t=e(this,k))==null||t.remove(),a(this,k,null),a(this,w,null),a(this,q,null)},I=function(){const t=e(this,i).videoWidth,r=e(this,i).videoHeight;if(!t||!r)return;const o=Math.floor(r/2);e(this,m).width=t,e(this,m).height=o,e(this,g).width=t,e(this,g).height=r,d(this,h,B).call(this),e(this,w).setAttribute("width",String(t)),e(this,w).setAttribute("height",String(r)),e(this,q).setAttribute("dy",String(-o))},D=function(t,r){rt.has(t)?e(this,i)[t]=r!==null:r===null?e(this,i).removeAttribute(t):e(this,i).setAttribute(t,r)},z=function(){e(this,i).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,i).appendChild(t.cloneNode(!0))}),e(this,i).querySelectorAll("source").length>0&&!e(this,i).src&&e(this,i).load()},Z=function(){if(e(this,p))if(d(this,h,P).call(this),"requestVideoFrameCallback"in e(this,i)){const t=()=>{e(this,p)&&(d(this,h,U).call(this),a(this,f,e(this,i).requestVideoFrameCallback(t)))};a(this,f,e(this,i).requestVideoFrameCallback(t))}else{const t=()=>{e(this,p)&&(d(this,h,U).call(this),a(this,b,requestAnimationFrame(t)))};a(this,b,requestAnimationFrame(t))}},P=function(){var t,r;e(this,f)&&((r=(t=e(this,i)).cancelVideoFrameCallback)==null||r.call(t,e(this,f)),a(this,f,0)),e(this,b)&&(cancelAnimationFrame(e(this,b)),a(this,b,0))},U=function(){if(e(this,i).readyState<2)return;const t=e(this,i).videoWidth,r=e(this,i).videoHeight;if(!t||!r)return;const o=Math.floor(r/2);(e(this,g).width!==t||e(this,g).height!==r)&&d(this,h,I).call(this),e(this,v).clearRect(0,0,t,r),e(this,v).filter=`url(#${e(this,M)})`,e(this,v).drawImage(e(this,i),0,0),e(this,R).clearRect(0,0,t,o),e(this,R).drawImage(e(this,g),0,0,t,o,0,0,t,o)},F(Q,"observedAttributes",[...Y]);exports.AlphaVideoKitCanvas=Q;exports.AlphaVideoKitSVG=J;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./canvas-component-Cu612Agl.cjs"),o="http://www.w3.org/2000/svg";function g(h){const{canvas:l}=h,m=l.getContext("2d"),n=document.createElement("canvas"),p=n.getContext("2d"),A=`avk-f-${Math.random().toString(36).slice(2,8)}`;let s=null,a=null,f=null,c=!1;function S(){if(s)return;const r=document.createElementNS(o,"svg");r.setAttribute("width","0"),r.setAttribute("height","0"),r.style.cssText="position:absolute;overflow:hidden";const i=document.createElementNS(o,"defs"),t=document.createElementNS(o,"filter");t.id=A,t.setAttribute("filterUnits","userSpaceOnUse"),t.setAttribute("x","0"),t.setAttribute("y","0"),t.setAttribute("width","1"),t.setAttribute("height","1"),t.setAttribute("color-interpolation-filters","sRGB");const e=document.createElementNS(o,"feOffset");e.setAttribute("in","SourceGraphic"),e.setAttribute("dy","0"),e.setAttribute("result","s");const u=document.createElementNS(o,"feColorMatrix");u.setAttribute("in","s"),u.setAttribute("type","matrix"),u.setAttribute("values","0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"),u.setAttribute("result","a");const d=document.createElementNS(o,"feComposite");d.setAttribute("in","SourceGraphic"),d.setAttribute("in2","a"),d.setAttribute("operator","in"),t.append(e,u,d),i.appendChild(t),r.appendChild(i),document.body.appendChild(r),s=r,a=t,f=e}return{drawFrame(r){if(c)return;const i=r.videoWidth,t=r.videoHeight,e=Math.floor(t/2);(l.width!==i||l.height!==e)&&(l.width=i,l.height=e),(n.width!==i||n.height!==t)&&(n.width=i,n.height=t),S(),a.setAttribute("width",String(i)),a.setAttribute("height",String(t)),f.setAttribute("dy",String(-e)),p.filter=`url(#${A})`,p.drawImage(r,0,0),m.clearRect(0,0,i,e),m.drawImage(n,0,0,i,e,0,0,i,e)},setPremultipliedAlpha(r){},destroy(){c||(c=!0,s==null||s.remove(),s=null,a=null,f=null)},get isDestroyed(){return c}}}function w(h){return g(h)}exports.AlphaVideoKitCanvas=b.AlphaVideoKitCanvas;exports.AlphaVideoKitSVG=b.AlphaVideoKitSVG;exports.createRenderer=w;exports.createSvgFilterRenderer=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./canvas-component-BR3Vuf_h.cjs"),o="http://www.w3.org/2000/svg";function g(h){const{canvas:l}=h,p=l.getContext("2d"),n=document.createElement("canvas"),f=n.getContext("2d"),A=`avk-f-${Math.random().toString(36).slice(2,8)}`;let s=null,c=null,m=null,a=!1;function S(){if(s)return;const i=document.createElementNS(o,"svg");i.setAttribute("width","0"),i.setAttribute("height","0"),i.style.cssText="position:absolute;overflow:hidden";const e=document.createElementNS(o,"defs"),t=document.createElementNS(o,"filter");t.id=A,t.setAttribute("filterUnits","userSpaceOnUse"),t.setAttribute("x","0"),t.setAttribute("y","0"),t.setAttribute("width","1"),t.setAttribute("height","1"),t.setAttribute("color-interpolation-filters","sRGB");const r=document.createElementNS(o,"feOffset");r.setAttribute("in","SourceGraphic"),r.setAttribute("dy","0"),r.setAttribute("result","s");const u=document.createElementNS(o,"feColorMatrix");u.setAttribute("in","s"),u.setAttribute("type","matrix"),u.setAttribute("values","0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"),u.setAttribute("result","a");const d=document.createElementNS(o,"feComposite");d.setAttribute("in","SourceGraphic"),d.setAttribute("in2","a"),d.setAttribute("operator","in"),t.append(r,u,d),e.appendChild(t),i.appendChild(e),document.body.appendChild(i),s=i,c=t,m=r}return{drawFrame(i){if(a)return;const e=i.videoWidth,t=i.videoHeight,r=Math.floor(t/2);(l.width!==e||l.height!==r)&&(l.width=e,l.height=r),(n.width!==e||n.height!==t)&&(n.width=e,n.height=t),S(),c.setAttribute("width",String(e)),c.setAttribute("height",String(t)),m.setAttribute("dy",String(-r)),f.clearRect(0,0,e,t),f.filter=`url(#${A})`,f.drawImage(i,0,0),p.clearRect(0,0,e,r),p.drawImage(n,0,0,e,r,0,0,e,r)},setPremultipliedAlpha(i){},destroy(){a||(a=!0,s==null||s.remove(),s=null,c=null,m=null)},get isDestroyed(){return a}}}function w(h){return g(h)}exports.AlphaVideoKitCanvas=b.AlphaVideoKitCanvas;exports.AlphaVideoKitSVG=b.AlphaVideoKitSVG;exports.createRenderer=w;exports.createSvgFilterRenderer=g;

package/dist/index.js

@@ -1,31 +1,31 @@
-import { A as x, a as y } from "./canvas-component-zHBwAZuP.js";
+import { A as x, a as y } from "./canvas-component-BJ29dbCJ.js";
 const o = "http://www.w3.org/2000/svg";
 function g(f) {
-  const { canvas: u } = f, m = u.getContext("2d"), n = document.createElement("canvas"), A = n.getContext("2d"), p = `avk-f-${Math.random().toString(36).slice(2, 8)}`;
-  let s = null, c = null, h = null, a = !1;
+  const { canvas: l } = f, A = l.getContext("2d"), n = document.createElement("canvas"), h = n.getContext("2d"), p = `avk-f-${Math.random().toString(36).slice(2, 8)}`;
+  let s = null, c = null, m = null, a = !1;
   function b() {
     if (s) return;
-    const r = document.createElementNS(o, "svg");
-    r.setAttribute("width", "0"), r.setAttribute("height", "0"), r.style.cssText = "position:absolute;overflow:hidden";
-    const i = document.createElementNS(o, "defs"), t = document.createElementNS(o, "filter");
+    const i = document.createElementNS(o, "svg");
+    i.setAttribute("width", "0"), i.setAttribute("height", "0"), i.style.cssText = "position:absolute;overflow:hidden";
+    const e = document.createElementNS(o, "defs"), t = document.createElementNS(o, "filter");
     t.id = p, t.setAttribute("filterUnits", "userSpaceOnUse"), t.setAttribute("x", "0"), t.setAttribute("y", "0"), t.setAttribute("width", "1"), t.setAttribute("height", "1"), t.setAttribute("color-interpolation-filters", "sRGB");
-    const e = document.createElementNS(o, "feOffset");
-    e.setAttribute("in", "SourceGraphic"), e.setAttribute("dy", "0"), e.setAttribute("result", "s");
-    const l = document.createElementNS(o, "feColorMatrix");
-    l.setAttribute("in", "s"), l.setAttribute("type", "matrix"), l.setAttribute("values", "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"), l.setAttribute("result", "a");
+    const r = document.createElementNS(o, "feOffset");
+    r.setAttribute("in", "SourceGraphic"), r.setAttribute("dy", "0"), r.setAttribute("result", "s");
+    const u = document.createElementNS(o, "feColorMatrix");
+    u.setAttribute("in", "s"), u.setAttribute("type", "matrix"), u.setAttribute("values", "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"), u.setAttribute("result", "a");
     const d = document.createElementNS(o, "feComposite");
-    d.setAttribute("in", "SourceGraphic"), d.setAttribute("in2", "a"), d.setAttribute("operator", "in"), t.append(e, l, d), i.appendChild(t), r.appendChild(i), document.body.appendChild(r), s = r, c = t, h = e;
+    d.setAttribute("in", "SourceGraphic"), d.setAttribute("in2", "a"), d.setAttribute("operator", "in"), t.append(r, u, d), e.appendChild(t), i.appendChild(e), document.body.appendChild(i), s = i, c = t, m = r;
   }
   return {
-    drawFrame(r) {
+    drawFrame(i) {
       if (a) return;
-      const i = r.videoWidth, t = r.videoHeight, e = Math.floor(t / 2);
-      (u.width !== i || u.height !== e) && (u.width = i, u.height = e), (n.width !== i || n.height !== t) && (n.width = i, n.height = t), b(), c.setAttribute("width", String(i)), c.setAttribute("height", String(t)), h.setAttribute("dy", String(-e)), A.filter = `url(#${p})`, A.drawImage(r, 0, 0), m.clearRect(0, 0, i, e), m.drawImage(n, 0, 0, i, e, 0, 0, i, e);
+      const e = i.videoWidth, t = i.videoHeight, r = Math.floor(t / 2);
+      (l.width !== e || l.height !== r) && (l.width = e, l.height = r), (n.width !== e || n.height !== t) && (n.width = e, n.height = t), b(), c.setAttribute("width", String(e)), c.setAttribute("height", String(t)), m.setAttribute("dy", String(-r)), h.clearRect(0, 0, e, t), h.filter = `url(#${p})`, h.drawImage(i, 0, 0), A.clearRect(0, 0, e, r), A.drawImage(n, 0, 0, e, r, 0, 0, e, r);
     },
-    setPremultipliedAlpha(r) {
+    setPremultipliedAlpha(i) {
     },
     destroy() {
-      a || (a = !0, s == null || s.remove(), s = null, c = null, h = null);
+      a || (a = !0, s == null || s.remove(), s = null, c = null, m = null);
     },
     get isDestroyed() {
       return a;

package/dist/register.cjs

@@ -1 +1 @@
-"use strict";const e=require("./canvas-component-Cu612Agl.cjs");customElements.get("alpha-video-kit-svg")||customElements.define("alpha-video-kit-svg",e.AlphaVideoKitSVG);customElements.get("alpha-video-kit-canvas")||customElements.define("alpha-video-kit-canvas",e.AlphaVideoKitCanvas);
+"use strict";const e=require("./canvas-component-BR3Vuf_h.cjs");customElements.get("alpha-video-kit-svg")||customElements.define("alpha-video-kit-svg",e.AlphaVideoKitSVG);customElements.get("alpha-video-kit-canvas")||customElements.define("alpha-video-kit-canvas",e.AlphaVideoKitCanvas);

package/dist/register.js

@@ -1,3 +1,3 @@
-import { a as e, A as a } from "./canvas-component-zHBwAZuP.js";
+import { a as e, A as a } from "./canvas-component-BJ29dbCJ.js";
 customElements.get("alpha-video-kit-svg") || customElements.define("alpha-video-kit-svg", e);
 customElements.get("alpha-video-kit-canvas") || customElements.define("alpha-video-kit-canvas", a);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpha-video-kit/svg",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "SVG filter-based renderer for stacked alpha videos",
   "type": "module",
   "files": ["dist", "react.d.ts"],