From 1a7cfec34e9a9d7576576a2cec1f745745cfb78a Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Mon, 3 Jun 2024 11:42:21 +0300 Subject: [PATCH 1/2] 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 d15ab0a0304622768eabd450c3c3d960518cb7c6 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Tue, 18 Jun 2024 15:56:07 +0300 Subject: [PATCH 2/2] kanban draggle issue --- client/packages/lowcoder/src/layout/gridItem.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx index 42b278820..0e3706f81 100644 --- a/client/packages/lowcoder/src/layout/gridItem.tsx +++ b/client/packages/lowcoder/src/layout/gridItem.tsx @@ -141,7 +141,9 @@ export function GridItem(props: GridItemProps) { onDrag={onDrag} onDragEnd={onDragEnd} onMouseDown={(e) => { - e.stopPropagation(); + if (isDraggable) { + e.stopPropagation(); + } const event = new MouseEvent("mousedown"); document.dispatchEvent(event); }}