@opengeni/react 7.4.0 → 7.5.0-canary.36919050519001

package/dist/{chunk-XEJEOAOV.js → chunk-B7WMS3CS.js}

@@ -5,9 +5,12 @@ import {
   useInteractionInterventions,
   useInteractionInvalidation
 } from "./chunk-YSMMDOOE.js";
+import {
+  copyTextToClipboard
+} from "./chunk-JVYQRRC4.js";
 import {
   DesktopViewer
-} from "./chunk-4MDLEHXL.js";
+} from "./chunk-DYWBUX5Q.js";
 import {
   STREAM_CLOSE_REASON_NORMAL,
   STREAM_KIND_COMPUTER,
@@ -16,7 +19,7 @@ import {
   decodeStreamOpenAck,
   encodeStreamClose,
   encodeStreamOpen
-} from "./chunk-5YK2ZDIG.js";
+} from "./chunk-5J4FOW6Q.js";
 import {
   usePageLiveActivity
 } from "./chunk-KZ73RL76.js";
@@ -26,9 +29,6 @@ import {
 import {
   cn
 } from "./chunk-22KP6LR5.js";
-import {
-  copyTextToClipboard
-} from "./chunk-JVYQRRC4.js";
 
 // src/components/computer-viewer.tsx
 import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
@@ -1083,13 +1083,15 @@ function ComputerViewer({
   });
   const displayedFrame = frames.frame && frames.frame.computerSessionId === selection?.sessionId && frames.frame.targetId === computer.selectedTarget?.id && frames.frame.targetGeneration === computer.selectedTarget?.targetGeneration ? frames.frame : null;
   const rfbStream = frames.attachment?.stream.kind === "direct_rfb" ? frames.attachment.stream : null;
+  const machineLocked = selectedRegistrySession?.failureCode === "machine_locked";
+  const rfbInputEnabled = !machineLocked && computer.session?.capabilities?.pointerInput === true && computer.session?.capabilities?.keyboardInput === true;
   const rfbCapability = useMemo2(() => {
     if (!rfbStream || !frames.attachment) return null;
     const bounds = computer.selectedTarget?.bounds;
     return {
       transport: "vnc-ws",
       client: "novnc",
-      mode: "interactive",
+      mode: rfbInputEnabled ? "interactive" : "read-only",
       url: rfbStream.url,
       token: null,
       expiresAt: frames.attachment.expiresAt,
@@ -1101,8 +1103,7 @@ function ComputerViewer({
       sharedSessionIds: [],
       reason: null
     };
-  }, [computer.selectedTarget?.bounds, frames.attachment, rfbStream]);
-  const machineLocked = selectedRegistrySession?.failureCode === "machine_locked";
+  }, [computer.selectedTarget?.bounds, frames.attachment, rfbInputEnabled, rfbStream]);
   const currentIds = useMemo2(() => new Set(relevant.map((session) => session.id)), [relevant]);
   useEffect4(() => {
     for (const intervention of interventions.interventions) {
@@ -1206,7 +1207,8 @@ function ComputerViewer({
   );
   const copyFromRfb = useCallback4(
     (event) => {
-      if (!rfbStream || computer.session?.capabilities?.clipboard !== true) return;
+      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
+        return;
       event.preventDefault();
       event.stopPropagation();
       void perform({ type: "clipboard", operation: "copy" }, null).then(() => computer.readClipboard()).then(async (clipboard) => {
@@ -1215,11 +1217,12 @@ function ComputerViewer({
         }
       }).catch((cause) => notifyError(cause, "Could not copy from the desktop."));
     },
-    [computer, notifyError, perform, rfbStream]
+    [computer, notifyError, perform, rfbInputEnabled, rfbStream]
   );
   const pasteIntoRfb = useCallback4(
     (text) => {
-      if (!rfbStream || computer.session?.capabilities?.clipboard !== true) return false;
+      if (!rfbInputEnabled || !rfbStream || computer.session?.capabilities?.clipboard !== true)
+        return false;
       void (async () => {
         await perform({ type: "clipboard", operation: "write", text }, null);
         assertExactComputerClipboard(await computer.readClipboard(), text);
@@ -1227,7 +1230,7 @@ function ComputerViewer({
       })().catch((cause) => notifyError(cause, "Could not paste into the desktop."));
       return true;
     },
-    [computer, notifyError, perform, rfbStream]
+    [computer, notifyError, perform, rfbInputEnabled, rfbStream]
   );
   const hideGenericCreate = suppressGenericCreate && liveRelevant.length === 0;
   const generationLossSelected = selectedRegistrySession !== null && isAttachedChromeGenerationLoss(selectedRegistrySession);
@@ -1333,18 +1336,21 @@ function ComputerViewer({
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
-        rfbStream ? /* @__PURE__ */ jsx("div", { className: "relative min-h-0 flex-1 bg-black", onCopyCapture: copyFromRfb, children: /* @__PURE__ */ jsx(
-          DesktopViewer,
-          {
-            capability: rfbCapability,
-            interactive: true,
-            showControlToggle: false,
-            webSocketProtocols: rfbStream.protocols,
-            onPasteText: pasteIntoRfb,
-            targetPlatform: computer.session?.platform ?? null,
-            className: "h-full"
-          }
-        ) }) : /* @__PURE__ */ jsx(
+        rfbStream ? /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 bg-black", onCopyCapture: copyFromRfb, children: [
+          /* @__PURE__ */ jsx(
+            DesktopViewer,
+            {
+              capability: rfbCapability,
+              interactive: rfbInputEnabled,
+              showControlToggle: false,
+              webSocketProtocols: rfbStream.protocols,
+              onPasteText: pasteIntoRfb,
+              targetPlatform: computer.session?.platform ?? null,
+              className: "h-full"
+            }
+          ),
+          !rfbInputEnabled ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full border border-white/10 bg-black/70 px-3 py-1 text-[11px] text-white/80 backdrop-blur", children: "View only \xB7 direct input unavailable" }) : null
+        ] }) : /* @__PURE__ */ jsx(
           ComputerViewport,
           {
             frame: machineLocked ? null : displayedFrame,
@@ -1356,6 +1362,8 @@ function ComputerViewer({
             mutating: computer.mutating,
             backgroundActions: computer.session?.capabilities?.backgroundActions === true,
             clipboardEnabled: computer.session?.capabilities?.clipboard === true,
+            pointerInput: computer.session?.capabilities?.pointerInput === true,
+            keyboardInput: computer.session?.capabilities?.keyboardInput === true,
             onAction: perform,
             onReadClipboard: computer.readClipboard,
             onReconnect: generationLossSelected || generationLossFrames ? () => void 0 : frames.reconnect,
@@ -1642,6 +1650,8 @@ function ComputerViewport(props) {
     lastClickRef.current = null;
     if (inputRef.current) inputRef.current.value = "";
   }, []);
+  const pointerInputEnabled = rawInputEnabled && props.pointerInput;
+  const keyboardInputEnabled = rawInputEnabled && props.keyboardInput;
   const paintQueuedFrames = useCallback4(() => {
     if (decodingFrameRef.current) return;
     decodingFrameRef.current = true;
@@ -1714,11 +1724,11 @@ function ComputerViewport(props) {
     paintQueuedFrames();
   }, [clearBufferedInput, paintQueuedFrames, props.frame]);
   useLayoutEffect(() => {
-    if (!rawInputEnabled) {
+    if (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) {
       actionQueueEpochRef.current += 1;
       clearBufferedInput();
     }
-  }, [clearBufferedInput, rawInputEnabled]);
+  }, [clearBufferedInput, props.keyboardInput, props.pointerInput, rawInputEnabled]);
   const enqueue = useCallback4(
     (action, frame, after) => {
       const epoch = actionQueueEpochRef.current;
@@ -1788,6 +1798,8 @@ function ComputerViewport(props) {
     const frame = paintedFrameRef.current;
     if (!frame || props.mutating || !rawInputEnabled || event.button !== 0) return;
     event.preventDefault();
+    if (keyboardInputEnabled) inputRef.current?.focus({ preventScroll: true });
+    if (!pointerInputEnabled) return;
     flushPendingWheel();
     flushPendingText();
     pointerStartRef.current = {
@@ -1797,10 +1809,9 @@ function ComputerViewport(props) {
       frame
     };
     event.currentTarget.setPointerCapture?.(event.pointerId);
-    inputRef.current?.focus({ preventScroll: true });
   };
   const pointerUp = (event) => {
-    if (!rawInputEnabled) return;
+    if (!pointerInputEnabled) return;
     const start = pointerStartRef.current;
     pointerStartRef.current = null;
     if (!start || start.pointerId !== event.pointerId) return;
@@ -1859,7 +1870,7 @@ function ComputerViewport(props) {
   };
   const contextMenu = (event) => {
     event.preventDefault();
-    if (!rawInputEnabled) return;
+    if (!pointerInputEnabled) return;
     const frame = paintedFrameRef.current;
     if (!frame) return;
     flushPendingWheel();
@@ -1881,7 +1892,7 @@ function ComputerViewport(props) {
     }
   };
   const wheel = (event) => {
-    if (!rawInputEnabled) return;
+    if (!pointerInputEnabled) return;
     const frame = paintedFrameRef.current;
     if (!frame) return;
     const at = point(frame, event.clientX, event.clientY);
@@ -1904,7 +1915,7 @@ function ComputerViewport(props) {
     };
   };
   const keyDown = (event) => {
-    if (!rawInputEnabled) return;
+    if (!keyboardInputEnabled) return;
     flushPendingWheel();
     const command = event.metaKey || event.ctrlKey;
     if (props.clipboardEnabled && command && !event.altKey && ["c", "v"].includes(event.key.toLowerCase())) {
@@ -1919,7 +1930,7 @@ function ComputerViewport(props) {
     enqueue({ type: "keyboard", action: "press", value: key }, null);
   };
   const copy = (event) => {
-    if (!props.clipboardEnabled || !rawInputEnabled) return;
+    if (!props.clipboardEnabled || !keyboardInputEnabled) return;
     event.preventDefault();
     flushPendingWheel();
     flushPendingText();
@@ -1935,7 +1946,7 @@ function ComputerViewport(props) {
     });
   };
   const paste = (event) => {
-    if (!props.clipboardEnabled || !rawInputEnabled) return;
+    if (!props.clipboardEnabled || !keyboardInputEnabled) return;
     event.preventDefault();
     flushPendingWheel();
     flushPendingText();
@@ -1951,7 +1962,7 @@ function ComputerViewport(props) {
     });
   };
   const input = (value) => {
-    if (!value || !rawInputEnabled) return;
+    if (!value || !keyboardInputEnabled) return;
     flushPendingWheel();
     flushPendingClick();
     const pending = pendingTextRef.current;
@@ -1976,7 +1987,7 @@ function ComputerViewport(props) {
         className: cn(
           "absolute inset-0 m-auto max-h-full max-w-full touch-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent",
           !showCanvas && "invisible",
-          !rawInputEnabled && "cursor-default"
+          !pointerInputEnabled && "cursor-default"
         ),
         onPointerDown: pointerDown,
         onPointerUp: pointerUp,
@@ -2002,7 +2013,7 @@ function ComputerViewport(props) {
         autoCapitalize: "off",
         autoCorrect: "off",
         spellCheck: false,
-        disabled: !rawInputEnabled
+        disabled: !keyboardInputEnabled
       }
     ),
     !showCanvas ? /* @__PURE__ */ jsx(
@@ -2020,9 +2031,9 @@ function ComputerViewport(props) {
       /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-3 animate-spin" }),
       " Acting"
     ] }) : null,
-    showCanvas && !rawInputEnabled ? /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border border-white/10 bg-black/70 py-1 pl-3 pr-1 text-[11px] text-white/80 backdrop-blur", children: [
-      /* @__PURE__ */ jsx("span", { children: "Background view \xB7 use native controls" }),
-      props.target ? /* @__PURE__ */ jsx(
+    showCanvas && (!rawInputEnabled || !props.pointerInput || !props.keyboardInput) ? /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border border-white/10 bg-black/70 py-1 pl-3 pr-1 text-[11px] text-white/80 backdrop-blur", children: [
+      /* @__PURE__ */ jsx("span", { children: !rawInputEnabled && (props.pointerInput || props.keyboardInput) ? "Background view \xB7 use native controls" : !props.pointerInput && !props.keyboardInput ? "View only \xB7 mouse and keyboard unavailable" : props.keyboardInput ? "Keyboard only \xB7 mouse unavailable" : "Mouse only \xB7 keyboard unavailable" }),
+      !rawInputEnabled && props.target && (props.pointerInput || props.keyboardInput) ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -2403,4 +2414,4 @@ export {
   ComputerViewer,
   computerKey
 };
-//# sourceMappingURL=chunk-XEJEOAOV.js.map
+//# sourceMappingURL=chunk-B7WMS3CS.js.map