implemented user leaving the call and removing the user from the list…

… of users to refresh all other users in the room to see one user has left
lowcoder-org · FalkWolsky · Oct 18, 2023 · Oct 7, 2023 · Oct 7, 2023 · Oct 9, 2023
commit 26a980ab4cc03ecd249ab8d5d53d24f463e5e34e
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/packages/lowcoder/docker-compose.yaml b/client/packages/lowcoder/docker-compose.yaml
@@ -0,0 +1,99 @@
+version: '3'
+
+services:
+  mysql:
+    image: mysql:8.0.22
+    command: --default-authentication-plugin=mysql_native_password
+    volumes:
+      - mysqlvol:/var/lib/mysql
+      - ./backup:/var/backup
+    environment:
+      MYSQL_ROOT_PASSWORD: defaultpassword
+    ports:
+      - "3306:3306"
+
+  redis:
+    image: redis
+    volumes:
+      - redisvol:/data
+
+  taxi-rider-api:
+    image: ridyio/ridy-rider-api
+    restart: always
+    depends_on:
+      - "mysql"
+      - "redis"
+      - "taxi-admin-api"
+    volumes:
+      - ./img:/app/uploads
+      - ./config-new:/app/config
+    environment:
+      - MYSQL_HOST=mysql
+      - GATEWAY_SERVER_URL=http://x.x.x.x:3333
+      - RIDER_SERVER_URL=http://x.x.x.x:4000
+      - ENCRYPTION_KEY=lPw3ethAy4WqnWa3b4TAbCUJr89RifEs
+      - REDIS_HOST=redis
+    ports:
+      - "4000:3000"
+
+  taxi-driver-api:
+    image: ridyio/ridy-driver-api
+    restart: always
+    depends_on:
+      - "mysql"
+      - "redis"
+      - "taxi-admin-api"
+    volumes:
+      - ./img:/app/uploads
+      - ./config-new:/app/config
+    environment:
+      - MYSQL_HOST=mysql
+      - GATEWAY_SERVER_URL=http://x.x.x.x:3333
+      - DRIVER_SERVER_URL=http://x.x.x.x:4002
+      - REDIS_HOST=redis
+      - ENCRYPTION_KEY=lPw3ethAy4WqnWa3b4TAbCUJr89RifEs
+    ports:
+      - "4002:3000"
+
+  taxi-admin-api:
+    image: ridyio/ridy-admin-api
+    restart: always
+    depends_on:
+      - "mysql"
+      - "redis"
+    links:
+      - mysql
+    volumes:
+      - ./img:/app/uploads
+      - ./config-new:/app/config
+    environment:
+      - MYSQL_HOST=mysql
+      - REDIS_HOST=redis
+    ports:
+      - "4001:3000"
+
+  taxi-admin-panel:
+    image: ridyio/ridy-admin-panel
+    restart: always
+    volumes:
+       - taxiassets:/usr/share/nginx/html/assets
+    ports:
+      - "4003:80"
+
+  payment-gateways:
+    image: ridyio/delivery-gateway-box
+    depends_on:
+      - "taxi-rider-api"
+    ports:
+      - "3333:3333"
+    environment:
+      - MYSQL_HOST=mysql
+      - TEST_MODE=true
+      - MYSQL_DB=ridy
+      - GATEWAY_SERVER_URL=http://x.x.x.x:3333
+      - ENCRYPTION_KEY=lPw3ethAy4WqnWa3b4TAbCUJr89RifEs
+
+volumes:
+  redisvol:
+  mysqlvol:
+  taxiassets:
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
@@ -117,26 +117,20 @@ const turnOnMicrophone = async (flag?: boolean) => {
 };
 
 const leaveChannel = async () => {
-  if (!client) {
-    console.error("Agora client is not initialized");
-    return;
-  }
-
-  if (!client.localTracks.length) {
-    console.error("No local tracks to unpublish");
-    return;
-  }
+  console.log("user leaving 3");
   if (videoTrack) {
     await turnOnCamera(false);
     await client.unpublish(videoTrack);
     videoTrack.stop();
   }
 
+  console.log("user leaving 2");
   if (audioTrack) {
     await turnOnMicrophone(false);
     await client.unpublish(audioTrack);
     audioTrack.stop();
   }
+  console.log("user leaving");
 
   await client.leave();
   isJoined = false;
@@ -225,20 +219,14 @@ let MTComp = (function () {
     }, [userIds]);
 
     useEffect(() => {
-      if (client) {
-        client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
-          setUserIds((userIds: any) => [...userIds, { user: user.uid }]);
-        });
-        client.on("user-offline", (uid: any, reason: any) => {
-          console.log(`User  ${uid} left the channel.`);
-        });
-        client.on("stream-removed", (user: IAgoraRTCRemoteUser) => {
-          console.log(`Stream from user ${user.uid} removed.`);
-        });
-        client.on("stream-added", (user: IAgoraRTCRemoteUser) => {
-          console.log("stream-added");
-        });
-      }
+      client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
+        setUserIds((userIds: any) => [...userIds, { user: user.uid }]);
+      });
+      client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => {
+        setUserIds((userIds: any) =>
+          userIds.filter((item: any) => item.user !== user.uid)
+        );
+      });
     }, [client]);
 
     return (
@@ -407,6 +395,8 @@ MTComp = withMethodExposing(MTComp, [
     },
     execute: async (comp, values) => {
       let value = !comp.children.endCall.getView().value;
+      console.log("");
+
       await leaveChannel();
       comp.children.endCall.change(value);
     },

diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
@@ -34,7 +34,6 @@ import { client } from "./videoMeetingControllerComp";
 import { IAgoraRTCRemoteUser, UID } from "agora-rtc-sdk-ng";
 
 import { stringExposingStateControl } from "@lowcoder-ee/index.sdk";
-// import useAgora from "@lowcoder-ee/comps/hooks/agoraFunctions";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -168,48 +167,29 @@ let VideoCompBuilder = (function (props) {
       videoCo!.style.height = container?.clientHeight + "px";
       videoCo!.style.width = container?.clientWidth + "px";
     };
-
     useEffect(() => {
       client.on(
         "user-published",
         async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
           if (mediaType === "video") {
-
-            // const videoElement = document.createElement("video");
-            // videoElement.id = user.uid + "";
-            // videoElement.width = 640; 
-            // videoElement.height = 360;
-
-            // if (conRef.current) {
-            //   conRef.current.appendChild(videoElement);
-            // }
-
-            // console.log("elementHtml", document.getElementById(user.uid + ""));
-
             const remoteTrack = await client.subscribe(user, mediaType);
-            remoteTrack.play(user.uid + "_v");
-            console.log("user-published ", user.uid);
+            remoteTrack.play(user.uid + "");
           }
           if (mediaType === "audio") {
             const remoteTrack = await client.subscribe(user, mediaType);
             remoteTrack.play();
           }
         }
       );
-
-      client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
-        console.log("drawer joined", user.uid);
-      });
-    }, [props.userId]);
-
+    }, [props.userId.value]);
     return (
       <EditorContext.Consumer>
         {(editorState) => (
           <ReactResizeDetector onResize={onResize}>
             <Container ref={conRef} $style={props.style}>
               <video
                 ref={videoRef}
-                id={props.userId.value + "_v"}
+                id={props.userId.value}
                 style={{ width: 300, height: 300 }}
               ></video>
             </Container>