feat: update register editor events

server/src/browser-management/classes/RemoteBrowser.ts

@@ -1287,28 +1287,42 @@ export class RemoteBrowser {
      */
     public registerEditorEvents = (): void => {
       // For each event, include userId to make sure events are handled for the correct browser
-        logger.log('debug', `Registering editor events for user: ${this.userId}`);
+      logger.log("debug", `Registering editor events for user: ${this.userId}`);
 
-        this.socket.on(`captureDirectScreenshot:${this.userId}`, async (settings) => {
+      this.socket.on(
-          logger.debug(`Direct screenshot capture requested for user ${this.userId}`);
+        `captureDirectScreenshot:${this.userId}`,
+        async (settings) => {
+          logger.debug(
+            `Direct screenshot capture requested for user ${this.userId}`
+          );
           await this.captureDirectScreenshot(settings);
-        });
+        }
+      );
 
       // For backward compatibility
-        this.socket.on('captureDirectScreenshot', async (settings) => {
+      this.socket.on("captureDirectScreenshot", async (settings) => {
         await this.captureDirectScreenshot(settings);
       });
 
       // Listen for specific events for this user
       this.socket.on(`rerender:${this.userId}`, async () => {
         logger.debug(`Rerender event received for user ${this.userId}`);
+        if (this.renderingMode === "dom") {
+          await this.makeAndEmitDOMSnapshot();
+        } else {
           await this.makeAndEmitScreenshot();
+        }
       });
 
-        // For backward compatibility, also listen to the general event
+      this.socket.on("rerender", async () => {
-        this.socket.on('rerender', async () => {
+        logger.debug(
-            logger.debug(`General rerender event received, checking if for user ${this.userId}`);
+          `General rerender event received, checking if for user ${this.userId}`
+        );
+        if (this.renderingMode === "dom") {
+          await this.makeAndEmitDOMSnapshot();
+        } else {
           await this.makeAndEmitScreenshot();
+        }
       });
 
       this.socket.on(`settings:${this.userId}`, (settings) => {
@@ -1317,19 +1331,25 @@ export class RemoteBrowser {
       });
 
       this.socket.on(`changeTab:${this.userId}`, async (tabIndex) => {
-            logger.debug(`Tab change to ${tabIndex} requested for user ${this.userId}`);
+        logger.debug(
+          `Tab change to ${tabIndex} requested for user ${this.userId}`
+        );
         await this.changeTab(tabIndex);
       });
 
       this.socket.on(`addTab:${this.userId}`, async () => {
         logger.debug(`New tab requested for user ${this.userId}`);
         await this.currentPage?.context().newPage();
-            const lastTabIndex = this.currentPage ? this.currentPage.context().pages().length - 1 : 0;
+        const lastTabIndex = this.currentPage
+          ? this.currentPage.context().pages().length - 1
+          : 0;
         await this.changeTab(lastTabIndex);
       });
 
       this.socket.on(`closeTab:${this.userId}`, async (tabInfo) => {
-            logger.debug(`Close tab ${tabInfo.index} requested for user ${this.userId}`);
+        logger.debug(
+          `Close tab ${tabInfo.index} requested for user ${this.userId}`
+        );
         const page = this.currentPage?.context().pages()[tabInfo.index];
         if (page) {
           if (tabInfo.isCurrent) {
@@ -1343,34 +1363,58 @@ export class RemoteBrowser {
           }
           await page.close();
           logger.log(
-                    'debug',
+            "debug",
-                    `Tab ${tabInfo.index} was closed for user ${this.userId}, new tab count: ${this.currentPage?.context().pages().length}`
+            `Tab ${tabInfo.index} was closed for user ${
+              this.userId
+            }, new tab count: ${this.currentPage?.context().pages().length}`
           );
         } else {
-                logger.log('error', `Tab index ${tabInfo.index} out of range for user ${this.userId}`);
+          logger.log(
+            "error",
+            `Tab index ${tabInfo.index} out of range for user ${this.userId}`
+          );
         }
       });
 
-        this.socket.on(`setViewportSize:${this.userId}`, async (data: { width: number, height: number }) => {
+      this.socket.on(
+        `setViewportSize:${this.userId}`,
+        async (data: { width: number; height: number }) => {
           const { width, height } = data;
-            logger.log('debug', `Viewport size change to width=${width}, height=${height} requested for user ${this.userId}`);
+          logger.log(
+            "debug",
+            `Viewport size change to width=${width}, height=${height} requested for user ${this.userId}`
+          );
 
           // Update the browser context's viewport dynamically
           if (this.context && this.browser) {
-                this.context = await this.browser.newContext({ viewport: { width, height } });
+            this.context = await this.browser.newContext({
-                logger.log('debug', `Viewport size updated to width=${width}, height=${height} for user ${this.userId}`);
+              viewport: { width, height },
-            }
             });
+            logger.log(
+              "debug",
+              `Viewport size updated to width=${width}, height=${height} for user ${this.userId}`
+            );
+          }
+        }
+      );
 
       // For backward compatibility, also register the standard events
-        this.socket.on('settings', (settings) => this.interpreterSettings = settings);
+      this.socket.on(
-        this.socket.on('changeTab', async (tabIndex) => await this.changeTab(tabIndex));
+        "settings",
-        this.socket.on('addTab', async () => {
+        (settings) => (this.interpreterSettings = settings)
+      );
+      this.socket.on(
+        "changeTab",
+        async (tabIndex) => await this.changeTab(tabIndex)
+      );
+      this.socket.on("addTab", async () => {
         await this.currentPage?.context().newPage();
-            const lastTabIndex = this.currentPage ? this.currentPage.context().pages().length - 1 : 0;
+        const lastTabIndex = this.currentPage
+          ? this.currentPage.context().pages().length - 1
+          : 0;
         await this.changeTab(lastTabIndex);
       });
-        this.socket.on('closeTab', async (tabInfo) => {
+      this.socket.on("closeTab", async (tabInfo) => {
         const page = this.currentPage?.context().pages()[tabInfo.index];
         if (page) {
           if (tabInfo.isCurrent) {
@@ -1383,18 +1427,25 @@ export class RemoteBrowser {
           await page.close();
         }
       });
-        this.socket.on('setViewportSize', async (data: { width: number, height: number }) => {
+      this.socket.on(
+        "setViewportSize",
+        async (data: { width: number; height: number }) => {
           const { width, height } = data;
           if (this.context && this.browser) {
-                this.context = await this.browser.newContext({ viewport: { width, height } });
+            this.context = await this.browser.newContext({
-            }
+              viewport: { width, height },
             });
+          }
+        }
+      );
 
-        this.socket.on('extractListData', async (data: { 
+      this.socket.on(
-            listSelector: string, 
+        "extractListData",
-            fields: Record<string, any>,
+        async (data: {
-            currentListId: number, 
+          listSelector: string;
-            pagination: any 
+          fields: Record<string, any>;
+          currentListId: number;
+          pagination: any;
         }) => {
           if (this.currentPage) {
             const extractedData = await this.extractListData(
@@ -1403,12 +1454,13 @@ export class RemoteBrowser {
               data.fields
             );
 
-                this.socket.emit('listDataExtracted', {
+            this.socket.emit("listDataExtracted", {
               currentListId: data.currentListId,
-                    data: extractedData
+              data: extractedData,
             });
           }
-        });
+        }
+      );
     };
     /**
      * Subscribes the remote browser for a screencast session
@@ -1782,8 +1834,13 @@ export class RemoteBrowser {
                 url: this.currentPage.url(),
                 userId: this.userId
             });
+            if (this.isDOMStreamingActive) {
+              await this.makeAndEmitDOMSnapshot();
+              await this.subscribeToDOM();
+            } else {
               await this.makeAndEmitScreenshot();
               await this.subscribeToScreencast();
+            }
         } else {
             logger.log('error', `${tabIndex} index out of range of pages`)
         }