From f35b8a7d609f94666a32bccf2dfed332e618978b Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Tue, 22 Oct 2024 02:43:28 +0530
Subject: [PATCH] feat:dynamic viewport for browser context

---
 .../classes/RemoteBrowser.ts                  | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/server/src/browser-management/classes/RemoteBrowser.ts b/server/src/browser-management/classes/RemoteBrowser.ts
index 03ed5e41..287d1a0a 100644
--- a/server/src/browser-management/classes/RemoteBrowser.ts
+++ b/server/src/browser-management/classes/RemoteBrowser.ts
@@ -30,6 +30,8 @@ export class RemoteBrowser {
      */
     private browser: Browser | null = null;
 
+    private context: BrowserContext | null = null;
+
     /**
      * The Playwright's [CDPSession](https://playwright.dev/docs/api/class-cdpsession) instance,
      * used to talk raw Chrome Devtools Protocol.
@@ -90,13 +92,13 @@ export class RemoteBrowser {
      */
     public initialize = async (options: RemoteBrowserOptions): Promise<void> => {
         this.browser = <Browser>(await options.browser.launch(options.launchOptions));
-        const context = await this.browser.newContext(
-            {
-                viewport: { height: 400, width: 900 },
-                // recordVideo: { dir: 'videos/' }
-            }
+        this.context = await this.browser.newContext(
+            // {
+            //     viewport: { height: 400, width: 900 },
+            //     // recordVideo: { dir: 'videos/' }
+            // }
         );
-        this.currentPage = await context.newPage();
+        this.currentPage = await this.context.newPage();
         const blocker = await PlaywrightBlocker.fromPrebuiltAdsAndTracking(fetch);
         await blocker.enableBlockingInPage(this.currentPage);
         this.client = await this.currentPage.context().newCDPSession(this.currentPage);
@@ -138,6 +140,16 @@ export class RemoteBrowser {
                 logger.log('error', `${tabInfo.index} index out of range of pages`)
             }
         });
+        this.socket.on('setViewportSize', async (data: { width: number, height: number }) => {
+            const { width, height } = data;
+            logger.log('debug', `Received viewport size: width=${width}, height=${height}`);
+    
+            // Update the browser context's viewport dynamically
+            if (this.context && this.browser) {
+                this.context = await this.browser.newContext({ viewport: { width, height } });
+                logger.log('debug', `Viewport size updated to width=${width}, height=${height} for the entire browser context`);
+            }
+        });
     }
 
     /**