diff --git a/src/components/recorder/RightSidePanel.tsx b/src/components/recorder/RightSidePanel.tsx index e7268b09..d405e58c 100644 --- a/src/components/recorder/RightSidePanel.tsx +++ b/src/components/recorder/RightSidePanel.tsx @@ -72,7 +72,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture startAction, finishAction } = useActionContext(); - const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField, updateListStepLimit, deleteStepsByActionId, updateListStepData } = useBrowserSteps(); + const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField, updateListStepLimit, deleteStepsByActionId, updateListStepData, updateScreenshotStepData } = useBrowserSteps(); const { id, socket } = useSocketStore(); const { t } = useTranslation(); @@ -183,6 +183,29 @@ export const RightSidePanel: React.FC = ({ onFinishCapture }; }, [socket, updateListStepData, isDOMMode]); + useEffect(() => { + if (socket) { + const handleDirectScreenshot = (data: any) => { + const screenshotSteps = browserSteps.filter(step => + step.type === 'screenshot' && step.actionId === currentScreenshotActionId + ); + + if (screenshotSteps.length > 0) { + const latestStep = screenshotSteps[screenshotSteps.length - 1]; + updateScreenshotStepData(latestStep.id, data.screenshot); + } + + setCurrentScreenshotActionId(''); + }; + + socket.on('directScreenshotCaptured', handleDirectScreenshot); + + return () => { + socket.off('directScreenshotCaptured', handleDirectScreenshot); + }; + } + }, [socket, id, notify, t, currentScreenshotActionId, updateScreenshotStepData, setCurrentScreenshotActionId]); + const extractDataClientSide = useCallback( ( listSelector: string, @@ -649,14 +672,15 @@ export const RightSidePanel: React.FC = ({ onFinishCapture }, [currentListActionId, browserSteps, stopGetList, deleteStepsByActionId, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t]); const captureScreenshot = (fullPage: boolean) => { - const screenshotSettings: ScreenshotSettings = { + const screenshotSettings = { fullPage, - type: 'png', + type: 'png' as const, timeout: 30000, - animations: 'allow', - caret: 'hide', - scale: 'device', + animations: 'allow' as const, + caret: 'hide' as const, + scale: 'device' as const, }; + socket?.emit('captureDirectScreenshot', screenshotSettings); socket?.emit('action', { action: 'screenshot', settings: screenshotSettings }); addScreenshotStep(fullPage, currentScreenshotActionId); stopGetScreenshot();