refactored/cleaned the code

freddysundowner · freddysundowner · commit 03b21f05fc14 · 2023-10-17T16:44:16.000+03:00
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
@@ -190,13 +190,14 @@ export const meetingControllerChildren = {
   audioControl: booleanExposingStateControl("false"),
   videoControl: booleanExposingStateControl("true"),
   endCall: booleanExposingStateControl("false"),
-  sharingScreen: booleanExposingStateControl("false"),
+  sharing: booleanExposingStateControl("false"),
   videoSettings: jsonObjectExposingStateControl(""),
   videoWidth: numberExposingStateControl("videoWidth", 200),
   videoHeight: numberExposingStateControl("videoHeight", 200),
   appId: withDefault(StringControl, trans("meeting.appid")),
   participants: stateComp<JSONValue>([]),
-  host: stringExposingStateControl("host"),
+  usersScreenShared: stateComp<JSONValue>([]),
+  localUser: jsonObjectExposingStateControl(""),
   meetingName: stringExposingStateControl("meetingName"),
 };
 let MTComp = (function () {
@@ -231,8 +232,6 @@ let MTComp = (function () {
       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)
           );
@@ -241,7 +240,11 @@ let MTComp = (function () {
 
       useEffect(() => {
         client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
-          let userData = { user: user.uid, host: false };
+          let userData = {
+            user: user.uid,
+            host: false,
+            audiostatus: user.hasVideo,
+          };
           if (userIds.length == 0) {
             userData.host = true;
           } else {
@@ -391,9 +394,9 @@ MTComp = withMethodExposing(MTComp, [
       params: [],
     },
     execute: async (comp, values) => {
-      let sharing = !comp.children.sharingScreen.getView().value;
-      comp.children.sharingScreen.change(sharing);
+      let sharing = !comp.children.sharing.getView().value;
       await shareScreen(sharing);
+      comp.children.sharing.change(sharing);
     },
   },
   {
@@ -404,6 +407,11 @@ MTComp = withMethodExposing(MTComp, [
     },
     execute: async (comp, values) => {
       let value = !comp.children.audioControl.getView().value;
+      let localUserData = comp.children.localUser.change({
+        user: userId + "",
+        audiostatus: value,
+      });
+      console.log(localUserData);
       await turnOnMicrophone(value);
       comp.children.audioControl.change(value);
     },
@@ -421,7 +429,7 @@ MTComp = withMethodExposing(MTComp, [
       } else {
         await turnOnCamera(value);
       }
-      
+
       comp.children.videoControl.change(value);
     },
   },
@@ -433,7 +441,10 @@ MTComp = withMethodExposing(MTComp, [
     },
     execute: async (comp, values) => {
       userId = Math.floor(100000 + Math.random() * 900000);
-      comp.children.host.change(userId + "");
+      comp.children.localUser.change({
+        user: userId + "",
+        audiostatus: false,
+      });
       await publishVideo(
         comp.children.appId.getView(),
         comp.children.meetingName.getView().value == ""
@@ -470,7 +481,7 @@ MTComp = withMethodExposing(MTComp, [
 export const VideoMeetingControllerComp = withExposingConfigs(MTComp, [
   new NameConfig("visible", trans("export.visibleDesc")),
   new NameConfig("appId", trans("meeting.appid")),
-  new NameConfig("host", trans("meeting.host")),
+  new NameConfig("localUser", trans("meeting.host")),
   new NameConfig("participants", trans("meeting.participants")),
   new NameConfig("meetingName", trans("meeting.meetingName")),
 ]);
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
@@ -25,12 +25,11 @@ import { IForm } from "../formComp/formDataConstants";
 import { SimpleNameComp } from "../simpleNameComp";
 import { ButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import {
   client,
-  meetingControllerChildren,
 } from "./videoMeetingControllerComp";
 
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
@@ -61,8 +60,7 @@ const Container = styled.div<{ $style: any }>`
   display: flex;
   align-items: center;
   justify-content: center;
-`; // ${(props) => props.$style && getStyle(props.$style)} - they should be applyed to VideoContainer only
-
+`; 
 const VideoContainer = styled.video<{ $style: any }>`
   height: 100%;
   width: 100%;
@@ -154,13 +152,9 @@ const typeOptions = [
   },
 ] as const;
 
-export const videoShared = () => {
-  console.log("data");
-};
 export const meetingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   type: dropdownControl(typeOptions, ""),
-  // onEvent: ButtonEventHandlerControl,
   onEvent: MeetingEventHandlerControl,
   disabled: BoolCodeControl,
   loading: BoolCodeControl,
@@ -169,27 +163,28 @@ export const meetingStreamChildren = {
   suffixIcon: IconControl,
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
-  // viewRef: RefControl<BaseStreamRef>,
-  userId: stringExposingStateControl("user id", trans("meeting.userId")),
+  userId: stringExposingStateControl(""),
 };
 
 let VideoCompBuilder = (function (props) {
-  return (
-    new UICompBuilder(meetingStreamChildren, (props) => {
-      const videoRef = useRef<HTMLVideoElement>(null);
-      const conRef = useRef<HTMLDivElement>(null);
+  return new UICompBuilder(meetingStreamChildren, (props) => {
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const conRef = useRef<HTMLDivElement>(null);
+    const [userId, setUserId] = useState();
 
-      useEffect(() => {
-        onResize();
-      }, []);
+    useEffect(() => {
+      onResize();
+    }, []);
 
-      const onResize = async () => {
-        const container = conRef.current;
-        let videoCo = videoRef.current;
-        videoCo!.style.height = container?.clientHeight + "px";
-        videoCo!.style.width = container?.clientWidth + "px";
-      };
-      useEffect(() => {
+    const onResize = async () => {
+      const container = conRef.current;
+      let videoCo = videoRef.current;
+      videoCo!.style.height = container?.clientHeight + "px";
+      videoCo!.style.width = container?.clientWidth + "px";
+    };
+    useEffect(() => {
+      if (props.userId.value !== "") {
+        let userData = JSON.parse(props.userId?.value);
         client.on(
           "user-published",
           async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
@@ -198,10 +193,10 @@ let VideoCompBuilder = (function (props) {
               let userId = user.uid + "";
               if (
                 user.hasVideo &&
-                user.uid + "" != props.userId.value &&
-                props.userId.value != ""
+                user.uid + "" != userData.user &&
+                userData.user != ""
               ) {
-                props.onEvent("videoActiveInactive");
+                props.onEvent("videoOn");
               }
               const element = document.getElementById(userId);
               if (element) {
@@ -212,10 +207,12 @@ let VideoCompBuilder = (function (props) {
               const remoteTrack = await client.subscribe(user, mediaType);
               if (
                 user.hasAudio &&
-                user.uid + "" != props.userId.value &&
-                props.userId.value != ""
+                user.uid + "" != userData.user &&
+                userData.user != ""
               ) {
-                props.onEvent("audioMuteUnmute");
+                userData.audiostatus = user.hasVideo;
+
+                props.onEvent("audioUnmuted");
               }
               remoteTrack.play();
             }
@@ -227,67 +224,67 @@ let VideoCompBuilder = (function (props) {
             if (mediaType === "audio") {
               if (
                 !user.hasAudio &&
-                user.uid + "" != props.userId.value &&
-                props.userId.value != ""
+                user.uid + "" != userData.user &&
+                userData.user != ""
               ) {
-                props.onEvent("audioMuteUnmute");
+                userData.audiostatus = user.hasVideo;
+                props.onEvent("audioMuted");
               }
             }
             if (mediaType === "video") {
               if (
                 !user.hasVideo &&
-                user.uid + "" != props.userId.value &&
-                props.userId.value != ""
+                user.uid + "" != userData.user &&
+                userData.user != ""
               ) {
-                props.onEvent("videoActiveInactive");
+                props.onEvent("videoOff");
               }
             }
           }
         );
-      }, [props.userId.value]);
+        setUserId(userData.user);
+      }
+    }, [props.userId.value]);
 
-      return (
-        <EditorContext.Consumer>
-          {(editorState) => (
-            <ReactResizeDetector onResize={onResize}>
-              <Container ref={conRef} $style={props.style}>
-                <VideoContainer
-                  onClick={() => props.onEvent("videoClicked")}
-                  ref={videoRef}
-                  $style={props.style}
-                  id={props.userId.value}
-                ></VideoContainer>
-              </Container>
-            </ReactResizeDetector>
-          )}
-        </EditorContext.Consumer>
-      );
-    })
-      .setPropertyViewFn((children) => (
-        <>
-          <Section name={sectionNames.basic}>
-            {children.userId.propertyView({ label: trans("meeting.videoId") })}
-            {children.autoHeight.getPropertyView()}
-          </Section>
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-          </Section>
-          <Section name={sectionNames.layout}>
-            {hiddenPropertyView(children)}
-          </Section>
-          <Section name={sectionNames.style}>
-            {children.style.getPropertyView()}
-          </Section>
-        </>
-      ))
-      // .setExposeMethodConfigs(refMethods<BaseStreamRef>([shareMethod]))
-      .build()
-  );
+    
+
+    return (
+      <EditorContext.Consumer>
+        {(editorState) => (
+          <ReactResizeDetector onResize={onResize}>
+            <Container ref={conRef} $style={props.style}>
+              <VideoContainer
+                onClick={() => props.onEvent("videoClicked")}
+                ref={videoRef}
+                $style={props.style}
+                id={userId}
+              ></VideoContainer>
+            </Container>
+          </ReactResizeDetector>
+        )}
+      </EditorContext.Consumer>
+    );
+  })
+    .setPropertyViewFn((children) => (
+      <>
+        <Section name={sectionNames.basic}>
+          {children.userId.propertyView({ label: trans("meeting.videoId") })}
+          {children.autoHeight.getPropertyView()}
+        </Section>
+        <Section name={sectionNames.interaction}>
+          {children.onEvent.getPropertyView()}
+        </Section>
+        <Section name={sectionNames.layout}>
+          {hiddenPropertyView(children)}
+        </Section>
+        <Section name={sectionNames.style}>
+          {children.style.getPropertyView()}
+        </Section>
+      </>
+    ))
+    .build();
 })();
 
-// interface BaseStreamRef {
-//   shared: () => void;
-// }
 VideoCompBuilder = class extends VideoCompBuilder {
   override autoHeight(): boolean {
     return this.children.autoHeight.getView();
diff --git a/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx b/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx
@@ -348,25 +348,25 @@ export const mentionEvent: EventConfigType = {
   value: "mention",
   description: trans("event.mentionDesc"),
 };
-export const screenShared: EventConfigType = {
-  label: trans("meeting.screenShared"),
-  value: "screenShared",
-  description: trans("meeting.screenSharedDesc"),
+export const audioUnmuted: EventConfigType = {
+  label: trans("meeting.audioUnmuted"),
+  value: "audioUnmuted",
+  description: trans("meeting.audioUnmuted"),
 };
-export const cameraView: EventConfigType = {
-  label: trans("meeting.cameraView"),
-  value: "cameraView",
-  description: trans("meeting.cameraViewDesc"),
+export const audioMuted: EventConfigType = {
+  label: trans("meeting.audioMuted"),
+  value: "audioMuted",
+  description: trans("meeting.audioMuted"),
 };
-export const audioMuteUnmute: EventConfigType = {
-  label: trans("meeting.audioMuteUnmute"),
-  value: "audioMuteUnmute",
-  description: trans("meeting.audioMuteUnmute"),
+export const videoOff: EventConfigType = {
+  label: trans("meeting.videoOff"),
+  value: "videoOff",
+  description: trans("meeting.videoOff"),
 };
-export const videoActiveInactive: EventConfigType = {
-  label: trans("meeting.videoActiveInactive"),
-  value: "videoActiveInactive",
-  description: trans("meeting.videoActiveInactive"),
+export const videoOn: EventConfigType = {
+  label: trans("meeting.videoOn"),
+  value: "videoOn",
+  description: trans("meeting.videoOn"),
 };
 export const videoClicked: EventConfigType = {
   label: trans("meeting.videoClicked"),
@@ -401,9 +401,9 @@ export const ScannerEventHandlerControl = eventHandlerControl([
 ] as const);
 
 export const MeetingEventHandlerControl = eventHandlerControl([
-  screenShared,
-  cameraView,
-  audioMuteUnmute,
-  videoActiveInactive,
+  audioMuted,
+  audioUnmuted,
+  videoOff,
+  videoOn,
   videoClicked,
 ] as const);
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1439,9 +1439,11 @@ export const en = {
     cameraViewDesc: "Camera View",
     screenShared: "Screen Shared",
     screenSharedDesc: "Screen Shared",
-    audioMuteUnmute: "Audio Mute",
+    audioUnmuted: "Audio Unmuted",
+    audioMuted: "Audio Muted",
     videoClicked: "Video Clicked",
-    videoActiveInactive: "Video Active Inactive",
+    videoOff: "Video Off",
+    videoOn: "Video On",
     size: "Size",
     top: "Top",
     host: "Host",
@@ -1451,6 +1453,7 @@ export const en = {
     right: "Right",
     bottom: "Bottom",
     videoId: "Video Id",
+    audioStatus: "audio status",
     left: "Left",
     widthTooltip: "Number or percentage, e.g. 520, 60%",
     heightTooltip: "Number, e.g. 378",
