renaming refactoring of the components

lowcoder-org · FalkWolsky · Oct 18, 2023 · Oct 7, 2023 · Oct 7, 2023 · Oct 9, 2023
commit 5017338e4debf346eefc831b1de5310a56e7863c
diff --git a/...ps/comps/videoComp/videoControlButton.tsx → .../comps/meetingComp/videoControlButton.tsx b/...ps/comps/videoComp/videoControlButton.tsx → .../comps/meetingComp/videoControlButton.tsx
diff --git a/...r/src/comps/hooks/videoControllerComp.tsx → ...comps/meetingComp/videoControllerComp.tsx b/...r/src/comps/hooks/videoControllerComp.tsx → ...comps/meetingComp/videoControllerComp.tsx
@@ -8,12 +8,9 @@ import {
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
 import {
-  JSONObjectArrayControl,
-  NumberControl,
   StringControl,
 } from "comps/controls/codeControl";
 import {
-  arrayStringExposingStateControl,
   booleanExposingStateControl,
   jsonObjectExposingStateControl,
   jsonValueExposingStateControl,
@@ -39,22 +36,19 @@ import {
   Section,
   sectionNames,
 } from "lowcoder-design";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { ResizeHandle } from "react-resizable";
 import styled from "styled-components";
 import { useUserViewMode } from "util/hooks";
 import { isNumeric } from "util/stringUtils";
-import { NameConfig, withExposingConfigs } from "../generators/withExposing";
-import { v4 as uuidv4 } from "uuid";
+import { NameConfig, withExposingConfigs } from "../../generators/withExposing";
 
 import AgoraRTC, {
   ICameraVideoTrack,
   IMicrophoneAudioTrack,
   IAgoraRTCClient,
   IAgoraRTCRemoteUser,
-  IRemoteVideoTrack,
 } from "agora-rtc-sdk-ng";
-import { JSONObject } from "@lowcoder-ee/index.sdk";
 
 const EventOptions = [closeEvent] as const;
 
@@ -100,24 +94,6 @@ function transToPxSize(size: string | number) {
   return isNumeric(size) ? size + "px" : (size as string);
 }
 
-const PlacementOptions = [
-  {
-    label: trans("drawer.top"),
-    value: "top",
-  },
-  {
-    label: trans("drawer.right"),
-    value: "right",
-  },
-  {
-    label: trans("drawer.bottom"),
-    value: "bottom",
-  },
-  {
-    label: trans("drawer.left"),
-    value: "left",
-  },
-] as const;
 
 let client: IAgoraRTCClient = AgoraRTC.createClient({
   mode: "rtc",
@@ -144,8 +120,6 @@ const turnOnMicrophone = async (flag?: boolean) => {
 };
 
 const leaveChannel = async () => {
-  console.log("isJoined", isJoined);
-
   if (!client) {
     console.error("Agora client is not initialized");
     return;
@@ -156,19 +130,19 @@ const leaveChannel = async () => {
     return;
   }
   if (videoTrack) {
-    // await turnOnCamera(false);
+    await turnOnCamera(false);
     await client.unpublish(videoTrack);
     videoTrack.stop();
   }
 
   if (audioTrack) {
-    // await turnOnMicrophone(false);
+    await turnOnMicrophone(false);
     await client.unpublish(audioTrack);
     audioTrack.stop();
   }
 
   await client.leave();
-  isJoined = false; // Update the flag to indicate that you have left the channel
+  isJoined = false;
 };
 let isJoined = false;
 
@@ -181,8 +155,6 @@ const joinChannel = async (appId: any, channel: any, token: any) => {
     await leaveChannel();
   }
 
-  // client.on("user-published", onUserPublish);
-
   await client.join(
     appId,
     channel,
@@ -194,19 +166,14 @@ const joinChannel = async (appId: any, channel: any, token: any) => {
 };
 
 const publishVideo = async (appId: any, channel: any, height: any) => {
-  console.log("publishVideo", appId, channel, isJoined);
   await turnOnCamera(true);
   console.log(appId, channel);
 
   if (!isJoined) {
     await joinChannel(appId, channel, null);
   }
 
-  console.log("publish videoTrack ", videoTrack);
-
   await client.publish(videoTrack);
-
-  // turnOnCamera(true);
   const mediaStreamTrack = videoTrack.getMediaStreamTrack();
 
   if (mediaStreamTrack) {
@@ -276,16 +243,12 @@ let MTComp = (function () {
       [dispatch, isTopBom]
     );
 
-    const usersWithVideoTracks: any = {};
-
     useEffect(() => {
       console.log("nnnn ", props.participants);
     }, [props.participants.value]);
 
     useEffect(() => {
       if (client) {
-        console.log("REGISTERING LISTNERS");
-
         client.on(
           "user-published",
           async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
@@ -297,26 +260,10 @@ let MTComp = (function () {
               const remoteTrack = await client.subscribe(user, mediaType);
               remoteTrack.play();
             }
-            const remoteVideoTrack = user.videoTrack;
-            if (remoteVideoTrack) {
-              props.participants.onChange([JSON.stringify(user.uid)]);
-              console.log("usersWithVideoTracks", props.participants);
-            }
           }
         );
 
-        client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
-          // usersWithVideoTracks[user.uid] = { user, videoTracks: [] };
-          // props.participants.onChange(usersWithVideoTracks);
-          // console.log(
-          //   "userJoined",
-          //   user.uid,
-          //   props.participants.value,
-          //   usersWithVideoTracks
-          // );
-          // const uid = user.uid;
-          // usersWithVideoTracks[uid] = { user, videoTracks: [] };
-        });
+        client.on("user-joined", (user: IAgoraRTCRemoteUser) => {});
         client.on("user-offline", (uid: any, reason: any) => {
           console.log(`User  ${uid} left the channel.`);
         });
@@ -328,13 +275,8 @@ let MTComp = (function () {
         });
         client.on("stream-added", (user: IAgoraRTCRemoteUser) => {
           console.log("stream-added");
-
-          if (user.hasVideo) {
-            console.log(`Stream from user ${user.videoTrack} added.`);
-          }
         });
       }
-      // turnOnCamera(true);
     }, [client]);
 
     return (

diff --git a/...omps/comps/videoComp/videoMeetingComp.tsx → ...mps/comps/meetingComp/videoStreamComp.tsx b/...omps/comps/videoComp/videoMeetingComp.tsx → ...mps/comps/meetingComp/videoStreamComp.tsx
@@ -165,31 +165,19 @@ let VideoCompBuilder = (function (props) {
     suffixIcon: IconControl,
     style: ButtonStyleControl,
     viewRef: RefControl<HTMLElement>,
-    appId: withDefault(StringControl, trans("prop.appid")), ///
-    videokey: withDefault(StringControl, trans("prop.videokey")),
-    participants: arrayStringExposingStateControl("participants"),
     userId: stringExposingStateControl(
       "text",
       trans("meeting.userId", { name: "{{currentUser.name}}" })
     ),
   };
-  // const { client, videoHeight, videoWidth, setHeight, setWidth } = useAgora();
-
   return new UICompBuilder(childrenMap, (props) => {
-    console.log("userId", props.userId.value);
-    //   "afd10eabe68a4de68a76461be92c693c"
     const videoRef = useRef<HTMLVideoElement>(null);
     const conRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
       onResize();
     }, []);
 
-    useEffect(() => {
-      if (props.participants.value.length > 0) {
-        console.log("bbb", props.participants.value);
-      }
-    }, [props.participants.value]);
 
     const onResize = async () => {
       const container = conRef.current;
@@ -205,7 +193,6 @@ let VideoCompBuilder = (function (props) {
             <Container ref={conRef} $style={props.style}>
               <video
                 ref={videoRef}
-                id={props.videokey}
                 style={{ width: 300, height: 300 }}
               ></video>
             </Container>
@@ -216,46 +203,6 @@ let VideoCompBuilder = (function (props) {
   })
     .setPropertyViewFn((children) => (
       <>
-        {/* <Section name={sectionNames.settings}>
-          {children.userId.propertyView({
-            label: trans("meeting.userId"),
-          })}
-          {children.autoHeight.getPropertyView()}
-          {children.videokey.propertyView({
-            label: trans("prop.videokey"),
-          })}
-        </Section> */}
-        {/* <Section name={sectionNames.layout}>
-          {/* {hiddenPropertyView(children)} 
-        </Section> */}
-
-        {/* <Section name={sectionNames.interaction}>
-          {children.type.propertyView({
-            label: trans("prop.type"),
-            radioButton: true,
-          })} */}
-        {/* {isDefault(children.type.getView())
-            ? [
-                children.onEvent.getPropertyView(),
-                disabledPropertyView(children),
-                loadingPropertyView(children),
-              ]  
-            : children.form.getPropertyView()} */}
-        {/* </Section> */}
-
-        {/* <Section name={sectionNames.layout}>
-          {children.prefixIcon.propertyView({
-            label: trans("button.prefixIcon"),
-          })}
-          {children.suffixIcon.propertyView({
-            label: trans("button.suffixIcon"),
-          })}
-          {hiddenPropertyView(children)}
-        </Section>
-
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
-        </Section> */}
       </>
     ))
     .build();
@@ -267,57 +214,8 @@ VideoCompBuilder = class extends VideoCompBuilder {
   }
 };
 
-VideoCompBuilder = withMethodExposing(VideoCompBuilder, [
-  {
-    method: {
-      name: "audioControl",
-      description: trans("meeting.actionBtnDesc"),
-      params: [],
-    },
-    execute: (comp, values) => {
-      // let value = !comp.children.audioControl.getView().value;
-      // turnOnMicrophone(value);
-      // comp.children.audioControl.change(value);
-    },
-  },
-  // {
-  //   method: {
-  //     name: "videoControl",
-  //     description: trans("meeting.actionBtnDesc"),
-  //     params: [],
-  //   },
-  //   execute: (comp, values) => {
-  //     let value = !comp.children.videoControl.getView().value;
-  //     turnOnCamera(value);
-  //     comp.children.videoControl.change(value);
-  //   },
-  // },
-  // {
-  //   method: {
-  //     name: "startMeeting",
-  //     description: trans("meeting.actionBtnDesc"),
-  //     params: [],
-  //   },
-  //   execute: (comp, values) => {
-  //     publishVideo(comp.children.appId.getView(), "testsdaadasdsa");
-  //   },
-  // },
-  // {
-  //   method: {
-  //     name: "endCall",
-  //     description: trans("meeting.actionBtnDesc"),
-  //     params: [],
-  //   },
-  //   execute: (comp, values) => {
-  //     let value = !comp.children.endCall.getView().value;
-  //     leaveChannel();
-  //     comp.children.endCall.change(value);
-  //   },
-  // },
-]);
 
 export const VideoMeetingComp = withExposingConfigs(VideoCompBuilder, [
-  // new NameConfig("appId", trans("button.textDesc")),
   new NameConfig("loading", trans("button.loadingDesc")),
   ...CommonNameConfig,
 ]);
diff --git a/...ps/videoComp/videobuttonCompConstants.tsx → .../meetingComp/videobuttonCompConstants.tsx b/...ps/videoComp/videobuttonCompConstants.tsx → .../meetingComp/videobuttonCompConstants.tsx