From 1f99295c0f2c67cf1b5b80c0ee2daeebe74a30a1 Mon Sep 17 00:00:00 2001 From: Rohit Rajan Date: Mon, 3 Nov 2025 16:00:46 +0530 Subject: [PATCH] feat: rm canvas logic, add in-browser loader --- src/components/browser/BrowserContent.tsx | 4 +- src/components/browser/BrowserWindow.tsx | 146 ++++------------------ src/pages/RecordingPage.tsx | 43 ++++--- 3 files changed, 46 insertions(+), 147 deletions(-) diff --git a/src/components/browser/BrowserContent.tsx b/src/components/browser/BrowserContent.tsx index 46a8886d..f592f846 100644 --- a/src/components/browser/BrowserContent.tsx +++ b/src/components/browser/BrowserContent.tsx @@ -13,7 +13,7 @@ import { export const BrowserContent = () => { const { socket } = useSocketStore(); - const [tabs, setTabs] = useState(["current"]); + const [tabs, setTabs] = useState(["Loading..."]); const [tabIndex, setTabIndex] = React.useState(0); const [showOutputData, setShowOutputData] = useState(false); const { browserWidth } = useBrowserDimensionsStore(); @@ -125,7 +125,7 @@ export const BrowserContent = () => { useEffect(() => { getCurrentTabs() .then((response) => { - if (response) { + if (response && response.length > 0) { setTabs(response); } }) diff --git a/src/components/browser/BrowserWindow.tsx b/src/components/browser/BrowserWindow.tsx index 98642f8c..207e8b56 100644 --- a/src/components/browser/BrowserWindow.tsx +++ b/src/components/browser/BrowserWindow.tsx @@ -1,8 +1,6 @@ import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; import { useSocketStore } from '../../context/socket'; import { Button } from '@mui/material'; -import Canvas from "../recorder/Canvas"; -import { Highlighter } from "../recorder/Highlighter"; import { GenericModal } from '../ui/GenericModal'; import { useActionContext } from '../../context/browserActions'; import { useBrowserSteps, TextStep, ListStep } from '../../context/browserSteps'; @@ -38,12 +36,6 @@ interface AttributeOption { value: string; } -interface ScreencastData { - image: string; - userId: string; - viewport?: ViewportInfo | null; -} - interface ViewportInfo { width: number; height: number; @@ -146,8 +138,6 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null): export const BrowserWindow = () => { const { t } = useTranslation(); const { browserWidth, browserHeight } = useBrowserDimensionsStore(); - const [canvasRef, setCanvasReference] = useState | undefined>(undefined); - const [screenShot, setScreenShot] = useState(""); const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect; selector: string; @@ -1303,17 +1293,6 @@ export const BrowserWindow = () => { }, []); const onMouseMove = (e: MouseEvent) => { - if (canvasRef && canvasRef.current && highlighterData) { - const canvasRect = canvasRef.current.getBoundingClientRect(); - if ( - e.pageX < canvasRect.left - || e.pageX > canvasRect.right - || e.pageY < canvasRect.top - || e.pageY > canvasRect.bottom - ) { - setHighlighterData(null); - } - } }; const resetListState = useCallback(() => { @@ -1331,35 +1310,15 @@ export const BrowserWindow = () => { } }, [getList, resetListState]); - const screencastHandler = useCallback((data: string | ScreencastData) => { - if (typeof data === 'string') { - setScreenShot(data); - } else if (data && typeof data === 'object' && 'image' in data) { - if (!data.userId || data.userId === user?.id) { - setScreenShot(data.image); - - if (data.viewport) { - setViewportInfo(data.viewport); - } - } - } - }, [user?.id]); - useEffect(() => { if (socket) { - socket.on("screencast", screencastHandler); socket.on("domcast", rrwebSnapshotHandler); socket.on("dom-mode-enabled", domModeHandler); socket.on("dom-mode-error", domModeErrorHandler); } - if (canvasRef?.current && !isDOMMode && screenShot) { - drawImage(screenShot, canvasRef.current); - } - return () => { if (socket) { - socket.off("screencast", screencastHandler); socket.off("domcast", rrwebSnapshotHandler); socket.off("dom-mode-enabled", domModeHandler); socket.off("dom-mode-error", domModeErrorHandler); @@ -1367,10 +1326,6 @@ export const BrowserWindow = () => { }; }, [ socket, - screenShot, - canvasRef, - isDOMMode, - screencastHandler, rrwebSnapshotHandler, domModeHandler, domModeErrorHandler, @@ -1847,24 +1802,7 @@ export const BrowserWindow = () => { const handleClick = (e: React.MouseEvent) => { if (highlighterData) { - let shouldProcessClick = false; - - if (!isDOMMode && canvasRef?.current) { - const canvasRect = canvasRef.current.getBoundingClientRect(); - const clickX = e.clientX - canvasRect.left; - const clickY = e.clientY - canvasRect.top; - const highlightRect = highlighterData.rect; - const mappedRect = - coordinateMapper.mapBrowserRectToCanvas(highlightRect); - - shouldProcessClick = - clickX >= mappedRect.left && - clickX <= mappedRect.right && - clickY >= mappedRect.top && - clickY <= mappedRect.bottom; - } else { - shouldProcessClick = true; - } + const shouldProcessClick = true; if (shouldProcessClick) { const options = getAttributeOptions( @@ -2209,17 +2147,7 @@ export const BrowserWindow = () => { !showAttributeModal && highlighterData?.rect != null && ( <> - {!isDOMMode && canvasRef?.current && ( - - )} - - {isDOMMode && highlighterData && ( + {highlighterData && (
{ borderRadius: "0px 0px 5px 5px", }} > - {isDOMMode ? ( + {currentSnapshot ? ( <> - {currentSnapshot ? ( - - ) : ( - - )} + {/* --- Loading overlay --- */} {isCachingChildSelectors && ( @@ -2492,11 +2416,7 @@ export const BrowserWindow = () => { )} ) : ( - + )}
@@ -2591,26 +2511,6 @@ const DOMLoadingIndicator: React.FC = () => { ); }; - -const drawImage = (image: string, canvas: HTMLCanvasElement): void => { - const ctx = canvas.getContext('2d'); - if (!ctx) return; - - const img = new Image(); - img.onload = () => { - requestAnimationFrame(() => { - ctx.drawImage(img, 0, 0, canvas.width, canvas.height); - }); - if (image.startsWith('blob:')) { - URL.revokeObjectURL(image); - } - }; - img.onerror = () => { - console.warn('Failed to load image'); - }; - img.src = image; -}; - const modalStyle = { top: '50%', left: '50%', diff --git a/src/pages/RecordingPage.tsx b/src/pages/RecordingPage.tsx index 6e362471..d53ce32d 100644 --- a/src/pages/RecordingPage.tsx +++ b/src/pages/RecordingPage.tsx @@ -43,7 +43,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => { const { setId, socket } = useSocketStore(); const { setWidth } = useBrowserDimensionsStore(); - const { browserId, setBrowserId, recordingId, recordingUrl, setRecordingUrl, setRecordingName, setRetrainRobotId } = useGlobalInfoStore(); + const { browserId, setBrowserId, recordingId, recordingUrl, setRecordingUrl, setRecordingName, setRetrainRobotId, setIsDOMMode } = useGlobalInfoStore(); const handleShowOutputData = useCallback(() => { setShowOutputData(true); @@ -77,6 +77,8 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => { useEffect(() => { let isCancelled = false; const handleRecording = async () => { + setIsDOMMode(true); + const storedUrl = window.sessionStorage.getItem('recordingUrl'); if (storedUrl && !recordingUrl) { setRecordingUrl(storedUrl); @@ -137,9 +139,12 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => { if (browserId === 'new-recording') { socket?.emit('new-recording'); } + if (recordingUrl && socket) { + socket.emit('input:url', recordingUrl); + } setIsLoaded(true); } - }, [socket, browserId, recordingName, recordingId, isLoaded]); + }, [socket, browserId, recordingName, recordingId, recordingUrl, isLoaded]); useEffect(() => { socket?.on('loaded', handleLoaded); @@ -153,26 +158,20 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
- {isLoaded ? ( - <> - - -
- - -
- - -
- - -
- - - - ) : ( - - )} + + +
+ + +
+ + +
+ + +
+ +