@reactor-team/js-sdk 1.0.1

package/src/react/ReactorProvider.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { ReactNode, useContext, useEffect, useRef } from "react";
+import {
+  createReactorStore,
+  initReactorStore,
+  ReactorContext,
+  ReactorStore,
+  ReactorStoreApi,
+  type ReactorInitializationProps,
+} from "../core/store";
+import { useStore } from "zustand";
+
+// Provider props
+interface ReactorProviderProps extends ReactorInitializationProps {
+  autoConnect?: boolean;
+  children: ReactNode;
+}
+
+// tsx component
+export function ReactorProvider({
+  children,
+  autoConnect = true,
+  ...props
+}: ReactorProviderProps) {
+  // Stable Reactor instance
+  const storeRef = useRef<ReactorStoreApi | undefined>(undefined);
+  const firstRender = useRef(true);
+
+  /**
+   * Attempts connecting to Reactor, if the autoConnect flag is set.
+   */
+  function attemptAutoConnect() {
+    const status = storeRef.current?.getState().status;
+
+    if (autoConnect && status === "disconnected") {
+      console.debug("[ReactorProvider] Starting autoconnect...");
+      storeRef.current
+        ?.getState()
+        .connect()
+        .then(() => {
+          console.debug("[ReactorProvider] Autoconnect successful");
+        })
+        .catch((error) => {
+          console.error("[ReactorProvider] Failed to autoconnect:", error);
+        });
+    }
+  }
+
+  if (storeRef.current === undefined) {
+    console.debug("[ReactorProvider] Creating new reactor store");
+    // We create the store without autoconnecting, to avoid duplicate connections.
+    // We actually connect when the component is mounted, to be on sync with the react component lifecycle.
+    storeRef.current = createReactorStore(initReactorStore(props));
+    console.debug("[ReactorProvider] Reactor store created successfully");
+    attemptAutoConnect();
+  }
+
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    console.debug("[ReactorProvider] Updating reactor store");
+    storeRef.current = createReactorStore(initReactorStore(props));
+    console.debug("[ReactorProvider] Reactor store updated successfully");
+    attemptAutoConnect();
+  }, [props, autoConnect]);
+
+  return (
+    <ReactorContext.Provider value={storeRef.current}>
+      {children}
+    </ReactorContext.Provider>
+  );
+}
+
+export function useReactorStore<T = ReactorStore>(
+  selector: (state: ReactorStore) => T
+): T {
+  const ctx = useContext(ReactorContext);
+  if (!ctx) {
+    throw new Error("useReactor must be used within a ReactorProvider");
+  }
+
+  return useStore(ctx, selector);
+}

package/src/react/ReactorView.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useReactor } from "./hooks";
+import { useEffect, useRef } from "react";
+import React from "react";
+
+export interface ReactorViewProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function ReactorView({
+  width,
+  height,
+  className,
+  style,
+}: ReactorViewProps) {
+  const { videoTrack, status } = useReactor((state) => ({
+    videoTrack: state.videoTrack,
+    status: state.status,
+  }));
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  console.debug("[ReactorView] Render", {
+    hasVideoTrack: !!videoTrack,
+    status,
+    hasVideoElement: !!videoRef.current,
+  });
+
+  useEffect(() => {
+    console.debug("[ReactorView] Video track effect triggered", {
+      hasVideoElement: !!videoRef.current,
+      hasVideoTrack: !!videoTrack,
+      videoTrackKind: videoTrack?.kind,
+    });
+
+    if (videoRef.current && videoTrack) {
+      console.debug("[ReactorView] Attaching video track to element");
+      try {
+        // Attach the LiveKit track to the video element
+        videoTrack.attach(videoRef.current);
+        console.debug("[ReactorView] Video track attached successfully");
+      } catch (error) {
+        console.error("[ReactorView] Failed to attach video track:", error);
+      }
+
+      // Cleanup: detach when track changes or component unmounts
+      return () => {
+        console.debug("[ReactorView] Detaching video track from element");
+        if (videoRef.current) {
+          try {
+            videoTrack.detach(videoRef.current);
+            console.debug("[ReactorView] Video track detached successfully");
+          } catch (error) {
+            console.error("[ReactorView] Failed to detach video track:", error);
+          }
+        }
+      };
+    } else {
+      console.debug("[ReactorView] No video track or element to attach");
+    }
+  }, [videoTrack]);
+
+  const showPlaceholder = !videoTrack;
+  console.debug("[ReactorView] Placeholder state", { showPlaceholder, status });
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        background: "#000",
+        ...(width && { width }),
+        ...(height && { height }),
+        ...style,
+      }}
+      className={className}
+    >
+      <video
+        ref={videoRef}
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          display: showPlaceholder ? "none" : "block",
+        }}
+        muted
+        playsInline
+      />
+      {showPlaceholder && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            color: "#fff",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "16px",
+            fontFamily: "monospace",
+            textAlign: "center",
+            padding: "20px",
+            boxSizing: "border-box",
+          }}
+        >
+          {status}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/hooks.ts

@@ -0,0 +1,50 @@
+import { useReactorStore } from "./ReactorProvider";
+import type { ReactorStore } from "../core/store";
+import { useShallow } from "zustand/shallow";
+import { useEffect, useRef } from "react";
+
+/**
+ * Generic hook for accessing selected parts of the Reactor store.
+ *
+ * @param selector - A function that selects part of the store state.
+ * @returns The selected slice from the store.
+ */
+export function useReactor<T>(selector: (state: ReactorStore) => T): T {
+  return useReactorStore(useShallow(selector));
+}
+
+/**
+ * Hook for handling message subscriptions with proper React lifecycle management.
+ *
+ * @param handler - The message handler function
+ */
+export function useReactorMessage(handler: (message: any) => void): void {
+  const reactor = useReactor((state) => state.internal.reactor);
+  const handlerRef = useRef(handler);
+
+  // Update the ref when handler changes
+  useEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    console.debug("[useReactorMessage] Setting up message subscription");
+
+    // Create a stable handler that calls the current ref
+    const stableHandler = (message: any) => {
+      console.debug("[useReactorMessage] Message received", { message });
+      handlerRef.current(message);
+    };
+
+    // Register the handler and get the cleanup function
+    reactor.on("newMessage", stableHandler);
+
+    console.debug("[useReactorMessage] Message handler registered");
+
+    // Return the cleanup function
+    return () => {
+      console.debug("[useReactorMessage] Cleaning up message subscription");
+      reactor.off("newMessage", stableHandler);
+    };
+  }, [reactor]);
+}

package/src/types.ts

@@ -0,0 +1,37 @@
+export type ReactorStatus =
+  | "disconnected" // Not connected to anything
+  | "connecting" // Establishing connection to coordinator
+  | "waiting" // Connected to coordinator, waiting for GPU assignment
+  | "ready"; // Connected to GPU machine, can send/receive messages
+
+// Queue information when in waiting state
+export interface ReactorWaitingInfo {
+  position?: number; // Position in queue
+  estimatedWaitTime?: number; // Seconds
+  averageWaitTime?: number; // Historical data
+}
+
+// Error information
+export interface ReactorError {
+  code: string;
+  message: string;
+  timestamp: number;
+  recoverable: boolean;
+  component: "coordinator" | "gpu" | "livekit";
+  retryAfter?: number; // Suggested retry delay in seconds
+}
+
+// Enhanced state with metadata
+export interface ReactorState {
+  status: ReactorStatus;
+  waitingInfo?: ReactorWaitingInfo; // When status is 'waiting'
+  lastError?: ReactorError; // Most recent error
+}
+
+export type ReactorEvent =
+  | "statusChanged" //updates on the reactor status
+  | "waitingInfoChanged" //updates on the waiting info
+  | "newMessage" //new messages from the machine (coordinator handled internally)
+  | "fps" //update of the fps rate of the machine
+  | "streamChanged" //video stream has changed (LiveKit)
+  | "error"; //error events with ReactorError details

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "Node",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "stripInternal": true
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: {
+    entry: ["src/index.ts"],
+    resolve: true,
+  },
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  outDir: "dist",
+  tsconfig: "tsconfig.json",
+});