@alpha-video-kit/svg 0.3.1 → 0.4.0

package/dist/canvas-component-DRs32j73.js

@@ -0,0 +1,527 @@
+var j = Object.defineProperty;
+var V = (o) => {
+  throw TypeError(o);
+};
+var K = (o, a, t) => a in o ? j(o, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[a] = t;
+var D = (o, a, t) => K(o, typeof a != "symbol" ? a + "" : a, t), F = (o, a, t) => a.has(o) || V("Cannot " + t);
+var e = (o, a, t) => (F(o, a, "read from private field"), t ? t.call(o) : a.get(o)), d = (o, a, t) => a.has(o) ? V("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(o) : a.set(o, t), h = (o, a, t, s) => (F(o, a, "write to private field"), s ? s.call(o, t) : a.set(o, t), t), c = (o, a, t) => (F(o, a, "access private method"), t);
+const J = `
+precision mediump float;
+attribute vec2 a_position;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(a_position * 2.0 - 1.0, 0, 1);
+  v_texCoord = vec2(a_position.x, 1.0 - a_position.y);
+}
+`, Q = `
+precision mediump float;
+uniform sampler2D u_frame;
+varying vec2 v_texCoord;
+
+void main() {
+  vec2 colorCoord = vec2(v_texCoord.x, v_texCoord.y * 0.5);
+  vec2 alphaCoord = vec2(v_texCoord.x, 0.5 + v_texCoord.y * 0.5);
+
+  vec4 color = texture2D(u_frame, colorCoord);
+  float alpha = texture2D(u_frame, alphaCoord).r;
+
+  gl_FragColor = vec4(color.rgb * alpha, alpha);
+}
+`;
+let S = null;
+function W(o, a, t) {
+  const s = o.createShader(t);
+  if (!s) throw new Error("Failed to create shader");
+  if (o.shaderSource(s, a), o.compileShader(s), !o.getShaderParameter(s, o.COMPILE_STATUS)) {
+    const n = o.getShaderInfoLog(s);
+    throw o.deleteShader(s), new Error(`Shader compile error: ${n}`);
+  }
+  return s;
+}
+function Z() {
+  if (S)
+    return S.refCount++, S;
+  const o = document.createElement("canvas"), a = {
+    antialias: !1,
+    depth: !1,
+    premultipliedAlpha: !0,
+    powerPreference: "low-power"
+  }, t = o.getContext("webgl2", a) ?? o.getContext("webgl", a);
+  if (!t) throw new Error("WebGL not supported");
+  const s = W(t, J, t.VERTEX_SHADER), n = W(t, Q, t.FRAGMENT_SHADER), g = t.createProgram();
+  if (t.attachShader(g, s), t.attachShader(g, n), t.linkProgram(g), !t.getProgramParameter(g, t.LINK_STATUS))
+    throw new Error(`Program link error: ${t.getProgramInfoLog(g)}`);
+  t.useProgram(g);
+  const p = t.getAttribLocation(g, "a_position"), f = t.createBuffer();
+  t.bindBuffer(t.ARRAY_BUFFER, f), t.bufferData(
+    t.ARRAY_BUFFER,
+    new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]),
+    t.STATIC_DRAW
+  ), t.enableVertexAttribArray(p), t.vertexAttribPointer(p, 2, t.FLOAT, !1, 0, 0);
+  const l = t.createTexture();
+  return t.bindTexture(t.TEXTURE_2D, l), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.LINEAR), t.enable(t.BLEND), t.blendFunc(t.ONE, t.ONE_MINUS_SRC_ALPHA), S = { canvas: o, gl: t, texture: l, program: g, vertexShader: s, fragmentShader: n, buffer: f, refCount: 1 }, S;
+}
+function tt(o, a, t, s) {
+  const n = a.videoWidth, g = a.videoHeight, p = Math.floor(g / 2);
+  (t.width !== n || t.height !== p) && (t.width = n, t.height = p);
+  const { canvas: f, gl: l, texture: z } = o;
+  (f.width !== n || f.height !== p) && (f.width = n, f.height = p, l.viewport(0, 0, n, p)), l.useProgram(o.program), l.bindBuffer(l.ARRAY_BUFFER, o.buffer);
+  const G = l.getAttribLocation(o.program, "a_position");
+  l.enableVertexAttribArray(G), l.vertexAttribPointer(G, 2, l.FLOAT, !1, 0, 0), l.bindTexture(l.TEXTURE_2D, z), l.texImage2D(l.TEXTURE_2D, 0, l.RGBA, l.RGBA, l.UNSIGNED_BYTE, a), l.drawArrays(l.TRIANGLES, 0, 6), s.clearRect(0, 0, n, p), s.drawImage(f, 0, 0);
+}
+function et() {
+  return Z();
+}
+function rt(o) {
+  if (o === S && (o.refCount--, o.refCount <= 0)) {
+    const { gl: a, texture: t, buffer: s, program: n, vertexShader: g, fragmentShader: p } = o;
+    a.deleteTexture(t), a.deleteBuffer(s), a.deleteProgram(n), a.deleteShader(g), a.deleteShader(p);
+    const f = a.getExtension("WEBGL_lose_context");
+    f && f.loseContext(), S = null;
+  }
+}
+const X = [
+  "src",
+  "crossorigin",
+  "preload",
+  "autoplay",
+  "loop",
+  "muted",
+  "playsinline",
+  "poster",
+  "width",
+  "height"
+], it = /* @__PURE__ */ 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 i, x, w, k, L, T, C, b, M, I, H;
+class ot extends HTMLElement {
+  constructor() {
+    super();
+    d(this, b);
+    d(this, i);
+    d(this, x);
+    d(this, w);
+    d(this, k);
+    d(this, L);
+    d(this, T, null);
+    d(this, C);
+    const t = this.attachShadow({ mode: "open" });
+    h(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, 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, C)})">
+<video></video>
+</foreignObject>
+</svg>`, h(this, x, t.querySelector("svg")), h(this, w, t.querySelector("foreignObject")), h(this, k, t.querySelector("filter")), h(this, L, t.querySelector("feOffset")), h(this, i, t.querySelector("video"));
+    for (const s of st)
+      e(this, i).addEventListener(s, (n) => {
+        this.dispatchEvent(new Event(n.type, { bubbles: !1, cancelable: !1 }));
+      });
+    e(this, i).addEventListener("loadedmetadata", () => c(this, b, M).call(this)), e(this, i).addEventListener("resize", () => c(this, b, M).call(this));
+  }
+  connectedCallback() {
+    for (const t of X)
+      this.hasAttribute(t) && c(this, b, I).call(this, t, this.getAttribute(t));
+    c(this, b, H).call(this), h(this, T, new MutationObserver(() => c(this, b, H).call(this))), e(this, T).observe(this, { childList: !0 });
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, T)) == null || t.disconnect(), h(this, T, null);
+  }
+  attributeChangedCallback(t, s, n) {
+    c(this, b, I).call(this, t, n);
+  }
+  // --- Proxied properties ---
+  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;
+  }
+  // --- Proxied methods ---
+  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(), x = new WeakMap(), w = new WeakMap(), k = new WeakMap(), L = new WeakMap(), T = new WeakMap(), C = new WeakMap(), b = new WeakSet(), M = function() {
+  const t = e(this, i).videoWidth, s = e(this, i).videoHeight;
+  if (!t || !s) return;
+  const n = Math.floor(s / 2);
+  e(this, x).setAttribute("viewBox", `0 0 ${t} ${n}`), e(this, w).setAttribute("width", String(t)), e(this, w).setAttribute("height", String(s)), e(this, k).setAttribute("width", String(t)), e(this, k).setAttribute("height", String(s)), e(this, L).setAttribute("dy", String(-n));
+}, I = function(t, s) {
+  it.has(t) ? e(this, i)[t] = s !== null : s === null ? e(this, i).removeAttribute(t) : e(this, i).setAttribute(t, s);
+}, H = 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();
+}, D(ot, "observedAttributes", [...X]);
+const $ = [
+  "src",
+  "crossorigin",
+  "preload",
+  "autoplay",
+  "loop",
+  "muted",
+  "playsinline",
+  "poster",
+  "width",
+  "height"
+], at = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), nt = [
+  "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, y, P, R, _, v, A, E, m, u, U, q, N, Y, O, B;
+class ht extends HTMLElement {
+  constructor() {
+    super();
+    d(this, u);
+    d(this, r);
+    d(this, y);
+    d(this, P);
+    d(this, R, null);
+    d(this, _, null);
+    d(this, v, !1);
+    d(this, A, 0);
+    d(this, E, 0);
+    d(this, m, null);
+    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%}
+</style>
+<video></video>
+<canvas></canvas>`, h(this, r, t.querySelector("video")), h(this, y, t.querySelector("canvas")), h(this, P, e(this, y).getContext("2d"));
+    for (const s of nt)
+      e(this, r).addEventListener(s, (n) => {
+        this.dispatchEvent(new Event(n.type, { bubbles: !1, cancelable: !1 }));
+      });
+    e(this, r).addEventListener("loadedmetadata", () => c(this, u, U).call(this)), e(this, r).addEventListener("resize", () => c(this, u, U).call(this));
+  }
+  connectedCallback() {
+    for (const t of $)
+      this.hasAttribute(t) && c(this, u, q).call(this, t, this.getAttribute(t));
+    c(this, u, N).call(this), h(this, _, new MutationObserver(() => c(this, u, N).call(this))), e(this, _).observe(this, { childList: !0 }), h(this, m, et()), h(this, R, new IntersectionObserver(
+      ([t]) => {
+        h(this, v, t.isIntersecting), e(this, v) ? c(this, u, Y).call(this) : c(this, u, O).call(this);
+      },
+      { threshold: 0 }
+    )), e(this, R).observe(this);
+  }
+  disconnectedCallback() {
+    var t, s;
+    c(this, u, O).call(this), (t = e(this, R)) == null || t.disconnect(), h(this, R, null), (s = e(this, _)) == null || s.disconnect(), h(this, _, null), e(this, m) && (rt(e(this, m)), h(this, m, null));
+  }
+  attributeChangedCallback(t, s, n) {
+    c(this, u, q).call(this, t, n);
+  }
+  // --- Proxied properties ---
+  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;
+  }
+  // --- Proxied methods ---
+  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(), y = new WeakMap(), P = new WeakMap(), R = new WeakMap(), _ = new WeakMap(), v = new WeakMap(), A = new WeakMap(), E = new WeakMap(), m = new WeakMap(), u = new WeakSet(), U = function() {
+  const t = e(this, r).videoWidth, s = e(this, r).videoHeight;
+  if (!t || !s) return;
+  const n = Math.floor(s / 2);
+  e(this, y).width = t, e(this, y).height = n;
+}, q = function(t, s) {
+  at.has(t) ? e(this, r)[t] = s !== null : s === null ? e(this, r).removeAttribute(t) : e(this, r).setAttribute(t, s);
+}, N = 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();
+}, Y = function() {
+  if (e(this, v))
+    if (c(this, u, O).call(this), "requestVideoFrameCallback" in e(this, r)) {
+      const t = () => {
+        e(this, v) && (c(this, u, B).call(this), h(this, E, e(this, r).requestVideoFrameCallback(t)));
+      };
+      h(this, E, e(this, r).requestVideoFrameCallback(t));
+    } else {
+      const t = () => {
+        e(this, v) && (c(this, u, B).call(this), h(this, A, requestAnimationFrame(t)));
+      };
+      h(this, A, requestAnimationFrame(t));
+    }
+}, O = function() {
+  var t, s;
+  e(this, E) && ((s = (t = e(this, r)).cancelVideoFrameCallback) == null || s.call(t, e(this, E)), h(this, E, 0)), e(this, A) && (cancelAnimationFrame(e(this, A)), h(this, A, 0));
+}, B = function() {
+  if (e(this, r).readyState < 2 || !e(this, m)) return;
+  const t = e(this, r).videoWidth, s = e(this, r).videoHeight;
+  !t || !s || tt(e(this, m), e(this, r), e(this, y), e(this, P));
+}, D(ht, "observedAttributes", [...$]);
+export {
+  ht as A,
+  et as a,
+  ot as b,
+  tt as p,
+  rt as r
+};

package/dist/canvas-component-DduUMloe.cjs

@@ -0,0 +1,46 @@
+"use strict";var tt=Object.defineProperty;var G=o=>{throw TypeError(o)};var et=(o,a,t)=>a in o?tt(o,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[a]=t;var F=(o,a,t)=>et(o,typeof a!="symbol"?a+"":a,t),D=(o,a,t)=>a.has(o)||G("Cannot "+t);var e=(o,a,t)=>(D(o,a,"read from private field"),t?t.call(o):a.get(o)),d=(o,a,t)=>a.has(o)?G("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(o):a.set(o,t),h=(o,a,t,s)=>(D(o,a,"write to private field"),s?s.call(o,t):a.set(o,t),t),c=(o,a,t)=>(D(o,a,"access private method"),t);const rt=`
+precision mediump float;
+attribute vec2 a_position;
+varying vec2 v_texCoord;
+
+void main() {
+  gl_Position = vec4(a_position * 2.0 - 1.0, 0, 1);
+  v_texCoord = vec2(a_position.x, 1.0 - a_position.y);
+}
+`,it=`
+precision mediump float;
+uniform sampler2D u_frame;
+varying vec2 v_texCoord;
+
+void main() {
+  vec2 colorCoord = vec2(v_texCoord.x, v_texCoord.y * 0.5);
+  vec2 alphaCoord = vec2(v_texCoord.x, 0.5 + v_texCoord.y * 0.5);
+
+  vec4 color = texture2D(u_frame, colorCoord);
+  float alpha = texture2D(u_frame, alphaCoord).r;
+
+  gl_FragColor = vec4(color.rgb * alpha, alpha);
+}
+`;let S=null;function W(o,a,t){const s=o.createShader(t);if(!s)throw new Error("Failed to create shader");if(o.shaderSource(s,a),o.compileShader(s),!o.getShaderParameter(s,o.COMPILE_STATUS)){const n=o.getShaderInfoLog(s);throw o.deleteShader(s),new Error(`Shader compile error: ${n}`)}return s}function st(){if(S)return S.refCount++,S;const o=document.createElement("canvas"),a={antialias:!1,depth:!1,premultipliedAlpha:!0,powerPreference:"low-power"},t=o.getContext("webgl2",a)??o.getContext("webgl",a);if(!t)throw new Error("WebGL not supported");const s=W(t,rt,t.VERTEX_SHADER),n=W(t,it,t.FRAGMENT_SHADER),g=t.createProgram();if(t.attachShader(g,s),t.attachShader(g,n),t.linkProgram(g),!t.getProgramParameter(g,t.LINK_STATUS))throw new Error(`Program link error: ${t.getProgramInfoLog(g)}`);t.useProgram(g);const p=t.getAttribLocation(g,"a_position"),f=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,f),t.bufferData(t.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),t.STATIC_DRAW),t.enableVertexAttribArray(p),t.vertexAttribPointer(p,2,t.FLOAT,!1,0,0);const l=t.createTexture();return t.bindTexture(t.TEXTURE_2D,l),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.enable(t.BLEND),t.blendFunc(t.ONE,t.ONE_MINUS_SRC_ALPHA),S={canvas:o,gl:t,texture:l,program:g,vertexShader:s,fragmentShader:n,buffer:f,refCount:1},S}function Y(o,a,t,s){const n=a.videoWidth,g=a.videoHeight,p=Math.floor(g/2);(t.width!==n||t.height!==p)&&(t.width=n,t.height=p);const{canvas:f,gl:l,texture:Z}=o;(f.width!==n||f.height!==p)&&(f.width=n,f.height=p,l.viewport(0,0,n,p)),l.useProgram(o.program),l.bindBuffer(l.ARRAY_BUFFER,o.buffer);const V=l.getAttribLocation(o.program,"a_position");l.enableVertexAttribArray(V),l.vertexAttribPointer(V,2,l.FLOAT,!1,0,0),l.bindTexture(l.TEXTURE_2D,Z),l.texImage2D(l.TEXTURE_2D,0,l.RGBA,l.RGBA,l.UNSIGNED_BYTE,a),l.drawArrays(l.TRIANGLES,0,6),s.clearRect(0,0,n,p),s.drawImage(f,0,0)}function z(){return st()}function j(o){if(o===S&&(o.refCount--,o.refCount<=0)){const{gl:a,texture:t,buffer:s,program:n,vertexShader:g,fragmentShader:p}=o;a.deleteTexture(t),a.deleteBuffer(s),a.deleteProgram(n),a.deleteShader(g),a.deleteShader(p);const f=a.getExtension("WEBGL_lose_context");f&&f.loseContext(),S=null}}const X=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],ot=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,x,w,k,L,T,C,b,M,I,H;class K extends HTMLElement{constructor(){super();d(this,b);d(this,i);d(this,x);d(this,w);d(this,k);d(this,L);d(this,T,null);d(this,C);const t=this.attachShadow({mode:"open"});h(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,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,C)})">
+<video></video>
+</foreignObject>
+</svg>`,h(this,x,t.querySelector("svg")),h(this,w,t.querySelector("foreignObject")),h(this,k,t.querySelector("filter")),h(this,L,t.querySelector("feOffset")),h(this,i,t.querySelector("video"));for(const s of at)e(this,i).addEventListener(s,n=>{this.dispatchEvent(new Event(n.type,{bubbles:!1,cancelable:!1}))});e(this,i).addEventListener("loadedmetadata",()=>c(this,b,M).call(this)),e(this,i).addEventListener("resize",()=>c(this,b,M).call(this))}connectedCallback(){for(const t of X)this.hasAttribute(t)&&c(this,b,I).call(this,t,this.getAttribute(t));c(this,b,H).call(this),h(this,T,new MutationObserver(()=>c(this,b,H).call(this))),e(this,T).observe(this,{childList:!0})}disconnectedCallback(){var t;(t=e(this,T))==null||t.disconnect(),h(this,T,null)}attributeChangedCallback(t,s,n){c(this,b,I).call(this,t,n)}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,x=new WeakMap,w=new WeakMap,k=new WeakMap,L=new WeakMap,T=new WeakMap,C=new WeakMap,b=new WeakSet,M=function(){const t=e(this,i).videoWidth,s=e(this,i).videoHeight;if(!t||!s)return;const n=Math.floor(s/2);e(this,x).setAttribute("viewBox",`0 0 ${t} ${n}`),e(this,w).setAttribute("width",String(t)),e(this,w).setAttribute("height",String(s)),e(this,k).setAttribute("width",String(t)),e(this,k).setAttribute("height",String(s)),e(this,L).setAttribute("dy",String(-n))},I=function(t,s){ot.has(t)?e(this,i)[t]=s!==null:s===null?e(this,i).removeAttribute(t):e(this,i).setAttribute(t,s)},H=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()},F(K,"observedAttributes",[...X]);const $=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],nt=new Set(["autoplay","loop","muted","playsinline"]),ht=["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,y,P,R,_,v,A,E,m,u,q,U,N,Q,O,B;class J extends HTMLElement{constructor(){super();d(this,u);d(this,r);d(this,y);d(this,P);d(this,R,null);d(this,_,null);d(this,v,!1);d(this,A,0);d(this,E,0);d(this,m,null);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%}
+</style>
+<video></video>
+<canvas></canvas>`,h(this,r,t.querySelector("video")),h(this,y,t.querySelector("canvas")),h(this,P,e(this,y).getContext("2d"));for(const s of ht)e(this,r).addEventListener(s,n=>{this.dispatchEvent(new Event(n.type,{bubbles:!1,cancelable:!1}))});e(this,r).addEventListener("loadedmetadata",()=>c(this,u,q).call(this)),e(this,r).addEventListener("resize",()=>c(this,u,q).call(this))}connectedCallback(){for(const t of $)this.hasAttribute(t)&&c(this,u,U).call(this,t,this.getAttribute(t));c(this,u,N).call(this),h(this,_,new MutationObserver(()=>c(this,u,N).call(this))),e(this,_).observe(this,{childList:!0}),h(this,m,z()),h(this,R,new IntersectionObserver(([t])=>{h(this,v,t.isIntersecting),e(this,v)?c(this,u,Q).call(this):c(this,u,O).call(this)},{threshold:0})),e(this,R).observe(this)}disconnectedCallback(){var t,s;c(this,u,O).call(this),(t=e(this,R))==null||t.disconnect(),h(this,R,null),(s=e(this,_))==null||s.disconnect(),h(this,_,null),e(this,m)&&(j(e(this,m)),h(this,m,null))}attributeChangedCallback(t,s,n){c(this,u,U).call(this,t,n)}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,y=new WeakMap,P=new WeakMap,R=new WeakMap,_=new WeakMap,v=new WeakMap,A=new WeakMap,E=new WeakMap,m=new WeakMap,u=new WeakSet,q=function(){const t=e(this,r).videoWidth,s=e(this,r).videoHeight;if(!t||!s)return;const n=Math.floor(s/2);e(this,y).width=t,e(this,y).height=n},U=function(t,s){nt.has(t)?e(this,r)[t]=s!==null:s===null?e(this,r).removeAttribute(t):e(this,r).setAttribute(t,s)},N=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()},Q=function(){if(e(this,v))if(c(this,u,O).call(this),"requestVideoFrameCallback"in e(this,r)){const t=()=>{e(this,v)&&(c(this,u,B).call(this),h(this,E,e(this,r).requestVideoFrameCallback(t)))};h(this,E,e(this,r).requestVideoFrameCallback(t))}else{const t=()=>{e(this,v)&&(c(this,u,B).call(this),h(this,A,requestAnimationFrame(t)))};h(this,A,requestAnimationFrame(t))}},O=function(){var t,s;e(this,E)&&((s=(t=e(this,r)).cancelVideoFrameCallback)==null||s.call(t,e(this,E)),h(this,E,0)),e(this,A)&&(cancelAnimationFrame(e(this,A)),h(this,A,0))},B=function(){if(e(this,r).readyState<2||!e(this,m))return;const t=e(this,r).videoWidth,s=e(this,r).videoHeight;!t||!s||Y(e(this,m),e(this,r),e(this,y),e(this,P))},F(J,"observedAttributes",[...$]);exports.AlphaVideoKitCanvas=J;exports.AlphaVideoKitSVG=K;exports.acquire=z;exports.processFrame=Y;exports.release=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 e=require("./canvas-component-DduUMloe.cjs");function o(t){const{canvas:a}=t,l=a.getContext("2d");let n=e.acquire(),r=!1;return{drawFrame(i){r||e.processFrame(n,i,a,l)},setPremultipliedAlpha(i){},destroy(){r||(r=!0,e.release(n))},get isDestroyed(){return r}}}function s(t){return o(t)}exports.AlphaVideoKitCanvas=e.AlphaVideoKitCanvas;exports.AlphaVideoKitSVG=e.AlphaVideoKitSVG;exports.createRenderer=s;exports.createSvgFilterRenderer=o;

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 /**
- * `<alpha-video-kit-canvas>` — Canvas 2D with SVG filter via ctx.filter.
+ * `<alpha-video-kit-canvas>` — Canvas 2D output powered by a shared WebGL processor.
  *
- * A hidden <video> feeds frames to <canvas> via drawImage.
- * The SVG filter (injected into document.body) composites stacked-alpha halves.
- * ctx.filter = 'url(#id)' applies the filter during drawImage.
- * A wrapper div clips the canvas to the top (color) half.
+ * A hidden <video> feeds frames through a shared WebGL canvas (singleton)
+ * that composites stacked-alpha halves via a shader, then copies the result
+ * to the visible <canvas> via drawImage. This avoids the 16 WebGL context
+ * limit and works in Safari.
  */
 export declare class AlphaVideoKitCanvas extends HTMLElement {
     #private;
-    static observedAttributes: ("width" | "height" | "src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster")[];
+    static observedAttributes: ("src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster" | "width" | "height")[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -66,7 +66,7 @@ export declare class AlphaVideoKitCanvas extends HTMLElement {
  */
 export declare class AlphaVideoKitSVG extends HTMLElement {
     #private;
-    static observedAttributes: ("width" | "height" | "src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster")[];
+    static observedAttributes: ("src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster" | "width" | "height")[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -113,11 +113,11 @@ export declare class AlphaVideoKitSVG extends HTMLElement {
 export declare function createRenderer(options: StackedAlphaRendererOptions): StackedAlphaRenderer;
 
 /**
- * SVG filter renderer using ctx.filter on Canvas 2D.
+ * Renderer that uses a shared WebGL canvas for alpha compositing,
+ * then copies the result to the user's 2D canvas.
  *
- * Uses an offscreen canvas at full (double) height so the filter can see
- * both halves. The filter composites alpha, then the top half is copied
- * to the visible canvas.
+ * This avoids the 16 WebGL context limit (single shared context)
+ * and works in Safari (unlike ctx.filter with SVG url() references).
  */
 export declare function createSvgFilterRenderer(options: StackedAlphaRendererOptions): StackedAlphaRenderer;
 

package/dist/index.js

@@ -1,43 +1,28 @@
-import { A as x, a as y } from "./canvas-component-zHBwAZuP.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;
-  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");
-    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 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;
-  }
+import { a as o, r as i, p as l } from "./canvas-component-DRs32j73.js";
+import { A as m, b as x } from "./canvas-component-DRs32j73.js";
+function d(r) {
+  const { canvas: t } = r, n = t.getContext("2d");
+  let a = o(), e = !1;
   return {
-    drawFrame(r) {
-      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);
+    drawFrame(s) {
+      e || l(a, s, t, n);
     },
-    setPremultipliedAlpha(r) {
+    setPremultipliedAlpha(s) {
     },
     destroy() {
-      a || (a = !0, s == null || s.remove(), s = null, c = null, h = null);
+      e || (e = !0, i(a));
     },
     get isDestroyed() {
-      return a;
+      return e;
     }
   };
 }
-function w(f) {
-  return g(f);
+function c(r) {
+  return d(r);
 }
 export {
-  x as AlphaVideoKitCanvas,
-  y as AlphaVideoKitSVG,
-  w as createRenderer,
-  g as createSvgFilterRenderer
+  m as AlphaVideoKitCanvas,
+  x as AlphaVideoKitSVG,
+  c as createRenderer,
+  d as createSvgFilterRenderer
 };

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-DduUMloe.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 { b as e, A as a } from "./canvas-component-DRs32j73.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.4.0",
   "description": "SVG filter-based renderer for stacked alpha videos",
   "type": "module",
   "files": ["dist", "react.d.ts"],

package/dist/canvas-component-Cu612Agl.cjs

@@ -1,23 +0,0 @@
-"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>
-: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">
-<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)})">
-<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>
-: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;

package/dist/canvas-component-zHBwAZuP.js

@@ -1,471 +0,0 @@
-var X = Object.defineProperty;
-var j = (n) => {
-  throw TypeError(n);
-};
-var Z = (n, l, t) => l in n ? X(n, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[l] = t;
-var V = (n, l, t) => Z(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 Y = [
-  "src",
-  "crossorigin",
-  "preload",
-  "autoplay",
-  "loop",
-  "muted",
-  "playsinline",
-  "poster",
-  "width",
-  "height"
-], tt = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), et = [
-  "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, T, 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, 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, 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, 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 et)
-      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 Y)
-      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);
-  }
-  // --- 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);
-  }
-}
-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() {
-  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) {
-  tt.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();
-}, V(it, "observedAttributes", [...Y]);
-const w = "http://www.w3.org/2000/svg", J = [
-  "src",
-  "crossorigin",
-  "preload",
-  "autoplay",
-  "loop",
-  "muted",
-  "playsinline",
-  "poster",
-  "width",
-  "height"
-], st = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), rt = [
-  "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, C, g, R, v, A, p, b, f, M, S, k, 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, A, 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, 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, C, e(this, m).getContext("2d")), a(this, g, document.createElement("canvas")), a(this, R, 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 }));
-      });
-    e(this, i).addEventListener("loadedmetadata", () => d(this, h, P).call(this)), e(this, i).addEventListener("resize", () => d(this, h, P).call(this));
-  }
-  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(
-      ([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);
-  }
-  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);
-  }
-  attributeChangedCallback(t, r, o) {
-    d(this, h, D).call(this, t, o);
-  }
-  // --- Proxied properties ---
-  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;
-  }
-  // --- Proxied methods ---
-  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(), 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");
-  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 x = document.createElementNS(w, "feOffset");
-  x.setAttribute("in", "SourceGraphic"), x.setAttribute("dy", "0"), x.setAttribute("result", "s");
-  const H = document.createElementNS(w, "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);
-}, K = function() {
-  var t;
-  (t = e(this, S)) == null || t.remove(), a(this, S, null), a(this, k, 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));
-}, 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() {
-  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();
-}, Q = function() {
-  if (e(this, p))
-    if (d(this, h, F).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));
-    }
-}, F = 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, 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);
-}, V(at, "observedAttributes", [...J]);
-export {
-  at as A,
-  it as a
-};