feat: update register editor events

This commit is contained in:
Rohit
2025-07-06 21:44:19 +05:30
parent a677cb91af
commit be42c1d8ef

View File

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