Add recording controls enhancement

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

@@ -145,6 +145,8 @@ export interface ProjectInterface {
   getDeepLinksHistory(): Promise<string[]>;
   openDeepLink(link: string): Promise<void>;
 
+  startRecording(): void;
+  captureAndStopRecording(): Promise<RecordingData>;
   captureReplay(): Promise<RecordingData>;
 
   dispatchTouches(touches: Array<TouchPoint>, type: "Up" | "Move" | "Down"): Promise<void>;

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

@@ -52,17 +52,33 @@ export abstract class DeviceBase implements Disposable {
     return this.preview?.hideTouches();
   }
 
-  public stopReplays() {
-    return this.preview?.stopReplays();
+  public startRecording() {
+    if (!this.preview) {
+      throw new Error("Preview not started");
+    }
+    return this.preview.startRecording();
+  }
+
+  public async captureAndStopRecording() {
+    if (!this.preview) {
+      throw new Error("Preview not started");
+    }
+    const recordingDataPromise = this.preview.captureRecording();
+    this.preview?.stopRecording();
+    return recordingDataPromise;
   }
 
-  public startReplays() {
+  public enableReplay() {
     if (!this.preview) {
       throw new Error("Preview not started");
     }
     return this.preview.startReplays();
   }
 
+  public disableReplays() {
+    return this.preview?.stopReplays();
+  }
+
   public async captureReplay() {
     if (!this.preview) {
       throw new Error("Preview not started");

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

@@ -6,22 +6,54 @@ import { Logger } from "../Logger";
 import { Platform } from "../utilities/platform";
 import { RecordingData, TouchPoint } from "../common/Project";
 
-interface ReplayPromiseHandlers {
+interface VideoRecordingPromiseHandlers {
   resolve: (value: RecordingData) => void;
   reject: (reason?: any) => void;
 }
 
 export class Preview implements Disposable {
+  private videoRecordingPromises = new Map<string, VideoRecordingPromiseHandlers>();
   private subprocess?: ChildProcess;
   public streamURL?: string;
-  private lastReplayPromise?: ReplayPromiseHandlers;
 
   constructor(private args: string[]) {}
 
   dispose() {
     this.subprocess?.kill();
   }
 
+  private sendCommandOrThrow(command: string) {
+    const stdin = this.subprocess?.stdin;
+    if (!stdin) {
+      throw new Error("sim-server process not available");
+    }
+    stdin.write(command);
+  }
+
+  private saveVideoWithID(videoId: string): Promise<RecordingData> {
+    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;
+    });
+
+    const lastPromise = this.videoRecordingPromises.get(videoId);
+    if (lastPromise) {
+      promise.then(lastPromise.resolve, lastPromise.reject);
+    }
+
+    const newPromiseHandler = { resolve: resolvePromise!, reject: rejectPromise! };
+    this.videoRecordingPromises.set(videoId, newPromiseHandler);
+    stdin.write(`video ${videoId} save\n`);
+    return promise;
+  }
+
   async start() {
     const simControllerBinary = path.join(
       extensionContext.extensionPath,
@@ -60,33 +92,43 @@ export class Preview implements Disposable {
             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+)/);
-          const videoErrorMatch = line.match(/video_error replay (.*)/);
-
-          const handlers = this.lastReplayPromise;
-          this.lastReplayPromise = undefined;
+        } else if (line.includes("video_ready") || line.includes("video_error")) {
+          // video response format for recordings looks as follows:
+          // video_ready <VIDEO_ID> <HTTP_URL> <FILE_URL>
+          // video_error <VIDEO_ID> <Error message>
+          const videoReadyMatch = line.match(/video_ready (\S+) (\S+) (\S+)/);
+          const videoErrorMatch = line.match(/video_error (\S+) (.*)/);
+
+          const videoId = videoReadyMatch
+            ? videoReadyMatch[1]
+            : videoErrorMatch
+            ? videoErrorMatch[1]
+            : "";
+
+          if (!this.videoRecordingPromises.has(videoId)) {
+            throw new Error(`Invalid video ID: ${videoId}`);
+          }
 
+          const handlers = this.videoRecordingPromises.get(videoId);
+          this.videoRecordingPromises.delete(videoId);
           if (handlers && videoReadyMatch) {
             // match array looks as follows:
             // [0] - full match
-            // [1] - URL or error message
-            // [2] - File URL
-            const tempFileLocation = videoReadyMatch[2];
+            // [1] - ID of the video
+            // [2] - URL or error message
+            // [3] - File URL
+            const tempFileLocation = videoReadyMatch[3];
             const ext = path.extname(tempFileLocation);
             const fileName = workspace.name
-              ? `${workspace.name}-RadonIDE-replay${ext}`
-              : `RadonIDE-replay${ext}`;
+              ? `${workspace.name}-RadonIDE-${videoId}${ext}`
+              : `RadonIDE-${videoId}${ext}`;
             handlers.resolve({
-              url: videoReadyMatch[1],
+              url: videoReadyMatch[2],
               tempFileLocation,
               fileName,
             });
           } else if (handlers && videoErrorMatch) {
-            handlers.reject(new Error(videoErrorMatch[1]));
+            handlers.reject(new Error(videoErrorMatch[2]));
           }
         }
         Logger.info("sim-server:", line);
@@ -102,39 +144,28 @@ export class Preview implements Disposable {
     this.subprocess?.stdin?.write("pointer show false\n");
   }
 
+  public startRecording() {
+    this.sendCommandOrThrow(`video recording start -m -b 50\n`); // 50MB buffer for in-memory video
+  }
+
+  public stopRecording() {
+    this.sendCommandOrThrow(`video recording stop\n`);
+  }
+
+  public captureRecording() {
+    return this.saveVideoWithID("recording");
+  }
+
   public startReplays() {
-    const stdin = this.subprocess?.stdin;
-    if (!stdin) {
-      throw new Error("sim-server process not available");
-    }
-    stdin.write(`video replay start -m -b 50\n`); // 50MB buffer for in-memory video
+    this.sendCommandOrThrow(`video replay 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 stop\n`);
+    this.sendCommandOrThrow(`video replay 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 save\n`);
-    return promise;
+    return this.saveVideoWithID("replay");
   }
 
   public sendTouches(touches: Array<TouchPoint>, type: "Up" | "Move" | "Down") {

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

@@ -112,7 +112,7 @@ export class DeviceSession implements Disposable {
     });
 
     this.isLaunching = true;
-    this.device.stopReplays();
+    this.device.disableReplays();
 
     // FIXME: Windows getting stuck waiting for the promise to resolve. This
     // seems like a problem with app connecting to Metro and using embedded
@@ -154,7 +154,7 @@ export class DeviceSession implements Disposable {
 
     this.isLaunching = false;
     if (this.deviceSettings?.replaysEnabled) {
-      this.device.startReplays();
+      this.device.enableReplay();
     }
     if (this.deviceSettings?.showTouches) {
       this.device.showTouches();
@@ -257,6 +257,14 @@ export class DeviceSession implements Disposable {
     }
   }
 
+  public startRecording() {
+    return this.device.startRecording();
+  }
+
+  public async captureAndStopRecording() {
+    return this.device.captureAndStopRecording();
+  }
+
   public async captureReplay() {
     return this.device.captureReplay();
   }
@@ -305,9 +313,9 @@ export class DeviceSession implements Disposable {
   public async changeDeviceSettings(settings: DeviceSettings): Promise<boolean> {
     this.deviceSettings = settings;
     if (settings.replaysEnabled && !this.isLaunching) {
-      this.device.startReplays();
+      this.device.enableReplay();
     } else {
-      this.device.stopReplays();
+      this.device.disableReplays();
     }
     if (settings.showTouches && !this.isLaunching) {
       this.device.showTouches();

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

@@ -159,6 +159,20 @@ export class Project
   }
   //#endregion
 
+  startRecording(): void {
+    if (!this.deviceSession) {
+      throw new Error("No device session available");
+    }
+    this.deviceSession.startRecording();
+  }
+
+  async captureAndStopRecording(): Promise<RecordingData> {
+    if (!this.deviceSession) {
+      throw new Error("No device session available");
+    }
+    return this.deviceSession.captureAndStopRecording();
+  }
+
   async captureReplay(): Promise<RecordingData> {
     if (!this.deviceSession) {
       throw new Error("No device session available");

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

@@ -82,9 +82,14 @@ export class Utils implements UtilsInterface {
 
   public async saveVideoRecording(recordingData: RecordingData) {
     const extension = path.extname(recordingData.tempFileLocation);
-    const defaultUri = Uri.file(
-      path.join(workspace.workspaceFolders![0].uri.fsPath, recordingData.fileName)
+    const timestamp = this.getTimestamp();
+    const baseFileName = recordingData.fileName.substring(
+      0,
+      recordingData.fileName.length - extension.length
     );
+    const newFileName = `${baseFileName}_${timestamp}${extension}`;
+    const defaultUri = Uri.file(path.join(workspace.workspaceFolders![0].uri.fsPath, newFileName));
+
     // save dialog open the location dialog, it also warns the user if the file already exists
     let saveUri = await window.showSaveDialog({
       defaultUri: defaultUri,
@@ -116,4 +121,11 @@ export class Utils implements UtilsInterface {
   public async log(type: "info" | "error" | "warn" | "log", message: string, ...args: any[]) {
     Logger[type]("[WEBVIEW LOG]", message, ...args);
   }
+
+  private getTimestamp() {
+    // e.g. "2024-11-15_at_14-09-51"
+    const timezoneOffset = new Date().getTimezoneOffset() * 60000;
+    const localISOTime = new Date(Date.now() - timezoneOffset).toISOString().slice(0, -1);
+    return localISOTime.replace(/T/g, "_at_").replace(/:/g, "-").slice(0, 22);
+  }
 }

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

@@ -19,6 +19,7 @@ import { DevicePlatform } from "../../common/DeviceManager";
 import { KeybindingInfo } from "./shared/KeybindingInfo";
 import { DeviceLocalizationView } from "../views/DeviceLocalizationView";
 import { OpenDeepLinkView } from "../views/OpenDeepLinkView";
+import ReplayIcon from "./icons/ReplayIcon";
 
 const contentSizes = [
   "xsmall",
@@ -160,10 +161,7 @@ function DeviceSettingsDropdown({ children, disabled }: DeviceSettingsDropdownPr
             Open Deep Link
           </DropdownMenu.Item>
           <div className="dropdown-menu-item">
-            <span className="icons-container">
-              <span className="codicon codicon-triangle-left icons-rewind" />
-              <span className="codicon codicon-triangle-left icons-rewind" />
-            </span>
+            <ReplayIcon />
             Enable Replays
             <Switch.Root
               className="switch-root small-switch"

packages/vscode-extension/src/webview/components/icons/RecordingIcon.tsx

@@ -0,0 +1,34 @@
+interface RecordingIconProps {
+  color?: string;
+}
+
+const RecordingIcon = ({ color = "currentColor", ...rest }: RecordingIconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={18}
+    height={18}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...rest}>
+    <path
+      stroke={color}
+      strokeWidth={1.25}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m17 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L17 10.5"
+    />
+    <rect
+      x="3"
+      y="6"
+      width="14"
+      height="12"
+      rx="2"
+      stroke={color}
+      strokeWidth={1.25}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default RecordingIcon;

packages/vscode-extension/src/webview/components/icons/ReplayIcon.tsx

@@ -0,0 +1,23 @@
+interface ReplayIconProps {
+  color?: string;
+}
+
+const ReplayIcon = ({ color = "currentColor", ...rest }: ReplayIconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...rest}>
+    <path
+      d="M12 13.8L19 18V6L12 10.2M12 18L12 6L3 12L12 18Z"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ReplayIcon;