Merge branch 'dev' into deployment_updates

Author: ludomikula

client/packages/lowcoder-comps/package.json

@@ -17,8 +17,8 @@
     "@fullcalendar/resource-timeline": "^6.1.11",
     "@fullcalendar/timegrid": "^6.1.6",
     "@fullcalendar/timeline": "^6.1.6",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "agora-rtc-sdk-ng": "^4.20.2",
     "agora-rtm-sdk": "^1.5.1",
     "big.js": "^6.2.1",
@@ -28,8 +28,8 @@
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "mermaid": "^10.6.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "4.8.4"
   },
   "lowcoder": {

client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx

@@ -22,7 +22,7 @@ import { trans } from "../../i18n/comps";
 import { client } from "./meetingControllerComp";
 import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 import { useEffect, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
 
 const VideoContainer = styled.video`
   height: 100%;
@@ -132,62 +132,63 @@ let VideoCompBuilder = (function () {
     }, [props.userId.value]);
     // console.log("userId", userId);
 
+    useResizeDetector({
+      targetRef: conRef,
+    });
 
     return (
       <EditorContext.Consumer>
         {(editorState: any) => (
-          <ReactResizeDetector>
+          <div
+            ref={conRef}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              height: "100%",
+              overflow: "hidden",
+              borderRadius: props.style.radius,
+              aspectRatio: props.videoAspectRatio,
+              backgroundColor: props.style.background,
+              padding: props.style.padding,
+              margin: props.style.margin,
+            }}
+          >
+            {userId ? (
+              <VideoContainer
+                onClick={() => props.onEvent("videoClicked")}
+                ref={videoRef}
+                style={{
+                  display: `${showVideo ? "flex" : "none"}`,
+                  aspectRatio: props.videoAspectRatio,
+                  borderRadius: props.style.radius,
+                  width: "auto",
+                }}
+                id={userId}
+              ></VideoContainer>
+            ) : (
+              <></>
+            )}
             <div
-              ref={conRef}
               style={{
-                display: "flex",
+                flexDirection: "column",
                 alignItems: "center",
-                height: "100%",
-                overflow: "hidden",
-                borderRadius: props.style.radius,
-                aspectRatio: props.videoAspectRatio,
-                backgroundColor: props.style.background,
-                padding: props.style.padding,
-                margin: props.style.margin,
+                display: `${!showVideo || userId ? "flex" : "none"}`,
+                margin: "0 auto",
+                padding: props.profilePadding,
               }}
             >
-              {userId ? (
-                <VideoContainer
-                  onClick={() => props.onEvent("videoClicked")}
-                  ref={videoRef}
-                  style={{
-                    display: `${showVideo ? "flex" : "none"}`,
-                    aspectRatio: props.videoAspectRatio,
-                    borderRadius: props.style.radius,
-                    width: "auto",
-                  }}
-                  id={userId}
-                ></VideoContainer>
-              ) : (
-                <></>
-              )}
-              <div
+              <img
+                alt=""
                 style={{
-                  flexDirection: "column",
-                  alignItems: "center",
-                  display: `${!showVideo || userId ? "flex" : "none"}`,
-                  margin: "0 auto",
-                  padding: props.profilePadding,
+                  borderRadius: props.profileBorderRadius,
+                  width: "100%",
+                  overflow: "hidden",
                 }}
-              >
-                <img
-                  alt=""
-                  style={{
-                    borderRadius: props.profileBorderRadius,
-                    width: "100%",
-                    overflow: "hidden",
-                  }}
-                  src={props.profileImageUrl.value}
-                />
-                <p style={{ margin: "0" }}>{userName ?? ""}</p>
-              </div>
+                src={props.profileImageUrl.value}
+              />
+              <p style={{ margin: "0" }}>{userName ?? ""}</p>
             </div>
-          </ReactResizeDetector>
+          </div>
         )}
       </EditorContext.Consumer>
     );