Skip to content

Commit 9cfbfb0

Browse files
freddysundownerfreddysundowner
committed
fixed local/participant video toggle bug of showing mage/profile
1 parent 2e252af commit 9cfbfb0

File tree

2 files changed

+69
-104
lines changed

2 files changed

+69
-104
lines changed

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

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,6 @@ const publishVideo = async (
196196
await client.publish(videoTrack);
197197

198198
await rtmInit(appId, userId, channel);
199-
200199
};
201200

202201
const sendMessageRtm = (message: any) => {
@@ -270,6 +269,8 @@ let MTComp = (function () {
270269
});
271270
const [rtmMessages, setRtmMessages] = useState<any>([]);
272271
const [localUserSpeaking, setLocalUserSpeaking] = useState<any>(false);
272+
const [localUserVideo, setLocalUserVideo] =
273+
useState<IAgoraRTCRemoteUser>();
273274
const [userJoined, setUserJoined] = useState<IAgoraRTCRemoteUser>();
274275
const [userLeft, setUserLeft] = useState<IAgoraRTCRemoteUser>();
275276

@@ -278,7 +279,8 @@ let MTComp = (function () {
278279
let userData = {
279280
user: userJoined.uid,
280281
host: false,
281-
audiostatus: userJoined.hasVideo,
282+
audiostatus: userJoined.hasAudio,
283+
streamingVideo: true,
282284
};
283285
setUserIds((userIds: any) => [...userIds, userData]);
284286
if (userIds.length == 0) {
@@ -312,12 +314,9 @@ let MTComp = (function () {
312314
}
313315
useEffect(() => {
314316
if (userLeft) {
315-
console.log("user left", userLeft.uid);
316-
console.log("all users ", userIds);
317317
let newUsers = userIds.filter(
318318
(item: any) => item.user !== userLeft.uid
319319
);
320-
console.log("after user left ", newUsers);
321320
let hostExists = newUsers.filter((f: any) => f.host === true);
322321
if (hostExists.length == 0 && newUsers.length > 0) {
323322
newUsers[0].host = true;
@@ -353,12 +352,18 @@ let MTComp = (function () {
353352
}
354353
}, [updateVolume]);
355354

356-
// useEffect(() => {
357-
// if (props.endCall.value) {
358-
// let newUsers = userIds.filter((item: any) => item.user !== userId);
359-
// changeChildAction("participants", getData([]).data, false);
360-
// }
361-
// }, [props.endCall.value]);
355+
useEffect(() => {
356+
let prevUsers: [] = props.participants as [];
357+
const updatedItems = prevUsers.map((userInfo: any) => {
358+
if (userInfo.user === localUserVideo?.uid) {
359+
return { ...userInfo, streamingVideo: localUserVideo?.hasVideo };
360+
}
361+
return userInfo;
362+
});
363+
dispatch(
364+
changeChildAction("participants", getData(updatedItems).data, false)
365+
);
366+
}, [localUserVideo?.hasVideo]);
362367

363368
useEffect(() => {
364369
if (rtmMessages) {
@@ -369,7 +374,7 @@ let MTComp = (function () {
369374
}, [rtmMessages]);
370375

371376
useEffect(() => {
372-
if (localUserSpeaking === true) {
377+
if (localUserSpeaking === true || localUserVideo) {
373378
let localObject = {
374379
user: userId + "",
375380
audiostatus: props.audioControl.value,
@@ -380,18 +385,6 @@ let MTComp = (function () {
380385
}
381386
}, [localUserSpeaking]);
382387

383-
// useEffect(() => {
384-
// if (props.localUser.value) {
385-
// let newUsers = userIds.filter((item: any) => item.user !== userId);
386-
// if (newUsers.length == 0) return;
387-
// newUsers = props.localUser.value;
388-
// let updatedUsers = [...userIds, newUsers];
389-
// dispatch(
390-
// changeChildAction("participants", getData(updatedUsers).data, false)
391-
// );
392-
// }
393-
// }, [props.localUser.value]);
394-
395388
useEffect(() => {
396389
if (rtmChannelResponse) {
397390
rtmClient.on("MessageFromPeer", function (message, peerId) {
@@ -429,6 +422,21 @@ let MTComp = (function () {
429422
}
430423
});
431424
});
425+
426+
client.on(
427+
"user-published",
428+
async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
429+
setLocalUserVideo(user);
430+
}
431+
);
432+
client.on(
433+
"user-unpublished",
434+
(user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
435+
console.log("user-unpublished");
436+
437+
setLocalUserVideo(user);
438+
}
439+
);
432440
}
433441
}, [client]);
434442

@@ -600,13 +608,16 @@ MTComp = withMethodExposing(MTComp, [
600608
params: [],
601609
},
602610
execute: async (comp, values) => {
611+
//check if meeting is active
603612
if (!comp.children.meetingActive.getView().value) return;
613+
//toggle videoControl
604614
let value = !comp.children.videoControl.getView().value;
605615
if (videoTrack) {
606616
videoTrack.setEnabled(value);
607617
} else {
608618
await turnOnCamera(value);
609619
}
620+
//change my local user data
610621
let localData = {
611622
user: userId + "",
612623
streamingVideo: value,
@@ -717,20 +728,6 @@ MTComp = withMethodExposing(MTComp, [
717728
},
718729
execute: async (comp, values) => {
719730
if (!comp.children.meetingActive.getView().value) return;
720-
let participants = comp.children.participants.getView() as [];
721-
console.log("participants", participants);
722-
723-
let newUsers = participants.filter((item: any) => item.user !== userId);
724-
console.log("after user left ", newUsers);
725-
let hostExists = newUsers.filter((f: any) => f.host === true);
726-
// if (hostExists.length == 0 && newUsers.length > 0) {
727-
// newUsers[0].host = true;
728-
// hostChanged(newUsers);
729-
// }
730-
// setUserIds(newUsers);
731-
// dispatch(
732-
// changeChildAction("participants", getData(newUsers).data, false)
733-
// );
734731

735732
let value = !comp.children.endCall.getView().value;
736733
comp.children.endCall.change(value);

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

Lines changed: 34 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -169,19 +169,6 @@ let VideoCompBuilder = (function (props) {
169169
useEffect(() => {
170170
if (props.userId.value !== "") {
171171
let userData = JSON.parse(props.userId?.value);
172-
if (
173-
userData.user === userId &&
174-
userData.streamingVideo === false &&
175-
videoRef.current &&
176-
videoRef.current?.id === userId + ""
177-
) {
178-
if (videoRef.current && videoRef.current?.id === userId + "") {
179-
videoRef.current.srcObject = null;
180-
setVideo(false);
181-
}
182-
} else {
183-
setVideo(true);
184-
}
185172
client.on(
186173
"user-published",
187174
async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
@@ -219,6 +206,8 @@ let VideoCompBuilder = (function (props) {
219206
client.on(
220207
"user-unpublished",
221208
(user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
209+
console.log("user-unpublished");
210+
222211
if (mediaType === "audio") {
223212
if (
224213
!user.hasAudio &&
@@ -246,6 +235,7 @@ let VideoCompBuilder = (function (props) {
246235

247236
setUserId(userData.user);
248237
setUsername(userData.userName);
238+
setVideo(userData.streamingVideo);
249239
}
250240
}, [props.userId.value]);
251241

@@ -268,62 +258,40 @@ let VideoCompBuilder = (function (props) {
268258
}}
269259
>
270260
{userId ? (
271-
showVideo ? (
272-
<VideoContainer
273-
onClick={() => props.onEvent("videoClicked")}
274-
ref={videoRef}
275-
style={{
276-
display: `${showVideo ? "flex" : "none"}`,
277-
aspectRatio: props.videoAspectRatio,
278-
borderRadius: props.style.radius,
279-
width: "auto",
280-
}}
281-
id={props.shareScreen ? "share-screen" : userId}
282-
></VideoContainer>
283-
) : (
284-
<div
285-
style={{
286-
flexDirection: "column",
287-
display: "flex",
288-
alignItems: "center",
289-
margin: "0 auto",
290-
padding: props.profilePadding,
291-
}}
292-
>
293-
<img
294-
alt=""
295-
style={{
296-
borderRadius: props.profileBorderRadius,
297-
width: "100%",
298-
overflow: "hidden",
299-
}}
300-
src={props.profileImageUrl.value}
301-
/>
302-
<p style={{ margin: "0" }}>{userName ?? ""}</p>
303-
</div>
304-
)
305-
) : (
306-
<div
261+
<VideoContainer
262+
onClick={() => props.onEvent("videoClicked")}
263+
ref={videoRef}
307264
style={{
308-
flexDirection: "column",
309-
display: "flex",
310-
alignItems: "center",
311-
margin: "0 auto",
312-
padding: props.profilePadding,
265+
display: `${showVideo ? "flex" : "none"}`,
266+
aspectRatio: props.videoAspectRatio,
267+
borderRadius: props.style.radius,
268+
width: "auto",
313269
}}
314-
>
315-
<img
316-
alt=""
317-
style={{
318-
borderRadius: props.profileBorderRadius,
319-
width: "100%",
320-
overflow: "hidden",
321-
}}
322-
src={props.profileImageUrl.value}
323-
/>
324-
<p style={{ margin: "0" }}>{userName ?? ""}</p>
325-
</div>
270+
id={props.shareScreen ? "share-screen" : userId}
271+
></VideoContainer>
272+
) : (
273+
<></>
326274
)}
275+
<div
276+
style={{
277+
flexDirection: "column",
278+
alignItems: "center",
279+
display: `${!showVideo || userId ? "flex" : "none"}`,
280+
margin: "0 auto",
281+
padding: props.profilePadding,
282+
}}
283+
>
284+
<img
285+
alt=""
286+
style={{
287+
borderRadius: props.profileBorderRadius,
288+
width: "100%",
289+
overflow: "hidden",
290+
}}
291+
src={props.profileImageUrl.value}
292+
/>
293+
<p style={{ margin: "0" }}>{userName ?? ""}</p>
294+
</div>
327295
</div>
328296
</ReactResizeDetector>
329297
)}

0 commit comments

Comments
 (0)