Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7371179

Browse files
freddysundownerfreddysundowner
committed
fixed participants state when user joins
1 parent 8e415b7 commit 7371179

File tree

2 files changed

+81
-70
lines changed

2 files changed

+81
-70
lines changed

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

Lines changed: 62 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -289,17 +289,25 @@ let MTComp = (function () {
289289

290290
useEffect(() => {
291291
if (userJoined) {
292-
let prevUsers: any[] = props.participants as [];
293-
let userData = {
294-
user: userJoined.uid,
295-
audiostatus: userJoined.hasAudio,
296-
streamingVideo: true,
297-
};
298-
setUserIds((userIds: any) => [...userIds, userData]);
292+
const remoteUsers = client.remoteUsers;
293+
let users: {
294+
user: UID;
295+
audiostatus: boolean;
296+
streamingVideo: boolean;
297+
}[] = [];
298+
remoteUsers.forEach((user) => {
299+
let userData = {
300+
user: user.uid,
301+
audiostatus: user.hasAudio,
302+
streamingVideo: user.hasVideo,
303+
};
304+
users.push(userData);
305+
setUserIds((userIds: any) => [...userIds, userData]);
306+
});
299307
dispatch(
300308
changeChildAction(
301309
"participants",
302-
removeDuplicates(getData([...prevUsers, userData]).data, "user"),
310+
removeDuplicates(getData(users).data, "user"),
303311
false
304312
)
305313
);
@@ -341,8 +349,6 @@ let MTComp = (function () {
341349
}
342350
}, [userLeft]);
343351

344-
// console.log("sharing", props.sharing);
345-
346352
useEffect(() => {
347353
if (updateVolume.userid) {
348354
let prevUsers: [] = props.participants as [];
@@ -363,7 +369,8 @@ let MTComp = (function () {
363369
}, [updateVolume]);
364370

365371
useEffect(() => {
366-
let prevUsers: [] = props.participants as [];
372+
let prevUsers: any = props.participants as [];
373+
if (prevUsers == "") return;
367374
const updatedItems = prevUsers.map((userInfo: any) => {
368375
if (userInfo.user === localUserVideo?.uid) {
369376
return { ...userInfo, streamingSharing: props.sharing.value };
@@ -385,7 +392,8 @@ let MTComp = (function () {
385392
}, [props.sharing.value]);
386393

387394
useEffect(() => {
388-
let prevUsers: [] = props.participants as [];
395+
let prevUsers: any = props.participants as [];
396+
if (prevUsers == "") return;
389397
const updatedItems = prevUsers.map((userInfo: any) => {
390398
if (userInfo.user === localUserVideo?.uid) {
391399
return { ...userInfo, streamingVideo: localUserVideo?.hasVideo };
@@ -512,12 +520,12 @@ let MTComp = (function () {
512520
styles={{
513521
wrapper: {
514522
maxHeight: "100%",
515-
maxWidth: "100%"
516-
},
523+
maxWidth: "100%",
524+
},
517525
body: {
518526
padding: 0,
519527
backgroundColor: props.style.background,
520-
}
528+
},
521529
}}
522530
closable={false}
523531
placement={props.placement}
@@ -569,8 +577,10 @@ let MTComp = (function () {
569577
)
570578
.setPropertyViewFn((children) => (
571579
<>
572-
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
573-
<><Section name={sectionNames.meetings}>
580+
{(useContext(EditorContext).editorModeStatus === "logic" ||
581+
useContext(EditorContext).editorModeStatus === "both") && (
582+
<>
583+
<Section name={sectionNames.meetings}>
574584
{children.appId.propertyView({
575585
label: trans("meeting.appid"),
576586
})}
@@ -593,38 +603,40 @@ let MTComp = (function () {
593603
</>
594604
)}
595605

596-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
597-
<><Section name={sectionNames.layout}>
598-
{children.placement.propertyView({
599-
label: trans("drawer.placement"),
600-
radioButton: true,
601-
})}
602-
{["top", "bottom"].includes(children.placement.getView())
603-
? children.autoHeight.getPropertyView()
604-
: children.width.propertyView({
605-
label: trans("drawer.width"),
606-
tooltip: trans("drawer.widthTooltip"),
606+
{(useContext(EditorContext).editorModeStatus === "layout" ||
607+
useContext(EditorContext).editorModeStatus === "both") && (
608+
<>
609+
<Section name={sectionNames.layout}>
610+
{children.placement.propertyView({
611+
label: trans("drawer.placement"),
612+
radioButton: true,
613+
})}
614+
{["top", "bottom"].includes(children.placement.getView())
615+
? children.autoHeight.getPropertyView()
616+
: children.width.propertyView({
617+
label: trans("drawer.width"),
618+
tooltip: trans("drawer.widthTooltip"),
619+
placeholder: DEFAULT_SIZE + "",
620+
})}
621+
{!children.autoHeight.getView() &&
622+
["top", "bottom"].includes(children.placement.getView()) &&
623+
children.height.propertyView({
624+
label: trans("drawer.height"),
625+
tooltip: trans("drawer.heightTooltip"),
607626
placeholder: DEFAULT_SIZE + "",
608627
})}
609-
{!children.autoHeight.getView() &&
610-
["top", "bottom"].includes(children.placement.getView()) &&
611-
children.height.propertyView({
612-
label: trans("drawer.height"),
613-
tooltip: trans("drawer.heightTooltip"),
614-
placeholder: DEFAULT_SIZE + "",
628+
{children.maskClosable.propertyView({
629+
label: trans("prop.maskClosable"),
630+
})}
631+
{children.showMask.propertyView({
632+
label: trans("prop.showMask"),
615633
})}
616-
{children.maskClosable.propertyView({
617-
label: trans("prop.maskClosable"),
618-
})}
619-
{children.showMask.propertyView({
620-
label: trans("prop.showMask"),
621-
})}
622-
</Section>
623-
624-
<Section name={sectionNames.style}>
625-
626-
{children.style.getPropertyView()}
627-
</Section></>
634+
</Section>
635+
636+
<Section name={sectionNames.style}>
637+
{children.style.getPropertyView()}
638+
</Section>
639+
</>
628640
)}
629641
</>
630642
))
@@ -720,24 +732,16 @@ MTComp = withMethodExposing(MTComp, [
720732
comp.children.localUserID.getView().value === ""
721733
? uuidv4()
722734
: comp.children.localUserID.getView().value;
723-
comp.children.localUser.change({
735+
let user = {
724736
user: userId + "",
725737
audiostatus: false,
726738
speaking: false,
727739
streamingVideo: true,
728-
});
740+
};
741+
comp.children.localUser.change(user);
729742

730743
comp.children.localUser.children.value.dispatch(
731-
changeChildAction(
732-
"localUser",
733-
{
734-
user: userId + "",
735-
audiostatus: false,
736-
speaking: false,
737-
streamingVideo: true,
738-
},
739-
false
740-
)
744+
changeChildAction("localUser", user, false)
741745
);
742746
comp.children.videoControl.change(true);
743747
await publishVideo(

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

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ import { EditorContext } from "comps/editorState";
33
import { withDefault } from "comps/generators/simpleGenerators";
44
import { UICompBuilder } from "comps/generators/uiCompBuilder";
55
import ReactResizeDetector from "react-resize-detector";
6-
import {
7-
Section,
8-
sectionNames,
9-
} from "lowcoder-design";
6+
import { Section, sectionNames } from "lowcoder-design";
107
import { trans } from "i18n";
118
import styled from "styled-components";
129
import {
@@ -22,7 +19,10 @@ import { client } from "./videoMeetingControllerComp";
2219
import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
2320
import { useContext } from "react";
2421
import { MeetingEventHandlerControl } from "comps/controls/eventHandlerControl";
25-
import { StringStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
22+
import {
23+
StringStateControl,
24+
stringExposingStateControl,
25+
} from "comps/controls/codeStateControl";
2626
import { hiddenPropertyView } from "comps/utils/propertyUtils";
2727

2828
const VideoContainer = styled.video`
@@ -44,7 +44,10 @@ const meetingStreamChildren = {
4444
style: ButtonStyleControl,
4545
viewRef: RefControl<HTMLElement>,
4646
userId: withDefault(stringExposingStateControl(""), "{{meeting1.localUser}}"),
47-
profileImageUrl: withDefault(StringStateControl, "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose"),
47+
profileImageUrl: withDefault(
48+
StringStateControl,
49+
"https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose"
50+
),
4851
noVideoText: stringExposingStateControl(trans("meeting.noVideo")),
4952
};
5053

@@ -72,6 +75,7 @@ let VideoCompBuilder = (function () {
7275
) {
7376
props.onEvent("videoOn");
7477
}
78+
7579
const element = document.getElementById(userId);
7680

7781
if (element) {
@@ -130,7 +134,6 @@ let VideoCompBuilder = (function () {
130134
}, [props.userId.value]);
131135

132136
// console.log(props.userId);
133-
134137

135138
return (
136139
<EditorContext.Consumer>
@@ -195,22 +198,26 @@ let VideoCompBuilder = (function () {
195198
<>
196199
<Section name={sectionNames.basic}>
197200
{children.userId.propertyView({ label: trans("meeting.videoId") })}
198-
201+
199202
{children.profileImageUrl.propertyView({
200203
label: trans("meeting.profileImageUrl"),
201-
placeholder: "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose",
204+
placeholder:
205+
"https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose",
202206
})}
203207
</Section>
204208

205-
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
209+
{(useContext(EditorContext).editorModeStatus === "logic" ||
210+
useContext(EditorContext).editorModeStatus === "both") && (
206211
<Section name={sectionNames.interaction}>
207212
{children.onEvent.getPropertyView()}
208213
{hiddenPropertyView(children)}
209214
</Section>
210215
)}
211216

212-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
213-
<><Section name={sectionNames.layout}>
217+
{(useContext(EditorContext).editorModeStatus === "layout" ||
218+
useContext(EditorContext).editorModeStatus === "both") && (
219+
<>
220+
<Section name={sectionNames.layout}>
214221
{children.autoHeight.getPropertyView()}
215222
</Section>
216223
<Section name={sectionNames.style}>

0 commit comments

Comments
 (0)