finished audio/mute event on video stream component

Author: freddysundowner

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

@@ -121,6 +121,12 @@ const turnOnMicrophone = async (flag?: boolean) => {
   }
   audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
   audioTrack.play();
+
+  if (!flag) {
+    await client.unpublish(audioTrack);
+  } else {
+    await client.publish(audioTrack);
+  }
 };
 const shareScreen = async (sharing: boolean) => {
   try {
@@ -162,40 +168,20 @@ const leaveChannel = async () => {
 };
 let isJoined = false;
 
-const joinChannel = async (appId: any, channel: any, token: any) => {
-  if (!channel) {
-    channel = "react-room";
-  }
-
-  if (isJoined) {
-    await leaveChannel();
-  }
-  console.log("me joining ", userId);
-  await client.join(appId, channel, token || null, userId);
-
-  isJoined = true;
-};
 const hostChanged = (users: any) => {};
 
-
-
 const publishVideo = async (appId: any, channel: any, height: any) => {
   await turnOnCamera(true);
-  if (!isJoined) {
-    await joinChannel(appId, channel, null);
-  }
-
+  await client.join(appId, channel, null, userId);
   await client.publish(videoTrack);
-  const mediaStreamTrack = videoTrack.getMediaStreamTrack();
 
+  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);
-  } else {
-    console.error("Media stream track not found");
   }
 };
 
@@ -252,15 +238,12 @@ let MTComp = (function () {
 
       useEffect(() => {
         client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
-          console.log("userData", user);
           let userData = { user: user.uid, host: false };
           if (userIds.length == 0) {
             userData.host = true;
           } else {
             userData.host = false;
           }
-          console.log("userData", userData);
-
           setUserIds((userIds: any) => [...userIds, userData]);
         });
         client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => {
@@ -416,9 +399,11 @@ MTComp = withMethodExposing(MTComp, [
       description: trans("meeting.actionBtnDesc"),
       params: [],
     },
-    execute: (comp, values) => {
+    execute: async (comp, values) => {
       let value = !comp.children.audioControl.getView().value;
-      turnOnMicrophone(value);
+      console.log("turnOnMicrophone", value);
+      // await audioTrack.setEnabled(value);
+      await turnOnMicrophone(value);
       comp.children.audioControl.change(value);
     },
   },

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

@@ -28,18 +28,13 @@ import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef } from "react";
 
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import {
-  client,
-  meetingControllerChildren,
-} from "./videoMeetingControllerComp";
+import { client } from "./videoMeetingControllerComp";
 
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 
 import {
-  ButtonEventHandlerControl,
   MeetingEventHandlerControl,
   hiddenPropertyView,
-  refMethods,
   stringExposingStateControl,
 } from "@lowcoder-ee/index.sdk";
 
@@ -156,13 +151,10 @@ const typeOptions = [
     value: "submit",
   },
 ] as const;
-function isDefault(type?: string) {
-  return !type;
-}
+
 export const videoShared = () => {
   console.log("data");
-  
-}
+};
 export const meetingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   type: dropdownControl(typeOptions, ""),
@@ -201,8 +193,6 @@ let VideoCompBuilder = (function (props) {
           async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
             if (mediaType === "video") {
               const remoteTrack = await client.subscribe(user, mediaType);
-              console.log("remoteTrack", remoteTrack);
-
               let userId = user.uid + "";
               const element = document.getElementById(userId);
               if (element) {
@@ -211,10 +201,31 @@ let VideoCompBuilder = (function (props) {
             }
             if (mediaType === "audio") {
               const remoteTrack = await client.subscribe(user, mediaType);
+              if (
+                user.hasAudio &&
+                user.uid + "" != props.userId.value &&
+                props.userId.value != ""
+              ) {
+                props.onEvent("audioMuteUnmute");
+              }
               remoteTrack.play();
             }
           }
         );
+        client.on(
+          "user-unpublished",
+          (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
+            if (mediaType === "audio") {
+              if (
+                !user.hasAudio &&
+                user.uid + "" != props.userId.value &&
+                props.userId.value != ""
+              ) {
+                props.onEvent("audioMuteUnmute");
+              }
+            }
+          }
+        );
       }, [props.userId.value]);
 
       return (