zuljaman-banner-components 1.1.21 → 1.1.23

package/dist/components/BannerRenderer/webgl/useWebGLRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWebGLRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/webgl/useWebGLRenderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5E,MAAM,MAAM,eAAe,GACvB,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAC5C,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAE9D,MAAM,WAAW,YAAY;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,gBAAgB,CAAC,EAAE,eAAe,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAwBD,wBAAgB,gBAAgB,IAAI,OAAO,CAgB1C;AA+HD,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,OAAO,EAAE,YAAY,EACrB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM;;EAqMrB"}
+{"version":3,"file":"useWebGLRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/BannerRenderer/webgl/useWebGLRenderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5E,MAAM,MAAM,eAAe,GACvB,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAC5C,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAE9D,MAAM,WAAW,YAAY;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,gBAAgB,CAAC,EAAE,eAAe,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAwBD,wBAAgB,gBAAgB,IAAI,OAAO,CAgB1C;AA+HD,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,OAAO,EAAE,YAAY,EACrB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM;;EAsQrB"}

package/dist/components/BannerRenderer/webgl/useWebGLRenderer.js

@@ -153,15 +153,22 @@ function useWebGLRenderer(canvasRef, imageUrl, effects, canvasWidth, canvasHeigh
     const renderFrameRef = (0, react_1.useRef)(null);
     const effectsRef = (0, react_1.useRef)(effects);
     effectsRef.current = effects;
+    // Keep the latest imageUrl reachable from inside the init/restore handlers
+    // (which run outside the imageUrl effect's closure).
+    const imageUrlRef = (0, react_1.useRef)(imageUrl);
+    imageUrlRef.current = imageUrl;
     // Track whether any effect needs animation (grain animated or refraction with animation)
     const needsAnimation = effects.grainAnimated && (((_a = effects.grainIntensity) !== null && _a !== void 0 ? _a : 0) > 0 ||
         ((_b = effects.refractionIntensity) !== null && _b !== void 0 ? _b : 0) > 0);
     // Load image as texture
-    const loadTexture = (0, react_1.useCallback)((gl, url) => {
+    const loadTexture = (0, react_1.useCallback)((_gl, url) => {
         const img = new Image();
         img.crossOrigin = 'anonymous';
         img.onload = () => {
-            if (!glRef.current)
+            // Re-read the current context — the one captured at call time may have
+            // been lost (and a new one restored) while the image was downloading.
+            const gl = glRef.current;
+            if (!gl)
                 return;
             let texture = textureRef.current;
             if (!texture) {
@@ -226,41 +233,103 @@ function useWebGLRenderer(canvasRef, imageUrl, effects, canvasWidth, canvasHeigh
         gl.drawArrays(gl.TRIANGLES, 0, 6);
     }, []);
     renderFrameRef.current = renderFrame;
-    // Initialize WebGL
+    // Initialize WebGL lazily.
+    //
+    // Defer context creation until the canvas enters the viewport, and also
+    // re-initialize when a previously-evicted context is needed again. Browsers
+    // cap simultaneous WebGL contexts per tab (~16 in Chrome) — pages that mount
+    // dozens of banners (e.g. the style gallery) would otherwise exhaust the
+    // pool and leave most canvases blank.
     (0, react_1.useEffect)(() => {
         const canvas = canvasRef.current;
         if (!canvas)
             return;
-        const gl = canvas.getContext('webgl', {
-            alpha: false,
-            antialias: false,
-            premultipliedAlpha: false,
-            preserveDrawingBuffer: true, // Needed for toBlob() export
-        });
-        if (!gl) {
-            console.warn('WebGL not available, falling back to CSS rendering');
-            return;
+        const initGL = () => {
+            if (glRef.current)
+                return true; // already initialized
+            const gl = canvas.getContext('webgl', {
+                alpha: false,
+                antialias: false,
+                premultipliedAlpha: false,
+                preserveDrawingBuffer: true, // Needed for toBlob() export
+            });
+            if (!gl) {
+                console.warn('WebGL not available, falling back to CSS rendering');
+                return false;
+            }
+            glRef.current = gl;
+            const program = createProgram(gl);
+            if (!program)
+                return false;
+            programRef.current = program;
+            gl.useProgram(program);
+            buffersRef.current = setupGeometry(gl, program);
+            uniformsRef.current = getUniformLocations(gl, program);
+            if (imageUrlRef.current) {
+                imageLoadedRef.current = false;
+                loadTexture(gl, imageUrlRef.current);
+            }
+            return true;
+        };
+        // preventDefault on 'webglcontextlost' is required for 'webglcontextrestored' to fire.
+        const handleContextLost = (e) => {
+            e.preventDefault();
+            glRef.current = null;
+            programRef.current = null;
+            uniformsRef.current = null;
+            textureRef.current = null;
+            buffersRef.current = null;
+            imageLoadedRef.current = false;
+        };
+        const handleContextRestored = () => {
+            initGL();
+        };
+        canvas.addEventListener('webglcontextlost', handleContextLost);
+        canvas.addEventListener('webglcontextrestored', handleContextRestored);
+        let observer = null;
+        if (typeof IntersectionObserver === 'undefined') {
+            initGL();
+        }
+        else {
+            observer = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting) {
+                        // (Re-)init when this canvas (re)enters view and lacks a live
+                        // context — covers first appearance and contexts that were
+                        // dropped while offscreen.
+                        if (!glRef.current)
+                            initGL();
+                    }
+                    else if (glRef.current) {
+                        // Free the context slot when this canvas leaves the viewport,
+                        // so visible banners on a long page (gallery view) can claim
+                        // their own context. Triggers webglcontextlost → state cleared
+                        // → re-init runs the next time the canvas re-enters view.
+                        const ext = glRef.current.getExtension('WEBGL_lose_context');
+                        if (ext)
+                            ext.loseContext();
+                    }
+                }
+            }, { rootMargin: '200px' });
+            observer.observe(canvas);
         }
-        glRef.current = gl;
-        const program = createProgram(gl);
-        if (!program)
-            return;
-        programRef.current = program;
-        gl.useProgram(program);
-        buffersRef.current = setupGeometry(gl, program);
-        uniformsRef.current = getUniformLocations(gl, program);
         return () => {
-            // Cleanup all GPU resources
-            if (textureRef.current)
-                gl.deleteTexture(textureRef.current);
-            if (buffersRef.current) {
-                if (buffersRef.current.positionBuffer)
-                    gl.deleteBuffer(buffersRef.current.positionBuffer);
-                if (buffersRef.current.texCoordBuffer)
-                    gl.deleteBuffer(buffersRef.current.texCoordBuffer);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            canvas.removeEventListener('webglcontextlost', handleContextLost);
+            canvas.removeEventListener('webglcontextrestored', handleContextRestored);
+            const gl = glRef.current;
+            if (gl) {
+                if (textureRef.current)
+                    gl.deleteTexture(textureRef.current);
+                if (buffersRef.current) {
+                    if (buffersRef.current.positionBuffer)
+                        gl.deleteBuffer(buffersRef.current.positionBuffer);
+                    if (buffersRef.current.texCoordBuffer)
+                        gl.deleteBuffer(buffersRef.current.texCoordBuffer);
+                }
+                if (programRef.current)
+                    gl.deleteProgram(programRef.current);
             }
-            if (programRef.current)
-                gl.deleteProgram(programRef.current);
             textureRef.current = null;
             buffersRef.current = null;
             programRef.current = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zuljaman-banner-components",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "description": "Shared banner components package for Next.js and AWS Lambda platforms",
   "main": "dist/index.js",
   "module": "dist/index.js",