@buildcores/render-client 1.0.8 → 1.0.10

package/dist/index.js

@@ -417,7 +417,10 @@ const renderBuild = async (request, config, options) => {
     for (;;) {
         const status = await getRenderBuildStatus(job_id, config);
         if (status.status === "completed") {
-            const finalUrl = status.url ?? undefined;
+            const requestedFormat = request.format ?? "video";
+            const finalUrl = (requestedFormat === "sprite"
+                ? status.sprite_url || status.url || undefined
+                : status.video_url || status.url || undefined);
             if (!finalUrl) {
                 throw new Error("Render job completed but no URL returned");
             }
@@ -599,7 +602,7 @@ const useBuildRender = (parts, apiConfig, onLoadStart, options) => {
     };
 };
 
-const useSpriteRender = (parts, apiConfig, onLoadStart) => {
+const useSpriteRender = (parts, apiConfig, onLoadStart, options) => {
     const [spriteSrc, setSpriteSrc] = React.useState(null);
     const [isRenderingSprite, setIsRenderingSprite] = React.useState(false);
     const [renderError, setRenderError] = React.useState(null);
@@ -610,21 +613,36 @@ const useSpriteRender = (parts, apiConfig, onLoadStart) => {
             setIsRenderingSprite(true);
             setRenderError(null);
             onLoadStart?.();
-            const response = await renderSpriteExperimental(currentParts, apiConfig);
-            const objectUrl = URL.createObjectURL(response.sprite);
-            // Clean up previous sprite URL before setting new one
-            setSpriteSrc((prevSrc) => {
-                if (prevSrc) {
-                    URL.revokeObjectURL(prevSrc);
-                }
-                return objectUrl;
-            });
-            // Set sprite metadata
-            setSpriteMetadata({
-                cols: response.metadata?.cols || 12,
-                rows: response.metadata?.rows || 6,
-                totalFrames: response.metadata?.totalFrames || 72,
-            });
+            const mode = options?.mode ?? "async";
+            if (mode === "experimental") {
+                const response = await renderSpriteExperimental(currentParts, apiConfig);
+                const objectUrl = URL.createObjectURL(response.sprite);
+                // Clean up previous sprite URL before setting new one
+                setSpriteSrc((prevSrc) => {
+                    if (prevSrc && prevSrc.startsWith("blob:")) {
+                        URL.revokeObjectURL(prevSrc);
+                    }
+                    return objectUrl;
+                });
+                // Set sprite metadata
+                setSpriteMetadata({
+                    cols: response.metadata?.cols || 12,
+                    rows: response.metadata?.rows || 6,
+                    totalFrames: response.metadata?.totalFrames || 72,
+                });
+            }
+            else {
+                // Async job-based flow: request sprite format and use returned URL
+                const { videoUrl: spriteUrl } = await renderBuild({ ...currentParts, format: "sprite" }, apiConfig);
+                setSpriteSrc((prevSrc) => {
+                    if (prevSrc && prevSrc.startsWith("blob:")) {
+                        URL.revokeObjectURL(prevSrc);
+                    }
+                    return spriteUrl;
+                });
+                // No metadata from async endpoint; keep defaults
+                setSpriteMetadata({ cols: 12, rows: 6, totalFrames: 72 });
+            }
         }
         catch (error) {
             setRenderError(error instanceof Error ? error.message : "Failed to render sprite");
@@ -632,7 +650,7 @@ const useSpriteRender = (parts, apiConfig, onLoadStart) => {
         finally {
             setIsRenderingSprite(false);
         }
-    }, [apiConfig, onLoadStart]);
+    }, [apiConfig, onLoadStart, options?.mode]);
     // Effect to call API when parts content changes (using custom equality check)
     React.useEffect(() => {
         const shouldFetch = previousPartsRef.current === null ||
@@ -645,7 +663,7 @@ const useSpriteRender = (parts, apiConfig, onLoadStart) => {
     // Cleanup effect for component unmount
     React.useEffect(() => {
         return () => {
-            if (spriteSrc) {
+            if (spriteSrc && spriteSrc.startsWith("blob:")) {
                 URL.revokeObjectURL(spriteSrc);
             }
         };
@@ -713,11 +731,13 @@ const InstructionTooltip = ({ isVisible, progressValue, instructionIcon, }) => {
             } })) }));
 };
 
-const BuildRender = ({ parts, size, apiConfig, mouseSensitivity = 0.2, touchSensitivity = 0.2, }) => {
+const BuildRender = ({ parts, width, height, size, apiConfig, mouseSensitivity = 0.2, touchSensitivity = 0.2, }) => {
     const canvasRef = React.useRef(null);
     const [img, setImg] = React.useState(null);
     const [isLoading, setIsLoading] = React.useState(true);
     const [bouncingAllowed, setBouncingAllowed] = React.useState(false);
+    const displayW = width ?? size ?? 300;
+    const displayH = height ?? size ?? 300;
     // Use custom hook for sprite rendering
     const { spriteSrc, isRenderingSprite, renderError, spriteMetadata } = useSpriteRender(parts, apiConfig);
     const { value: progressValue, isBouncing } = useBouncePatternProgress(bouncingAllowed);
@@ -763,8 +783,8 @@ const BuildRender = ({ parts, size, apiConfig, mouseSensitivity = 0.2, touchSens
             return;
         // Backing store sized for HiDPI; CSS size stays `size`
         const dpr = Math.max(1, window.devicePixelRatio || 1);
-        const targetW = Math.round(size * dpr);
-        const targetH = Math.round(size * dpr);
+        const targetW = Math.round(displayW * dpr);
+        const targetH = Math.round(displayH * dpr);
         if (cnv.width !== targetW || cnv.height !== targetH) {
             cnv.width = targetW;
             cnv.height = targetH;
@@ -784,7 +804,7 @@ const BuildRender = ({ parts, size, apiConfig, mouseSensitivity = 0.2, touchSens
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = "high";
         ctx.drawImage(img, sx, sy, sw, sh, 0, 0, targetW, targetH);
-    }, [img, frameW, frameH, size, cols, total]);
+    }, [img, frameW, frameH, displayW, displayH, cols, total]);
     const { isDragging, handleMouseDown, handleTouchStart, hasDragged } = useSpriteScrubbing(canvasRef, total, {
         mouseSensitivity,
         touchSensitivity,
@@ -814,19 +834,19 @@ const BuildRender = ({ parts, size, apiConfig, mouseSensitivity = 0.2, touchSens
     }, [img, isLoading, draw]);
     return (jsxRuntime.jsxs("div", { style: {
             position: "relative",
-            width: size,
-            height: size,
+            width: displayW,
+            height: displayH,
             backgroundColor: "black",
         }, children: [img && (jsxRuntime.jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, style: {
-                    width: size,
-                    height: size,
+                    width: displayW,
+                    height: displayH,
                     cursor: isDragging ? "grabbing" : "grab",
                     touchAction: "none", // Prevents default touch behaviors like scrolling
                     display: "block",
                     userSelect: "none",
                     WebkitUserSelect: "none",
                     WebkitTouchCallout: "none",
-                }, role: "img", "aria-label": "360\u00B0 viewer", onContextMenu: (e) => e.preventDefault() })), jsxRuntime.jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingSprite || !!renderError, renderError: renderError || undefined, size: size }), jsxRuntime.jsx(InstructionTooltip, { isVisible: !isLoading &&
+                }, role: "img", "aria-label": "360\u00B0 viewer", onContextMenu: (e) => e.preventDefault() })), jsxRuntime.jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingSprite || !!renderError, renderError: renderError || undefined, size: Math.min(displayW, displayH) }), jsxRuntime.jsx(InstructionTooltip, { isVisible: !isLoading &&
                     !isRenderingSprite &&
                     !renderError &&
                     isBouncing &&
@@ -926,10 +946,12 @@ const useVideoScrubbing = (videoRef, options = {}) => {
     };
 };
 
-const BuildRenderVideo = ({ parts, size, apiConfig, mouseSensitivity = 0.01, touchSensitivity = 0.01, }) => {
+const BuildRenderVideo = ({ parts, width, height, size, apiConfig, mouseSensitivity = 0.01, touchSensitivity = 0.01, }) => {
     const videoRef = React.useRef(null);
     const [isLoading, setIsLoading] = React.useState(true);
     const [bouncingAllowed, setBouncingAllowed] = React.useState(false);
+    const displayW = width ?? size ?? 300;
+    const displayH = height ?? size ?? 300;
     // Use custom hook for build rendering
     const { videoSrc, isRenderingBuild, renderError } = useBuildRender(parts, apiConfig);
     const { value: progressValue, isBouncing } = useBouncePatternProgress(bouncingAllowed);
@@ -959,7 +981,7 @@ const BuildRenderVideo = ({ parts, size, apiConfig, mouseSensitivity = 0.01, tou
             videoRef.current.currentTime = time;
         }
     }, [progressValue, hasDragged]);
-    return (jsxRuntime.jsxs("div", { style: { position: "relative", width: size, height: size }, children: [videoSrc && (jsxRuntime.jsx("video", { ref: videoRef, src: videoSrc, width: size, height: size, autoPlay: true, preload: "metadata", muted: true, playsInline: true, controls: false, disablePictureInPicture: true, controlsList: "nodownload nofullscreen noremoteplayback", ...{ "x-webkit-airplay": "deny" }, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onLoadStart: handleLoadStartInternal, onCanPlay: handleCanPlayInternal, onLoadedData: () => {
+    return (jsxRuntime.jsxs("div", { style: { position: "relative", width: displayW, height: displayH }, children: [videoSrc && (jsxRuntime.jsx("video", { ref: videoRef, src: videoSrc, width: displayW, height: displayH, autoPlay: true, preload: "metadata", muted: true, playsInline: true, controls: false, disablePictureInPicture: true, controlsList: "nodownload nofullscreen noremoteplayback", ...{ "x-webkit-airplay": "deny" }, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onLoadStart: handleLoadStartInternal, onCanPlay: handleCanPlayInternal, onLoadedData: () => {
                     if (videoRef.current) {
                         videoRef.current.pause();
                     }
@@ -977,7 +999,7 @@ const BuildRenderVideo = ({ parts, size, apiConfig, mouseSensitivity = 0.01, tou
                     WebkitTouchCallout: "none",
                     WebkitUserSelect: "none",
                     userSelect: "none",
-                }, children: "Your browser does not support the video tag." }, videoSrc)), jsxRuntime.jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingBuild || !!renderError, renderError: renderError || undefined, size: size }), jsxRuntime.jsx(InstructionTooltip, { isVisible: !isLoading &&
+                }, children: "Your browser does not support the video tag." }, videoSrc)), jsxRuntime.jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingBuild || !!renderError, renderError: renderError || undefined, size: Math.min(displayW, displayH) }), jsxRuntime.jsx(InstructionTooltip, { isVisible: !isLoading &&
                     !isRenderingBuild &&
                     !renderError &&
                     isBouncing &&