vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update viewport with dimensions

Browse Source
This commit is contained in:
Rohit
2025-03-14 12:40:28 +05:30
parent 592ab6bd33
commit d043aba06e
1 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
server/src/browser-management/classes/RemoteBrowser.ts
View File

@@ -269,7 +269,7 @@ export class RemoteBrowser {
};
}
const contextOptions: any = {
viewport: { height: 400, width: 900 },
// viewport: { height: 400, width: 900 },
// recordVideo: { dir: 'videos/' }
// Force reduced motion to prevent animation issues
reducedMotion: 'reduce',
@@ -322,6 +322,15 @@ export class RemoteBrowser {
await this.setupPageEventListeners(this.currentPage);
const viewportSize = await this.currentPage.viewportSize();
if (viewportSize) {
this.socket.emit('viewportInfo', {
width: viewportSize.width,
height: viewportSize.height,
userId: this.userId
});
}
try {
const blocker = await PlaywrightBlocker.fromLists(fetch, ['https://easylist.to/easylist/easylist.txt']);
await blocker.enableBlockingInPage(this.currentPage);
@@ -335,6 +344,19 @@ export class RemoteBrowser {
}
};
public updateViewportInfo = async (): Promise<void> => {
if (this.currentPage) {
const viewportSize = await this.currentPage.viewportSize();
if (viewportSize) {
this.socket.emit('viewportInfo', {
width: viewportSize.width,
height: viewportSize.height,
userId: this.userId
});
}
}
};
/**
* Registers all event listeners needed for the recording editor session.
* Should be called only once after the full initialization of the remote browser.
@@ -452,6 +474,8 @@ export class RemoteBrowser {
// Set flag to indicate screencast is active
this.isScreencastActive = true;
await this.updateViewportInfo();
this.client.on('Page.screencastFrame', ({ data: base64, sessionId }) => {
// Only process if screencast is still active for this user
if (!this.isScreencastActive) {
@@ -563,7 +587,7 @@ export class RemoteBrowser {
const workflow = this.generator.AddGeneratedFlags(this.generator.getWorkflowFile());
await this.initializeNewPage();
if (this.currentPage) {
this.currentPage.setViewportSize({ height: 400, width: 900 });
// this.currentPage.setViewportSize({ height: 400, width: 900 });
const params = this.generator.getParams();
if (params) {
this.interpreterSettings.params = params.reduce((acc, param) => {
@@ -721,7 +745,7 @@ export class RemoteBrowser {
* @param payload the screenshot binary data
* @returns void
*/
private emitScreenshot = async (payload: Buffer): Promise<void> => {
private emitScreenshot = async (payload: Buffer, viewportSize?: { width: number, height: number }): Promise<void> => {
if (this.isProcessingScreenshot) {
if (this.screenshotQueue.length < SCREENCAST_CONFIG.maxQueueSize) {
this.screenshotQueue.push(payload);
@@ -736,11 +760,14 @@ export class RemoteBrowser {
const base64Data = optimizedScreenshot.toString('base64');
const dataWithMimeType = `data:image/jpeg;base64,${base64Data}`;
// Emit with user context to ensure the frontend can identify which browser's screenshot this is
this.socket.emit('screencast', {
image: dataWithMimeType,
userId: this.userId
}); logger.debug('Screenshot emitted');
// Emit with user context to ensure the frontend can identify which browser's screenshot this is
this.socket.emit('screencast', {
image: dataWithMimeType,
userId: this.userId,
viewport: viewportSize || await this.currentPage?.viewportSize() || null
});
logger.debug('Screenshot emitted');
} catch (error) {
logger.error('Screenshot emission failed:', error);
} finally {