@buildcores/render-client 1.0.4 → 1.0.6

package/dist/index.js

@@ -322,27 +322,41 @@ function useBouncePatternProgress(enabled = true) {
 }
 
 // API Configuration
-const API_BASE_URL = "https://squid-app-7aeyk.ondigitalocean.app";
+const API_BASE_URL = "https://www.renderapi.buildcores.com";
 // API Endpoints
 const API_ENDPOINTS = {
     RENDER_BUILD_EXPERIMENTAL: "/render-build-experimental",
     AVAILABLE_PARTS: "/available-parts",
 };
 // API URL helpers
-const buildApiUrl = (endpoint) => {
-    return `${API_BASE_URL}${endpoint}`;
+const buildApiUrl = (endpoint, config) => {
+    const baseUrl = `${API_BASE_URL}${endpoint}`;
+    if (config?.environment) {
+        const separator = endpoint.includes("?") ? "&" : "?";
+        return `${baseUrl}${separator}environment=${config.environment}`;
+    }
+    return baseUrl;
+};
+// Helper to build request headers with auth token
+const buildHeaders = (config) => {
+    const headers = {
+        "Content-Type": "application/json",
+        accept: "application/json",
+    };
+    if (config?.authToken) {
+        headers["Authorization"] = `Bearer ${config.authToken}`;
+    }
+    return headers;
 };
 // API Implementation
-const renderBuildExperimental = async (request) => {
+const renderBuildExperimental = async (request, config) => {
     const requestWithFormat = {
         ...request,
         format: request.format || "video", // Default to video format
     };
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL), {
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
+        headers: buildHeaders(config),
         body: JSON.stringify(requestWithFormat),
     });
     if (!response.ok) {
@@ -357,16 +371,14 @@ const renderBuildExperimental = async (request) => {
         },
     };
 };
-const renderSpriteExperimental = async (request) => {
+const renderSpriteExperimental = async (request, config) => {
     const requestWithFormat = {
         ...request,
         format: "sprite",
     };
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL), {
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
+        headers: buildHeaders(config),
         body: JSON.stringify(requestWithFormat),
     });
     if (!response.ok) {
@@ -384,12 +396,10 @@ const renderSpriteExperimental = async (request) => {
         },
     };
 };
-const getAvailableParts = async () => {
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.AVAILABLE_PARTS), {
+const getAvailableParts = async (config) => {
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.AVAILABLE_PARTS, config), {
         method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-        },
+        headers: buildHeaders(config),
     });
     if (!response.ok) {
         throw new Error(`Get available parts failed: ${response.status} ${response.statusText}`);
@@ -397,7 +407,6 @@ const getAvailableParts = async () => {
     return response.json();
 };
 
-// API Types
 /**
  * Enum defining all available PC part categories that can be rendered.
  *
@@ -466,7 +475,7 @@ const arePartsEqual = (parts1, parts2) => {
     }
     return true;
 };
-const useBuildRender = (parts, onLoadStart) => {
+const useBuildRender = (parts, apiConfig, onLoadStart) => {
     const [videoSrc, setVideoSrc] = React.useState(null);
     const [isRenderingBuild, setIsRenderingBuild] = React.useState(false);
     const [renderError, setRenderError] = React.useState(null);
@@ -476,7 +485,7 @@ const useBuildRender = (parts, onLoadStart) => {
             setIsRenderingBuild(true);
             setRenderError(null);
             onLoadStart?.();
-            const response = await renderBuildExperimental(currentParts);
+            const response = await renderBuildExperimental(currentParts, apiConfig);
             const objectUrl = URL.createObjectURL(response.video);
             // Clean up previous video URL before setting new one
             setVideoSrc((prevSrc) => {
@@ -492,7 +501,7 @@ const useBuildRender = (parts, onLoadStart) => {
         finally {
             setIsRenderingBuild(false);
         }
-    }, [onLoadStart]);
+    }, [apiConfig, onLoadStart]);
     // Effect to call API when parts content changes (using custom equality check)
     React.useEffect(() => {
         const shouldFetch = previousPartsRef.current === null ||
@@ -517,7 +526,7 @@ const useBuildRender = (parts, onLoadStart) => {
     };
 };
 
-const useSpriteRender = (parts, onLoadStart) => {
+const useSpriteRender = (parts, apiConfig, onLoadStart) => {
     const [spriteSrc, setSpriteSrc] = React.useState(null);
     const [isRenderingSprite, setIsRenderingSprite] = React.useState(false);
     const [renderError, setRenderError] = React.useState(null);
@@ -528,7 +537,7 @@ const useSpriteRender = (parts, onLoadStart) => {
             setIsRenderingSprite(true);
             setRenderError(null);
             onLoadStart?.();
-            const response = await renderSpriteExperimental(currentParts);
+            const response = await renderSpriteExperimental(currentParts, apiConfig);
             const objectUrl = URL.createObjectURL(response.sprite);
             // Clean up previous sprite URL before setting new one
             setSpriteSrc((prevSrc) => {
@@ -550,7 +559,7 @@ const useSpriteRender = (parts, onLoadStart) => {
         finally {
             setIsRenderingSprite(false);
         }
-    }, [onLoadStart]);
+    }, [apiConfig, onLoadStart]);
     // Effect to call API when parts content changes (using custom equality check)
     React.useEffect(() => {
         const shouldFetch = previousPartsRef.current === null ||
@@ -585,18 +594,19 @@ const LoadingErrorOverlay = ({ isVisible, renderError, size, }) => {
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            backgroundColor: "rgba(0, 0, 0, 1)",
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
             color: "white",
             zIndex: 10,
-        }, children: renderError ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: { marginBottom: "20px", fontSize: "18px" }, children: "Render Failed" }), jsxRuntime.jsx("div", { style: {
+        }, children: renderError ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: { marginBottom: "20px", fontSize: "18px", color: "white" }, children: "Render Failed" }), jsxRuntime.jsx("div", { style: {
                         fontSize: "14px",
                         textAlign: "center",
                         maxWidth: size * 0.8,
-                    }, children: renderError })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { style: { marginBottom: "20px", fontSize: "18px" }, children: "Loading Build..." }) })) }));
+                        color: "white",
+                    }, children: renderError })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { style: { marginBottom: "20px", fontSize: "18px", color: "white" }, children: "Loading Build..." }) })) }));
 };
 
 const DragIcon = ({ width = 24, height = 24, className, style, ...props }) => {
@@ -630,13 +640,13 @@ const InstructionTooltip = ({ isVisible, progressValue, instructionIcon, }) => {
             } })) }));
 };
 
-const BuildRender = ({ parts, size, mouseSensitivity = 0.2, touchSensitivity = 0.2, }) => {
+const BuildRender = ({ parts, 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);
     // Use custom hook for sprite rendering
-    const { spriteSrc, isRenderingSprite, renderError, spriteMetadata } = useSpriteRender(parts);
+    const { spriteSrc, isRenderingSprite, renderError, spriteMetadata } = useSpriteRender(parts, apiConfig);
     const { value: progressValue, isBouncing } = useBouncePatternProgress(bouncingAllowed);
     const total = spriteMetadata ? spriteMetadata.totalFrames : 72;
     const cols = spriteMetadata ? spriteMetadata.cols : 12;
@@ -729,7 +739,12 @@ const BuildRender = ({ parts, size, mouseSensitivity = 0.2, touchSensitivity = 0
             draw(frameRef.current);
         }
     }, [img, isLoading, draw]);
-    return (jsxRuntime.jsxs("div", { style: { position: "relative", width: size, height: size }, children: [img && (jsxRuntime.jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, style: {
+    return (jsxRuntime.jsxs("div", { style: {
+            position: "relative",
+            width: size,
+            height: size,
+            backgroundColor: "black",
+        }, children: [img && (jsxRuntime.jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, style: {
                     width: size,
                     height: size,
                     cursor: isDragging ? "grabbing" : "grab",
@@ -838,14 +853,74 @@ const useVideoScrubbing = (videoRef, options = {}) => {
     };
 };
 
+const BuildRenderVideo = ({ parts, 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);
+    // Use custom hook for build rendering
+    const { videoSrc, isRenderingBuild, renderError } = useBuildRender(parts, apiConfig);
+    const { value: progressValue, isBouncing } = useBouncePatternProgress(bouncingAllowed);
+    const { isDragging, handleMouseDown, handleTouchStart, hasDragged } = useVideoScrubbing(videoRef, {
+        mouseSensitivity,
+        touchSensitivity,
+    });
+    const handleLoadStartInternal = React.useCallback(() => {
+        setIsLoading(true);
+        setBouncingAllowed(false);
+    }, []);
+    const handleCanPlayInternal = React.useCallback(() => {
+        setIsLoading(false);
+        // Start bouncing animation after delay
+        setTimeout(() => {
+            setBouncingAllowed(true);
+        }, 2000);
+    }, []);
+    React.useEffect(() => {
+        if (hasDragged.current || !videoRef.current)
+            return;
+        const duration = videoRef.current.duration;
+        if (!isFinite(duration))
+            return;
+        const time = calculateCircularTime(0, progressValue, 0.5, duration);
+        if (isFinite(time)) {
+            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: () => {
+                    if (videoRef.current) {
+                        videoRef.current.pause();
+                    }
+                }, style: {
+                    cursor: isDragging ? "grabbing" : "grab",
+                    touchAction: "none", // Prevents default touch behaviors like scrolling
+                    display: "block",
+                    // Completely hide video controls on all browsers including mobile
+                    WebkitMediaControls: "none",
+                    MozMediaControls: "none",
+                    OMediaControls: "none",
+                    msMediaControls: "none",
+                    mediaControls: "none",
+                    // Additional iOS-specific properties
+                    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 &&
+                    !isRenderingBuild &&
+                    !renderError &&
+                    isBouncing &&
+                    !hasDragged.current, progressValue: progressValue })] }));
+};
+
 exports.API_BASE_URL = API_BASE_URL;
 exports.API_ENDPOINTS = API_ENDPOINTS;
 exports.BuildRender = BuildRender;
+exports.BuildRenderVideo = BuildRenderVideo;
 exports.DragIcon = DragIcon;
 exports.InstructionTooltip = InstructionTooltip;
 exports.LoadingErrorOverlay = LoadingErrorOverlay;
 exports.arePartsEqual = arePartsEqual;
 exports.buildApiUrl = buildApiUrl;
+exports.buildHeaders = buildHeaders;
 exports.calculateCircularFrame = calculateCircularFrame;
 exports.calculateCircularTime = calculateCircularTime;
 exports.getAvailableParts = getAvailableParts;