feat: update register editor events
This commit is contained in:
@@ -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`)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user