@alpha-video-kit/svg 0.1.0

package/dist/index.cjs

@@ -0,0 +1,51 @@
+"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"
+                 xmlns:xlink="http://www.w3.org/1999/xlink"
+                 width="${a}" height="${n}"
+                 viewBox="0 0 ${a} ${n}">
+              <defs>
+                <filter id="r2a" color-interpolation-filters="sRGB">
+                  <feColorMatrix type="matrix"
+                    values="0 0 0 0 1
+                            0 0 0 0 1
+                            0 0 0 0 1
+                            1 0 0 0 0"/>
+                </filter>
+                <mask id="alphaMask">
+                  <svg viewBox="0 ${n} ${a} ${n}"
+                       width="${a}" height="${n}"
+                       preserveAspectRatio="none">
+                    <image href="${w}"
+                           width="${a}" height="${p}"
+                           filter="url(#r2a)"/>
+                  </svg>
+                </mask>
+              </defs>
+              <svg viewBox="0 0 ${a} ${n}"
+                   width="${a}" height="${n}"
+                   preserveAspectRatio="none"
+                   mask="url(#alphaMask)">
+                <image href="${w}"
+                       width="${a}" height="${p}"/>
+              </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;

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Canvas 2D renderer with pixel manipulation.
+ * Draws the video to an offscreen canvas, reads pixels from top and bottom halves,
+ * applies alpha from the bottom half to the top half's color data.
+ * No SVG filters used — pure Canvas 2D fallback for maximum compatibility.
+ */
+export declare function createCanvasFilterRenderer(options: StackedAlphaRendererOptions): StackedAlphaRenderer;
+
+export declare function createRenderer(options: SvgRendererOptions): StackedAlphaRenderer;
+
+/**
+ * Pure SVG filter renderer.
+ * Renders each frame by drawing the video to a temporary canvas to get a data URL,
+ * then uses an SVG with filter-based alpha extraction and masking.
+ */
+export declare function createSvgFilterRenderer(options: StackedAlphaRendererOptions): StackedAlphaRenderer;
+
+export declare interface StackedAlphaRenderer {
+    drawFrame(video: HTMLVideoElement): void;
+    setPremultipliedAlpha(value: boolean): void;
+    destroy(): void;
+    readonly isDestroyed: boolean;
+}
+
+export declare interface StackedAlphaRendererOptions {
+    canvas: HTMLCanvasElement | OffscreenCanvas;
+    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 {
+    mode?: SvgRendererMode;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,203 @@
+var H = Object.defineProperty;
+var P = (s) => {
+  throw TypeError(s);
+};
+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) {
+    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}">
+              <defs>
+                <filter id="r2a" color-interpolation-filters="sRGB">
+                  <feColorMatrix type="matrix"
+                    values="0 0 0 0 1
+                            0 0 0 0 1
+                            0 0 0 0 1
+                            1 0 0 0 0"/>
+                </filter>
+                <mask id="alphaMask">
+                  <svg viewBox="0 ${n} ${a} ${n}"
+                       width="${a}" height="${n}"
+                       preserveAspectRatio="none">
+                    <image href="${w}"
+                           width="${a}" height="${p}"
+                           filter="url(#r2a)"/>
+                  </svg>
+                </mask>
+              </defs>
+              <svg viewBox="0 0 ${a} ${n}"
+                   width="${a}" height="${n}"
+                   preserveAspectRatio="none"
+                   mask="url(#alphaMask)">
+                <image href="${w}"
+                       width="${a}" height="${p}"/>
+              </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);
+          return;
+        }
+        t.clearRect(0, 0, a, p), t.drawImage(M, 0, 0), URL.revokeObjectURL(u);
+      }, M.src = u;
+    },
+    setPremultipliedAlpha(w) {
+    },
+    destroy() {
+      c || (c = !0);
+    },
+    get isDestroyed() {
+      return c;
+    }
+  };
+}
+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;
+  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;
+        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;
+        }
+      }
+      d.putImageData(F, 0, 0);
+    },
+    setPremultipliedAlpha(a) {
+      w = a;
+    },
+    destroy() {
+      $ || ($ = !0);
+    },
+    get isDestroyed() {
+      return $;
+    }
+  };
+}
+function K(s) {
+  const { mode: i = "canvas", ...t } = s;
+  return i === "svg-filter" ? z(t) : J(t);
+}
+var E, g, h, b, L, A, k, C, r, R, _, T, S, f, W, U, V, G, B;
+class N 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);
+    });
+    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));
+  }
+  connectedCallback() {
+    o(this, L, new IntersectionObserver(
+      ([t]) => {
+        o(this, k, t.isIntersecting), l(this, r, R).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);
+  }
+  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);
+  }
+}
+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
+  }));
+}, 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"]);
+export {
+  N as StackedAlphaVideoSVG,
+  J as createCanvasFilterRenderer,
+  K as createRenderer,
+  z as createSvgFilterRenderer
+};

package/dist/register.cjs

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

package/dist/register.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/register.js

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

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@alpha-video-kit/svg",
+  "version": "0.1.0",
+  "description": "SVG filter-based renderer for stacked alpha videos",
+  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./register": {
+      "import": "./dist/register.js",
+      "require": "./dist/register.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stepancar/alpha-video-kit",
+    "directory": "packages/svg"
+  }
+}