@alpha-video-kit/svg 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
-"use strict";var K=Object.defineProperty;var P=s=>{throw TypeError(s)};var N=(s,i,e)=>i in s?K(s,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[i]=e;var j=(s,i,e)=>N(s,typeof i!="symbol"?i+"":i,e),q=(s,i,e)=>i.has(s)||P("Cannot "+e);var t=(s,i,e)=>(q(s,i,"read from private field"),e?e.call(s):i.get(s)),v=(s,i,e)=>i.has(s)?P("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(s):i.set(s,e),o=(s,i,e,d)=>(q(s,i,"write to private field"),d?d.call(s,e):i.set(s,e),e),h=(s,i,e)=>(q(s,i,"access private method"),e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function T(s){const{canvas:i}=s,e=i.getContext("2d"),d=document.createElement("canvas"),y=d.getContext("2d");let c=!1;function L(w,a,n,p){return`<svg xmlns="http://www.w3.org/2000/svg"
+"use strict";var G=Object.defineProperty;var U=i=>{throw TypeError(i)};var z=(i,s,t)=>s in i?G(i,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[s]=t;var B=(i,s,t)=>z(i,typeof s!="symbol"?s+"":s,t),E=(i,s,t)=>s.has(i)||U("Cannot "+t);var e=(i,s,t)=>(E(i,s,"read from private field"),t?t.call(i):s.get(i)),y=(i,s,t)=>s.has(i)?U("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(i):s.set(i,t),h=(i,s,t,a)=>(E(i,s,"write to private field"),a?a.call(i,t):s.set(i,t),t),u=(i,s,t)=>(E(i,s,"access private method"),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function j(i){const{canvas:s}=i,t=s.getContext("2d"),a=document.createElement("canvas"),d=a.getContext("2d");let p=!1;function x(v,n,l,f){return`<svg xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                 width="${a}" height="${n}"
-                 viewBox="0 0 ${a} ${n}">
+                 width="${n}" height="${l}"
+                 viewBox="0 0 ${n} ${l}">
               <defs>
                 <filter id="r2a" color-interpolation-filters="sRGB">
                   <feColorMatrix type="matrix"
@@ -11,41 +11,24 @@
                             1 0 0 0 0"/>
                 </filter>
                 <mask id="alphaMask">
-                  <svg viewBox="0 ${n} ${a} ${n}"
-                       width="${a}" height="${n}"
+                  <svg viewBox="0 ${l} ${n} ${l}"
+                       width="${n}" height="${l}"
                        preserveAspectRatio="none">
-                    <image href="${w}"
-                           width="${a}" height="${p}"
+                    <image href="${v}"
+                           width="${n}" height="${f}"
                            filter="url(#r2a)"/>
                   </svg>
                 </mask>
               </defs>
-              <svg viewBox="0 0 ${a} ${n}"
-                   width="${a}" height="${n}"
+              <svg viewBox="0 0 ${n} ${l}"
+                   width="${n}" height="${l}"
                    preserveAspectRatio="none"
                    mask="url(#alphaMask)">
-                <image href="${w}"
-                       width="${a}" height="${p}"/>
+                <image href="${v}"
+                       width="${n}" height="${f}"/>
               </svg>
-            </svg>`}return{drawFrame(w){if(c)return;const a=w.videoWidth,n=w.videoHeight,p=Math.floor(n/2);(i.width!==a||i.height!==p)&&(i.width=a,i.height=p),(d.width!==a||d.height!==n)&&(d.width=a,d.height=n),y.drawImage(w,0,0);const x=d.toDataURL("image/png"),S=L(x,a,p,n),E=new Blob([S],{type:"image/svg+xml"}),u=URL.createObjectURL(E),F=new Image;F.onload=()=>{if(c){URL.revokeObjectURL(u);return}e.clearRect(0,0,a,p),e.drawImage(F,0,0),URL.revokeObjectURL(u)},F.src=u},setPremultipliedAlpha(w){},destroy(){c||(c=!0)},get isDestroyed(){return c}}}function _(s){const{canvas:i,premultipliedAlpha:e=!1}=s,d=i.getContext("2d",{willReadFrequently:!0}),y=document.createElement("canvas"),c=y.getContext("2d",{willReadFrequently:!0});let L=!1,w=e;return{drawFrame(a){if(L)return;const n=a.videoWidth,p=a.videoHeight,x=Math.floor(p/2);(i.width!==n||i.height!==x)&&(i.width=n,i.height=x),(y.width!==n||y.height!==p)&&(y.width=n,y.height=p),c.drawImage(a,0,0);const S=c.getImageData(0,0,n,x),E=c.getImageData(0,x,n,x),u=S.data,F=E.data;for(let m=0;m<u.length;m+=4){const I=F[m];if(w)u[m+3]=I;else{const O=I/255;u[m]=Math.round(u[m]*O),u[m+1]=Math.round(u[m+1]*O),u[m+2]=Math.round(u[m+2]*O),u[m+3]=I}}d.putImageData(S,0,0)},setPremultipliedAlpha(a){w=a},destroy(){L||(L=!0)},get isDestroyed(){return L}}}function G(s){const{mode:i="canvas",...e}=s;return i==="svg-filter"?T(e):_(e)}var M,g,l,b,R,A,k,C,r,$,H,Q,D,f,z,U,V,J,B;class W extends HTMLElement{constructor(){super();v(this,r);v(this,M);v(this,g,null);v(this,l,null);v(this,b,null);v(this,R,null);v(this,A,null);v(this,k,!1);v(this,C,!1);v(this,f,()=>{h(this,r,$).call(this)});const e=this.attachShadow({mode:"open"});e.innerHTML=`
-      <style>
-        :host {
-          display: inline-block;
-          position: relative;
-        }
-        canvas {
-          display: block;
-          width: 100%;
-          height: 100%;
-        }
-        ::slotted(video) {
-          position: absolute;
-          opacity: 0;
-          pointer-events: none;
-          width: 0;
-          height: 0;
-        }
-      </style>
-      <canvas></canvas>
-      <slot></slot>
-    `,o(this,M,e.querySelector("canvas"))}get premultipliedAlpha(){return this.hasAttribute("premultipliedalpha")}set premultipliedAlpha(e){e?this.setAttribute("premultipliedalpha",""):this.removeAttribute("premultipliedalpha")}attributeChangedCallback(e,d,y){var c;e==="premultipliedalpha"&&((c=t(this,g))==null||c.setPremultipliedAlpha(this.premultipliedAlpha)),e==="mode"&&(h(this,r,U).call(this),h(this,r,$).call(this))}connectedCallback(){o(this,R,new IntersectionObserver(([e])=>{o(this,k,e.isIntersecting),h(this,r,$).call(this)},{threshold:0})),t(this,R).observe(this),o(this,A,new MutationObserver(()=>h(this,r,$).call(this))),t(this,A).observe(this,{childList:!0}),h(this,r,$).call(this)}disconnectedCallback(){var e,d;(e=t(this,R))==null||e.disconnect(),o(this,R,null),(d=t(this,A))==null||d.disconnect(),o(this,A,null),h(this,r,D).call(this),h(this,r,U).call(this)}}M=new WeakMap,g=new WeakMap,l=new WeakMap,b=new WeakMap,R=new WeakMap,A=new WeakMap,k=new WeakMap,C=new WeakMap,r=new WeakSet,$=function(){t(this,C)||(o(this,C,!0),queueMicrotask(()=>{o(this,C,!1),h(this,r,H).call(this)}))},H=function(){const e=this.querySelector("video");e!==t(this,l)&&(h(this,r,D).call(this),o(this,l,e),e&&h(this,r,Q).call(this,e)),t(this,k)&&t(this,l)?(h(this,r,z).call(this),h(this,r,V).call(this),h(this,r,J).call(this)):h(this,r,B).call(this)},Q=function(e){e.addEventListener("play",t(this,f)),e.addEventListener("pause",t(this,f)),e.addEventListener("seeked",t(this,f)),e.addEventListener("loadeddata",t(this,f))},D=function(){t(this,l)&&(t(this,l).removeEventListener("play",t(this,f)),t(this,l).removeEventListener("pause",t(this,f)),t(this,l).removeEventListener("seeked",t(this,f)),t(this,l).removeEventListener("loadeddata",t(this,f)),o(this,l,null),h(this,r,B).call(this))},f=new WeakMap,z=function(){if(t(this,g)&&!t(this,g).isDestroyed)return;const e=this.getAttribute("mode")??"canvas";o(this,g,G({canvas:t(this,M),premultipliedAlpha:this.premultipliedAlpha,mode:e}))},U=function(){var e;(e=t(this,g))==null||e.destroy(),o(this,g,null)},V=function(){!t(this,g)||!t(this,l)||t(this,l).readyState<2||t(this,g).drawFrame(t(this,l))},J=function(){if(t(this,b)!==null||!t(this,l)||t(this,l).paused)return;const e=()=>{h(this,r,V).call(this),t(this,l)&&!t(this,l).paused&&t(this,k)?o(this,b,requestAnimationFrame(e)):o(this,b,null)};o(this,b,requestAnimationFrame(e))},B=function(){t(this,b)!==null&&(cancelAnimationFrame(t(this,b)),o(this,b,null))},j(W,"observedAttributes",["premultipliedalpha","mode"]);exports.StackedAlphaVideoSVG=W;exports.createCanvasFilterRenderer=_;exports.createRenderer=G;exports.createSvgFilterRenderer=T;
+            </svg>`}return{drawFrame(v){if(p)return;const n=v.videoWidth,l=v.videoHeight,f=Math.floor(l/2);(s.width!==n||s.height!==f)&&(s.width=n,s.height=f),(a.width!==n||a.height!==l)&&(a.width=n,a.height=l),d.drawImage(v,0,0);const A=a.toDataURL("image/png"),F=x(A,n,f,l),L=new Blob([F],{type:"image/svg+xml"}),g=URL.createObjectURL(L),C=new Image;C.onload=()=>{if(p){URL.revokeObjectURL(g);return}t.clearRect(0,0,n,f),t.drawImage(C,0,0),URL.revokeObjectURL(g)},C.src=g},setPremultipliedAlpha(v){},destroy(){p||(p=!0)},get isDestroyed(){return p}}}function W(i){const{canvas:s,premultipliedAlpha:t=!1}=i,a=s.getContext("2d",{willReadFrequently:!0}),d=document.createElement("canvas"),p=d.getContext("2d",{willReadFrequently:!0});let x=!1,v=t;return{drawFrame(n){if(x)return;const l=n.videoWidth,f=n.videoHeight,A=Math.floor(f/2);(s.width!==l||s.height!==A)&&(s.width=l,s.height=A),(d.width!==l||d.height!==f)&&(d.width=l,d.height=f),p.drawImage(n,0,0);const F=p.getImageData(0,0,l,A),L=p.getImageData(0,A,l,A),g=F.data,C=L.data;for(let m=0;m<g.length;m+=4){const M=C[m];if(v)g[m+3]=M;else{const T=M/255;g[m]=Math.round(g[m]*T),g[m+1]=Math.round(g[m+1]*T),g[m+2]=Math.round(g[m+2]*T),g[m+3]=M}}a.putImageData(F,0,0)},setPremultipliedAlpha(n){v=n},destroy(){x||(x=!0)},get isDestroyed(){return x}}}function H(i){const{mode:s="canvas",...t}=i;return s==="svg-filter"?j(t):W(t)}const _=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height","mode"],K=new Set(["autoplay","loop","muted","playsinline"]),J=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var r,$,c,R,S,b,w,k,o,I,q,D,P,O,V;class N extends HTMLElement{constructor(){super();y(this,o);y(this,r);y(this,$);y(this,c,null);y(this,R,null);y(this,S,null);y(this,b,!1);y(this,w,0);y(this,k,0);const t=this.attachShadow({mode:"open"});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%;height:100%}
+</style><video></video><canvas></canvas>`,h(this,r,t.querySelector("video")),h(this,$,t.querySelector("canvas"));for(const a of J)e(this,r).addEventListener(a,d=>{this.dispatchEvent(new Event(d.type,{bubbles:!1,cancelable:!1}))})}connectedCallback(){for(const t of _)t!=="mode"&&this.hasAttribute(t)&&u(this,o,I).call(this,t,this.getAttribute(t));u(this,o,q).call(this),h(this,S,new MutationObserver(()=>u(this,o,q).call(this))),e(this,S).observe(this,{childList:!0}),h(this,R,new IntersectionObserver(([t])=>{h(this,b,t.isIntersecting),e(this,b)?(u(this,o,D).call(this),u(this,o,P).call(this)):u(this,o,O).call(this)},{threshold:0})),e(this,R).observe(this)}disconnectedCallback(){var t,a,d;u(this,o,O).call(this),(t=e(this,R))==null||t.disconnect(),h(this,R,null),(a=e(this,S))==null||a.disconnect(),h(this,S,null),(d=e(this,c))==null||d.destroy(),h(this,c,null)}attributeChangedCallback(t,a,d){var p;if(t==="mode"){(p=e(this,c))==null||p.destroy(),h(this,c,null),e(this,b)&&(u(this,o,D).call(this),u(this,o,P).call(this));return}u(this,o,I).call(this,t,d)}get src(){return e(this,r).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,r).currentSrc}get currentTime(){return e(this,r).currentTime}set currentTime(t){e(this,r).currentTime=t}get duration(){return e(this,r).duration}get paused(){return e(this,r).paused}get ended(){return e(this,r).ended}get readyState(){return e(this,r).readyState}get videoWidth(){return e(this,r).videoWidth}get videoHeight(){return Math.floor(e(this,r).videoHeight/2)}get volume(){return e(this,r).volume}set volume(t){e(this,r).volume=t}get playbackRate(){return e(this,r).playbackRate}set playbackRate(t){e(this,r).playbackRate=t}get defaultPlaybackRate(){return e(this,r).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,r).defaultPlaybackRate=t}get muted(){return e(this,r).muted}set muted(t){e(this,r).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,r).loop}set loop(t){e(this,r).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,r).autoplay}set autoplay(t){e(this,r).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,r).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,r).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,r).buffered}get seekable(){return e(this,r).seekable}get played(){return e(this,r).played}get networkState(){return e(this,r).networkState}get error(){return e(this,r).error}get seeking(){return e(this,r).seeking}play(){return e(this,r).play()}pause(){e(this,r).pause()}load(){e(this,r).load()}canPlayType(t){return e(this,r).canPlayType(t)}}r=new WeakMap,$=new WeakMap,c=new WeakMap,R=new WeakMap,S=new WeakMap,b=new WeakMap,w=new WeakMap,k=new WeakMap,o=new WeakSet,I=function(t,a){K.has(t)?e(this,r)[t]=a!==null:a===null?e(this,r).removeAttribute(t):e(this,r).setAttribute(t,a)},q=function(){e(this,r).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,r).appendChild(t.cloneNode(!0))}),e(this,r).querySelectorAll("source").length>0&&!e(this,r).src&&e(this,r).load()},D=function(){if(!(e(this,c)&&!e(this,c).isDestroyed))try{const t=this.getAttribute("mode")||"canvas";h(this,c,H({canvas:e(this,$),mode:t}))}catch{}},P=function(){if(!(!e(this,b)||!e(this,c)))if(u(this,o,O).call(this),"requestVideoFrameCallback"in e(this,r)){const t=()=>{!e(this,b)||!e(this,c)||(u(this,o,V).call(this),h(this,k,e(this,r).requestVideoFrameCallback(t)))};h(this,k,e(this,r).requestVideoFrameCallback(t))}else{const t=()=>{!e(this,b)||!e(this,c)||(u(this,o,V).call(this),h(this,w,requestAnimationFrame(t)))};h(this,w,requestAnimationFrame(t))}},O=function(){var t,a;e(this,k)&&((a=(t=e(this,r)).cancelVideoFrameCallback)==null||a.call(t,e(this,k)),h(this,k,0)),e(this,w)&&(cancelAnimationFrame(e(this,w)),h(this,w,0))},V=function(){e(this,r).readyState<2||!e(this,c)||e(this,c).drawFrame(e(this,r))},B(N,"observedAttributes",[..._]);exports.AlphaVideoKitSVG=N;exports.createCanvasFilterRenderer=W;exports.createRenderer=H;exports.createSvgFilterRenderer=j;

package/dist/index.d.ts

@@ -1,3 +1,49 @@
+export declare class AlphaVideoKitSVG extends HTMLElement {
+    #private;
+    static observedAttributes: ("mode" | "src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster" | "width" | "height")[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    get src(): string;
+    set src(v: string);
+    get currentSrc(): string;
+    get currentTime(): number;
+    set currentTime(v: number);
+    get duration(): number;
+    get paused(): boolean;
+    get ended(): boolean;
+    get readyState(): number;
+    get videoWidth(): number;
+    get videoHeight(): number;
+    get volume(): number;
+    set volume(v: number);
+    get playbackRate(): number;
+    set playbackRate(v: number);
+    get defaultPlaybackRate(): number;
+    set defaultPlaybackRate(v: number);
+    get muted(): boolean;
+    set muted(v: boolean);
+    get loop(): boolean;
+    set loop(v: boolean);
+    get autoplay(): boolean;
+    set autoplay(v: boolean);
+    get preload(): string;
+    set preload(v: string);
+    get crossOrigin(): string | null;
+    set crossOrigin(v: string | null);
+    get buffered(): TimeRanges;
+    get seekable(): TimeRanges;
+    get played(): TimeRanges;
+    get networkState(): number;
+    get error(): MediaError | null;
+    get seeking(): boolean;
+    play(): Promise<void>;
+    pause(): void;
+    load(): void;
+    canPlayType(type: string): CanPlayTypeResult;
+}
+
 /**
  * Canvas 2D renderer with pixel manipulation.
  * Draws the video to an offscreen canvas, reads pixels from top and bottom halves,
@@ -27,17 +73,6 @@ export declare interface StackedAlphaRendererOptions {
     premultipliedAlpha?: boolean;
 }
 
-export declare class StackedAlphaVideoSVG extends HTMLElement {
-    #private;
-    static observedAttributes: string[];
-    constructor();
-    get premultipliedAlpha(): boolean;
-    set premultipliedAlpha(value: boolean);
-    attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}
-
 export declare type SvgRendererMode = 'svg-filter' | 'canvas';
 
 export declare interface SvgRendererOptions extends StackedAlphaRendererOptions {

package/dist/index.js

@@ -1,18 +1,18 @@
-var H = Object.defineProperty;
-var P = (s) => {
-  throw TypeError(s);
+var W = Object.defineProperty;
+var V = (r) => {
+  throw TypeError(r);
 };
-var Q = (s, i, t) => i in s ? H(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
-var j = (s, i, t) => Q(s, typeof i != "symbol" ? i + "" : i, t), O = (s, i, t) => i.has(s) || P("Cannot " + t);
-var e = (s, i, t) => (O(s, i, "read from private field"), t ? t.call(s) : i.get(s)), v = (s, i, t) => i.has(s) ? P("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), o = (s, i, t, d) => (O(s, i, "write to private field"), d ? d.call(s, t) : i.set(s, t), t), l = (s, i, t) => (O(s, i, "access private method"), t);
-function z(s) {
-  const { canvas: i } = s, t = i.getContext("2d"), d = document.createElement("canvas"), y = d.getContext("2d");
-  let c = !1;
-  function $(w, a, n, p) {
+var j = (r, i, t) => i in r ? W(r, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[i] = t;
+var B = (r, i, t) => j(r, typeof i != "symbol" ? i + "" : i, t), M = (r, i, t) => i.has(r) || V("Cannot " + t);
+var e = (r, i, t) => (M(r, i, "read from private field"), t ? t.call(r) : i.get(r)), y = (r, i, t) => i.has(r) ? V("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(r) : i.set(r, t), l = (r, i, t, a) => (M(r, i, "write to private field"), a ? a.call(r, t) : i.set(r, t), t), d = (r, i, t) => (M(r, i, "access private method"), t);
+function H(r) {
+  const { canvas: i } = r, t = i.getContext("2d"), a = document.createElement("canvas"), u = a.getContext("2d");
+  let p = !1;
+  function S(v, n, h, f) {
     return `<svg xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                 width="${a}" height="${n}"
-                 viewBox="0 0 ${a} ${n}">
+                 width="${n}" height="${h}"
+                 viewBox="0 0 ${n} ${h}">
               <defs>
                 <filter id="r2a" color-interpolation-filters="sRGB">
                   <feColorMatrix type="matrix"
@@ -22,182 +22,315 @@ function z(s) {
                             1 0 0 0 0"/>
                 </filter>
                 <mask id="alphaMask">
-                  <svg viewBox="0 ${n} ${a} ${n}"
-                       width="${a}" height="${n}"
+                  <svg viewBox="0 ${h} ${n} ${h}"
+                       width="${n}" height="${h}"
                        preserveAspectRatio="none">
-                    <image href="${w}"
-                           width="${a}" height="${p}"
+                    <image href="${v}"
+                           width="${n}" height="${f}"
                            filter="url(#r2a)"/>
                   </svg>
                 </mask>
               </defs>
-              <svg viewBox="0 0 ${a} ${n}"
-                   width="${a}" height="${n}"
+              <svg viewBox="0 0 ${n} ${h}"
+                   width="${n}" height="${h}"
                    preserveAspectRatio="none"
                    mask="url(#alphaMask)">
-                <image href="${w}"
-                       width="${a}" height="${p}"/>
+                <image href="${v}"
+                       width="${n}" height="${f}"/>
               </svg>
             </svg>`;
   }
   return {
-    drawFrame(w) {
-      if (c) return;
-      const a = w.videoWidth, n = w.videoHeight, p = Math.floor(n / 2);
-      (i.width !== a || i.height !== p) && (i.width = a, i.height = p), (d.width !== a || d.height !== n) && (d.width = a, d.height = n), y.drawImage(w, 0, 0);
-      const x = d.toDataURL("image/png"), F = $(x, a, p, n), I = new Blob([F], { type: "image/svg+xml" }), u = URL.createObjectURL(I), M = new Image();
-      M.onload = () => {
-        if (c) {
-          URL.revokeObjectURL(u);
+    drawFrame(v) {
+      if (p) return;
+      const n = v.videoWidth, h = v.videoHeight, f = Math.floor(h / 2);
+      (i.width !== n || i.height !== f) && (i.width = n, i.height = f), (a.width !== n || a.height !== h) && (a.width = n, a.height = h), u.drawImage(v, 0, 0);
+      const A = a.toDataURL("image/png"), F = S(A, n, f, h), O = new Blob([F], { type: "image/svg+xml" }), g = URL.createObjectURL(O), C = new Image();
+      C.onload = () => {
+        if (p) {
+          URL.revokeObjectURL(g);
           return;
         }
-        t.clearRect(0, 0, a, p), t.drawImage(M, 0, 0), URL.revokeObjectURL(u);
-      }, M.src = u;
+        t.clearRect(0, 0, n, f), t.drawImage(C, 0, 0), URL.revokeObjectURL(g);
+      }, C.src = g;
     },
-    setPremultipliedAlpha(w) {
+    setPremultipliedAlpha(v) {
     },
     destroy() {
-      c || (c = !0);
+      p || (p = !0);
     },
     get isDestroyed() {
-      return c;
+      return p;
     }
   };
 }
-function J(s) {
-  const { canvas: i, premultipliedAlpha: t = !1 } = s, d = i.getContext("2d", { willReadFrequently: !0 }), y = document.createElement("canvas"), c = y.getContext("2d", { willReadFrequently: !0 });
-  let $ = !1, w = t;
+function N(r) {
+  const { canvas: i, premultipliedAlpha: t = !1 } = r, a = i.getContext("2d", { willReadFrequently: !0 }), u = document.createElement("canvas"), p = u.getContext("2d", { willReadFrequently: !0 });
+  let S = !1, v = t;
   return {
-    drawFrame(a) {
-      if ($) return;
-      const n = a.videoWidth, p = a.videoHeight, x = Math.floor(p / 2);
-      (i.width !== n || i.height !== x) && (i.width = n, i.height = x), (y.width !== n || y.height !== p) && (y.width = n, y.height = p), c.drawImage(a, 0, 0);
-      const F = c.getImageData(0, 0, n, x), I = c.getImageData(0, x, n, x), u = F.data, M = I.data;
-      for (let m = 0; m < u.length; m += 4) {
-        const q = M[m];
-        if (w)
-          u[m + 3] = q;
+    drawFrame(n) {
+      if (S) return;
+      const h = n.videoWidth, f = n.videoHeight, A = Math.floor(f / 2);
+      (i.width !== h || i.height !== A) && (i.width = h, i.height = A), (u.width !== h || u.height !== f) && (u.width = h, u.height = f), p.drawImage(n, 0, 0);
+      const F = p.getImageData(0, 0, h, A), O = p.getImageData(0, A, h, A), g = F.data, C = O.data;
+      for (let m = 0; m < g.length; m += 4) {
+        const E = C[m];
+        if (v)
+          g[m + 3] = E;
         else {
-          const D = q / 255;
-          u[m] = Math.round(u[m] * D), u[m + 1] = Math.round(u[m + 1] * D), u[m + 2] = Math.round(u[m + 2] * D), u[m + 3] = q;
+          const I = E / 255;
+          g[m] = Math.round(g[m] * I), g[m + 1] = Math.round(g[m + 1] * I), g[m + 2] = Math.round(g[m + 2] * I), g[m + 3] = E;
         }
       }
-      d.putImageData(F, 0, 0);
+      a.putImageData(F, 0, 0);
     },
-    setPremultipliedAlpha(a) {
-      w = a;
+    setPremultipliedAlpha(n) {
+      v = n;
     },
     destroy() {
-      $ || ($ = !0);
+      S || (S = !0);
     },
     get isDestroyed() {
-      return $;
+      return S;
     }
   };
 }
-function K(s) {
-  const { mode: i = "canvas", ...t } = s;
-  return i === "svg-filter" ? z(t) : J(t);
+function z(r) {
+  const { mode: i = "canvas", ...t } = r;
+  return i === "svg-filter" ? H(t) : N(t);
 }
-var E, g, h, b, L, A, k, C, r, R, _, T, S, f, W, U, V, G, B;
-class N extends HTMLElement {
+const _ = [
+  "src",
+  "crossorigin",
+  "preload",
+  "autoplay",
+  "loop",
+  "muted",
+  "playsinline",
+  "poster",
+  "width",
+  "height",
+  "mode"
+], G = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), J = [
+  "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, $, c, R, x, b, w, k, o, T, q, D, P, L, U;
+class K extends HTMLElement {
   constructor() {
     super();
-    v(this, r);
-    v(this, E);
-    v(this, g, null);
-    v(this, h, null);
-    v(this, b, null);
-    v(this, L, null);
-    v(this, A, null);
-    v(this, k, !1);
-    v(this, C, !1);
-    v(this, f, () => {
-      l(this, r, R).call(this);
-    });
+    y(this, o);
+    y(this, s);
+    y(this, $);
+    y(this, c, null);
+    y(this, R, null);
+    y(this, x, null);
+    y(this, b, !1);
+    y(this, w, 0);
+    y(this, k, 0);
     const t = this.attachShadow({ mode: "open" });
-    t.innerHTML = `
-      <style>
-        :host {
-          display: inline-block;
-          position: relative;
-        }
-        canvas {
-          display: block;
-          width: 100%;
-          height: 100%;
-        }
-        ::slotted(video) {
-          position: absolute;
-          opacity: 0;
-          pointer-events: none;
-          width: 0;
-          height: 0;
-        }
-      </style>
-      <canvas></canvas>
-      <slot></slot>
-    `, o(this, E, t.querySelector("canvas"));
-  }
-  get premultipliedAlpha() {
-    return this.hasAttribute("premultipliedalpha");
-  }
-  set premultipliedAlpha(t) {
-    t ? this.setAttribute("premultipliedalpha", "") : this.removeAttribute("premultipliedalpha");
-  }
-  attributeChangedCallback(t, d, y) {
-    var c;
-    t === "premultipliedalpha" && ((c = e(this, g)) == null || c.setPremultipliedAlpha(this.premultipliedAlpha)), t === "mode" && (l(this, r, U).call(this), l(this, r, R).call(this));
+    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%;height:100%}
+</style><video></video><canvas></canvas>`, l(this, s, t.querySelector("video")), l(this, $, t.querySelector("canvas"));
+    for (const a of J)
+      e(this, s).addEventListener(a, (u) => {
+        this.dispatchEvent(new Event(u.type, { bubbles: !1, cancelable: !1 }));
+      });
   }
   connectedCallback() {
-    o(this, L, new IntersectionObserver(
+    for (const t of _)
+      t !== "mode" && this.hasAttribute(t) && d(this, o, T).call(this, t, this.getAttribute(t));
+    d(this, o, q).call(this), l(this, x, new MutationObserver(() => d(this, o, q).call(this))), e(this, x).observe(this, { childList: !0 }), l(this, R, new IntersectionObserver(
       ([t]) => {
-        o(this, k, t.isIntersecting), l(this, r, R).call(this);
+        l(this, b, t.isIntersecting), e(this, b) ? (d(this, o, D).call(this), d(this, o, P).call(this)) : d(this, o, L).call(this);
       },
       { threshold: 0 }
-    )), e(this, L).observe(this), o(this, A, new MutationObserver(() => l(this, r, R).call(this))), e(this, A).observe(this, { childList: !0 }), l(this, r, R).call(this);
+    )), e(this, R).observe(this);
   }
   disconnectedCallback() {
-    var t, d;
-    (t = e(this, L)) == null || t.disconnect(), o(this, L, null), (d = e(this, A)) == null || d.disconnect(), o(this, A, null), l(this, r, S).call(this), l(this, r, U).call(this);
+    var t, a, u;
+    d(this, o, L).call(this), (t = e(this, R)) == null || t.disconnect(), l(this, R, null), (a = e(this, x)) == null || a.disconnect(), l(this, x, null), (u = e(this, c)) == null || u.destroy(), l(this, c, null);
+  }
+  attributeChangedCallback(t, a, u) {
+    var p;
+    if (t === "mode") {
+      (p = e(this, c)) == null || p.destroy(), l(this, c, null), e(this, b) && (d(this, o, D).call(this), d(this, o, P).call(this));
+      return;
+    }
+    d(this, o, T).call(this, t, u);
+  }
+  // --- Proxied properties ---
+  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;
+  }
+  // --- Proxied methods ---
+  play() {
+    return e(this, s).play();
+  }
+  pause() {
+    e(this, s).pause();
+  }
+  load() {
+    e(this, s).load();
+  }
+  canPlayType(t) {
+    return e(this, s).canPlayType(t);
   }
 }
-E = new WeakMap(), g = new WeakMap(), h = new WeakMap(), b = new WeakMap(), L = new WeakMap(), A = new WeakMap(), k = new WeakMap(), C = new WeakMap(), r = new WeakSet(), R = function() {
-  e(this, C) || (o(this, C, !0), queueMicrotask(() => {
-    o(this, C, !1), l(this, r, _).call(this);
-  }));
-}, _ = function() {
-  const t = this.querySelector("video");
-  t !== e(this, h) && (l(this, r, S).call(this), o(this, h, t), t && l(this, r, T).call(this, t)), e(this, k) && e(this, h) ? (l(this, r, W).call(this), l(this, r, V).call(this), l(this, r, G).call(this)) : l(this, r, B).call(this);
-}, T = function(t) {
-  t.addEventListener("play", e(this, f)), t.addEventListener("pause", e(this, f)), t.addEventListener("seeked", e(this, f)), t.addEventListener("loadeddata", e(this, f));
-}, S = function() {
-  e(this, h) && (e(this, h).removeEventListener("play", e(this, f)), e(this, h).removeEventListener("pause", e(this, f)), e(this, h).removeEventListener("seeked", e(this, f)), e(this, h).removeEventListener("loadeddata", e(this, f)), o(this, h, null), l(this, r, B).call(this));
-}, f = new WeakMap(), W = function() {
-  if (e(this, g) && !e(this, g).isDestroyed) return;
-  const t = this.getAttribute("mode") ?? "canvas";
-  o(this, g, K({
-    canvas: e(this, E),
-    premultipliedAlpha: this.premultipliedAlpha,
-    mode: t
-  }));
+s = new WeakMap(), $ = new WeakMap(), c = new WeakMap(), R = new WeakMap(), x = new WeakMap(), b = new WeakMap(), w = new WeakMap(), k = new WeakMap(), o = new WeakSet(), T = function(t, a) {
+  G.has(t) ? e(this, s)[t] = a !== null : a === null ? e(this, s).removeAttribute(t) : e(this, s).setAttribute(t, a);
+}, q = 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();
+}, D = function() {
+  if (!(e(this, c) && !e(this, c).isDestroyed))
+    try {
+      const t = this.getAttribute("mode") || "canvas";
+      l(this, c, z({ canvas: e(this, $), mode: t }));
+    } catch {
+    }
+}, P = function() {
+  if (!(!e(this, b) || !e(this, c)))
+    if (d(this, o, L).call(this), "requestVideoFrameCallback" in e(this, s)) {
+      const t = () => {
+        !e(this, b) || !e(this, c) || (d(this, o, U).call(this), l(this, k, e(this, s).requestVideoFrameCallback(t)));
+      };
+      l(this, k, e(this, s).requestVideoFrameCallback(t));
+    } else {
+      const t = () => {
+        !e(this, b) || !e(this, c) || (d(this, o, U).call(this), l(this, w, requestAnimationFrame(t)));
+      };
+      l(this, w, requestAnimationFrame(t));
+    }
+}, L = function() {
+  var t, a;
+  e(this, k) && ((a = (t = e(this, s)).cancelVideoFrameCallback) == null || a.call(t, e(this, k)), l(this, k, 0)), e(this, w) && (cancelAnimationFrame(e(this, w)), l(this, w, 0));
 }, U = function() {
-  var t;
-  (t = e(this, g)) == null || t.destroy(), o(this, g, null);
-}, V = function() {
-  !e(this, g) || !e(this, h) || e(this, h).readyState < 2 || e(this, g).drawFrame(e(this, h));
-}, G = function() {
-  if (e(this, b) !== null || !e(this, h) || e(this, h).paused) return;
-  const t = () => {
-    l(this, r, V).call(this), e(this, h) && !e(this, h).paused && e(this, k) ? o(this, b, requestAnimationFrame(t)) : o(this, b, null);
-  };
-  o(this, b, requestAnimationFrame(t));
-}, B = function() {
-  e(this, b) !== null && (cancelAnimationFrame(e(this, b)), o(this, b, null));
-}, j(N, "observedAttributes", ["premultipliedalpha", "mode"]);
+  e(this, s).readyState < 2 || !e(this, c) || e(this, c).drawFrame(e(this, s));
+}, B(K, "observedAttributes", [..._]);
 export {
-  N as StackedAlphaVideoSVG,
-  J as createCanvasFilterRenderer,
-  K as createRenderer,
-  z as createSvgFilterRenderer
+  K as AlphaVideoKitSVG,
+  N as createCanvasFilterRenderer,
+  z as createRenderer,
+  H as createSvgFilterRenderer
 };

package/dist/register.cjs

@@ -1 +1 @@
-"use strict";const e=require("./index.cjs");customElements.get("stacked-alpha-video-svg")||customElements.define("stacked-alpha-video-svg",e.StackedAlphaVideoSVG);
+"use strict";const e=require("./index.cjs");customElements.get("alpha-video-kit-svg")||customElements.define("alpha-video-kit-svg",e.AlphaVideoKitSVG);

package/dist/register.js

@@ -1,2 +1,2 @@
-import { StackedAlphaVideoSVG as e } from "./index.js";
-customElements.get("stacked-alpha-video-svg") || customElements.define("stacked-alpha-video-svg", e);
+import { AlphaVideoKitSVG as e } from "./index.js";
+customElements.get("alpha-video-kit-svg") || customElements.define("alpha-video-kit-svg", e);

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@alpha-video-kit/svg",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "SVG filter-based renderer for stacked alpha videos",
   "type": "module",
-  "files": ["dist"],
+  "files": ["dist", "react.d.ts"],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -16,6 +16,9 @@
     "./register": {
       "import": "./dist/register.js",
       "require": "./dist/register.cjs"
+    },
+    "./react": {
+      "types": "./react.d.ts"
     }
   },
   "scripts": {

package/react.d.ts

@@ -0,0 +1,23 @@
+import type { AlphaVideoKitSVG } from './dist/index.js';
+
+interface AlphaVideoKitSVGAttributes extends React.HTMLAttributes<AlphaVideoKitSVG> {
+  src?: string;
+  crossOrigin?: string;
+  preload?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  playsInline?: boolean;
+  poster?: string;
+  width?: number | string;
+  height?: number | string;
+  mode?: 'canvas' | 'svg-filter';
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'alpha-video-kit-svg': AlphaVideoKitSVGAttributes;
+    }
+  }
+}