Merge branch 'develop' into perf-v11

src/components/browser/BrowserWindow.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useSocketStore } from '../../context/socket';
 import { Button } from '@mui/material';
 import Canvas from "../recorder/canvas";
@@ -8,6 +8,7 @@ import { useActionContext } from '../../context/browserActions';
 import { useBrowserSteps, TextStep } from '../../context/browserSteps';
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { useTranslation } from 'react-i18next';
+import { AuthContext } from '../../context/auth';
 
 interface ElementInfo {
     tagName: string;
@@ -27,6 +28,12 @@ interface AttributeOption {
     value: string;
 }
 
+interface ScreencastData {
+    image: string;
+    userId: string;
+}
+
+
 const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null): AttributeOption[] => {
     if (!elementInfo) return [];
     switch (tagName.toLowerCase()) {
@@ -71,6 +78,9 @@ export const BrowserWindow = () => {
     const { notify } = useGlobalInfoStore();
     const { getText, getList, paginationMode, paginationType, limitMode, captureStage } = useActionContext();
     const { addTextStep, addListStep } = useBrowserSteps();
+  
+    const { state } = useContext(AuthContext);
+    const { user } = state;
 
     useEffect(() => {
         if (listSelector) {
@@ -85,7 +95,7 @@ export const BrowserWindow = () => {
         if (storedListSelector && !listSelector) {
           setListSelector(storedListSelector);
         }
-    }, []);
+    }, []); 
 
     const onMouseMove = (e: MouseEvent) => {
         if (canvasRef && canvasRef.current && highlighterData) {
@@ -114,9 +124,15 @@ export const BrowserWindow = () => {
         }
     }, [getList, resetListState]);
 
-    const screencastHandler = useCallback((data: string) => {
-        setScreenShot(data);
-    }, [screenShot]);
+    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);
+            }
+        }
+    }, [screenShot, user?.id]);
 
     useEffect(() => {
         if (socket) {

src/index.css

@@ -11,7 +11,19 @@ body {
   padding: 0;
   scrollbar-gutter: stable;
   overflow-y: auto;
-  
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+  transition: background-color 5000s ease-in-out 0s !important;
 }
 
 html {
@@ -22,6 +34,7 @@ html {
 
 a {
   color: #ff00c3;
+
   &:hover {
     color: #ff00c3;
   }
@@ -29,7 +42,7 @@ a {
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-  monospace;
+    monospace;
   color: #ff00c3;
 }
 
@@ -44,7 +57,6 @@ code {
   align-items: center;
   overflow: hidden;
   position: relative;
-  
 }
 
 #browser-content {
@@ -52,13 +64,10 @@ code {
   width: 100%;
   display: flex;
   flex-direction: column;
-  transform: scale(1); /* Ensure no scaling */
-  transform-origin: top left; /* Keep the position fixed */
-}
-
-
-#browser {
- 
+  transform: scale(1);
+  /* Ensure no scaling */
+  transform-origin: top left;
+  /* Keep the position fixed */
 }
 
 #browser-window {
@@ -163,4 +172,4 @@ code {
     height: calc(100vh - 2rem);
     margin: 1rem 55rem;
   }
-}
+}