@buildcores/render-client 1.0.9 → 1.0.10

package/dist/index.d.ts

@@ -45,24 +45,12 @@ interface BuildRenderVideoProps {
      */
     parts: RenderBuildRequest;
     /**
-     * Video size in pixels (width and height will be the same).
-     *
-     * This determines the resolution of the rendered 3D video. Higher values
-     * provide better quality but may impact performance.
-     *
-     * @example
-     * ```tsx
-     * <BuildRender parts={parts} size={300} />  // 300x300px
-     * <BuildRender parts={parts} size={500} />  // 500x500px
-     * <BuildRender parts={parts} size={800} />  // 800x800px - high quality
-     * ```
-     *
-     * Recommended sizes:
-     * - 300px: Good for thumbnails or small previews
-     * - 500px: Standard size for most use cases
-     * - 800px+: High quality for detailed viewing
+     * Width and height in pixels. If only `size` is provided, both width and height use it.
+     * If `width`/`height` are provided, they override `size` individually.
      */
-    size: number;
+    width?: number;
+    height?: number;
+    size?: number;
     /**
      * API configuration for environment and authentication.
      * This is required to make API calls to the BuildCores rendering service.
@@ -159,19 +147,12 @@ interface BuildRenderProps {
      */
     parts: RenderBuildRequest;
     /**
-     * Sprite size in pixels (width and height will be the same).
-     *
-     * This determines the display size of the rendered 3D sprite. The sprite sheet
-     * itself is rendered at a fixed resolution, but this controls the display size.
-     *
-     * @example
-     * ```tsx
-     * <SpriteRender parts={parts} size={300} />  // 300x300px
-     * <SpriteRender parts={parts} size={500} />  // 500x500px
-     * <SpriteRender parts={parts} size={800} />  // 800x800px - larger display
-     * ```
+     * Width and height in pixels. If only `size` is provided, both width and height use it.
+     * If `width`/`height` are provided, they override `size` individually.
      */
-    size: number;
+    width?: number;
+    height?: number;
+    size?: number;
     /**
      * API configuration for environment and authentication.
      * This is required to make API calls to the BuildCores rendering service.

package/dist/index.esm.js

@@ -729,11 +729,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 = useRef(null);
     const [img, setImg] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [bouncingAllowed, setBouncingAllowed] = 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);
@@ -779,8 +781,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;
@@ -800,7 +802,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,
@@ -830,19 +832,19 @@ const BuildRender = ({ parts, size, apiConfig, mouseSensitivity = 0.2, touchSens
     }, [img, isLoading, draw]);
     return (jsxs("div", { style: {
             position: "relative",
-            width: size,
-            height: size,
+            width: displayW,
+            height: displayH,
             backgroundColor: "black",
         }, children: [img && (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() })), jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingSprite || !!renderError, renderError: renderError || undefined, size: size }), jsx(InstructionTooltip, { isVisible: !isLoading &&
+                }, role: "img", "aria-label": "360\u00B0 viewer", onContextMenu: (e) => e.preventDefault() })), jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingSprite || !!renderError, renderError: renderError || undefined, size: Math.min(displayW, displayH) }), jsx(InstructionTooltip, { isVisible: !isLoading &&
                     !isRenderingSprite &&
                     !renderError &&
                     isBouncing &&
@@ -942,10 +944,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 = useRef(null);
     const [isLoading, setIsLoading] = useState(true);
     const [bouncingAllowed, setBouncingAllowed] = 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);
@@ -975,7 +979,7 @@ const BuildRenderVideo = ({ parts, size, apiConfig, mouseSensitivity = 0.01, tou
             videoRef.current.currentTime = time;
         }
     }, [progressValue, hasDragged]);
-    return (jsxs("div", { style: { position: "relative", width: size, height: size }, children: [videoSrc && (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 (jsxs("div", { style: { position: "relative", width: displayW, height: displayH }, children: [videoSrc && (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();
                     }
@@ -993,7 +997,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)), jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingBuild || !!renderError, renderError: renderError || undefined, size: size }), jsx(InstructionTooltip, { isVisible: !isLoading &&
+                }, children: "Your browser does not support the video tag." }, videoSrc)), jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingBuild || !!renderError, renderError: renderError || undefined, size: Math.min(displayW, displayH) }), jsx(InstructionTooltip, { isVisible: !isLoading &&
                     !isRenderingBuild &&
                     !renderError &&
                     isBouncing &&