ensure stream continues when switching between stream and recordings (#3865)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -75,6 +75,7 @@ type Props = {
     run: WorkflowRunStatusApiResponse;
   };
   resizeTrigger?: number;
+  isVisible?: boolean;
   // --
   onClose?: () => void;
 };
@@ -86,6 +87,7 @@ function BrowserStream({
   task = undefined,
   workflow = undefined,
   resizeTrigger,
+  isVisible = true,
   // --
   onClose,
 }: Props) {
@@ -622,7 +624,7 @@ function BrowserStream({
       )}
       ref={setCanvasContainerRef}
     >
-      {isReady && (
+      {isReady && isVisible && (
         <div className="overlay z-10 flex items-center justify-center overflow-hidden">
           {showControlButtons && (
             <div className="control-buttons pointer-events-none relative flex h-full w-full items-center justify-center">

skyvern-frontend/src/routes/browserSessions/BrowserSession.tsx

@@ -23,7 +23,6 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useCloseBrowserSessionMutation } from "@/routes/browserSessions/hooks/useCloseBrowserSessionMutation";
 import { CopyText } from "@/routes/workflows/editor/Workspace";
 import { type BrowserSession as BrowserSessionType } from "@/routes/workflows/types/browserSessionTypes";
-import { cn } from "@/util/utils";
 
 import { BrowserSessionVideo } from "./BrowserSessionVideo";
 
@@ -183,20 +182,28 @@ function BrowserSession() {
         {/* Tab Content */}
         <div className="relative min-h-0 w-full flex-1 rounded-lg border p-4">
           <div
-            className={cn(
-              "absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center",
-              {
-                hidden: activeTab !== "stream",
-              },
-            )}
+            className="absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center"
+            style={{
+              visibility: activeTab === "stream" ? "visible" : "hidden",
+              pointerEvents: activeTab === "stream" ? "auto" : "none",
+            }}
           >
             <BrowserStream
               browserSessionId={browserSessionId}
               interactive={false}
               showControlButtons={true}
+              isVisible={activeTab === "stream"}
             />
           </div>
-          {activeTab === "videos" && <BrowserSessionVideo />}
+          <div
+            className="h-full w-full"
+            style={{
+              visibility: activeTab === "videos" ? "visible" : "hidden",
+              pointerEvents: activeTab === "videos" ? "auto" : "none",
+            }}
+          >
+            <BrowserSessionVideo />
+          </div>
         </div>
       </div>
       <Toaster />