Skip to content

Fix agora/participants #1172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Fix agora/participants #1172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7371179
fixed participants state when user joins
freddysundowner Mar 21, 2024
09bc461
added global and participant screen share flag
freddysundowner Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 144 additions & 97 deletions client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@ const turnOnMicrophone = async (flag?: boolean) => {
};
const shareScreen = async (sharing: boolean) => {
try {
if (sharing === false) {
console.log("sharing ", sharing);
if (sharing === false && screenShareStream) {
await client.unpublish(screenShareStream);
screenShareStream.close();
await client.publish(videoTrack);
Expand Down Expand Up @@ -237,7 +238,8 @@ const meetingControllerChildren = {
audioControl: withDefault(BooleanStateControl, "false"),
videoControl: withDefault(BooleanStateControl, "true"),
endCall: withDefault(BooleanStateControl, "false"),
sharing: withDefault(BooleanStateControl, "false"),
sharingData: stateComp<JSONValue>([]), //withDefault(BooleanStateControl, "false"),
isSharing: withDefault(BooleanStateControl, "false"),
appId: withDefault(StringControl, trans("meeting.appid")),
participants: stateComp<JSONValue>([]),
usersScreenShared: stateComp<JSONValue>([]),
Expand Down Expand Up @@ -286,20 +288,40 @@ let MTComp = (function () {
useState<IAgoraRTCRemoteUser>();
const [userJoined, setUserJoined] = useState<IAgoraRTCRemoteUser>();
const [userLeft, setUserLeft] = useState<IAgoraRTCRemoteUser>();

const userSharigScreen = (userid: any) => {
//check if passed userid exists in the props.participants array and check if participants is null
let prevUsers: [] = props.participants as [];
let foundUsers: any = [];
prevUsers.forEach((user: any) => {
if (user.user === userid) {
foundUsers.push(user.user as any);
}
});
return foundUsers.length > 0;
};
useEffect(() => {
if (userJoined) {
let prevUsers: any[] = props.participants as [];
let userData = {
user: userJoined.uid,
audiostatus: userJoined.hasAudio,
streamingVideo: true,
};
setUserIds((userIds: any) => [...userIds, userData]);
const remoteUsers = client.remoteUsers;
let users: {
user: UID;
audiostatus: boolean;
streamingVideo: boolean;
sharingScreen: boolean;
}[] = [];
remoteUsers.forEach((user) => {
let userData = {
user: user.uid,
audiostatus: user.hasAudio,
streamingVideo: user.hasVideo,
sharingScreen: userSharigScreen(user.uid),
};
users.push(userData);
setUserIds((userIds: any) => [...userIds, userData]);
});
dispatch(
changeChildAction(
"participants",
removeDuplicates(getData([...prevUsers, userData]).data, "user"),
removeDuplicates(getData(users).data, "user"),
false
)
);
Expand Down Expand Up @@ -341,8 +363,6 @@ let MTComp = (function () {
}
}, [userLeft]);

// console.log("sharing", props.sharing);

useEffect(() => {
if (updateVolume.userid) {
let prevUsers: [] = props.participants as [];
Expand All @@ -363,29 +383,21 @@ let MTComp = (function () {
}, [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;
});
if (rtmChannelResponse == null) return;
let data = {
uid: props.localUserID.value,
sharingScreen: props.isSharing.value,
};

rtmChannelResponse.sendMessage({ text: JSON.stringify(data) });
dispatch(
changeChildAction("participants", getData(updatedItems).data, false)
changeChildAction("sharingData", props.isSharing.value ? 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]);
}, [props.isSharing.value]);

useEffect(() => {
let prevUsers: [] = props.participants as [];
let prevUsers: any = props.participants as [];
if (prevUsers == "") return;
const updatedItems = prevUsers.map((userInfo: any) => {
if (userInfo.user === localUserVideo?.uid) {
return { ...userInfo, streamingVideo: localUserVideo?.hasVideo };
Expand Down Expand Up @@ -433,23 +445,56 @@ let MTComp = (function () {
});

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)
);
let messageData = JSON.parse(message.text + "");
if (messageData.sharingScreen != null) {
dispatch(
changeChildAction(
"sharingData",
messageData.sharingScreen
? {
uid: messageData.uid,
sharingScreen: messageData.sharingScreen,
}
: {},
false
)
);
let prevUsers: [] = props.participants as [];

const updatedItems = prevUsers.map((userInfo: any) => {
if (userInfo.user === messageData.uid) {
return {
...userInfo,
sharingScreen: messageData.sharingScreen,
};
}
return userInfo;
});
dispatch(
changeChildAction(
"participants",
getData(updatedItems).data,
false
)
);
} else {
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]);
Expand Down Expand Up @@ -512,12 +557,12 @@ let MTComp = (function () {
styles={{
wrapper: {
maxHeight: "100%",
maxWidth: "100%"
},
maxWidth: "100%",
},
body: {
padding: 0,
backgroundColor: props.style.background,
}
},
}}
closable={false}
placement={props.placement}
Expand Down Expand Up @@ -569,8 +614,10 @@ let MTComp = (function () {
)
.setPropertyViewFn((children) => (
<>
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.meetings}>
{(useContext(EditorContext).editorModeStatus === "logic" ||
useContext(EditorContext).editorModeStatus === "both") && (
<>
<Section name={sectionNames.meetings}>
{children.appId.propertyView({
label: trans("meeting.appid"),
})}
Expand All @@ -593,38 +640,40 @@ let MTComp = (function () {
</>
)}

{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.layout}>
{children.placement.propertyView({
label: trans("drawer.placement"),
radioButton: true,
})}
{["top", "bottom"].includes(children.placement.getView())
? children.autoHeight.getPropertyView()
: children.width.propertyView({
label: trans("drawer.width"),
tooltip: trans("drawer.widthTooltip"),
{(useContext(EditorContext).editorModeStatus === "layout" ||
useContext(EditorContext).editorModeStatus === "both") && (
<>
<Section name={sectionNames.layout}>
{children.placement.propertyView({
label: trans("drawer.placement"),
radioButton: true,
})}
{["top", "bottom"].includes(children.placement.getView())
? children.autoHeight.getPropertyView()
: children.width.propertyView({
label: trans("drawer.width"),
tooltip: trans("drawer.widthTooltip"),
placeholder: DEFAULT_SIZE + "",
})}
{!children.autoHeight.getView() &&
["top", "bottom"].includes(children.placement.getView()) &&
children.height.propertyView({
label: trans("drawer.height"),
tooltip: trans("drawer.heightTooltip"),
placeholder: DEFAULT_SIZE + "",
})}
{!children.autoHeight.getView() &&
["top", "bottom"].includes(children.placement.getView()) &&
children.height.propertyView({
label: trans("drawer.height"),
tooltip: trans("drawer.heightTooltip"),
placeholder: DEFAULT_SIZE + "",
{children.maskClosable.propertyView({
label: trans("prop.maskClosable"),
})}
{children.maskClosable.propertyView({
label: trans("prop.maskClosable"),
})}
{children.showMask.propertyView({
label: trans("prop.showMask"),
})}
</Section>

<Section name={sectionNames.style}>

{children.style.getPropertyView()}
</Section></>
{children.showMask.propertyView({
label: trans("prop.showMask"),
})}
</Section>

<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
</>
)}
</>
))
Expand Down Expand Up @@ -656,9 +705,14 @@ MTComp = withMethodExposing(MTComp, [
},
execute: async (comp, values) => {
if (!comp.children.meetingActive.getView().value) return;
let sharing = !comp.children.sharing.getView().value;
let sharing = !comp.children.isSharing.getView().value;

comp.children.localUser.change({
sharingScreen: sharing,
...comp.children.localUser.getView().value,
});
comp.children.isSharing.change(sharing);
await shareScreen(sharing);
comp.children.sharing.change(sharing);
},
},
{
Expand Down Expand Up @@ -720,24 +774,16 @@ MTComp = withMethodExposing(MTComp, [
comp.children.localUserID.getView().value === ""
? uuidv4()
: comp.children.localUserID.getView().value;
comp.children.localUser.change({
let user = {
user: userId + "",
audiostatus: false,
speaking: false,
streamingVideo: true,
});
};
comp.children.localUser.change(user);

comp.children.localUser.children.value.dispatch(
changeChildAction(
"localUser",
{
user: userId + "",
audiostatus: false,
speaking: false,
streamingVideo: true,
},
false
)
changeChildAction("localUser", user, false)
);
comp.children.videoControl.change(true);
await publishVideo(
Expand Down Expand Up @@ -868,4 +914,5 @@ export const VideoMeetingControllerComp = withExposingConfigs(MTComp, [
new NameConfig("messages", trans("meeting.messages")),
new NameConfig("rtmToken", trans("meeting.rtmToken")),
new NameConfig("rtcToken", trans("meeting.rtcToken")),
new NameConfig("sharingData", trans("meeting.screenSharing")),
]);
Loading
Loading