diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 13b6b86e1..427feabb3 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -196,15 +196,6 @@ const publishVideo = async ( await client.publish(videoTrack); await rtmInit(appId, userId, channel); - - const mediaStreamTrack = videoTrack.getMediaStreamTrack(); - if (mediaStreamTrack) { - const videoSettings = mediaStreamTrack.getSettings(); - const videoWidth = videoSettings.width; - const videoHeight = videoSettings.height; - // height.videoWidth.change(videoWidth); - // height.videoHeight.change(videoHeight); - } }; const sendMessageRtm = (message: any) => { @@ -278,12 +269,69 @@ let MTComp = (function () { }); const [rtmMessages, setRtmMessages] = useState([]); const [localUserSpeaking, setLocalUserSpeaking] = useState(false); + const [localUserVideo, setLocalUserVideo] = + useState(); + const [userJoined, setUserJoined] = useState(); + const [userLeft, setUserLeft] = useState(); useEffect(() => { - dispatch( - changeChildAction("participants", getData(userIds).data, false) - ); - }, [userIds]); + if (userJoined) { + let userData = { + user: userJoined.uid, + host: false, + audiostatus: userJoined.hasAudio, + streamingVideo: true, + }; + setUserIds((userIds: any) => [...userIds, userData]); + if (userIds.length == 0) { + userData.host = true; + } else { + userData.host = false; + } + dispatch( + changeChildAction( + "participants", + removeDuplicates(getData([...userIds, userData]).data, "user"), + false + ) + ); + } + }, [userJoined]); + function removeDuplicates(arr: any, prop: any) { + const uniqueObjects = []; + const seenValues = new Set(); + + for (const obj of arr) { + const objValue = obj[prop]; + + 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; + hostChanged(newUsers); + } + setUserIds(newUsers); + dispatch( + changeChildAction( + "participants", + removeDuplicates(getData(newUsers).data, "user"), + false + ) + ); + } + }, [userLeft]); useEffect(() => { if (updateVolume.userid) { @@ -305,13 +353,17 @@ let MTComp = (function () { }, [updateVolume]); useEffect(() => { - if (props.endCall.value) { - let newUsers = userIds.filter((item: any) => item.user !== userId); - dispatch( - changeChildAction("participants", getData(newUsers).data, false) - ); - } - }, [props.endCall.value]); + 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) { @@ -322,7 +374,7 @@ let MTComp = (function () { }, [rtmMessages]); useEffect(() => { - if (localUserSpeaking === true) { + if (localUserSpeaking === true || localUserVideo) { let localObject = { user: userId + "", audiostatus: props.audioControl.value, @@ -333,18 +385,6 @@ let MTComp = (function () { } }, [localUserSpeaking]); - useEffect(() => { - if (props.localUser.value) { - let newUsers = userIds.filter((item: any) => item.user !== userId); - if (newUsers.length == 0) return; - newUsers = props.localUser.value; - let updatedUsers = [...userIds, newUsers]; - dispatch( - changeChildAction("participants", getData(updatedUsers).data, false) - ); - } - }, [props.localUser.value]); - useEffect(() => { if (rtmChannelResponse) { rtmClient.on("MessageFromPeer", function (message, peerId) { @@ -363,29 +403,10 @@ let MTComp = (function () { if (client) { client.enableAudioVolumeIndicator(); client.on("user-joined", (user: IAgoraRTCRemoteUser) => { - let userData = { - user: user.uid, - host: false, - audiostatus: user.hasVideo, - }; - - if (userIds.length == 0) { - userData.host = true; - } else { - userData.host = false; - } - setUserIds((userIds: any) => [...userIds, userData]); + setUserJoined(user); }); client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => { - let newUsers = userIds.filter( - (item: any) => item.user !== user.uid - ); - let hostExists = newUsers.filter((f: any) => f.host === true); - if (hostExists.length == 0 && newUsers.length > 0) { - newUsers[0].host = true; - hostChanged(newUsers); - } - setUserIds(newUsers); + setUserLeft(user); }); client.on("volume-indicator", (volumeInfos: any) => { if (volumeInfos.length == 0) return; @@ -401,6 +422,21 @@ let MTComp = (function () { } }); }); + + client.on( + "user-published", + async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { + setLocalUserVideo(user); + } + ); + client.on( + "user-unpublished", + (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { + console.log("user-unpublished"); + + setLocalUserVideo(user); + } + ); } }, [client]); @@ -540,6 +576,7 @@ MTComp = withMethodExposing(MTComp, [ params: [], }, execute: async (comp, values) => { + if (!comp.children.meetingActive.getView().value) return; let sharing = !comp.children.sharing.getView().value; await shareScreen(sharing); comp.children.sharing.change(sharing); @@ -552,6 +589,7 @@ MTComp = withMethodExposing(MTComp, [ params: [], }, execute: async (comp, values) => { + if (!comp.children.meetingActive.getView().value) return; let value = !comp.children.audioControl.getView().value; comp.children.localUser.change({ user: userId + "", @@ -570,12 +608,16 @@ MTComp = withMethodExposing(MTComp, [ params: [], }, execute: async (comp, values) => { + //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, @@ -633,6 +675,7 @@ MTComp = withMethodExposing(MTComp, [ params: [], }, execute: async (comp, values) => { + if (!comp.children.meetingActive.getView().value) return; let otherData = values != undefined && values[1] !== undefined ? values[1] : ""; let toUsers: any = @@ -684,6 +727,8 @@ MTComp = withMethodExposing(MTComp, [ params: [], }, execute: async (comp, values) => { + if (!comp.children.meetingActive.getView().value) return; + let value = !comp.children.endCall.getView().value; comp.children.endCall.change(value); comp.children.meetingActive.change(false); diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index 2b22ede61..2218ba0c3 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -169,19 +169,6 @@ let VideoCompBuilder = (function (props) { useEffect(() => { if (props.userId.value !== "") { let userData = JSON.parse(props.userId?.value); - if ( - userData.user === userId && - userData.streamingVideo === false && - videoRef.current && - videoRef.current?.id === userId + "" - ) { - if (videoRef.current && videoRef.current?.id === userId + "") { - videoRef.current.srcObject = null; - setVideo(false); - } - } else { - setVideo(true); - } client.on( "user-published", async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { @@ -219,6 +206,8 @@ let VideoCompBuilder = (function (props) { client.on( "user-unpublished", (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { + console.log("user-unpublished"); + if (mediaType === "audio") { if ( !user.hasAudio && @@ -246,7 +235,7 @@ let VideoCompBuilder = (function (props) { setUserId(userData.user); setUsername(userData.userName); - // console.log(userData); + setVideo(userData.streamingVideo); } }, [props.userId.value]); @@ -269,60 +258,40 @@ let VideoCompBuilder = (function (props) { }} > {userId ? ( - showVideo ? ( - props.onEvent("videoClicked")} - ref={videoRef} - style={{ - display: `${showVideo ? "flex" : "none"}`, - aspectRatio: props.videoAspectRatio, - borderRadius: props.style.radius, - width: "auto", - }} - id={props.shareScreen ? "share-screen" : userId} - > - ) : ( -
- -

{userName ?? ""}

-
- ) - ) : ( -
props.onEvent("videoClicked")} + ref={videoRef} style={{ - flexDirection: "column", - display: "flex", - alignItems: "center", - margin: "0 auto", - padding: props.profilePadding, + display: `${showVideo ? "flex" : "none"}`, + aspectRatio: props.videoAspectRatio, + borderRadius: props.style.radius, + width: "auto", }} - > - -

{userName ?? ""}

-
+ id={props.shareScreen ? "share-screen" : userId} + > + ) : ( + <> )} +
+ +

{userName ?? ""}

+
)}