@buildcores/render-client 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,582 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect, createContext, useContext } from 'react';
+
+// Helper to extract clientX from mouse or touch events
+const getClientX = (e) => {
+    return "touches" in e ? e.touches[0].clientX : e.clientX;
+};
+// Helper to calculate new video time with circular wrapping
+const calculateCircularTime = (startTime, deltaX, sensitivity, duration) => {
+    const timeDelta = deltaX * sensitivity;
+    let newTime = startTime + timeDelta;
+    // Make it circular - wrap around when going past boundaries
+    newTime = newTime % duration;
+    if (newTime < 0) {
+        newTime += duration;
+    }
+    return newTime;
+};
+const useVideoScrubbing = (videoRef, options = {}) => {
+    const { mouseSensitivity = 0.01, touchSensitivity = 0.01 } = options;
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStartX, setDragStartX] = useState(0);
+    const [dragStartTime, setDragStartTime] = useState(0);
+    const hasDragged = useRef(false);
+    // Helper to start dragging (common logic for mouse and touch)
+    const startDrag = useCallback((clientX, event) => {
+        if (!videoRef.current)
+            return;
+        setIsDragging(true);
+        setDragStartX(clientX);
+        setDragStartTime(videoRef.current.currentTime);
+        hasDragged.current = true;
+        event.preventDefault();
+    }, [videoRef]);
+    // Helper to handle drag movement (common logic for mouse and touch)
+    const handleDragMove = useCallback((clientX, sensitivity) => {
+        if (!isDragging || !videoRef.current)
+            return;
+        const deltaX = clientX - dragStartX;
+        const duration = videoRef.current.duration || 0;
+        if (duration > 0) {
+            const newTime = calculateCircularTime(dragStartTime, deltaX, sensitivity, duration);
+            videoRef.current.currentTime = newTime;
+        }
+    }, [isDragging, dragStartX, dragStartTime, videoRef]);
+    // Helper to end dragging (common logic for mouse and touch)
+    const endDrag = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    const handleMouseDown = useCallback((e) => {
+        startDrag(e.clientX, e.nativeEvent);
+    }, [startDrag]);
+    const handleTouchStart = useCallback((e) => {
+        startDrag(e.touches[0].clientX, e.nativeEvent);
+    }, [startDrag]);
+    const handleDocumentMouseMove = useCallback((e) => {
+        handleDragMove(getClientX(e), mouseSensitivity);
+    }, [handleDragMove, mouseSensitivity]);
+    const handleDocumentTouchMove = useCallback((e) => {
+        handleDragMove(getClientX(e), touchSensitivity);
+    }, [handleDragMove, touchSensitivity]);
+    const handleDocumentMouseUp = useCallback(() => {
+        endDrag();
+    }, [endDrag]);
+    const handleDocumentTouchEnd = useCallback(() => {
+        endDrag();
+    }, [endDrag]);
+    // Add document-level event listeners when dragging starts
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener("mousemove", handleDocumentMouseMove);
+            document.addEventListener("mouseup", handleDocumentMouseUp);
+            document.addEventListener("touchmove", handleDocumentTouchMove);
+            document.addEventListener("touchend", handleDocumentTouchEnd);
+            return () => {
+                document.removeEventListener("mousemove", handleDocumentMouseMove);
+                document.removeEventListener("mouseup", handleDocumentMouseUp);
+                document.removeEventListener("touchmove", handleDocumentTouchMove);
+                document.removeEventListener("touchend", handleDocumentTouchEnd);
+            };
+        }
+    }, [
+        isDragging,
+        handleDocumentMouseMove,
+        handleDocumentMouseUp,
+        handleDocumentTouchMove,
+        handleDocumentTouchEnd,
+    ]);
+    return {
+        isDragging,
+        handleMouseDown,
+        handleTouchStart,
+        hasDragged,
+    };
+};
+
+/**
+ * @public
+ */
+const MotionConfigContext = createContext({
+    transformPagePoint: (p) => p,
+    isStatic: false,
+    reducedMotion: "never",
+});
+
+/*#__NO_SIDE_EFFECTS__*/
+const noop = (any) => any;
+
+if (process.env.NODE_ENV !== "production") ;
+
+function createRenderStep(runNextFrame) {
+    /**
+     * We create and reuse two queues, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */
+    let thisFrame = new Set();
+    let nextFrame = new Set();
+    /**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */
+    let isProcessing = false;
+    let flushNextFrame = false;
+    /**
+     * A set of processes which were marked keepAlive when scheduled.
+     */
+    const toKeepAlive = new WeakSet();
+    let latestFrameData = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    function triggerCallback(callback) {
+        if (toKeepAlive.has(callback)) {
+            step.schedule(callback);
+            runNextFrame();
+        }
+        callback(latestFrameData);
+    }
+    const step = {
+        /**
+         * Schedule a process to run on the next frame.
+         */
+        schedule: (callback, keepAlive = false, immediate = false) => {
+            const addToCurrentFrame = immediate && isProcessing;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
+            if (keepAlive)
+                toKeepAlive.add(callback);
+            if (!queue.has(callback))
+                queue.add(callback);
+            return callback;
+        },
+        /**
+         * Cancel the provided callback from running on the next frame.
+         */
+        cancel: (callback) => {
+            nextFrame.delete(callback);
+            toKeepAlive.delete(callback);
+        },
+        /**
+         * Execute all schedule callbacks.
+         */
+        process: (frameData) => {
+            latestFrameData = frameData;
+            /**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */
+            if (isProcessing) {
+                flushNextFrame = true;
+                return;
+            }
+            isProcessing = true;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Execute this frame
+            thisFrame.forEach(triggerCallback);
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
+            isProcessing = false;
+            if (flushNextFrame) {
+                flushNextFrame = false;
+                step.process(frameData);
+            }
+        },
+    };
+    return step;
+}
+
+const stepsOrder = [
+    "read", // Read
+    "resolveKeyframes", // Write/Read/Write/Read
+    "update", // Compute
+    "preRender", // Compute
+    "render", // Write
+    "postRender", // Compute
+];
+const maxElapsed = 40;
+function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+    let runNextFrame = false;
+    let useDefaultElapsed = true;
+    const state = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    const flagRunNextFrame = () => (runNextFrame = true);
+    const steps = stepsOrder.reduce((acc, key) => {
+        acc[key] = createRenderStep(flagRunNextFrame);
+        return acc;
+    }, {});
+    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const processBatch = () => {
+        const timestamp = performance.now();
+        runNextFrame = false;
+        state.delta = useDefaultElapsed
+            ? 1000 / 60
+            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        state.timestamp = timestamp;
+        state.isProcessing = true;
+        // Unrolled render loop for better per-frame performance
+        read.process(state);
+        resolveKeyframes.process(state);
+        update.process(state);
+        preRender.process(state);
+        render.process(state);
+        postRender.process(state);
+        state.isProcessing = false;
+        if (runNextFrame && allowKeepAlive) {
+            useDefaultElapsed = false;
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const wake = () => {
+        runNextFrame = true;
+        useDefaultElapsed = true;
+        if (!state.isProcessing) {
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const schedule = stepsOrder.reduce((acc, key) => {
+        const step = steps[key];
+        acc[key] = (process, keepAlive = false, immediate = false) => {
+            if (!runNextFrame)
+                wake();
+            return step.schedule(process, keepAlive, immediate);
+        };
+        return acc;
+    }, {});
+    const cancel = (process) => {
+        for (let i = 0; i < stepsOrder.length; i++) {
+            steps[stepsOrder[i]].cancel(process);
+        }
+    };
+    return { schedule, cancel, state, steps };
+}
+
+const { schedule: frame, cancel: cancelFrame} = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+
+function useAnimationFrame(callback) {
+    const initialTimestamp = useRef(0);
+    const { isStatic } = useContext(MotionConfigContext);
+    useEffect(() => {
+        if (isStatic)
+            return;
+        const provideTimeSinceStart = ({ timestamp, delta }) => {
+            if (!initialTimestamp.current)
+                initialTimestamp.current = timestamp;
+            callback(timestamp - initialTimestamp.current, delta);
+        };
+        frame.update(provideTimeSinceStart, true);
+        return () => cancelFrame(provideTimeSinceStart);
+    }, [callback]);
+}
+
+function useBouncePatternProgress(enabled = true) {
+    const [value, setValue] = useState(0);
+    const [isBouncing, setIsBouncing] = useState(false);
+    const start = useRef(null);
+    useAnimationFrame((t) => {
+        if (!enabled) {
+            // Reset animation when disabled
+            if (start.current !== null) {
+                start.current = null;
+                setValue(0);
+                setIsBouncing(false);
+            }
+            return;
+        }
+        if (start.current === null)
+            start.current = t;
+        const elapsed = (t - start.current) % 3000; // 3s full cycle
+        let progress = 0;
+        const bouncing = elapsed < 1000; // Bouncing during first 1 second
+        if (elapsed < 500) {
+            // 0 → 1
+            progress = elapsed / 500;
+        }
+        else if (elapsed < 1000) {
+            // 1 → 0
+            progress = 1 - (elapsed - 500) / 500;
+        }
+        else {
+            // Pause at 0 for 2 seconds
+            progress = 0;
+        }
+        setValue(progress);
+        setIsBouncing(bouncing);
+    });
+    return { value, isBouncing };
+}
+
+// API Types
+/**
+ * Enum defining all available PC part categories that can be rendered.
+ *
+ * Each category represents a different type of computer component that can be
+ * included in the 3D build visualization.
+ *
+ * @example
+ * ```tsx
+ * // All available categories
+ * const categories = [
+ *   PartCategory.CPU,        // "CPU"
+ *   PartCategory.GPU,        // "GPU"
+ *   PartCategory.RAM,        // "RAM"
+ *   PartCategory.Motherboard,// "Motherboard"
+ *   PartCategory.PSU,        // "PSU"
+ *   PartCategory.Storage,    // "Storage"
+ *   PartCategory.PCCase,     // "PCCase"
+ *   PartCategory.CPUCooler,  // "CPUCooler"
+ * ];
+ * ```
+ */
+var PartCategory;
+(function (PartCategory) {
+    /** Central Processing Unit - The main processor */
+    PartCategory["CPU"] = "CPU";
+    /** Graphics Processing Unit - Video card for rendering */
+    PartCategory["GPU"] = "GPU";
+    /** Random Access Memory - System memory modules */
+    PartCategory["RAM"] = "RAM";
+    /** Main circuit board that connects all components */
+    PartCategory["Motherboard"] = "Motherboard";
+    /** Power Supply Unit - Provides power to all components */
+    PartCategory["PSU"] = "PSU";
+    /** Storage devices like SSDs, HDDs, NVMe drives */
+    PartCategory["Storage"] = "Storage";
+    /** PC Case - The enclosure that houses all components */
+    PartCategory["PCCase"] = "PCCase";
+    /** CPU Cooler - Air or liquid cooling for the processor */
+    PartCategory["CPUCooler"] = "CPUCooler";
+})(PartCategory || (PartCategory = {}));
+
+// API Configuration
+const API_BASE_URL = "https://squid-app-7aeyk.ondigitalocean.app";
+// 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}`;
+};
+// API Implementation
+const renderBuildExperimental = async (request) => {
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL), {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(request),
+    });
+    if (!response.ok) {
+        throw new Error(`Render build failed: ${response.status} ${response.statusText}`);
+    }
+    const video = await response.blob();
+    return {
+        video,
+        metadata: {
+            size: video.size,
+            format: "video/mp4",
+        },
+    };
+};
+const getAvailableParts = async () => {
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.AVAILABLE_PARTS), {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+    if (!response.ok) {
+        throw new Error(`Get available parts failed: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+};
+
+/**
+ * Compares two RenderBuildRequest objects for equality by checking if the same IDs
+ * are present in each category array, regardless of order.
+ */
+const arePartsEqual = (parts1, parts2) => {
+    const categories = Object.values(PartCategory);
+    for (const category of categories) {
+        const arr1 = parts1.parts[category] || [];
+        const arr2 = parts2.parts[category] || [];
+        // Check if arrays have the same length
+        if (arr1.length !== arr2.length) {
+            return false;
+        }
+        // Check if arrays contain the same elements (order doesn't matter)
+        const set1 = new Set(arr1);
+        const set2 = new Set(arr2);
+        if (set1.size !== set2.size) {
+            return false;
+        }
+        for (const id of set1) {
+            if (!set2.has(id)) {
+                return false;
+            }
+        }
+    }
+    return true;
+};
+const useBuildRender = (parts, onLoadStart) => {
+    const [videoSrc, setVideoSrc] = useState(null);
+    const [isRenderingBuild, setIsRenderingBuild] = useState(false);
+    const [renderError, setRenderError] = useState(null);
+    const previousPartsRef = useRef(null);
+    const fetchRenderBuild = useCallback(async (currentParts) => {
+        try {
+            setIsRenderingBuild(true);
+            setRenderError(null);
+            onLoadStart?.();
+            const response = await renderBuildExperimental(currentParts);
+            const objectUrl = URL.createObjectURL(response.video);
+            // Clean up previous video URL before setting new one
+            setVideoSrc((prevSrc) => {
+                if (prevSrc) {
+                    URL.revokeObjectURL(prevSrc);
+                }
+                return objectUrl;
+            });
+        }
+        catch (error) {
+            setRenderError(error instanceof Error ? error.message : "Failed to render build");
+        }
+        finally {
+            setIsRenderingBuild(false);
+        }
+    }, [onLoadStart]);
+    // Effect to call API when parts content changes (using custom equality check)
+    useEffect(() => {
+        const shouldFetch = previousPartsRef.current === null ||
+            !arePartsEqual(previousPartsRef.current, parts);
+        if (shouldFetch) {
+            previousPartsRef.current = parts;
+            fetchRenderBuild(parts);
+        }
+    }, [parts, fetchRenderBuild]);
+    // Cleanup effect for component unmount
+    useEffect(() => {
+        return () => {
+            if (videoSrc) {
+                URL.revokeObjectURL(videoSrc);
+            }
+        };
+    }, [videoSrc]);
+    return {
+        videoSrc,
+        isRenderingBuild,
+        renderError,
+    };
+};
+
+const LoadingErrorOverlay = ({ isVisible, renderError, size, }) => {
+    if (!isVisible)
+        return null;
+    return (jsx("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "white",
+            zIndex: 10,
+        }, children: renderError ? (jsxs(Fragment, { children: [jsx("div", { style: { marginBottom: "20px", fontSize: "18px" }, children: "Render Failed" }), jsx("div", { style: {
+                        fontSize: "14px",
+                        textAlign: "center",
+                        maxWidth: size * 0.8,
+                    }, children: renderError })] })) : (jsx(Fragment, { children: jsx("div", { style: { marginBottom: "20px", fontSize: "18px" }, children: "Loading Build..." }) })) }));
+};
+
+const DragIcon = ({ width = 24, height = 24, className, style, ...props }) => {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", id: "Layer_1", width: width, height: height, "data-name": "Layer 1", viewBox: "0 0 24 24", className: className, style: style, ...props, children: [jsx("defs", { children: jsx("style", { children: ".cls-1{fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:1.91px}" }) }), jsx("path", { d: "m11.05 22.5-5.14-5.14a2 2 0 0 1-.59-1.43 2 2 0 0 1 2-2 2 2 0 0 1 1.43.59l1.32 1.32V6.38a2 2 0 0 1 1.74-2 1.89 1.89 0 0 1 1.52.56 1.87 1.87 0 0 1 .56 1.34V12l5 .72a1.91 1.91 0 0 1 1.64 1.89 17.18 17.18 0 0 1-1.82 7.71l-.09.18M19.64 7.23l2.86-2.87-2.86-2.86M15.82 4.36h6.68M4.36 7.23 1.5 4.36 4.36 1.5M8.18 4.36H1.5", className: "cls-1" })] }));
+};
+
+const InstructionTooltip = ({ isVisible, progressValue, instructionIcon, }) => {
+    if (!isVisible) {
+        return null;
+    }
+    return (jsx("div", { style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: `translate(-50%, -50%) translateX(${progressValue * 100}px)`,
+            backgroundColor: "rgba(0, 0, 0, 0.8)",
+            color: "white",
+            padding: "12px",
+            borderRadius: "8px",
+            pointerEvents: "none",
+            zIndex: 5,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }, children: instructionIcon ? (jsx("img", { src: instructionIcon, alt: "drag to view 360", style: {
+                width: "24px",
+                height: "24px",
+                filter: "invert(1)", // Makes the icon white
+            } })) : (jsx(DragIcon, { width: 24, height: 24, style: {
+                color: "white",
+            } })) }));
+};
+
+const BuildRender = ({ parts, size, mouseSensitivity = 0.01, touchSensitivity = 0.01, }) => {
+    const videoRef = useRef(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [bouncingAllowed, setBouncingAllowed] = useState(false);
+    // Use custom hook for build rendering
+    const { videoSrc, isRenderingBuild, renderError } = useBuildRender(parts);
+    const { value: progressValue, isBouncing } = useBouncePatternProgress(bouncingAllowed);
+    const { isDragging, handleMouseDown, handleTouchStart, hasDragged } = useVideoScrubbing(videoRef, {
+        mouseSensitivity,
+        touchSensitivity,
+    });
+    const handleLoadStartInternal = useCallback(() => {
+        setIsLoading(true);
+        setBouncingAllowed(false);
+    }, []);
+    const handleCanPlayInternal = useCallback(() => {
+        setIsLoading(false);
+        // Start bouncing animation after delay
+        setTimeout(() => {
+            setBouncingAllowed(true);
+        }, 2000);
+    }, []);
+    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 (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, 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",
+                }, 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 &&
+                    !isRenderingBuild &&
+                    !renderError &&
+                    isBouncing &&
+                    !hasDragged.current, progressValue: progressValue })] }));
+};
+
+export { API_BASE_URL, API_ENDPOINTS, BuildRender, DragIcon, InstructionTooltip, LoadingErrorOverlay, PartCategory, arePartsEqual, buildApiUrl, calculateCircularTime, getAvailableParts, renderBuildExperimental, useBouncePatternProgress, useBuildRender, useVideoScrubbing };
+//# sourceMappingURL=index.esm.js.map