Merge branch 'agora-integrationn' into main

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx

@@ -196,15 +196,6 @@ const publishVideo = async (
   await client.publish(videoTrack);
 
   await rtmInit(appId, userId, channel);
-
-  const mediaStreamTrack = videoTrack.getMediaStreamTrack();
-  if (mediaStreamTrack) {
-    const videoSettings = mediaStreamTrack.getSettings();
-    const videoWidth = videoSettings.width;
-    const videoHeight = videoSettings.height;
-    // height.videoWidth.change(videoWidth);
-    // height.videoHeight.change(videoHeight);
-  }
 };
 
 const sendMessageRtm = (message: any) => {
@@ -278,12 +269,69 @@ let MTComp = (function () {
       });
       const [rtmMessages, setRtmMessages] = useState<any>([]);
       const [localUserSpeaking, setLocalUserSpeaking] = useState<any>(false);
+      const [localUserVideo, setLocalUserVideo] =
+        useState<IAgoraRTCRemoteUser>();
+      const [userJoined, setUserJoined] = useState<IAgoraRTCRemoteUser>();
+      const [userLeft, setUserLeft] = useState<IAgoraRTCRemoteUser>();
 
       useEffect(() => {
-        dispatch(
-          changeChildAction("participants", getData(userIds).data, false)
-        );
-      }, [userIds]);
+        if (userJoined) {
+          let userData = {
+            user: userJoined.uid,
+            host: false,
+            audiostatus: userJoined.hasAudio,
+            streamingVideo: true,
+          };
+          setUserIds((userIds: any) => [...userIds, userData]);
+          if (userIds.length == 0) {
+            userData.host = true;
+          } else {
+            userData.host = false;
+          }
+          dispatch(
+            changeChildAction(
+              "participants",
+              removeDuplicates(getData([...userIds, userData]).data, "user"),
+              false
+            )
+          );
+        }
+      }, [userJoined]);
+      function removeDuplicates(arr: any, prop: any) {
+        const uniqueObjects = [];
+        const seenValues = new Set();
+
+        for (const obj of arr) {
+          const objValue = obj[prop];
+
+          if (!seenValues.has(objValue)) {
+            seenValues.add(objValue);
+            uniqueObjects.push(obj);
+          }
+        }
+
+        return uniqueObjects;
+      }
+      useEffect(() => {
+        if (userLeft) {
+          let newUsers = userIds.filter(
+            (item: any) => item.user !== userLeft.uid
+          );
+          let hostExists = newUsers.filter((f: any) => f.host === true);
+          if (hostExists.length == 0 && newUsers.length > 0) {
+            newUsers[0].host = true;
+            hostChanged(newUsers);
+          }
+          setUserIds(newUsers);
+          dispatch(
+            changeChildAction(
+              "participants",
+              removeDuplicates(getData(newUsers).data, "user"),
+              false
+            )
+          );
+        }
+      }, [userLeft]);
 
       useEffect(() => {
         if (updateVolume.userid) {
@@ -305,13 +353,17 @@ let MTComp = (function () {
       }, [updateVolume]);
 
       useEffect(() => {
-        if (props.endCall.value) {
-          let newUsers = userIds.filter((item: any) => item.user !== userId);
-          dispatch(
-            changeChildAction("participants", getData(newUsers).data, false)
-          );
-        }
-      }, [props.endCall.value]);
+        let prevUsers: [] = props.participants as [];
+        const updatedItems = prevUsers.map((userInfo: any) => {
+          if (userInfo.user === localUserVideo?.uid) {
+            return { ...userInfo, streamingVideo: localUserVideo?.hasVideo };
+          }
+          return userInfo;
+        });
+        dispatch(
+          changeChildAction("participants", getData(updatedItems).data, false)
+        );
+      }, [localUserVideo?.hasVideo]);
 
       useEffect(() => {
         if (rtmMessages) {
@@ -322,7 +374,7 @@ let MTComp = (function () {
       }, [rtmMessages]);
 
       useEffect(() => {
-        if (localUserSpeaking === true) {
+        if (localUserSpeaking === true || localUserVideo) {
           let localObject = {
             user: userId + "",
             audiostatus: props.audioControl.value,
@@ -333,18 +385,6 @@ let MTComp = (function () {
         }
       }, [localUserSpeaking]);
 
-      useEffect(() => {
-        if (props.localUser.value) {
-          let newUsers = userIds.filter((item: any) => item.user !== userId);
-          if (newUsers.length == 0) return;
-          newUsers = props.localUser.value;
-          let updatedUsers = [...userIds, newUsers];
-          dispatch(
-            changeChildAction("participants", getData(updatedUsers).data, false)
-          );
-        }
-      }, [props.localUser.value]);
-
       useEffect(() => {
         if (rtmChannelResponse) {
           rtmClient.on("MessageFromPeer", function (message, peerId) {
@@ -363,29 +403,10 @@ let MTComp = (function () {
         if (client) {
           client.enableAudioVolumeIndicator();
           client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
-            let userData = {
-              user: user.uid,
-              host: false,
-              audiostatus: user.hasVideo,
-            };
-
-            if (userIds.length == 0) {
-              userData.host = true;
-            } else {
-              userData.host = false;
-            }
-            setUserIds((userIds: any) => [...userIds, userData]);
+            setUserJoined(user);
           });
           client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => {
-            let newUsers = userIds.filter(
-              (item: any) => item.user !== user.uid
-            );
-            let hostExists = newUsers.filter((f: any) => f.host === true);
-            if (hostExists.length == 0 && newUsers.length > 0) {
-              newUsers[0].host = true;
-              hostChanged(newUsers);
-            }
-            setUserIds(newUsers);
+            setUserLeft(user);
           });
           client.on("volume-indicator", (volumeInfos: any) => {
             if (volumeInfos.length == 0) return;
@@ -401,6 +422,21 @@ let MTComp = (function () {
               }
             });
           });
+
+          client.on(
+            "user-published",
+            async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
+              setLocalUserVideo(user);
+            }
+          );
+          client.on(
+            "user-unpublished",
+            (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
+              console.log("user-unpublished");
+
+              setLocalUserVideo(user);
+            }
+          );
         }
       }, [client]);
 
@@ -540,6 +576,7 @@ MTComp = withMethodExposing(MTComp, [
       params: [],
     },
     execute: async (comp, values) => {
+      if (!comp.children.meetingActive.getView().value) return;
       let sharing = !comp.children.sharing.getView().value;
       await shareScreen(sharing);
       comp.children.sharing.change(sharing);
@@ -552,6 +589,7 @@ MTComp = withMethodExposing(MTComp, [
       params: [],
     },
     execute: async (comp, values) => {
+      if (!comp.children.meetingActive.getView().value) return;
       let value = !comp.children.audioControl.getView().value;
       comp.children.localUser.change({
         user: userId + "",
@@ -570,12 +608,16 @@ MTComp = withMethodExposing(MTComp, [
       params: [],
     },
     execute: async (comp, values) => {
+      //check if meeting is active
+      if (!comp.children.meetingActive.getView().value) return;
+      //toggle videoControl
       let value = !comp.children.videoControl.getView().value;
       if (videoTrack) {
         videoTrack.setEnabled(value);
       } else {
         await turnOnCamera(value);
       }
+      //change my local user data
       let localData = {
         user: userId + "",
         streamingVideo: value,
@@ -633,6 +675,7 @@ MTComp = withMethodExposing(MTComp, [
       params: [],
     },
     execute: async (comp, values) => {
+      if (!comp.children.meetingActive.getView().value) return;
       let otherData =
         values != undefined && values[1] !== undefined ? values[1] : "";
       let toUsers: any =
@@ -684,6 +727,8 @@ MTComp = withMethodExposing(MTComp, [
       params: [],
     },
     execute: async (comp, values) => {
+      if (!comp.children.meetingActive.getView().value) return;
+
       let value = !comp.children.endCall.getView().value;
       comp.children.endCall.change(value);
       comp.children.meetingActive.change(false);

client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx

@@ -169,19 +169,6 @@ let VideoCompBuilder = (function (props) {
     useEffect(() => {
       if (props.userId.value !== "") {
         let userData = JSON.parse(props.userId?.value);
-        if (
-          userData.user === userId &&
-          userData.streamingVideo === false &&
-          videoRef.current &&
-          videoRef.current?.id === userId + ""
-        ) {
-          if (videoRef.current && videoRef.current?.id === userId + "") {
-            videoRef.current.srcObject = null;
-            setVideo(false);
-          }
-        } else {
-          setVideo(true);
-        }
         client.on(
           "user-published",
           async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
@@ -219,6 +206,8 @@ let VideoCompBuilder = (function (props) {
         client.on(
           "user-unpublished",
           (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
+            console.log("user-unpublished");
+
             if (mediaType === "audio") {
               if (
                 !user.hasAudio &&
@@ -246,7 +235,7 @@ let VideoCompBuilder = (function (props) {
 
         setUserId(userData.user);
         setUsername(userData.userName);
-        // console.log(userData);
+        setVideo(userData.streamingVideo);
       }
     }, [props.userId.value]);
 
@@ -269,60 +258,40 @@ let VideoCompBuilder = (function (props) {
               }}
             >
               {userId ? (
-                showVideo ? (
-                  <VideoContainer
-                    onClick={() => props.onEvent("videoClicked")}
-                    ref={videoRef}
-                    style={{
-                      display: `${showVideo ? "flex" : "none"}`,
-                      aspectRatio: props.videoAspectRatio,
-                      borderRadius: props.style.radius,
-                      width: "auto",
-                    }}
-                    id={props.shareScreen ? "share-screen" : userId}
-                  ></VideoContainer>
-                ) : (
-                  <div
-                    style={{
-                      flexDirection: "column",
-                      display: "flex",
-                      alignItems: "center",
-                      margin: "0 auto",
-                      padding: props.profilePadding,
-                    }}
-                  >
-                    <img alt=""
-                      style={{
-                        borderRadius: props.profileBorderRadius,
-                        width: "100%",
-                        overflow: "hidden",
-                      }}
-                      src={props.profileImageUrl.value}
-                    />
-                    <p style={{ margin: "0" }}>{userName ?? ""}</p>
-                  </div>
-                )
-              ) : (
-                <div
+                <VideoContainer
+                  onClick={() => props.onEvent("videoClicked")}
+                  ref={videoRef}
                   style={{
-                    flexDirection: "column",
-                    display: "flex",
-                    alignItems: "center",
-                    margin: "0 auto",
-                    padding: props.profilePadding,
+                    display: `${showVideo ? "flex" : "none"}`,
+                    aspectRatio: props.videoAspectRatio,
+                    borderRadius: props.style.radius,
+                    width: "auto",
                   }}
-                >
-                  <img alt=""
-                    style={{
-                      borderRadius: props.profileBorderRadius,
-                      width: "100%",
-                      overflow: "hidden",
-                    }}
-                    src={props.profileImageUrl.value}
-                  />
-                  <p style={{ margin: "0" }}>{userName ?? ""}</p>
-                </div>
+                  id={props.shareScreen ? "share-screen" : userId}
+                ></VideoContainer>
+              ) : (
+                <></>
               )}
+              <div
+                style={{
+                  flexDirection: "column",
+                  alignItems: "center",
+                  display: `${!showVideo || userId ? "flex" : "none"}`,
+                  margin: "0 auto",
+                  padding: props.profilePadding,
+                }}
+              >
+                <img
+                  alt=""
+                  style={{
+                    borderRadius: props.profileBorderRadius,
+                    width: "100%",
+                    overflow: "hidden",
+                  }}
+                  src={props.profileImageUrl.value}
+                />
+                <p style={{ margin: "0" }}>{userName ?? ""}</p>
+              </div>
             </div>
           </ReactResizeDetector>
         )}