@alpha-video-kit/svg 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{canvas-component-DRs32j73.js → canvas-component-COStvtJ7.js} +18 -18
- package/dist/{canvas-component-DduUMloe.cjs → canvas-component-twvv7vym.cjs} +3 -3
- package/dist/index.cjs +1 -1
- package/dist/index.js +2 -2
- package/dist/register.cjs +1 -1
- package/dist/register.js +1 -1
- package/package.json +1 -1
|
@@ -3,8 +3,8 @@ var V = (o) => {
|
|
|
3
3
|
throw TypeError(o);
|
|
4
4
|
};
|
|
5
5
|
var K = (o, a, t) => a in o ? j(o, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[a] = t;
|
|
6
|
-
var
|
|
7
|
-
var e = (o, a, t) => (
|
|
6
|
+
var F = (o, a, t) => K(o, typeof a != "symbol" ? a + "" : a, t), D = (o, a, t) => a.has(o) || V("Cannot " + t);
|
|
7
|
+
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) ? 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) => (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);
|
|
8
8
|
const J = `
|
|
9
9
|
precision mediump float;
|
|
10
10
|
attribute vec2 a_position;
|
|
@@ -60,7 +60,7 @@ function Z() {
|
|
|
60
60
|
t.STATIC_DRAW
|
|
61
61
|
), t.enableVertexAttribArray(p), t.vertexAttribPointer(p, 2, t.FLOAT, !1, 0, 0);
|
|
62
62
|
const l = t.createTexture();
|
|
63
|
-
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.
|
|
63
|
+
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.disable(t.BLEND), t.clearColor(0, 0, 0, 0), S = { canvas: o, gl: t, texture: l, program: g, vertexShader: s, fragmentShader: n, buffer: f, refCount: 1 }, S;
|
|
64
64
|
}
|
|
65
65
|
function tt(o, a, t, s) {
|
|
66
66
|
const n = a.videoWidth, g = a.videoHeight, p = Math.floor(g / 2);
|
|
@@ -68,7 +68,7 @@ function tt(o, a, t, s) {
|
|
|
68
68
|
const { canvas: f, gl: l, texture: z } = o;
|
|
69
69
|
(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);
|
|
70
70
|
const G = l.getAttribLocation(o.program, "a_position");
|
|
71
|
-
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);
|
|
71
|
+
l.enableVertexAttribArray(G), l.vertexAttribPointer(G, 2, l.FLOAT, !1, 0, 0), l.bindTexture(l.TEXTURE_2D, z), l.clear(l.COLOR_BUFFER_BIT), 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);
|
|
72
72
|
}
|
|
73
73
|
function et() {
|
|
74
74
|
return Z();
|
|
@@ -117,7 +117,7 @@ const X = [
|
|
|
117
117
|
"resize",
|
|
118
118
|
"volumechange"
|
|
119
119
|
];
|
|
120
|
-
var i, x, w, k, L, T, C, b,
|
|
120
|
+
var i, x, w, k, L, T, C, b, I, M, H;
|
|
121
121
|
class ot extends HTMLElement {
|
|
122
122
|
constructor() {
|
|
123
123
|
super();
|
|
@@ -151,11 +151,11 @@ video{display:block;width:100%;height:100%}
|
|
|
151
151
|
e(this, i).addEventListener(s, (n) => {
|
|
152
152
|
this.dispatchEvent(new Event(n.type, { bubbles: !1, cancelable: !1 }));
|
|
153
153
|
});
|
|
154
|
-
e(this, i).addEventListener("loadedmetadata", () => c(this, b,
|
|
154
|
+
e(this, i).addEventListener("loadedmetadata", () => c(this, b, I).call(this)), e(this, i).addEventListener("resize", () => c(this, b, I).call(this));
|
|
155
155
|
}
|
|
156
156
|
connectedCallback() {
|
|
157
157
|
for (const t of X)
|
|
158
|
-
this.hasAttribute(t) && c(this, b,
|
|
158
|
+
this.hasAttribute(t) && c(this, b, M).call(this, t, this.getAttribute(t));
|
|
159
159
|
c(this, b, H).call(this), h(this, T, new MutationObserver(() => c(this, b, H).call(this))), e(this, T).observe(this, { childList: !0 });
|
|
160
160
|
}
|
|
161
161
|
disconnectedCallback() {
|
|
@@ -163,7 +163,7 @@ video{display:block;width:100%;height:100%}
|
|
|
163
163
|
(t = e(this, T)) == null || t.disconnect(), h(this, T, null);
|
|
164
164
|
}
|
|
165
165
|
attributeChangedCallback(t, s, n) {
|
|
166
|
-
c(this, b,
|
|
166
|
+
c(this, b, M).call(this, t, n);
|
|
167
167
|
}
|
|
168
168
|
// --- Proxied properties ---
|
|
169
169
|
get src() {
|
|
@@ -279,18 +279,18 @@ video{display:block;width:100%;height:100%}
|
|
|
279
279
|
return e(this, i).canPlayType(t);
|
|
280
280
|
}
|
|
281
281
|
}
|
|
282
|
-
i = new WeakMap(), x = new WeakMap(), w = new WeakMap(), k = new WeakMap(), L = new WeakMap(), T = new WeakMap(), C = new WeakMap(), b = new WeakSet(),
|
|
282
|
+
i = new WeakMap(), x = new WeakMap(), w = new WeakMap(), k = new WeakMap(), L = new WeakMap(), T = new WeakMap(), C = new WeakMap(), b = new WeakSet(), I = function() {
|
|
283
283
|
const t = e(this, i).videoWidth, s = e(this, i).videoHeight;
|
|
284
284
|
if (!t || !s) return;
|
|
285
285
|
const n = Math.floor(s / 2);
|
|
286
286
|
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));
|
|
287
|
-
},
|
|
287
|
+
}, M = function(t, s) {
|
|
288
288
|
it.has(t) ? e(this, i)[t] = s !== null : s === null ? e(this, i).removeAttribute(t) : e(this, i).setAttribute(t, s);
|
|
289
289
|
}, H = function() {
|
|
290
290
|
e(this, i).querySelectorAll("source").forEach((t) => t.remove()), this.querySelectorAll("source").forEach((t) => {
|
|
291
291
|
e(this, i).appendChild(t.cloneNode(!0));
|
|
292
292
|
}), e(this, i).querySelectorAll("source").length > 0 && !e(this, i).src && e(this, i).load();
|
|
293
|
-
},
|
|
293
|
+
}, F(ot, "observedAttributes", [...X]);
|
|
294
294
|
const $ = [
|
|
295
295
|
"src",
|
|
296
296
|
"crossorigin",
|
|
@@ -327,7 +327,7 @@ const $ = [
|
|
|
327
327
|
"resize",
|
|
328
328
|
"volumechange"
|
|
329
329
|
];
|
|
330
|
-
var r, y, P, R, _, v, A, E, m, u, U, q,
|
|
330
|
+
var r, y, P, R, _, v, A, E, m, u, U, q, B, Y, O, N;
|
|
331
331
|
class ht extends HTMLElement {
|
|
332
332
|
constructor() {
|
|
333
333
|
super();
|
|
@@ -358,7 +358,7 @@ canvas{display:block;width:100%}
|
|
|
358
358
|
connectedCallback() {
|
|
359
359
|
for (const t of $)
|
|
360
360
|
this.hasAttribute(t) && c(this, u, q).call(this, t, this.getAttribute(t));
|
|
361
|
-
c(this, u,
|
|
361
|
+
c(this, u, B).call(this), h(this, _, new MutationObserver(() => c(this, u, B).call(this))), e(this, _).observe(this, { childList: !0 }), h(this, m, et()), h(this, R, new IntersectionObserver(
|
|
362
362
|
([t]) => {
|
|
363
363
|
h(this, v, t.isIntersecting), e(this, v) ? c(this, u, Y).call(this) : c(this, u, O).call(this);
|
|
364
364
|
},
|
|
@@ -493,7 +493,7 @@ r = new WeakMap(), y = new WeakMap(), P = new WeakMap(), R = new WeakMap(), _ =
|
|
|
493
493
|
e(this, y).width = t, e(this, y).height = n;
|
|
494
494
|
}, q = function(t, s) {
|
|
495
495
|
at.has(t) ? e(this, r)[t] = s !== null : s === null ? e(this, r).removeAttribute(t) : e(this, r).setAttribute(t, s);
|
|
496
|
-
},
|
|
496
|
+
}, B = function() {
|
|
497
497
|
e(this, r).querySelectorAll("source").forEach((t) => t.remove()), this.querySelectorAll("source").forEach((t) => {
|
|
498
498
|
e(this, r).appendChild(t.cloneNode(!0));
|
|
499
499
|
}), e(this, r).querySelectorAll("source").length > 0 && !e(this, r).src && e(this, r).load();
|
|
@@ -501,23 +501,23 @@ r = new WeakMap(), y = new WeakMap(), P = new WeakMap(), R = new WeakMap(), _ =
|
|
|
501
501
|
if (e(this, v))
|
|
502
502
|
if (c(this, u, O).call(this), "requestVideoFrameCallback" in e(this, r)) {
|
|
503
503
|
const t = () => {
|
|
504
|
-
e(this, v) && (c(this, u,
|
|
504
|
+
e(this, v) && (c(this, u, N).call(this), h(this, E, e(this, r).requestVideoFrameCallback(t)));
|
|
505
505
|
};
|
|
506
506
|
h(this, E, e(this, r).requestVideoFrameCallback(t));
|
|
507
507
|
} else {
|
|
508
508
|
const t = () => {
|
|
509
|
-
e(this, v) && (c(this, u,
|
|
509
|
+
e(this, v) && (c(this, u, N).call(this), h(this, A, requestAnimationFrame(t)));
|
|
510
510
|
};
|
|
511
511
|
h(this, A, requestAnimationFrame(t));
|
|
512
512
|
}
|
|
513
513
|
}, O = function() {
|
|
514
514
|
var t, s;
|
|
515
515
|
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));
|
|
516
|
-
},
|
|
516
|
+
}, N = function() {
|
|
517
517
|
if (e(this, r).readyState < 2 || !e(this, m)) return;
|
|
518
518
|
const t = e(this, r).videoWidth, s = e(this, r).videoHeight;
|
|
519
519
|
!t || !s || tt(e(this, m), e(this, r), e(this, y), e(this, P));
|
|
520
|
-
},
|
|
520
|
+
}, F(ht, "observedAttributes", [...$]);
|
|
521
521
|
export {
|
|
522
522
|
ht as A,
|
|
523
523
|
et as a,
|
|
@@ -21,7 +21,7 @@ void main() {
|
|
|
21
21
|
|
|
22
22
|
gl_FragColor = vec4(color.rgb * alpha, alpha);
|
|
23
23
|
}
|
|
24
|
-
`;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.
|
|
24
|
+
`;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.disable(t.BLEND),t.clearColor(0,0,0,0),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.clear(l.COLOR_BUFFER_BIT),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,I,M,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>
|
|
25
25
|
:host{display:inline-block;overflow:hidden}
|
|
26
26
|
svg{display:block;width:100%;height:auto}
|
|
27
27
|
video{display:block;width:100%;height:100%}
|
|
@@ -37,10 +37,10 @@ video{display:block;width:100%;height:100%}
|
|
|
37
37
|
<foreignObject width="1" height="1" filter="url(#${e(this,C)})">
|
|
38
38
|
<video></video>
|
|
39
39
|
</foreignObject>
|
|
40
|
-
</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,
|
|
40
|
+
</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,I).call(this)),e(this,i).addEventListener("resize",()=>c(this,b,I).call(this))}connectedCallback(){for(const t of X)this.hasAttribute(t)&&c(this,b,M).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,M).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,I=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))},M=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,B,Q,O,N;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>
|
|
41
41
|
:host{display:inline-block;overflow:hidden}
|
|
42
42
|
video{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
|
|
43
43
|
canvas{display:block;width:100%}
|
|
44
44
|
</style>
|
|
45
45
|
<video></video>
|
|
46
|
-
<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,
|
|
46
|
+
<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,B).call(this),h(this,_,new MutationObserver(()=>c(this,u,B).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)},B=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,N).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,N).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))},N=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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./canvas-component-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./canvas-component-twvv7vym.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.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as o, r as i, p as l } from "./canvas-component-
|
|
2
|
-
import { A as m, b as x } from "./canvas-component-
|
|
1
|
+
import { a as o, r as i, p as l } from "./canvas-component-COStvtJ7.js";
|
|
2
|
+
import { A as m, b as x } from "./canvas-component-COStvtJ7.js";
|
|
3
3
|
function d(r) {
|
|
4
4
|
const { canvas: t } = r, n = t.getContext("2d");
|
|
5
5
|
let a = o(), e = !1;
|
package/dist/register.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("./canvas-component-
|
|
1
|
+
"use strict";const e=require("./canvas-component-twvv7vym.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
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { b as e, A as a } from "./canvas-component-
|
|
1
|
+
import { b as e, A as a } from "./canvas-component-COStvtJ7.js";
|
|
2
2
|
customElements.get("alpha-video-kit-svg") || customElements.define("alpha-video-kit-svg", e);
|
|
3
3
|
customElements.get("alpha-video-kit-canvas") || customElements.define("alpha-video-kit-canvas", a);
|