Add option to capture replays

packages/vscode-extension/src/common/Project.ts

@@ -12,6 +12,7 @@ export type DeviceSettings = {
   };
   hasEnrolledBiometrics: boolean;
   locale: Locale;
+  replaysEnabled: boolean;
 };
 
 export type ProjectState = {
@@ -110,6 +111,12 @@ export interface ProjectEventListener<T> {
   (event: T): void;
 }
 
+export type RecordingData = {
+  url: string;
+  tempFileLocation: string;
+  fileName: string;
+};
+
 export interface ProjectInterface {
   getProjectState(): Promise<ProjectState>;
   reload(type: ReloadAction): Promise<boolean>;
@@ -132,6 +139,8 @@ export interface ProjectInterface {
 
   resetAppPermissions(permissionType: AppPermissionType): Promise<void>;
 
+  captureReplay(): Promise<RecordingData>;
+
   dispatchTouches(touches: Array<TouchPoint>, type: "Up" | "Move" | "Down"): Promise<void>;
   dispatchKeyPress(keyCode: number, direction: "Up" | "Down"): Promise<void>;
   dispatchPaste(text: string): Promise<void>;

packages/vscode-extension/src/common/utils.ts

@@ -1,10 +1,14 @@
+import { RecordingData } from "./Project";
+
 export interface UtilsInterface {
   getCommandsCurrentKeyBinding(commandName: string): Promise<string | undefined>;
 
   reportIssue(): Promise<void>;
 
   openFileAt(filePath: string, line0Based: number, column0Based: number): Promise<void>;
 
+  saveVideoRecording(recordingData: RecordingData): Promise<boolean>;
+
   movePanelToNewWindow(): Promise<void>;
 
   showDismissableError(errorMessage: string): Promise<void>;

packages/vscode-extension/src/devices/DeviceBase.ts

@@ -43,6 +43,24 @@ export abstract class DeviceBase implements Disposable {
     this.preview?.dispose();
   }
 
+  public stopReplays() {
+    return this.preview?.stopReplays();
+  }
+
+  public startReplays() {
+    if (!this.preview) {
+      throw new Error("Preview not started");
+    }
+    return this.preview.startReplays();
+  }
+
+  public async captureReplay() {
+    if (!this.preview) {
+      throw new Error("Preview not started");
+    }
+    return this.preview.captureReplay();
+  }
+
   public sendTouches(touches: Array<TouchPoint>, type: "Up" | "Move" | "Down") {
     this.preview?.sendTouches(touches, type);
   }

packages/vscode-extension/src/devices/preview.ts

@@ -1,14 +1,20 @@
+import { Disposable, workspace } from "vscode";
 import path from "path";
-import { Disposable } from "vscode";
 import { exec, ChildProcess, lineReader } from "../utilities/subprocess";
 import { extensionContext } from "../utilities/extensionContext";
 import { Logger } from "../Logger";
 import { Platform } from "../utilities/platform";
-import { TouchPoint } from "../common/Project";
+import { RecordingData, TouchPoint } from "../common/Project";
+
+interface ReplayPromiseHandlers {
+  resolve: (value: RecordingData) => void;
+  reject: (reason?: any) => void;
+}
 
 export class Preview implements Disposable {
   private subprocess?: ChildProcess;
   public streamURL?: string;
+  private lastReplayPromise?: ReplayPromiseHandlers;
 
   constructor(private args: string[]) {}
 
@@ -38,27 +44,95 @@
         reject(new Error("Preview server exited without URL"));
       });
 
-      const streamURLRegex = /(http:\/\/[^ ]*stream\.mjpeg)/;
-
       lineReader(subprocess).onLineRead((line, stderr) => {
         if (stderr) {
           Logger.info("sim-server:", line);
           return;
         }
 
-        const match = line.match(streamURLRegex);
+        if (line.includes("stream_ready")) {
+          const streamURLRegex = /(http:\/\/[^ ]*stream\.mjpeg)/;
+          const match = line.match(streamURLRegex);
+
+          if (match) {
+            Logger.info(`Stream ready ${match[1]}`);
 
-        if (match) {
-          Logger.info(`Stream ready ${match[1]}`);
+            this.streamURL = match[1];
+            resolve(this.streamURL);
+          }
+        } else if (line.includes("video_ready replay") || line.includes("video_error replay")) {
+          // video response format for replays looks as follows:
+          // video_ready replay <HTTP_URL> <FILE_URL>
+          // video_error replay <Error message>
+          const videoReadyMatch = line.match(/video_ready replay\S+ (\S+) (\S+)/);
+          const videoErrorMatch = line.match(/video_error replay\S+ (.*)/);
 
-          this.streamURL = match[1];
-          resolve(this.streamURL);
+          const handlers = this.lastReplayPromise;
+          this.lastReplayPromise = undefined;
+
+          if (handlers && videoReadyMatch) {
+            // match array looks as follows:
+            // [0] - full match
+            // [1] - URL or error message
+            // [2] - File URL
+            const tempFileLocation = videoReadyMatch[2];
+            const ext = path.extname(tempFileLocation);
+            const fileName = workspace.name
+              ? `${workspace.name}-RadonIDE-replay${ext}`
+              : `RadonIDE-replay${ext}`;
+            handlers.resolve({
+              url: videoReadyMatch[1],
+              tempFileLocation,
+              fileName,
+            });
+          } else if (handlers && videoErrorMatch) {
+            handlers.reject(new Error(videoErrorMatch[1]));
+          }
         }
         Logger.info("sim-server:", line);
       });
     });
   }
 
+  static replayID = 0;
+
+  public startReplays() {
+    const stdin = this.subprocess?.stdin;
+    if (!stdin) {
+      throw new Error("sim-server process not available");
+    }
+    stdin.write(`video replay_${++Preview.replayID} start -m -b 50\n`); // 50MB buffer for in-memory video
+  }
+
+  public stopReplays() {
+    const stdin = this.subprocess?.stdin;
+    if (!stdin) {
+      throw new Error("sim-server process not available");
+    }
+    stdin.write(`video replay_${Preview.replayID} stop\n`);
+  }
+
+  public captureReplay() {
+    const stdin = this.subprocess?.stdin;
+    if (!stdin) {
+      throw new Error("sim-server process not available");
+    }
+    let resolvePromise: (value: RecordingData) => void;
+    let rejectPromise: (reason?: any) => void;
+    const promise = new Promise<RecordingData>((resolve, reject) => {
+      resolvePromise = resolve;
+      rejectPromise = reject;
+    });
+    if (this.lastReplayPromise) {
+      promise.then(this.lastReplayPromise.resolve, this.lastReplayPromise.reject);
+    }
+    this.lastReplayPromise = { resolve: resolvePromise!, reject: rejectPromise! };
+    stdin.write(`video replay_${Preview.replayID} stop\n`);
+    // immediately restart replays
+    this.startReplays();
+    return promise;
+  }
+
   public sendTouches(touches: Array<TouchPoint>, type: "Up" | "Move" | "Down") {
     const touchesCoords = touches.map((pt) => `${pt.xRatio},${pt.yRatio}`).join(" ");
     this.subprocess?.stdin?.write(`touch ${type} ${touchesCoords}\n`);

packages/vscode-extension/src/panels/WebviewController.ts

@@ -1,4 +1,4 @@
-import vscode, { Webview, Disposable, window, commands } from "vscode";
+import vscode, { Webview, Disposable, window, commands, Uri } from "vscode";
 import { DependencyManager } from "../dependency/DependencyManager";
 import { DeviceManager } from "../devices/DeviceManager";
 import { Project } from "../project/project";
@@ -73,6 +73,10 @@ export class WebviewController implements Disposable {
     getTelemetryReporter().sendTelemetryEvent("panelOpened");
   }
 
+  public asWebviewUri(uri: Uri) {
+    return this.webview.asWebviewUri(uri);
+  }
+
   public dispose() {
     commands.executeCommand("setContext", "RNIDE.panelIsOpen", false);
 
@@ -146,7 +150,7 @@ export class WebviewController implements Disposable {
             this.webview.postMessage({
               command: "callResult",
               callId,
-              error,
+              error: { name: error.name, message: error.message },
             });
           });
       } else {

packages/vscode-extension/src/project/deviceSession.ts

@@ -40,6 +40,8 @@ export class DeviceSession implements Disposable {
   private debugSession: DebugSession | undefined;
   private disposableBuild: DisposableBuild<BuildResult> | undefined;
   private buildManager: BuildManager;
+  private deviceSettings: DeviceSettings | undefined;
+  private isLaunching = true;
 
   private get buildResult() {
     if (!this.maybeBuildResult) {
@@ -106,6 +108,9 @@ export class DeviceSession implements Disposable {
       platform: this.device.platform,
     });
 
+    this.isLaunching = true;
+    this.device.stopReplays();
+
     // FIXME: Windows getting stuck waiting for the promise to resolve. This
     // seems like a problem with app connecting to Metro and using embedded
     // bundle instead.
@@ -133,6 +138,11 @@ export class DeviceSession implements Disposable {
     this.eventDelegate.onStateChange(StartupMessage.AttachingDebugger);
     await this.startDebugger();
 
+    this.isLaunching = false;
+    if (this.deviceSettings?.replaysEnabled) {
+      this.device.startReplays();
+    }
+
     const launchDurationSec = (Date.now() - launchRequestTime) / 1000;
     Logger.info("App launched in", launchDurationSec.toFixed(2), "sec.");
     getTelemetryReporter().sendTelemetryEvent(
@@ -184,6 +194,7 @@ export class DeviceSession implements Disposable {
   }
 
   public async start(deviceSettings: DeviceSettings, { cleanBuild }: StartOptions) {
+    this.deviceSettings = deviceSettings;
     await this.waitForMetroReady();
     // TODO(jgonet): Build and boot simultaneously, with predictable state change updates
     await this.bootDevice(deviceSettings);
@@ -220,6 +231,10 @@ export class DeviceSession implements Disposable {
     return false;
   }
 
+  public async captureReplay() {
+    return this.device.captureReplay();
+  }
+
   public sendTouches(touches: Array<TouchPoint>, type: "Up" | "Move" | "Down") {
     this.device.sendTouches(touches, type);
   }
@@ -272,6 +287,12 @@ export class DeviceSession implements Disposable {
   }
 
   public async changeDeviceSettings(settings: DeviceSettings): Promise<boolean> {
+    this.deviceSettings = settings;
+    if (settings.replaysEnabled && !this.isLaunching) {
+      this.device.startReplays();
+    } else {
+      this.device.stopReplays();
+    }
     return this.device.changeSettings(settings);
   }
 

packages/vscode-extension/src/project/project.ts

@@ -11,6 +11,7 @@ import {
   ProjectEventMap,
   ProjectInterface,
   ProjectState,
+  RecordingData,
   ReloadAction,
   StartupMessage,
   TouchPoint,
@@ -60,19 +61,7 @@ export class Project
     selectedDevice: undefined,
   };
 
-  private deviceSettings: DeviceSettings = extensionContext.workspaceState.get(
-    DEVICE_SETTINGS_KEY
-  ) ?? {
-    appearance: "dark",
-    contentSize: "normal",
-    location: {
-      latitude: 50.048653,
-      longitude: 19.965474,
-      isDisabled: true,
-    },
-    hasEnrolledBiometrics: false,
-    locale: "en_US",
-  };
+  private deviceSettings: DeviceSettings;
 
   constructor(
     private readonly deviceManager: DeviceManager,
@@ -89,6 +78,7 @@ export class Project
       },
       hasEnrolledBiometrics: false,
       locale: "en_US",
+      replaysEnabled: false,
     };
     this.devtools = new Devtools();
     this.metro = new Metro(this.devtools, this);
@@ -162,6 +152,13 @@ export class Project
   }
   //#endregion
 
+  async captureReplay(): Promise<RecordingData> {
+    if (!this.deviceSession) {
+      throw new Error("No device session available");
+    }
+    return this.deviceSession.captureReplay();
+  }
+
   async dispatchPaste(text: string) {
     this.deviceSession?.sendPaste(text);
   }

packages/vscode-extension/src/utilities/utils.ts

@@ -1,14 +1,15 @@
+import { commands, env, Uri, window, workspace } from "vscode";
 import { homedir } from "node:os";
 import fs from "fs";
 import path from "path";
 import JSON5 from "json5";
-import { commands, window, env, Uri } from "vscode";
 import vscode from "vscode";
 import { Logger } from "../Logger";
 import { extensionContext } from "./extensionContext";
 import { openFileAtPosition } from "./openFileAtPosition";
 import { UtilsInterface } from "../common/utils";
 import { Platform } from "./platform";
+import { RecordingData } from "../common/Project";
 
 type KeybindingType = {
   command: string;
@@ -79,6 +80,27 @@
     openFileAtPosition(filePath, line0Based, column0Based);
   }
 
+  public async saveVideoRecording(recordingData: RecordingData) {
+    const extension = path.extname(recordingData.tempFileLocation);
+    const defaultUri = Uri.file(
+      path.join(workspace.workspaceFolders![0].uri.fsPath, recordingData.fileName)
+    );
+    // save dialog open the location dialog, it also warns the user if the file already exists
+    let saveUri = await window.showSaveDialog({
+      defaultUri: defaultUri,
+      filters: {
+        "Video Files": [extension],
+      },
+    });
+
+    if (!saveUri) {
+      return false;
+    }
+
+    await fs.promises.copyFile(recordingData.tempFileLocation, saveUri.fsPath);
+    return true;
+  }
+
   public async movePanelToNewWindow() {
     commands.executeCommand("workbench.action.moveEditorToNewWindow");
   }

packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.css

@@ -37,3 +37,8 @@
 .device-settings-margin {
   margin-bottom: 24px;
 }
+
+.icons-container {
+  display: flex;
+  align-items: center;
+}