initial-participants listview with videos

Author: freddysundowner

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

@@ -11,7 +11,6 @@ import { StringControl } from "comps/controls/codeControl";
 import {
   booleanExposingStateControl,
   jsonObjectExposingStateControl,
-  jsonValueExposingStateControl,
   numberExposingStateControl,
 } from "comps/controls/codeStateControl";
 import { PositionControl } from "comps/controls/dropdownControl";
@@ -21,7 +20,7 @@ import {
 } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
 import { DrawerStyle } from "comps/controls/styleControlConstants";
-import { withDefault } from "comps/generators";
+import { stateComp, withDefault } from "comps/generators";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { CanvasContainerID } from "constants/domLocators";
@@ -34,7 +33,7 @@ import {
   Section,
   sectionNames,
 } from "lowcoder-design";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { ResizeHandle } from "react-resizable";
 import styled from "styled-components";
 import { useUserViewMode } from "util/hooks";
@@ -47,6 +46,8 @@ import AgoraRTC, {
   IAgoraRTCClient,
   IAgoraRTCRemoteUser,
 } from "agora-rtc-sdk-ng";
+import { JSONValue } from "@lowcoder-ee/index.sdk";
+import { getData } from "../listViewComp/listViewUtils";
 
 const EventOptions = [closeEvent] as const;
 
@@ -92,11 +93,10 @@ function transToPxSize(size: string | number) {
   return isNumeric(size) ? size + "px" : (size as string);
 }
 
-let client: IAgoraRTCClient = AgoraRTC.createClient({
+export const client: IAgoraRTCClient = AgoraRTC.createClient({
   mode: "rtc",
   codec: "vp8",
 });
-
 let audioTrack: IMicrophoneAudioTrack;
 let videoTrack: ICameraVideoTrack;
 
@@ -105,7 +105,7 @@ const turnOnCamera = async (flag?: boolean) => {
     return videoTrack.setEnabled(flag!);
   }
   videoTrack = await AgoraRTC.createCameraVideoTrack();
-  videoTrack.play("camera-video");
+  videoTrack.play("host-video");
 };
 
 const turnOnMicrophone = async (flag?: boolean) => {
@@ -151,13 +151,9 @@ const joinChannel = async (appId: any, channel: any, token: any) => {
   if (isJoined) {
     await leaveChannel();
   }
-
-  await client.join(
-    appId,
-    channel,
-    token || null,
-    Math.floor(100000 + Math.random() * 900000)
-  );
+  let userId = Math.floor(100000 + Math.random() * 900000);
+  console.log("me joining ", userId);
+  await client.join(appId, channel, token || null, userId);
 
   isJoined = true;
 };
@@ -177,30 +173,13 @@ const publishVideo = async (appId: any, channel: any, height: any) => {
     const videoSettings = mediaStreamTrack.getSettings();
     const videoWidth = videoSettings.width;
     const videoHeight = videoSettings.height;
-    console.log("videoHeight ", videoHeight);
-
     height.videoWidth.change(videoWidth);
     height.videoHeight.change(videoHeight);
-    console.log(`Video width: ${videoWidth}px, height: ${videoHeight}px`);
   } else {
     console.error("Media stream track not found");
   }
 };
 
-const onUserPublish = async (
-  user: IAgoraRTCRemoteUser,
-  mediaType: "video" | "audio"
-) => {
-  if (mediaType === "video") {
-    const remoteTrack = await client.subscribe(user, mediaType);
-    remoteTrack.play("remote-video");
-  }
-  if (mediaType === "audio") {
-    const remoteTrack = await client.subscribe(user, mediaType);
-    remoteTrack.play();
-  }
-};
-
 let MTComp = (function () {
   const childrenMap = {
     visible: booleanExposingStateControl("visible"),
@@ -219,7 +198,7 @@ let MTComp = (function () {
     videoWidth: numberExposingStateControl("videoWidth", 200),
     videoHeight: numberExposingStateControl("videoHeight", 200),
     appId: withDefault(StringControl, trans("prop.appid")),
-    participants: jsonValueExposingStateControl("participants"),
+    participants: stateComp<JSONValue>([]),
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
     const isTopBom = ["top", "bottom"].includes(props.placement);
@@ -239,34 +218,20 @@ let MTComp = (function () {
       },
       [dispatch, isTopBom]
     );
+    const [userIds, setUserIds] = useState<any>([]);
 
     useEffect(() => {
-      console.log("nnnn ", props.participants);
-    }, [props.participants.value]);
+      dispatch(changeChildAction("participants", getData(userIds).data, false));
+    }, [userIds]);
 
     useEffect(() => {
       if (client) {
-        client.on(
-          "user-published",
-          async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
-            if (mediaType === "video") {
-              const remoteTrack = await client.subscribe(user, mediaType);
-              remoteTrack.play("remote-video");
-            }
-            if (mediaType === "audio") {
-              const remoteTrack = await client.subscribe(user, mediaType);
-              remoteTrack.play();
-            }
-          }
-        );
-
-        client.on("user-joined", (user: IAgoraRTCRemoteUser) => {});
+        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("user-published", (user, mediaType) => {
-          console.log(`User ${user.uid} published ${user.videoTrack} stream.`);
-        });
         client.on("stream-removed", (user: IAgoraRTCRemoteUser) => {
           console.log(`Stream from user ${user.uid} removed.`);
         });
@@ -463,3 +428,7 @@ export const VideoMeetingControllerComp = withExposingConfigs(MTComp, [
   new NameConfig("appId", trans("prop.appid")),
   new NameConfig("participants", trans("prop.participants")),
 ]);
+
+export function agoraClient() {
+  return client;
+}

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

@@ -1,11 +1,4 @@
-import {
-  ArrayControl,
-  ArrayOrJSONObjectControl,
-  BoolCodeControl,
-  JSONObjectArrayControl,
-  NumberControl,
-  StringControl,
-} from "comps/controls/codeControl";
+import { BoolCodeControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { IconControl } from "comps/controls/iconControl";
@@ -36,24 +29,18 @@ import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
 
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import {
-  arrayStringExposingStateControl,
-  booleanExposingStateControl,
-  jsonObjectExposingStateControl,
-  stringExposingStateControl,
-  withMethodExposing,
-} from "@lowcoder-ee/index.sdk";
+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;
   margin-right: 4px;
 `;
 
-const IconWrapper = styled.div`
-  display: flex;
-`;
-
 function getFormOptions(editorState: EditorState) {
   return editorState
     .uiCompInfoList()
@@ -165,10 +152,7 @@ let VideoCompBuilder = (function (props) {
     suffixIcon: IconControl,
     style: ButtonStyleControl,
     viewRef: RefControl<HTMLElement>,
-    userId: stringExposingStateControl(
-      "text",
-      trans("meeting.userId", { name: "{{currentUser.name}}" })
-    ),
+    userId: stringExposingStateControl("user id", trans("meeting.userId")),
   };
   return new UICompBuilder(childrenMap, (props) => {
     const videoRef = useRef<HTMLVideoElement>(null);
@@ -178,21 +162,54 @@ let VideoCompBuilder = (function (props) {
       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(() => {
+      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);
+          }
+          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]);
+
     return (
       <EditorContext.Consumer>
         {(editorState) => (
           <ReactResizeDetector onResize={onResize}>
             <Container ref={conRef} $style={props.style}>
               <video
                 ref={videoRef}
+                id={props.userId.value + "_v"}
                 style={{ width: 300, height: 300 }}
               ></video>
             </Container>
@@ -203,6 +220,10 @@ let VideoCompBuilder = (function (props) {
   })
     .setPropertyViewFn((children) => (
       <>
+        <Section name={sectionNames.basic}>
+          {children.userId.propertyView({ label: trans("text") })}
+          {children.autoHeight.getPropertyView()}
+        </Section>
       </>
     ))
     .build();
@@ -214,7 +235,6 @@ VideoCompBuilder = class extends VideoCompBuilder {
   }
 };
 
-
 export const VideoMeetingStreamComp = withExposingConfigs(VideoCompBuilder, [
   new NameConfig("loading", trans("button.loadingDesc")),
   ...CommonNameConfig,