Agora integration final v1.1

client/packages/lowcoder-cli/client.d.ts

@@ -8,8 +8,8 @@ declare module "*.svg" {
     React.SVGProps<SVGSVGElement> & { title?: string }
   >;
 
-  const src: string;
-  export default src;
+  // const src: string;
+  // export default src;
 }
 
 declare module "*.md" {
@@ -31,10 +31,6 @@ declare var REACT_APP_LANGUAGES: string;
 declare var REACT_APP_COMMIT_ID: string;
 declare var REACT_APP_API_HOST: string;
 declare var LOWCODER_NODE_SERVICE_URL: string;
-declare var REACT_APP_LOWCODER_SHOW_BRAND: string;
-declare var REACT_APP_LOWCODER_CUSTOM_LOGO: string;
-declare var REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE: string;
-declare var REACT_APP_LOWCODER_CUSTOM_AUTH_WELCOME_TEXT: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

client/packages/lowcoder-dev-utils/buildVars.js

@@ -19,22 +19,6 @@ export const buildVars = [
     name: "REACT_APP_API_HOST",
     defaultValue: "",
   },
-  {
-    name: "REACT_APP_LOWCODER_SHOW_BRAND",
-    defaultValue: 'false',
-  },
-  {
-    name: "REACT_APP_LOWCODER_CUSTOM_LOGO",
-    defaultValue: '',
-  },
-  {
-    name: "REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE",
-    defaultValue: '',
-  },
-  {
-    name: "REACT_APP_LOWCODER_CUSTOM_AUTH_WELCOME_TEXT",
-    defaultValue: '',
-  },
   {
     name: "LOWCODER_NODE_SERVICE_URL",
     defaultValue: "",

client/packages/lowcoder/index.html

@@ -96,11 +96,5 @@
     <div id="root"></div>
     <script type="module" src="/src/index.ts"></script>
     <!-- <%- browserCheckScript %> -->
-    <script>
-      window.lowcoder_show_brand = "<%= process.env.REACT_APP_LOWCODER_SHOW_BRAND %>";
-      window.lowcoder_custom_auth_welcome_text = "<%= process.env.REACT_APP_LOWCODER_CUSTOM_AUTH_WELCOME_TEXT %>";
-      window.lowcoder_custom_logo = "<%= process.env.REACT_APP_LOWCODER_CUSTOM_LOGO %>";
-      window.lowcoder_custom_logo_square = "<%= process.env.REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE %>";
-    </script>
   </body>
 </html>

client/packages/lowcoder/src/app-env.d.ts

@@ -34,10 +34,6 @@ declare var REACT_APP_LANGUAGES: string;
 declare var REACT_APP_COMMIT_ID: string;
 declare var REACT_APP_API_HOST: string;
 declare var LOWCODER_NODE_SERVICE_URL: string;
-declare var REACT_APP_LOWCODER_SHOW_BRAND: string;
-declare var REACT_APP_LOWCODER_CUSTOM_LOGO: string;
-declare var REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE: string;
-declare var REACT_APP_LOWCODER_CUSTOM_AUTH_WELCOME_TEXT: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

client/packages/lowcoder/src/components/PageSkeleton.tsx

@@ -78,15 +78,13 @@ export default function PageSkeleton(props: IProps) {
     </SkeletonWrapper>
   );
 
+  // {/* headerStart={REACT_APP_LOWCODER_SHOW_BRAND === 'true' ? REACT_APP_LOWCODER_CUSTOM_LOGO !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO} alt="logo" /> :<StyledLogoWithName branding={true} /> : <StyledLogoHome branding={true} />} */}
+
   return (
     <Layout>
       {!hideHeader && isHeaderReady && (
-        <Header
-          headerStart={
-            REACT_APP_LOWCODER_SHOW_BRAND === 'true' ? 
-            REACT_APP_LOWCODER_CUSTOM_LOGO !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO} alt="logo" /> :<StyledLogoWithName branding={true} /> : 
-            <StyledLogoHome branding={true} />
-          }
+        <Header 
+          headerStart={<StyledLogoWithName branding={true} />}
           style={{ backgroundColor: brandingConfig?.headerColor, ...props.headStyle }}
         />
       )}
@@ -95,5 +93,6 @@ export default function PageSkeleton(props: IProps) {
         <MainContent>{!hideContent && skeleton}</MainContent>
       </Layout>
     </Layout>
+
   );
 }

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);