@imperosoft/cris-webui-components 1.1.2-beta.2 → 1.1.2-beta.4

package/dist/index.mjs

@@ -1291,9 +1291,270 @@ function CrisCoDebug({
     }
   );
 }
+
+// src/components/CrisCoMatrixListsTie.tsx
+import { useCustomObject as useCustomObject2, useCustomObjectSend as useCustomObjectSend2 } from "@imperosoft/cris-webui-ch5-core";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var defaults = {
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 8,
+    height: "100%"
+  },
+  list: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    minHeight: 0
+  },
+  header: {
+    fontSize: 13,
+    fontWeight: 600,
+    padding: "6px 10px",
+    textTransform: "uppercase",
+    opacity: 0.6,
+    flexShrink: 0
+  },
+  scroll: {
+    flex: 1,
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    minHeight: 40,
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  itemLabel: {
+    flex: 1,
+    fontSize: 13,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  indicators: {
+    display: "flex",
+    gap: 4,
+    alignItems: "center"
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    flexShrink: 0
+  }
+};
+function DefaultIoIndicator({ on }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        ...defaults.indicator,
+        backgroundColor: on ? "#4caf50" : "#f44336"
+      },
+      title: on ? "Online" : "Offline"
+    }
+  );
+}
+function DefaultSignalIndicator({ on }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        ...defaults.indicator,
+        backgroundColor: on ? "#2196f3" : "#666"
+      },
+      title: on ? "Signal detected" : "No signal"
+    }
+  );
+}
+function MatrixItemRow({
+  item,
+  type,
+  onSelect,
+  onToggleVideoMute,
+  itemClassName,
+  itemStyle: itemStyleProp,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName,
+  vmButtonClassName,
+  vmButtonActiveClassName,
+  renderIoIndicator,
+  renderSignalIndicator
+}) {
+  const isActive = item.sl.on;
+  const isEnabled = item.sl.en;
+  const classes = [
+    "cris-co-matrix-item",
+    itemClassName,
+    isActive && (itemActiveClassName || "active"),
+    !isEnabled && (itemDisabledClassName || "disabled")
+  ].filter(Boolean).join(" ");
+  const computedStyle = itemClassName ? { ...itemStyleProp } : {
+    ...defaults.item,
+    ...itemStyleProp,
+    ...isActive ? itemActiveStyle : void 0,
+    opacity: isEnabled ? 1 : 0.4
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: classes, style: computedStyle, children: [
+    /* @__PURE__ */ jsx8(
+      CrisButton,
+      {
+        selected: isActive,
+        enabled: isEnabled,
+        onPress: onSelect,
+        className: `cris-co-matrix-item-btn ${itemActiveClassName ?? ""}`,
+        classActive: itemActiveClassName,
+        children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 6, width: "100%" }, children: [
+          /* @__PURE__ */ jsx8("span", { style: defaults.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.ch}` }),
+          /* @__PURE__ */ jsxs7("div", { style: defaults.indicators, children: [
+            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx8(DefaultIoIndicator, { on: item.io.on })),
+            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx8(DefaultSignalIndicator, { on: item.sg.on }))
+          ] })
+        ] })
+      }
+    ),
+    item.vm.vs && /* @__PURE__ */ jsx8(
+      CrisButton,
+      {
+        selected: item.vm.on,
+        enabled: item.vm.en,
+        text: "VM",
+        onPress: onToggleVideoMute,
+        className: vmButtonClassName,
+        classActive: vmButtonActiveClassName
+      }
+    )
+  ] });
+}
+function CrisCoMatrixListsTie({
+  oid,
+  inputTitle = "Inputs",
+  outputTitle = "Outputs",
+  className,
+  style,
+  listClassName,
+  listStyle,
+  headerClassName,
+  headerStyle,
+  itemClassName,
+  itemStyle,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName,
+  vmButtonClassName,
+  vmButtonActiveClassName,
+  renderIoIndicator,
+  renderSignalIndicator
+}) {
+  const matrix = useCustomObject2(oid);
+  const send = useCustomObjectSend2();
+  if (!matrix) return null;
+  const { ip: inputs, op: outputs } = matrix;
+  const handleSelectInput = (ch) => {
+    send(oid, { action: "selectInput", ch });
+  };
+  const handleTie = (ch) => {
+    send(oid, { action: "tie", ch });
+  };
+  const handleToggleVideoMute = (type, ch) => {
+    send(oid, { action: "toggleVideoMute", type, ch });
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className,
+      style: className ? style : { ...defaults.container, ...style },
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: listClassName,
+            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            children: [
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: headerClassName,
+                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  children: inputTitle
+                }
+              ),
+              /* @__PURE__ */ jsx8("div", { style: defaults.scroll, children: inputs?.map((item) => /* @__PURE__ */ jsx8(
+                MatrixItemRow,
+                {
+                  item,
+                  type: "input",
+                  onSelect: () => handleSelectInput(item.ch),
+                  onToggleVideoMute: () => handleToggleVideoMute("input", item.ch),
+                  itemClassName,
+                  itemStyle,
+                  itemActiveClassName,
+                  itemActiveStyle,
+                  itemDisabledClassName,
+                  vmButtonClassName,
+                  vmButtonActiveClassName,
+                  renderIoIndicator,
+                  renderSignalIndicator
+                },
+                item.ch
+              )) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: listClassName,
+            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            children: [
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: headerClassName,
+                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  children: outputTitle
+                }
+              ),
+              /* @__PURE__ */ jsx8("div", { style: defaults.scroll, children: outputs?.map((item) => /* @__PURE__ */ jsx8(
+                MatrixItemRow,
+                {
+                  item,
+                  type: "output",
+                  onSelect: () => handleTie(item.ch),
+                  onToggleVideoMute: () => handleToggleVideoMute("output", item.ch),
+                  itemClassName,
+                  itemStyle,
+                  itemActiveClassName,
+                  itemActiveStyle,
+                  itemDisabledClassName,
+                  vmButtonClassName,
+                  vmButtonActiveClassName,
+                  renderIoIndicator,
+                  renderSignalIndicator
+                },
+                item.ch
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   CrisButton,
   CrisCoDebug,
+  CrisCoMatrixListsTie,
   CrisGauge,
   CrisOfflinePage,
   CrisSlider,