Feat: video toggle event

Author: freddysundowner

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

@@ -52,7 +52,6 @@ import AgoraRTC, {
 
 import { JSONValue } from "@lowcoder-ee/index.sdk";
 import { getData } from "../listViewComp/listViewUtils";
-import { meetingStreamChildren } from "./videoMeetingStreamComp";
 
 const EventOptions = [closeEvent] as const;
 
@@ -151,22 +150,15 @@ const shareScreen = async (sharing: boolean) => {
 };
 const leaveChannel = async () => {
   if (videoTrack) {
-    await turnOnCamera(false);
     await client.unpublish(videoTrack);
-    videoTrack.stop();
+    await turnOnCamera(false);
   }
 
   if (audioTrack) {
     await turnOnMicrophone(false);
-    await client.unpublish(audioTrack);
-    audioTrack.stop();
   }
-
   await client.leave();
-  window.location.reload(); //FixMe: this reloads the page when user leaves
-  isJoined = false;
 };
-let isJoined = false;
 
 const hostChanged = (users: any) => {};
 
@@ -236,6 +228,17 @@ let MTComp = (function () {
         );
       }, [userIds]);
 
+      useEffect(() => {
+        if (props.endCall.value) {
+          let newUsers = userIds.filter((item: any) => item.user !== userId);
+          console.log("newUsers", newUsers, userId);
+
+          dispatch(
+            changeChildAction("participants", getData(newUsers).data, false)
+          );
+        }
+      }, [props.endCall.value]);
+
       useEffect(() => {
         client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
           let userData = { user: user.uid, host: false };
@@ -401,8 +404,6 @@ MTComp = withMethodExposing(MTComp, [
     },
     execute: async (comp, values) => {
       let value = !comp.children.audioControl.getView().value;
-      console.log("turnOnMicrophone", value);
-      // await audioTrack.setEnabled(value);
       await turnOnMicrophone(value);
       comp.children.audioControl.change(value);
     },
@@ -413,9 +414,14 @@ MTComp = withMethodExposing(MTComp, [
       description: trans("meeting.actionBtnDesc"),
       params: [],
     },
-    execute: (comp, values) => {
+    execute: async (comp, values) => {
       let value = !comp.children.videoControl.getView().value;
-      turnOnCamera(value);
+      if (videoTrack) {
+        videoTrack.setEnabled(value);
+      } else {
+        await turnOnCamera(value);
+      }
+      
       comp.children.videoControl.change(value);
     },
   },
@@ -445,9 +451,8 @@ MTComp = withMethodExposing(MTComp, [
     },
     execute: async (comp, values) => {
       let value = !comp.children.endCall.getView().value;
-
-      await leaveChannel();
       comp.children.endCall.change(value);
+      await leaveChannel();
     },
   },
   {

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

@@ -28,7 +28,10 @@ import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef } from "react";
 
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { client } from "./videoMeetingControllerComp";
+import {
+  client,
+  meetingControllerChildren,
+} from "./videoMeetingControllerComp";
 
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 
@@ -193,6 +196,13 @@ let VideoCompBuilder = (function (props) {
             if (mediaType === "video") {
               const remoteTrack = await client.subscribe(user, mediaType);
               let userId = user.uid + "";
+              if (
+                user.hasVideo &&
+                user.uid + "" != props.userId.value &&
+                props.userId.value != ""
+              ) {
+                props.onEvent("videoActiveInactive");
+              }
               const element = document.getElementById(userId);
               if (element) {
                 remoteTrack.play(userId);
@@ -223,6 +233,15 @@ let VideoCompBuilder = (function (props) {
                 props.onEvent("audioMuteUnmute");
               }
             }
+            if (mediaType === "video") {
+              if (
+                !user.hasVideo &&
+                user.uid + "" != props.userId.value &&
+                props.userId.value != ""
+              ) {
+                props.onEvent("videoActiveInactive");
+              }
+            }
           }
         );
       }, [props.userId.value]);

client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx

@@ -363,7 +363,11 @@ export const audioMuteUnmute: EventConfigType = {
   value: "audioMuteUnmute",
   description: trans("meeting.audioMuteUnmute"),
 };
-
+export const videoActiveInactive: EventConfigType = {
+  label: trans("meeting.videoActiveInactive"),
+  value: "videoActiveInactive",
+  description: trans("meeting.videoActiveInactive"),
+};
 export const InputEventHandlerControl = eventHandlerControl([
   changeEvent,
   focusEvent,
@@ -395,4 +399,5 @@ export const MeetingEventHandlerControl = eventHandlerControl([
   screenShared,
   cameraView,
   audioMuteUnmute,
+  videoActiveInactive,
 ] as const);

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1440,6 +1440,7 @@ export const en = {
     screenShared: "Screen Shared",
     screenSharedDesc: "Screen Shared",
     audioMuteUnmute: "Audio Mute",
+    videoActiveInactive: "Video Active Inactive",
     size: "Size",
     top: "Top",
     host: "Host",