From de2a8c72040cb2a3c7a6bfa194ffe2d72cd56e71 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Mon, 3 Jun 2024 11:42:21 +0300 Subject: [PATCH 1/3] fixed agora meeting sharing bug --- .../meetingControllerComp.tsx | 1094 +++++++++-------- .../videoMeetingStreamComp.tsx | 2 +- .../videoSharingStreamComp.tsx | 1 - 3 files changed, 558 insertions(+), 539 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControllerComp.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControllerComp.tsx index 268b16404..9af1f3f6c 100644 --- a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControllerComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/meetingControllerComp.tsx @@ -240,366 +240,386 @@ const meetingControllerChildren = { messages: stateComp([]), }; -let MeetingControllerComp = () =>
Meeting Component is not available. It needs Lowcoder from Version v2.4
; - -if (typeof ContainerCompBuilder === 'function') { - -let MTComp = (function () { - return new ContainerCompBuilder( - meetingControllerChildren, (props: any, dispatch: any) => { - - const isTopBom = ["top", "bottom"].includes(props.placement); - const { items, ...otherContainerProps } = props.container; - // const userViewMode = useUserViewMode(); - // const resizable = !userViewMode && (!isTopBom || !props.autoHeight); - const onResizeStop = useCallback( - ( - e: React.SyntheticEvent, - node: HTMLElement, - size: { width: number; height: number }, - handle: ResizeHandle - ) => { - isTopBom - ? dispatch(changeChildAction("height", size.height, true)) - : dispatch(changeChildAction("width", size.width, true)); - }, - [dispatch, isTopBom] - ); - const [userIds, setUserIds] = useState([]); - const [updateVolume, setUpdateVolume] = useState({ - update: false, - userid: null, - }); - const [rtmMessages, setRtmMessages] = useState([]); - const [localUserSpeaking, setLocalUserSpeaking] = useState(false); - const [localUserVideo, setLocalUserVideo] = - useState(); - const [userJoined, setUserJoined] = useState(); - const [userLeft, setUserLeft] = useState(); - - useEffect(() => { - if (userJoined) { - // console.log("userJoined ", userJoined); - - let prevUsers: any[] = props.participants as []; - // console.log("prevUsers ", prevUsers); - let userData = { - user: userJoined.uid, - audiostatus: userJoined.hasAudio, - streamingVideo: true, - }; - // console.log("userData ", userData); - setUserIds((userIds: any) => [...userIds, userData]); - // console.log("userIds ", userIds); - /* console.log( +let MeetingControllerComp = () => ( +
+ Meeting Component is not available. It needs Lowcoder from Version v2.4 +
+); + +if (typeof ContainerCompBuilder === "function") { + let MTComp = (function () { + return new ContainerCompBuilder( + meetingControllerChildren, + (props: any, dispatch: any) => { + const isTopBom = ["top", "bottom"].includes(props.placement); + const { items, ...otherContainerProps } = props.container; + const userViewMode = useUserViewMode(); + const resizable = !userViewMode && (!isTopBom || !props.autoHeight); + const onResizeStop = useCallback( + ( + e: React.SyntheticEvent, + node: HTMLElement, + size: { width: number; height: number }, + handle: ResizeHandle + ) => { + isTopBom + ? dispatch(changeChildAction("height", size.height, true)) + : dispatch(changeChildAction("width", size.width, true)); + }, + [dispatch, isTopBom] + ); + const [userIds, setUserIds] = useState([]); + const [updateVolume, setUpdateVolume] = useState({ + update: false, + userid: null, + }); + const [rtmMessages, setRtmMessages] = useState([]); + const [localUserSpeaking, setLocalUserSpeaking] = useState(false); + const [localUserVideo, setLocalUserVideo] = + useState(); + const [userJoined, setUserJoined] = useState(); + const [userLeft, setUserLeft] = useState(); + + useEffect(() => { + if (userJoined) { + // console.log("userJoined ", userJoined); + + let prevUsers: any[] = props.participants as []; + // console.log("prevUsers ", prevUsers); + let userData = { + user: userJoined.uid, + audiostatus: userJoined.hasAudio, + streamingVideo: true, + }; + // console.log("userData ", userData); + setUserIds((userIds: any) => [...userIds, userData]); + // console.log("userIds ", userIds); + /* console.log( "removeDuplicates ", removeDuplicates(getData([...prevUsers, userData]).data, "user") ); */ - dispatch( - changeChildAction( - "participants", - removeDuplicates(getData([...prevUsers, userData]).data, "user"), - false - ) - ); - } - }, [userJoined]); + dispatch( + changeChildAction( + "participants", + removeDuplicates( + getData([...prevUsers, userData]).data, + "user" + ), + false + ) + ); + } + }, [userJoined]); - function removeDuplicates(arr: any, prop: any) { - const uniqueObjects = []; - const seenValues = new Set(); + function removeDuplicates(arr: any, prop: any) { + const uniqueObjects = []; + const seenValues = new Set(); - for (const obj of arr) { - const objValue = obj[prop]; + for (const obj of arr) { + const objValue = obj[prop]; - if (!seenValues.has(objValue)) { - seenValues.add(objValue); - uniqueObjects.push(obj); + if (!seenValues.has(objValue)) { + seenValues.add(objValue); + uniqueObjects.push(obj); + } } - } - return uniqueObjects; - } - useEffect(() => { - if (userLeft) { - let newUsers = userIds.filter( - (item: any) => item.user !== userLeft.uid - ); - let hostExists = newUsers.filter((f: any) => f.host === true); - if (hostExists.length == 0 && newUsers.length > 0) { - newUsers[0].host = true; - } - setUserIds(newUsers); - dispatch( - changeChildAction( - "participants", - removeDuplicates(getData(newUsers).data, "user"), - false - ) - ); + return uniqueObjects; } - }, [userLeft]); + useEffect(() => { + if (userLeft) { + let newUsers = userIds.filter( + (item: any) => item.user !== userLeft.uid + ); + let hostExists = newUsers.filter((f: any) => f.host === true); + if (hostExists.length == 0 && newUsers.length > 0) { + newUsers[0].host = true; + } + setUserIds(newUsers); + dispatch( + changeChildAction( + "participants", + removeDuplicates(getData(newUsers).data, "user"), + false + ) + ); + } + }, [userLeft]); - // console.log("sharing", props.sharing); + // console.log("sharing", props.sharing); - useEffect(() => { - if (updateVolume.userid) { - let prevUsers: [] = props.participants as []; + useEffect(() => { + if (updateVolume.userid) { + let prevUsers: [] = props.participants as []; + const updatedItems = prevUsers.map((userInfo: any) => { + if ( + userInfo.user === updateVolume.userid && + userInfo.speaking != updateVolume.update + ) { + return { ...userInfo, speaking: updateVolume.update }; + } + return userInfo; + }); + dispatch( + changeChildAction( + "participants", + getData(updatedItems).data, + false + ) + ); + } + }, [updateVolume]); + + useEffect(() => { + let prevUsers: [] = props.participants as []; const updatedItems = prevUsers.map((userInfo: any) => { - if ( - userInfo.user === updateVolume.userid && - userInfo.speaking != updateVolume.update - ) { - return { ...userInfo, speaking: updateVolume.update }; + if (userInfo.user === localUserVideo?.uid) { + return { ...userInfo, streamingSharing: props.sharing.value }; } return userInfo; }); dispatch( changeChildAction("participants", getData(updatedItems).data, false) ); - } - }, [updateVolume]); - - useEffect(() => { - let prevUsers: [] = props.participants as []; - const updatedItems = prevUsers.map((userInfo: any) => { - if (userInfo.user === localUserVideo?.uid) { - return { ...userInfo, streamingSharing: props.sharing.value }; - } - return userInfo; - }); - dispatch( - changeChildAction("participants", getData(updatedItems).data, false) - ); - let localObject = { - user: userId + "", - audiostatus: props.audioControl.value, - streamingVideo: props.videoControl.value, - streamingSharing: props.sharing.value, - speaking: localUserSpeaking, - }; - props.localUser.onChange(localObject); - }, [props.sharing.value]); - - // console.log("participants ", props.participants); - - useEffect(() => { - let prevUsers: [] = props.participants as []; - const updatedItems = prevUsers.map((userInfo: any) => { - if (userInfo.user === localUserVideo?.uid) { - return { ...userInfo, streamingVideo: localUserVideo?.hasVideo }; - } - return userInfo; - }); - dispatch( - changeChildAction("participants", getData(updatedItems).data, false) - ); - }, [localUserVideo?.hasVideo]); - - useEffect(() => { - if (rtmMessages) { - dispatch( - changeChildAction("messages", getData(rtmMessages).data, false) - ); - } - }, [rtmMessages]); - - useEffect(() => { - if (localUserSpeaking === true || localUserVideo) { let localObject = { user: userId + "", audiostatus: props.audioControl.value, streamingVideo: props.videoControl.value, + streamingSharing: props.sharing.value, speaking: localUserSpeaking, }; props.localUser.onChange(localObject); - } - }, [localUserSpeaking]); - - useEffect(() => { - if (rtmChannelResponse) { - rtmClient.on("MessageFromPeer", function (message, peerId) { - setRtmMessages((prevMessages: any[]) => { - // Check if the messages array exceeds the maximum limit - if (prevMessages.length >= 500) { - prevMessages.pop(); // Remove the oldest message - } - return [ - ...prevMessages, - { peermessage: JSON.parse(message.text + ""), from: peerId }, - ]; - }); - }); + }, [props.sharing.value]); - rtmChannelResponse.on("ChannelMessage", function (message, memberId) { - setRtmMessages((prevMessages: any[]) => { - // Check if the messages array exceeds the maximum limit - if (prevMessages.length >= 500) { - prevMessages.pop(); // Remove the oldest message - } - return [ - ...prevMessages, - { - channelmessage: JSON.parse(message.text + ""), - from: memberId, - }, - ]; - }); + // console.log("participants ", props.participants); + + useEffect(() => { + let prevUsers: [] = props.participants as []; + const updatedItems = prevUsers.map((userInfo: any) => { + if (userInfo.user === localUserVideo?.uid) { + return { ...userInfo, streamingVideo: localUserVideo?.hasVideo }; + } + return userInfo; + }); + dispatch( + changeChildAction("participants", getData(updatedItems).data, false) + ); + }, [localUserVideo?.hasVideo]); + useEffect(() => { + if (rtmMessages) { dispatch( changeChildAction("messages", getData(rtmMessages).data, false) ); - }); - } - }, [rtmChannelResponse]); - useEffect(() => { - if (client) { - //Enable Agora to send audio bytes - client.enableAudioVolumeIndicator(); - //user activity listeners - client.on("user-joined", (user: IAgoraRTCRemoteUser) => { - setUserJoined(user); - }); - client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => { - setUserLeft(user); - }); + } + }, [rtmMessages]); + + useEffect(() => { + if (localUserSpeaking === true || localUserVideo) { + let localObject = { + user: userId + "", + audiostatus: props.audioControl.value, + streamingVideo: props.videoControl.value, + speaking: localUserSpeaking, + }; + props.localUser.onChange(localObject); + } + }, [localUserSpeaking]); + + useEffect(() => { + if (rtmChannelResponse) { + rtmClient.on("MessageFromPeer", function (message, peerId) { + setRtmMessages((prevMessages: any[]) => { + // Check if the messages array exceeds the maximum limit + if (prevMessages.length >= 500) { + prevMessages.pop(); // Remove the oldest message + } + return [ + ...prevMessages, + { peermessage: JSON.parse(message.text + ""), from: peerId }, + ]; + }); + }); - //listen to user speaking, - client.on("volume-indicator", (volumeInfos: any) => { - if (volumeInfos.length === 0) return; - volumeInfos.map((volumeInfo: any) => { - //when the volume is above 30, user is probably speaking - const speaking = volumeInfo.level >= 30; - if ( - volumeInfo.uid === userId && - props.localUser.value.speaking != speaking - ) { - setLocalUserSpeaking(speaking); - } else { - setUpdateVolume({ update: speaking, userid: volumeInfo.uid }); + rtmChannelResponse.on( + "ChannelMessage", + function (message, memberId) { + setRtmMessages((prevMessages: any[]) => { + // Check if the messages array exceeds the maximum limit + if (prevMessages.length >= 500) { + prevMessages.pop(); // Remove the oldest message + } + return [ + ...prevMessages, + { + channelmessage: JSON.parse(message.text + ""), + from: memberId, + }, + ]; + }); + + dispatch( + changeChildAction( + "messages", + getData(rtmMessages).data, + false + ) + ); } + ); + } + }, [rtmChannelResponse]); + useEffect(() => { + if (client) { + //Enable Agora to send audio bytes + client.enableAudioVolumeIndicator(); + //user activity listeners + client.on("user-joined", (user: IAgoraRTCRemoteUser) => { + setUserJoined(user); + }); + client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => { + setUserLeft(user); }); - }); - client.on( - "user-published", - async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { - setLocalUserVideo(user); - } - ); - client.on( - "user-unpublished", - (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { - setLocalUserVideo(user); - } - ); - } - }, [client]); - - return ( - - {/* */} - - document.querySelector(`#${CanvasContainerID}`) || document.body - } - footer={null} - width={transToPxSize(props.width || DEFAULT_SIZE)} - height={ - !props.autoHeight - ? transToPxSize(props.height || DEFAULT_SIZE) - : "" - } - onClose={(e: any) => { - props.visible.onChange(false); - }} - afterOpenChange={(visible: any) => { - if (!visible) { - props.onEvent("close"); + //listen to user speaking, + client.on("volume-indicator", (volumeInfos: any) => { + if (volumeInfos.length === 0) return; + volumeInfos.map((volumeInfo: any) => { + //when the volume is above 30, user is probably speaking + const speaking = volumeInfo.level >= 30; + if ( + volumeInfo.uid === userId && + props.localUser.value.speaking != speaking + ) { + setLocalUserSpeaking(speaking); + } else { + setUpdateVolume({ update: speaking, userid: volumeInfo.uid }); + } + }); + }); + + client.on( + "user-published", + async ( + user: IAgoraRTCRemoteUser, + mediaType: "video" | "audio" + ) => { + setLocalUserVideo(user); + } + ); + client.on( + "user-unpublished", + (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { + setLocalUserVideo(user); + } + ); + } + }, [client]); + + return ( + + {/* */} + - {/* + document.querySelector(`#${CanvasContainerID}`) || document.body + } + footer={null} + width={transToPxSize(props.width || DEFAULT_SIZE)} + height={ + !props.autoHeight + ? transToPxSize(props.height || DEFAULT_SIZE) + : "" + } + onClose={(e: any) => { + props.visible.onChange(false); + }} + afterOpenChange={(visible: any) => { + if (!visible) { + props.onEvent("close"); + } + }} + zIndex={Layers.drawer} + maskClosable={props.maskClosable} + mask={props.showMask} + > + {/* { props.visible.onChange(false); }} > */} - - - {/* */} - - ); - } - ) - .setPropertyViewFn((children: any) => ( - <> - {/* {(EditorContext.editorModeStatus === "logic" || + + + {/* */} + + ); + } + ) + .setPropertyViewFn((children: any) => ( + <> + {/* {(EditorContext.editorModeStatus === "logic" || EditorContext.editorModeStatus === "both") && ( <> */} -
- {children.appId.propertyView({ - label: trans("meeting.appid"), - })} - {children.meetingName.propertyView({ - label: trans("meeting.meetingName"), - })} - {children.localUserID.propertyView({ - label: trans("meeting.localUserID"), - })} - {children.rtmToken.propertyView({ - label: trans("meeting.rtmToken"), - })} - {children.rtcToken.propertyView({ - label: trans("meeting.rtcToken"), - })} -
-
- {children.onEvent.getPropertyView()} - {children.onMeetingEvent.getPropertyView()} -
- {/* +
+ {children.appId.propertyView({ + label: trans("meeting.appid"), + })} + {children.meetingName.propertyView({ + label: trans("meeting.meetingName"), + })} + {children.localUserID.propertyView({ + label: trans("meeting.localUserID"), + })} + {children.rtmToken.propertyView({ + label: trans("meeting.rtmToken"), + })} + {children.rtcToken.propertyView({ + label: trans("meeting.rtcToken"), + })} +
+
+ {children.onEvent.getPropertyView()} + {children.onMeetingEvent.getPropertyView()} +
+ {/* )} */} - {/* {(EditorContext.editorModeStatus === "layout" || + {/* {(EditorContext.editorModeStatus === "layout" || EditorContext.editorModeStatus === "both") && ( <> */} - {/*
+ {/*
{children.placement.propertyView({ label: trans("meeting.placement"), radioButton: true, @@ -629,254 +649,254 @@ let MTComp = (function () {
{children.style.getPropertyView()}
*/} - {/* */} - {/* )} */} - - )) - .build(); - - })(); - - MTComp = class extends MTComp { - autoHeight(): boolean { - return false; - } - }; - - MTComp = withMethodExposing(MTComp, [ - { - method: { - name: "openDrawer", - params: [], - }, - execute: (comp: any, values: any) => { - comp.children.visible.getView().onChange(true); - }, + {/* */} + {/* )} */} + + )) + .build(); + })(); + + MTComp = class extends MTComp { + autoHeight(): boolean { + return false; + } + }; + + MTComp = withMethodExposing(MTComp, [ + { + method: { + name: "openDrawer", + params: [], }, - { - method: { - name: "startSharing", - params: [], - }, - execute: async (comp: any, values: any) => { - if (!comp.children.meetingActive.getView().value) return; - let sharing = !comp.children.sharing.getView().value; - await shareScreen(sharing); - comp.children.sharing.change(sharing); - }, + execute: (comp: any, values: any) => { + comp.children.visible.getView().onChange(true); }, - { - method: { - name: "audioControl", - description: trans("meeting.actionBtnDesc"), - params: [], - }, - execute: async (comp: any, values: any) => { - if (!comp.children.meetingActive.getView().value) return; - let value = !comp.children.audioControl.getView().value; - comp.children.localUser.change({ - user: userId + "", - audiostatus: value, - streamingVideo: comp.children.videoControl.getView().value, - speaking: false, - }); - await turnOnMicrophone(value); - comp.children.audioControl.change(value); - }, + }, + { + method: { + name: "startSharing", + params: [], }, - { - method: { - name: "videoControl", - description: trans("meeting.actionBtnDesc"), - params: [], - }, - execute: async (comp: any, values: any) => { - //check if meeting is active - if (!comp.children.meetingActive.getView().value) return; - //toggle videoControl - let value = !comp.children.videoControl.getView().value; - if (videoTrack) { - videoTrack.setEnabled(value); - } else { - await turnOnCamera(value); - } - //change my local user data - let localData = { - user: userId + "", - streamingVideo: value, - audiostatus: comp.children.audioControl.getView().value, - speaking: comp.children.localUser.getView().value.speaking, - }; - - comp.children.localUser.change(localData); - comp.children.videoControl.change(value); - }, + execute: async (comp: any, values: any) => { + if (!comp.children.meetingActive.getView().value) return; + let sharing = !comp.children.sharing.getView().value; + await shareScreen(sharing); + comp.children.sharing.change(sharing); }, - { - method: { - name: "startMeeting", - description: trans("meeting.actionBtnDesc"), - params: [], - }, - execute: async (comp: any, values: any) => { - /* console.log("startMeeting ", { + }, + { + method: { + name: "audioControl", + description: trans("meeting.actionBtnDesc"), + params: [], + }, + execute: async (comp: any, values: any) => { + if (!comp.children.meetingActive.getView().value) return; + let value = !comp.children.audioControl.getView().value; + comp.children.localUser.change({ + user: userId + "", + audiostatus: value, + streamingVideo: comp.children.videoControl.getView().value, + speaking: false, + }); + await turnOnMicrophone(value); + comp.children.audioControl.change(value); + }, + }, + { + method: { + name: "videoControl", + description: trans("meeting.actionBtnDesc"), + params: [], + }, + execute: async (comp: any, values: any) => { + //check if meeting is active + if (!comp.children.meetingActive.getView().value) return; + //toggle videoControl + let value = !comp.children.videoControl.getView().value; + if (videoTrack) { + videoTrack.setEnabled(value); + } else { + await turnOnCamera(value); + } + //change my local user data + let localData = { + user: userId + "", + streamingVideo: value, + audiostatus: comp.children.audioControl.getView().value, + speaking: comp.children.localUser.getView().value.speaking, + }; + + comp.children.localUser.change(localData); + comp.children.videoControl.change(value); + }, + }, + { + method: { + name: "startMeeting", + description: trans("meeting.actionBtnDesc"), + params: [], + }, + execute: async (comp: any, values: any) => { + /* console.log("startMeeting ", { // user: userId + "", audiostatus: false, speaking: false, streamingVideo: true, }); */ - if (comp.children.meetingActive.getView().value) return; - userId = - comp.children.localUserID.getView().value === "" - ? uuidv4() - : comp.children.localUserID.getView().value; - comp.children.localUser.change({ - user: userId + "", - audiostatus: false, - speaking: false, - streamingVideo: true, - }); - /* console.log("startMeeting localUser ", { + if (comp.children.meetingActive.getView().value) return; + userId = + comp.children.localUserID.getView().value === "" + ? uuidv4() + : comp.children.localUserID.getView().value; + comp.children.localUser.change({ + user: userId + "", + audiostatus: false, + speaking: false, + streamingVideo: true, + }); + /* console.log("startMeeting localUser ", { user: userId + "", audiostatus: false, speaking: false, streamingVideo: true, }); */ - - comp.children.localUser.children.value.dispatch( - changeChildAction( - "localUser", - { - user: userId + "", - audiostatus: false, - speaking: false, - streamingVideo: true, - }, - false - ) - ); - comp.children.videoControl.change(true); - await publishVideo( - comp.children.appId.getView(), - comp.children.meetingName.getView().value === "" - ? uuidv4() - : comp.children.meetingName.getView().value, - comp.children.rtmToken.getView().value, - comp.children.rtcToken.getView().value - ); - comp.children.meetingActive.change(true); - }, + + comp.children.localUser.children.value.dispatch( + changeChildAction( + "localUser", + { + user: userId + "", + audiostatus: false, + speaking: false, + streamingVideo: true, + }, + false + ) + ); + comp.children.videoControl.change(true); + await publishVideo( + comp.children.appId.getView(), + comp.children.meetingName.getView().value === "" + ? uuidv4() + : comp.children.meetingName.getView().value, + comp.children.rtmToken.getView().value, + comp.children.rtcToken.getView().value + ); + comp.children.meetingActive.change(true); }, - { - method: { - name: "broadCast", - description: trans("meeting.broadCast"), - params: [], - }, - execute: async (comp: any, values: any) => { - if (!comp.children.meetingActive.getView().value) return; - let messagedata = - values !== undefined && values[0] !== undefined ? values[0] : ""; - let toUsers: any = - values !== undefined && values[1] !== undefined ? values[1] : ""; - - let message: any = { - time: Date.now(), - message: messagedata, - }; - - if (toUsers.length > 0 && toUsers[0] !== undefined) { - toUsers.forEach((peer: any) => { - message.to = peer; - sendPeerMessageRtm(message, String(peer)); - }); - } else { - sendMessageRtm(message); - } - }, + }, + { + method: { + name: "broadCast", + description: trans("meeting.broadCast"), + params: [], }, - { - method: { - name: "setMeetingName", - description: trans("meeting.meetingName"), - params: [], - }, - execute: async (comp: any, values: any) => { - let meetingName: any = values[0]; - comp.children.meetingName.change(meetingName); - }, + execute: async (comp: any, values: any) => { + if (!comp.children.meetingActive.getView().value) return; + let messagedata = + values !== undefined && values[0] !== undefined ? values[0] : ""; + let toUsers: any = + values !== undefined && values[1] !== undefined ? values[1] : ""; + + let message: any = { + time: Date.now(), + message: messagedata, + }; + + if (toUsers.length > 0 && toUsers[0] !== undefined) { + toUsers.forEach((peer: any) => { + message.to = peer; + sendPeerMessageRtm(message, String(peer)); + }); + } else { + sendMessageRtm(message); + } }, - { - method: { - name: "setUserName", - description: trans("meeting.userName"), - params: [], - }, - execute: async (comp: any, values: any) => { - let userName: any = values[0]; - let userLocal = comp.children.localUser.getView().value; - comp.children.localUser.change({ ...userLocal, userName: userName }); - }, + }, + { + method: { + name: "setMeetingName", + description: trans("meeting.meetingName"), + params: [], }, - { - method: { - name: "setRTCToken", - description: trans("meeting.rtcToken"), - params: [], - }, - execute: async (comp: any, values: any) => { - let rtcToken: any = values[0]; - comp.children.rtcToken.change(rtcToken); - }, + execute: async (comp: any, values: any) => { + let meetingName: any = values[0]; + comp.children.meetingName.change(meetingName); }, - { - method: { - name: "setRTMToken", - description: trans("meeting.rtmToken"), - params: [], - }, - execute: async (comp: any, values: any) => { - let rtmToken: any = values[0]; - comp.children.rtmToken.change(rtmToken); - }, + }, + { + method: { + name: "setUserName", + description: trans("meeting.userName"), + params: [], }, - { - method: { - name: "endMeeting", - description: trans("meeting.actionBtnDesc"), - params: [], - }, - execute: async (comp: any, values: any) => { - if (!comp.children.meetingActive.getView().value) return; - - let value = !comp.children.endCall.getView().value; - comp.children.endCall.change(value); - comp.children.meetingActive.change(false); - - await leaveChannel(); - - comp.children.localUser.change({ - user: userId + "", - streamingVideo: false, - }); - }, + execute: async (comp: any, values: any) => { + let userName: any = values[0]; + let userLocal = comp.children.localUser.getView().value; + comp.children.localUser.change({ ...userLocal, userName: userName }); + }, + }, + { + method: { + name: "setRTCToken", + description: trans("meeting.rtcToken"), + params: [], + }, + execute: async (comp: any, values: any) => { + let rtcToken: any = values[0]; + comp.children.rtcToken.change(rtcToken); + }, + }, + { + method: { + name: "setRTMToken", + description: trans("meeting.rtmToken"), + params: [], + }, + execute: async (comp: any, values: any) => { + let rtmToken: any = values[0]; + comp.children.rtmToken.change(rtmToken); + }, + }, + { + method: { + name: "endMeeting", + description: trans("meeting.actionBtnDesc"), + params: [], }, - ]); - - MeetingControllerComp = withExposingConfigs(MTComp, [ - new NameConfig("appId", trans("meeting.appid")), - new NameConfig("localUser", trans("meeting.host")), - new NameConfig("participants", trans("meeting.participants")), - new NameConfig("meetingActive", trans("meeting.meetingActive")), - new NameConfig("meetingName", trans("meeting.meetingName")), - new NameConfig("localUserID", trans("meeting.localUserID")), - new NameConfig("messages", trans("meeting.messages")), - new NameConfig("rtmToken", trans("meeting.rtmToken")), - new NameConfig("rtcToken", trans("meeting.rtcToken")), - ]); + execute: async (comp: any, values: any) => { + if (!comp.children.meetingActive.getView().value) return; + let value = !comp.children.endCall.getView().value; + comp.children.endCall.change(value); + comp.children.meetingActive.change(false); + + await leaveChannel(); + + comp.children.localUser.change({ + user: userId + "", + streamingVideo: false, + }); + }, + }, + ]); + + MeetingControllerComp = withExposingConfigs(MTComp, [ + new NameConfig("appId", trans("meeting.appid")), + new NameConfig("localUser", trans("meeting.host")), + new NameConfig("participants", trans("meeting.participants")), + new NameConfig("meetingActive", trans("meeting.meetingActive")), + new NameConfig("meetingName", trans("meeting.meetingName")), + new NameConfig("localUserID", trans("meeting.localUserID")), + new NameConfig("messages", trans("meeting.messages")), + new NameConfig("rtmToken", trans("meeting.rtmToken")), + new NameConfig("rtcToken", trans("meeting.rtcToken")), + ]); } else { - console.error("ContainerCompBuilder for Meeting Comp is not available. Please ensure that Lowcoder SDK version v2.4 or higher is installed."); + console.error( + "ContainerCompBuilder for Meeting Comp is not available. Please ensure that Lowcoder SDK version v2.4 or higher is installed." + ); } -export { MeetingControllerComp }; \ No newline at end of file +export { MeetingControllerComp }; diff --git a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx index 7c5569804..a6d49b854 100644 --- a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx @@ -130,7 +130,7 @@ let VideoCompBuilder = (function () { setVideo(userData.streamingVideo); } }, [props.userId.value]); - console.log("userId", userId); + // console.log("userId", userId); return ( diff --git a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx index 35b94ebdf..dbedc1fd5 100644 --- a/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx @@ -231,4 +231,3 @@ export const VideoSharingStreamComp = withExposingConfigs(SharingCompBuilder, [ new NameConfig("loading", trans("meeting.loadingDesc")), ...CommonNameConfig, ]); - \ No newline at end of file From 94dbdfaac742a08a0e066d5ca93508680de5cc1e Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Mon, 3 Jun 2024 11:53:37 +0300 Subject: [PATCH 2/3] fixed agora meeting sharing --- .../lowcoder/src/comps/index-test.tsx | 2 +- client/packages/lowcoder/src/comps/index.tsx | 145 ++++++++++-------- 2 files changed, 84 insertions(+), 63 deletions(-) diff --git a/client/packages/lowcoder/src/comps/index-test.tsx b/client/packages/lowcoder/src/comps/index-test.tsx index ed770ca67..b832d8a1b 100644 --- a/client/packages/lowcoder/src/comps/index-test.tsx +++ b/client/packages/lowcoder/src/comps/index-test.tsx @@ -174,7 +174,7 @@ var uiCompMap: Registry = { icon: VideoCompIcon, keywords: trans("meeting.meetingCompKeywords"), // comp: VideoSharingStreamComp, - comp: remoteComp({ ...builtInRemoteComps, compName: "meetingStream" }), + comp: remoteComp({ ...builtInRemoteComps, compName: "meetingSharing" }), withoutLoading: true, layoutInfo: { w: 12, diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index 778271d11..f6db97011 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -122,10 +122,9 @@ const builtInRemoteComps: Omit = { packageName: "lowcoder-comps", }; -export var uiCompMap: Registry = { +export var uiCompMap: Registry = { // Dashboards - // charts chart: { name: trans("uiComp.chartCompName") + " (legacy)", @@ -155,7 +154,7 @@ export var uiCompMap: Registry = { }, }, - candleStickChart : { + candleStickChart: { name: trans("uiComp.candleStickChartCompName"), enName: "Candlestick Chart", description: trans("uiComp.candleStickChartCompDesc"), @@ -164,11 +163,11 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.candleStickChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "candleStickChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, - funnelChart : { + funnelChart: { name: trans("uiComp.funnelChartCompName"), enName: "Sankey Chart", description: trans("uiComp.funnelChartCompDesc"), @@ -177,11 +176,11 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.funnelChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "funnelChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, - gaugeChart : { + gaugeChart: { name: trans("uiComp.gaugeChartCompName"), enName: "Candlestick Chart", description: trans("uiComp.gaugeChartCompDesc"), @@ -190,11 +189,11 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.gaugeChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "gaugeChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, - graphChart : { + graphChart: { name: trans("uiComp.graphChartCompName"), enName: "Graph Chart", description: trans("uiComp.graphChartCompDesc"), @@ -203,9 +202,9 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.graphChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "graphChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, heatmapChart: { name: trans("uiComp.heatmapChartCompName"), @@ -216,11 +215,11 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.heatmapChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "heatmapChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, - radarChart : { + radarChart: { name: trans("uiComp.radarChartCompName"), enName: "Radar Chart", description: trans("uiComp.radarChartCompDesc"), @@ -229,11 +228,11 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.radarChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "radarChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, - sankeyChart : { + sankeyChart: { name: trans("uiComp.sankeyChartCompName"), enName: "Sankey Chart", description: trans("uiComp.sankeyChartCompDesc"), @@ -242,9 +241,9 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.sankeyChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "sankeyChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, sunburstChart: { name: trans("uiComp.sunburstChartCompName"), @@ -255,11 +254,11 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.sunburstChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "sunburstChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, - themeriverChart : { + themeriverChart: { name: trans("uiComp.themeriverChartCompName"), enName: "Theme River Chart", description: trans("uiComp.themeriverChartCompDesc"), @@ -268,11 +267,11 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.themeriverChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "themeriverChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, - treeChart : { + treeChart: { name: trans("uiComp.treeChartCompName"), enName: "Tree Chart", description: trans("uiComp.treeChartCompDesc"), @@ -280,12 +279,12 @@ export var uiCompMap: Registry = { icon: TreeChartCompIcon, keywords: trans("uiComp.treeChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "treeChart" }), - layoutInfo : { - "w": 12, - "h": 40 - } + layoutInfo: { + w: 12, + h: 40, + }, }, - treemapChart : { + treemapChart: { name: trans("uiComp.treemapChartCompName"), enName: "Treemap Chart", description: trans("uiComp.treemapChartCompDesc"), @@ -294,11 +293,10 @@ export var uiCompMap: Registry = { keywords: trans("uiComp.treemapChartCompKeywords"), comp: remoteComp({ ...builtInRemoteComps, compName: "treemapChart" }), layoutInfo: { - "w": 12, - "h": 40 - } + w: 12, + h: 40, + }, }, - // GeoMap @@ -309,7 +307,12 @@ export var uiCompMap: Registry = { categories: ["dashboards"], icon: GeoMapLayersCompIcon, keywords: trans("uiComp.openLayersGeoMapCompKeywords"), - comp: remoteComp({compName: "geo", packageName: "lowcoder-comp-geo", source: "npm", isRemote: true}), + comp: remoteComp({ + compName: "geo", + packageName: "lowcoder-comp-geo", + source: "npm", + isRemote: true, + }), layoutInfo: { w: 12, h: 50, @@ -355,13 +358,18 @@ export var uiCompMap: Registry = { categories: ["dashboards"], icon: PivotTableCompIcon, keywords: trans("uiComp.pivotTableCompKeywords"), - comp: remoteComp({compName: "pivottable", packageName: "lowcoder-comp-reactpivottable", source: "npm", isRemote: true}), + comp: remoteComp({ + compName: "pivottable", + packageName: "lowcoder-comp-reactpivottable", + source: "npm", + isRemote: true, + }), layoutInfo: { w: 12, h: 50, }, }, - + mermaid: { name: trans("uiComp.mermaidCompName"), enName: "Mermaid Charts", @@ -418,8 +426,8 @@ export var uiCompMap: Registry = { icon: PageLayoutCompIcon, keywords: trans("uiComp.pageLayoutCompKeywords"), lazyLoad: true, - compName: 'PageLayoutComp', - compPath: 'comps/containerComp/pageLayoutComp', + compName: "PageLayoutComp", + compPath: "comps/containerComp/pageLayoutComp", withoutLoading: true, layoutInfo: { w: 12, @@ -438,8 +446,8 @@ export var uiCompMap: Registry = { icon: ColumnLayoutCompIcon, keywords: trans("uiComp.responsiveLayoutCompKeywords"), lazyLoad: true, - compName: 'ColumnLayoutComp', - compPath: 'comps/columnLayout/index', + compName: "ColumnLayoutComp", + compPath: "comps/columnLayout/index", withoutLoading: true, layoutInfo: { w: 24, @@ -692,7 +700,6 @@ export var uiCompMap: Registry = { withoutLoading: true, }, - // Scheduling calendar: { @@ -733,7 +740,7 @@ export var uiCompMap: Registry = { categories: ["collaboration"], icon: VideoScreenshareCompIcon, keywords: trans("meeting.meetingCompKeywords"), - comp: remoteComp({ ...builtInRemoteComps, compName: "meetingStream" }), + comp: remoteComp({ ...builtInRemoteComps, compName: "meetingSharing" }), withoutLoading: true, layoutInfo: { w: 12, @@ -803,7 +810,7 @@ export var uiCompMap: Registry = { name: trans("uiComp.commentCompName"), enName: "comment", description: trans("uiComp.commentCompDesc"), - categories: [ "collaboration"], + categories: ["collaboration"], icon: CommentCompIcon, keywords: trans("uiComp.commentCompKeywords"), lazyLoad: true, @@ -1216,7 +1223,6 @@ export var uiCompMap: Registry = { }, }, - // Project Management hillchart: { @@ -1226,7 +1232,12 @@ export var uiCompMap: Registry = { categories: ["projectmanagement"], icon: HillchartCompIcon, keywords: trans("uiComp.hillchartCompKeywords"), - comp: remoteComp({compName: "hillcharts", packageName: "lowcoder-comp-hillcharts", source: "npm", isRemote: true}), + comp: remoteComp({ + compName: "hillcharts", + packageName: "lowcoder-comp-hillcharts", + source: "npm", + isRemote: true, + }), layoutInfo: { w: 12, h: 50, @@ -1239,7 +1250,12 @@ export var uiCompMap: Registry = { categories: ["projectmanagement", "documents"], icon: BPMNEditorCompIcon, keywords: trans("uiComp.bpmnEditorCompKeywords"), - comp: remoteComp({compName: "bpmn", packageName: "lowcoder-comp-bpmn-io", source: "npm", isRemote: true}), + comp: remoteComp({ + compName: "bpmn", + packageName: "lowcoder-comp-bpmn-io", + source: "npm", + isRemote: true, + }), layoutInfo: { w: 19, h: 60, @@ -1576,8 +1592,8 @@ export var uiCompMap: Registry = { categories: ["itemHandling", "documents"], keywords: trans("uiComp.transferKeywords"), lazyLoad: true, - compName: 'transferComp', - compPath: 'comps/transferComp', + compName: "transferComp", + compPath: "comps/transferComp", layoutInfo: { w: 12, h: 50, @@ -1590,7 +1606,12 @@ export var uiCompMap: Registry = { categories: ["itemHandling"], icon: TurnstileCaptchaCompIcon, keywords: trans("uiComp.turnstileCaptchaCompKeywords"), - comp: remoteComp({compName: "cloudflareTurnstile", packageName: "lowcoder-comp-cf-turnstile", source: "npm", isRemote: true}), + comp: remoteComp({ + compName: "cloudflareTurnstile", + packageName: "lowcoder-comp-cf-turnstile", + source: "npm", + isRemote: true, + }), layoutInfo: { w: 8, h: 20, From e8a80d04c01fc465d3d61d90f9cc2aa6f2c26a43 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Tue, 4 Jun 2024 16:07:58 +0500 Subject: [PATCH 3/3] upgrade version --- client/packages/lowcoder-comps/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json index 1c417f1d4..9fdd36ca1 100644 --- a/client/packages/lowcoder-comps/package.json +++ b/client/packages/lowcoder-comps/package.json @@ -1,6 +1,6 @@ { "name": "lowcoder-comps", - "version": "2.4.5", + "version": "2.4.6", "type": "module", "license": "MIT", "dependencies": {