@reactor-team/js-sdk 1.0.15 → 1.0.17

package/dist/index.mjs

@@ -90,11 +90,19 @@ var WaitingInfoMessageSchema = z.object({
   type: z.literal("waiting-info"),
   data: WaitingInfoDataSchema
 });
+var SessionExpirationDataSchema = z.object({
+  expire: z.number()
+});
+var SessionExpirationMessageSchema = z.object({
+  type: z.literal("session-expiration"),
+  data: SessionExpirationDataSchema
+});
 var CoordinatorMessageSchema = z.discriminatedUnion("type", [
   WelcomeMessageSchema,
   GPUMachineAssignmentMessageSchema,
   EchoMessageSchema,
-  WaitingInfoMessageSchema
+  WaitingInfoMessageSchema,
+  SessionExpirationMessageSchema
 ]);
 var GPUMachineSendMessageSchema = z.discriminatedUnion("type", [
   ApplicationMessageSchema
@@ -761,6 +769,12 @@ var Reactor = class {
             this.setWaitingInfo(__spreadValues(__spreadValues({}, this.waitingInfo), waitingData));
           }
         );
+        this.coordinatorClient.on(
+          "session-expiration",
+          (sessionExpirationData) => {
+            this.setSessionExpiration(sessionExpirationData.expire);
+          }
+        );
         this.coordinatorClient.on(
           "statusChanged",
           (newStatus) => {
@@ -826,7 +840,8 @@ var Reactor = class {
         this.machineClient = void 0;
       }
       this.setStatus("disconnected");
-      this.waitingInfo = void 0;
+      this.setSessionExpiration(void 0);
+      this.setWaitingInfo(void 0);
     });
   }
   setStatus(newStatus) {
@@ -848,6 +863,20 @@ var Reactor = class {
       this.emit("waitingInfoChanged", newWaitingInfo);
     }
   }
+  /**
+   * Set the session expiration time.
+   * @param newSessionExpiration The new session expiration time in seconds.
+   */
+  setSessionExpiration(newSessionExpiration) {
+    console.debug(
+      "[Reactor] Setting session expiration:",
+      newSessionExpiration
+    );
+    if (this.sessionExpiration !== newSessionExpiration) {
+      this.sessionExpiration = newSessionExpiration;
+      this.emit("sessionExpirationChanged", newSessionExpiration);
+    }
+  }
   getStatus() {
     return this.status;
   }
@@ -903,7 +932,8 @@ var defaultInitState = {
   videoTrack: null,
   fps: void 0,
   waitingInfo: void 0,
-  lastError: void 0
+  lastError: void 0,
+  sessionExpiration: void 0
 };
 var initReactorStore = (props) => {
   return __spreadValues(__spreadValues({}, defaultInitState), props);
@@ -930,6 +960,13 @@ var createReactorStore = (initProps, publicState = defaultInitState) => {
       });
       set({ waitingInfo: newWaitingInfo });
     });
+    reactor.on("sessionExpirationChanged", (newSessionExpiration) => {
+      console.debug("[ReactorStore] Session expiration changed", {
+        oldSessionExpiration: get().sessionExpiration,
+        newSessionExpiration
+      });
+      set({ sessionExpiration: newSessionExpiration });
+    });
     reactor.on("streamChanged", (videoTrack) => {
       console.debug("[ReactorStore] Stream changed", {
         hasVideoTrack: !!videoTrack,
@@ -1259,9 +1296,454 @@ function ReactorView({
   );
 }
 
-// src/react/WebcamStream.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
+// src/react/ReactorController.tsx
+import React, { useState as useState2, useCallback } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ReactorController({
+  className,
+  style
+}) {
+  const { sendMessage, status } = useReactor((state) => ({
+    sendMessage: state.sendMessage,
+    status: state.status
+  }));
+  const [commands, setCommands] = useState2({});
+  const [formValues, setFormValues] = useState2({});
+  const [expandedCommands, setExpandedCommands] = useState2({});
+  React.useEffect(() => {
+    if (status === "disconnected") {
+      setCommands({});
+      setFormValues({});
+      setExpandedCommands({});
+    }
+  }, [status]);
+  React.useEffect(() => {
+    if (status === "ready") {
+      sendMessage({
+        type: "requestCapabilities",
+        data: {}
+      });
+    }
+  }, [status, sendMessage]);
+  useReactorMessage((message) => {
+    if (message && typeof message === "object" && "commands" in message) {
+      const commandsMessage = message;
+      setCommands(commandsMessage.commands);
+      const initialValues = {};
+      const initialExpanded = {};
+      Object.entries(commandsMessage.commands).forEach(
+        ([commandName, commandSchema]) => {
+          initialValues[commandName] = {};
+          initialExpanded[commandName] = false;
+          Object.entries(commandSchema.schema).forEach(
+            ([paramName, paramSchema]) => {
+              var _a, _b;
+              if (paramSchema.type === "number") {
+                initialValues[commandName][paramName] = (_a = paramSchema.minimum) != null ? _a : 0;
+              } else if (paramSchema.type === "string") {
+                initialValues[commandName][paramName] = "";
+              } else if (paramSchema.type === "boolean") {
+                initialValues[commandName][paramName] = false;
+              } else if (paramSchema.type === "integer") {
+                initialValues[commandName][paramName] = (_b = paramSchema.minimum) != null ? _b : 0;
+              }
+            }
+          );
+        }
+      );
+      setFormValues(initialValues);
+      setExpandedCommands(initialExpanded);
+    }
+  });
+  const handleInputChange = useCallback(
+    (commandName, paramName, value) => {
+      setFormValues((prev) => __spreadProps(__spreadValues({}, prev), {
+        [commandName]: __spreadProps(__spreadValues({}, prev[commandName]), {
+          [paramName]: value
+        })
+      }));
+    },
+    []
+  );
+  const toggleCommandExpanded = useCallback((commandName) => {
+    setExpandedCommands((prev) => __spreadProps(__spreadValues({}, prev), {
+      [commandName]: !prev[commandName]
+    }));
+  }, []);
+  const handleCommandSubmit = useCallback(
+    (commandName) => __async(null, null, function* () {
+      const commandSchema = commands[commandName];
+      const formData = formValues[commandName] || {};
+      const data = {};
+      Object.keys(commandSchema.schema).forEach((paramName) => {
+        var _a, _b;
+        const paramSchema = commandSchema.schema[paramName];
+        let value = formData[paramName];
+        if (paramSchema.type === "number" && typeof value === "string") {
+          value = parseFloat(value) || 0;
+        } else if (paramSchema.type === "integer" && typeof value === "string") {
+          value = parseInt(value) || 0;
+        } else if (paramSchema.type === "boolean" && typeof value !== "boolean") {
+          value = Boolean(value);
+        }
+        if (value !== void 0 && value !== "" && value !== null) {
+          data[paramName] = value;
+        } else if (paramSchema.required) {
+          if (paramSchema.type === "number") {
+            data[paramName] = (_a = paramSchema.minimum) != null ? _a : 0;
+          } else if (paramSchema.type === "integer") {
+            data[paramName] = (_b = paramSchema.minimum) != null ? _b : 0;
+          } else if (paramSchema.type === "string") {
+            data[paramName] = "";
+          } else if (paramSchema.type === "boolean") {
+            data[paramName] = false;
+          }
+        }
+      });
+      console.log(`Executing command: ${commandName}`, data);
+      yield sendMessage({
+        type: commandName,
+        data
+      });
+    }),
+    [formValues, sendMessage, commands]
+  );
+  const renderInput = (commandName, paramName, paramSchema) => {
+    var _a, _b;
+    const value = (_b = (_a = formValues[commandName]) == null ? void 0 : _a[paramName]) != null ? _b : "";
+    if (paramSchema.type === "number" || paramSchema.type === "integer") {
+      const isInteger = paramSchema.type === "integer";
+      const step = isInteger ? 1 : 0.1;
+      const parseValue = isInteger ? parseInt : parseFloat;
+      if (typeof paramSchema.minimum === "number" && typeof paramSchema.maximum === "number") {
+        return /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsxs2(
+            "label",
+            {
+              style: { fontSize: "12px", color: "#666", display: "block" },
+              children: [
+                paramName,
+                " (",
+                paramSchema.minimum,
+                " - ",
+                paramSchema.maximum,
+                ")",
+                paramSchema.description && ` - ${paramSchema.description}`,
+                paramSchema.required && /* @__PURE__ */ jsx3("span", { style: { color: "red" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "range",
+              min: paramSchema.minimum,
+              max: paramSchema.maximum,
+              step,
+              value,
+              onChange: (e) => {
+                const newValue = parseValue(e.target.value) || 0;
+                handleInputChange(commandName, paramName, newValue);
+                handleCommandSubmit(commandName);
+              },
+              style: { width: "100%", marginBottom: "4px" }
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { style: { fontSize: "11px", color: "#888" }, children: [
+            "Value: ",
+            value
+          ] })
+        ] });
+      } else {
+        return /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsxs2(
+            "label",
+            {
+              style: { fontSize: "12px", color: "#666", display: "block" },
+              children: [
+                paramName,
+                paramSchema.description && ` - ${paramSchema.description}`,
+                paramSchema.required && /* @__PURE__ */ jsx3("span", { style: { color: "red" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "number",
+              value,
+              min: paramSchema.minimum,
+              max: paramSchema.maximum,
+              step,
+              inputMode: "numeric",
+              onChange: (e) => {
+                const val = e.target.value;
+                if (val === "" || val === "-") {
+                  handleInputChange(commandName, paramName, val);
+                } else {
+                  const parsed = parseValue(val);
+                  if (!isNaN(parsed)) {
+                    handleInputChange(commandName, paramName, parsed);
+                  }
+                }
+              },
+              onBlur: (e) => {
+                const val = e.target.value;
+                if (val === "" || val === "-") {
+                  handleInputChange(commandName, paramName, 0);
+                }
+              },
+              style: {
+                width: "100%",
+                padding: "4px",
+                fontSize: "12px",
+                border: "1px solid #ccc",
+                borderRadius: "2px"
+              }
+            }
+          )
+        ] });
+      }
+    } else if (paramSchema.type === "string") {
+      if (paramSchema.enum) {
+        return /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsxs2(
+            "label",
+            {
+              style: { fontSize: "12px", color: "#666", display: "block" },
+              children: [
+                paramName,
+                paramSchema.description && ` - ${paramSchema.description}`,
+                paramSchema.required && /* @__PURE__ */ jsx3("span", { style: { color: "red" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "select",
+            {
+              value,
+              onChange: (e) => handleInputChange(commandName, paramName, e.target.value),
+              style: {
+                width: "100%",
+                padding: "4px",
+                fontSize: "12px",
+                border: "1px solid #ccc",
+                borderRadius: "2px"
+              },
+              children: [
+                /* @__PURE__ */ jsx3("option", { value: "", children: "Select..." }),
+                paramSchema.enum.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option))
+              ]
+            }
+          )
+        ] });
+      } else {
+        return /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsxs2(
+            "label",
+            {
+              style: { fontSize: "12px", color: "#666", display: "block" },
+              children: [
+                paramName,
+                paramSchema.description && ` - ${paramSchema.description}`,
+                paramSchema.required && /* @__PURE__ */ jsx3("span", { style: { color: "red" }, children: " *" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "text",
+              value,
+              onChange: (e) => handleInputChange(commandName, paramName, e.target.value),
+              style: {
+                width: "100%",
+                padding: "4px",
+                fontSize: "12px",
+                border: "1px solid #ccc",
+                borderRadius: "2px"
+              }
+            }
+          )
+        ] });
+      }
+    } else if (paramSchema.type === "boolean") {
+      return /* @__PURE__ */ jsx3("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsxs2(
+        "label",
+        {
+          style: {
+            fontSize: "12px",
+            color: "#666",
+            display: "flex",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "checkbox",
+                checked: value,
+                onChange: (e) => handleInputChange(commandName, paramName, e.target.checked),
+                style: { marginRight: "6px" }
+              }
+            ),
+            paramName,
+            paramSchema.description && ` - ${paramSchema.description}`,
+            paramSchema.required && /* @__PURE__ */ jsx3("span", { style: { color: "red" }, children: " *" })
+          ]
+        }
+      ) });
+    }
+    return null;
+  };
+  const renderCommand = (commandName, commandSchema) => {
+    const hasParams = Object.keys(commandSchema.schema).length > 0;
+    const isExpanded = expandedCommands[commandName];
+    const hasSliderInputs = Object.values(commandSchema.schema).some(
+      (paramSchema) => (paramSchema.type === "number" || paramSchema.type === "integer") && typeof paramSchema.minimum === "number" && typeof paramSchema.maximum === "number"
+    );
+    const showExecuteButton = !hasSliderInputs;
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          border: "1px solid #ddd",
+          borderRadius: "4px",
+          marginBottom: "8px",
+          backgroundColor: "#fafafa"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              onClick: () => toggleCommandExpanded(commandName),
+              style: {
+                padding: "8px 12px",
+                cursor: "pointer",
+                borderBottom: isExpanded ? "1px solid #ddd" : "none",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsxs2("div", { children: [
+                  /* @__PURE__ */ jsx3(
+                    "h4",
+                    {
+                      style: {
+                        margin: "0",
+                        fontSize: "13px",
+                        fontWeight: "bold"
+                      },
+                      children: commandName
+                    }
+                  ),
+                  isExpanded && commandSchema.description && /* @__PURE__ */ jsx3(
+                    "p",
+                    {
+                      style: { margin: "4px 0 0 0", fontSize: "11px", color: "#666" },
+                      children: commandSchema.description
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "10px",
+                      color: "#999",
+                      transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                      transition: "transform 0.2s"
+                    },
+                    children: "\u25BC"
+                  }
+                )
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsxs2("div", { style: { padding: "12px", paddingTop: "0" }, children: [
+            hasParams && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: showExecuteButton ? "12px" : "0" }, children: [
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    marginBottom: "8px",
+                    fontSize: "12px",
+                    fontWeight: "bold",
+                    color: "#555"
+                  },
+                  children: "Parameters:"
+                }
+              ),
+              Object.entries(commandSchema.schema).map(
+                ([paramName, paramSchema]) => /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    style: { marginLeft: "8px" },
+                    children: renderInput(commandName, paramName, paramSchema)
+                  },
+                  `${commandName}-${paramName}`
+                )
+              )
+            ] }),
+            !hasParams && /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  marginBottom: showExecuteButton ? "12px" : "0",
+                  marginTop: "2px",
+                  fontSize: "11px",
+                  color: "#666",
+                  fontStyle: "italic"
+                },
+                children: "No parameters required"
+              }
+            ),
+            showExecuteButton && /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                onClick: () => handleCommandSubmit(commandName),
+                style: {
+                  padding: "8px 16px",
+                  fontSize: "12px",
+                  backgroundColor: "#007bff",
+                  color: "white",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  fontWeight: "bold"
+                },
+                children: [
+                  "Execute ",
+                  commandName
+                ]
+              }
+            )
+          ] })
+        ]
+      },
+      commandName
+    );
+  };
+  return /* @__PURE__ */ jsx3("div", { className, style, children: /* @__PURE__ */ jsx3("div", { style: { fontFamily: "monospace", fontSize: "12px" }, children: Object.keys(commands).length === 0 ? /* @__PURE__ */ jsx3("div", { style: { padding: "12px", color: "#666", fontStyle: "italic" }, children: "Waiting for commands schema..." }) : /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx3(
+      "h3",
+      {
+        style: {
+          margin: "0 0 16px 0",
+          fontSize: "16px",
+          fontWeight: "bold"
+        },
+        children: "Reactor Commands"
+      }
+    ),
+    Object.entries(commands).map(([commandName, commandSchema]) => /* @__PURE__ */ jsx3("div", { children: renderCommand(commandName, commandSchema) }, commandName))
+  ] }) }) });
+}
+
+// src/react/WebcamStream.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function WebcamStream({
   className,
   style,
@@ -1272,9 +1754,9 @@ function WebcamStream({
   showWebcam = true,
   videoObjectFit = "contain"
 }) {
-  const [stream, setStream] = useState2(null);
-  const [isPublishing, setIsPublishing] = useState2(false);
-  const [permissionDenied, setPermissionDenied] = useState2(false);
+  const [stream, setStream] = useState3(null);
+  const [isPublishing, setIsPublishing] = useState3(false);
+  const [permissionDenied, setPermissionDenied] = useState3(false);
   const { status, publishVideoStream, unpublishVideoStream, reactor } = useReactor((state) => ({
     status: state.status,
     publishVideoStream: state.publishVideoStream,
@@ -1391,7 +1873,7 @@ function WebcamStream({
     };
   }, []);
   const showPlaceholder = !stream;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       style: __spreadValues({
@@ -1401,7 +1883,7 @@ function WebcamStream({
       }, style),
       className,
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "video",
           {
             ref: videoRef,
@@ -1416,7 +1898,7 @@ function WebcamStream({
             autoPlay: true
           }
         ),
-        showPlaceholder && /* @__PURE__ */ jsx3(
+        showPlaceholder && /* @__PURE__ */ jsx4(
           "div",
           {
             style: {
@@ -1437,11 +1919,11 @@ function WebcamStream({
               flexDirection: "column",
               gap: "12px"
             },
-            children: permissionDenied ? /* @__PURE__ */ jsxs2("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: [
+            children: permissionDenied ? /* @__PURE__ */ jsxs3("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: [
               "Camera access denied.",
-              /* @__PURE__ */ jsx3("br", {}),
+              /* @__PURE__ */ jsx4("br", {}),
               "Please allow access in your browser settings."
-            ] }) : /* @__PURE__ */ jsx3("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: "Starting camera..." })
+            ] }) : /* @__PURE__ */ jsx4("div", { style: { fontSize: "12px", fontFamily: "monospace" }, children: "Starting camera..." })
           }
         )
       ]
@@ -1450,6 +1932,7 @@ function WebcamStream({
 }
 export {
   Reactor,
+  ReactorController,
   ReactorProvider,
   ReactorView,
   WebcamStream,