From b9bce7c0f2cdc38659f3c9b58193507315c39d92 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Tue, 24 Oct 2023 16:02:45 +0300 Subject: [PATCH 01/20] added agora token --- .../comps/comps/layout/mobileTabLayout.tsx | 27 ++++++++++++++----- .../videoMeetingControllerComp.tsx | 26 ++++++++++-------- 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx index f220fea9e..38c1a8063 100644 --- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx @@ -86,7 +86,9 @@ function TabBarView(props: TabBarProps) { activeKey={props.selectedKey} > {props.tabs.map((tab) => { - return ; + return ( + + ); })} @@ -126,9 +128,18 @@ let MobileTabLayoutTmp = (function () { const childrenMap = { tabs: manualOptionsControl(TabOptionComp, { initOptions: [ - { label: trans("optionsControl.optionI", { i: 1 }), icon: "/icon:solid/1" }, - { label: trans("optionsControl.optionI", { i: 2 }), icon: "/icon:solid/2" }, - { label: trans("optionsControl.optionI", { i: 3 }), icon: "/icon:solid/3" }, + { + label: trans("optionsControl.optionI", { i: 1 }), + icon: "/icon:solid/1", + }, + { + label: trans("optionsControl.optionI", { i: 2 }), + icon: "/icon:solid/2", + }, + { + label: trans("optionsControl.optionI", { i: 3 }), + icon: "/icon:solid/3", + }, ], }), }; @@ -138,7 +149,9 @@ let MobileTabLayoutTmp = (function () { .setPropertyViewFn((children) => { return ( <> -
{children.tabs.propertyView({})}
+
+ {children.tabs.propertyView({})} +
); }) @@ -168,7 +181,9 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => { tabs={tabViews.map((tab, index) => ({ key: index, title: tab.children.label.getView(), - icon: tab.children.icon.toJsonValue() ? tab.children.icon.getView() : undefined, + icon: tab.children.icon.toJsonValue() + ? tab.children.icon.getView() + : undefined, }))} selectedKey={tabIndex + ""} onChange={(key) => setTabIndex(Number(key))} diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index c700d5961..1266dc74c 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -103,6 +103,8 @@ export const client: IAgoraRTCClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8", }); +AgoraRTC.setLogLevel(3); + let audioTrack: IMicrophoneAudioTrack; let videoTrack: ICameraVideoTrack; let screenShareStream: ILocalVideoTrack; @@ -115,8 +117,13 @@ const generateToken = async ( certificate: any, channelName: any ) => { - const agoraTokenUrl = `https://api.agora.io/v1/token?channelName=test&uid=${userId}&appID=${appId}&appCertificate=${certificate}`; - await axios.post(agoraTokenUrl); + const agoraTokenUrl = `https://sandbox.wiggolive.com/token/rtc`; + let response = await axios.post(agoraTokenUrl, { + appId, + certificate, + channelName, + }); + return response.data; }; const turnOnCamera = async (flag?: boolean) => { @@ -180,14 +187,13 @@ const publishVideo = async ( height: any, certifiCateKey: string ) => { - // console.log( - // "generateToken", - // await generateToken(appId, certifiCateKey, channel) - // ); - - // return; + console.log(appId, certifiCateKey, channel); + let token = null; + if (certifiCateKey) { + token = await generateToken(appId, certifiCateKey, channel); + } await turnOnCamera(true); - await client.join(appId, channel, null, userId); + await client.join(appId, channel, token, userId); await client.publish(videoTrack); await rtmInit(appId, userId, channel); @@ -581,8 +587,6 @@ MTComp = withMethodExposing(MTComp, [ }; message["data"] = otherData; - console.log(toUsers); - if (toUsers.length > 0 && toUsers[0] !== undefined) { let peers = toUsers?.map((u: any) => u.user); console.log("peers", peers); From 21aa2bb12053f99a0e5b76156cd71b3cd2a21cab Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Wed, 25 Oct 2023 14:35:45 +0300 Subject: [PATCH 02/20] feat: added set username and Fix: dublicate events --- .../videoMeetingControllerComp.tsx | 55 +++++++++++++++++-- 1 file changed, 49 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 1266dc74c..3896ac4a0 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -12,7 +12,9 @@ import { booleanExposingStateControl, jsonObjectExposingStateControl, numberExposingStateControl, + numberStateControl, stringExposingStateControl, + stringStateControl, } from "comps/controls/codeStateControl"; import { PositionControl } from "comps/controls/dropdownControl"; import { @@ -274,13 +276,14 @@ export const meetingControllerChildren = { endCall: booleanExposingStateControl("false"), sharing: booleanExposingStateControl("false"), videoSettings: jsonObjectExposingStateControl(""), - videoWidth: numberExposingStateControl("videoWidth", 200), - videoHeight: numberExposingStateControl("videoHeight", 200), + videoWidth: numberStateControl(200), + videoHeight: numberStateControl(200), appId: withDefault(StringControl, trans("meeting.appid")), participants: stateComp([]), usersScreenShared: stateComp([]), localUser: jsonObjectExposingStateControl(""), - meetingName: stringExposingStateControl("meetingName"), + meetingName: stringStateControl("meetingName"), + userName: stringStateControl("userName"), certifiCateKey: stringExposingStateControl(""), messages: stateComp([]), }; @@ -314,6 +317,12 @@ let MTComp = (function () { ); }, [userIds]); + useEffect(() => { + dispatch( + changeChildAction("participants", getData(userIds).data, false) + ); + }, [userIds]); + useEffect(() => { if (props.endCall.value) { let newUsers = userIds.filter((item: any) => item.user !== userId); @@ -331,6 +340,19 @@ let MTComp = (function () { } }, [rtmMessages]); + 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]; + console.log("updatedUsers", updatedUsers); + dispatch( + changeChildAction("participants", getData(updatedUsers).data, false) + ); + } + }, [props.localUser.value]); + useEffect(() => { if (rtmChannelResponse) { rtmClient.on("MessageFromPeer", function (message, peerId) { @@ -526,7 +548,6 @@ MTComp = withMethodExposing(MTComp, [ user: userId + "", audiostatus: value, }); - console.log(localUserData); await turnOnMicrophone(value); comp.children.audioControl.change(value); }, @@ -583,13 +604,12 @@ MTComp = withMethodExposing(MTComp, [ let message: any = { time: Date.now(), - from: userId, + from: comp.children.localUser.getView().value, }; message["data"] = otherData; if (toUsers.length > 0 && toUsers[0] !== undefined) { let peers = toUsers?.map((u: any) => u.user); - console.log("peers", peers); peers.forEach((p: any) => { sendPeerMessageRtm(message, String(p)); }); @@ -598,6 +618,29 @@ MTComp = withMethodExposing(MTComp, [ } }, }, + { + method: { + name: "setMeetingName", + description: trans("meeting.meetingName"), + params: [], + }, + execute: async (comp, values) => { + let meetingName: any = values[0]; + comp.children.meetingName.change(meetingName); + }, + }, + { + method: { + name: "setUserName", + description: trans("meeting.meetingName"), + params: [], + }, + execute: async (comp, values) => { + let userName: any = values[0]; + let userLocal = comp.children.localUser.getView().value; + comp.children.localUser.change({ ...userLocal, userName: userName }); + }, + }, { method: { name: "endMeeting", From 871e85642bf5ba65687dc5077a86b9424f82ce11 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 27 Oct 2023 09:57:33 +0300 Subject: [PATCH 03/20] feat: speaking status to participant and local object --- .../videoMeetingControllerComp.tsx | 77 ++++++++++++------- 1 file changed, 49 insertions(+), 28 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 3896ac4a0..2fc02a78c 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -312,12 +312,7 @@ let MTComp = (function () { const [rtmMessages, setRtmMessages] = useState([]); useEffect(() => { - dispatch( - changeChildAction("participants", getData(userIds).data, false) - ); - }, [userIds]); - - useEffect(() => { + console.log(userIds); dispatch( changeChildAction("participants", getData(userIds).data, false) ); @@ -372,28 +367,51 @@ let MTComp = (function () { }, [rtmChannelResponse]); useEffect(() => { - 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]); - }); - 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); - }); + 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]); + }); + 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); + }); + client.on("volume-indicator", (volumeInfos: any) => { + if (volumeInfos.length == 0) return; + volumeInfos.map((volumeInfo: any) => { + const speaking = volumeInfo.level >= 30; + if (volumeInfo.uid == userId) { + props.localUser.onChange({ + ...props.localUser.value, + speaking, + }); + } else { + const userInfo = userIds.find( + (info: any) => info.user === volumeInfo.uid + ); + setUserIds([...userIds, { ...userInfo, speaking }]); + } + }); + }); + } }, [client]); return ( @@ -579,7 +597,10 @@ MTComp = withMethodExposing(MTComp, [ comp.children.localUser.change({ user: userId + "", audiostatus: false, + speaking: false, }); + console.log(userId); + await publishVideo( comp.children.appId.getView(), comp.children.meetingName.getView().value == "" From 25a3e35813c5e49a349e89b45c772f35712ce727 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 27 Oct 2023 11:29:06 +0300 Subject: [PATCH 04/20] feat: removed dark screen when video ends streaming --- .../videoMeetingControllerComp.tsx | 11 ++++++--- .../meetingComp/videoMeetingStreamComp.tsx | 24 ++++++++++++++++++- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 2fc02a78c..6e60b5f78 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -189,7 +189,6 @@ const publishVideo = async ( height: any, certifiCateKey: string ) => { - console.log(appId, certifiCateKey, channel); let token = null; if (certifiCateKey) { token = await generateToken(appId, certifiCateKey, channel); @@ -562,7 +561,7 @@ MTComp = withMethodExposing(MTComp, [ }, execute: async (comp, values) => { let value = !comp.children.audioControl.getView().value; - let localUserData = comp.children.localUser.change({ + comp.children.localUser.change({ user: userId + "", audiostatus: value, }); @@ -598,8 +597,8 @@ MTComp = withMethodExposing(MTComp, [ user: userId + "", audiostatus: false, speaking: false, + streamingVideo: true, }); - console.log(userId); await publishVideo( comp.children.appId.getView(), @@ -671,7 +670,13 @@ MTComp = withMethodExposing(MTComp, [ execute: async (comp, values) => { let value = !comp.children.endCall.getView().value; comp.children.endCall.change(value); + await leaveChannel(); + + comp.children.localUser.change({ + user: userId + "", + streamingVideo: false, + }); }, }, { diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index b50cd8f19..5e205034f 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -28,7 +28,10 @@ import { RefControl } from "comps/controls/refControl"; import { useEffect, useRef, useState } from "react"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; -import { client } from "./videoMeetingControllerComp"; +import { + VideoMeetingControllerComp, + client, +} from "./videoMeetingControllerComp"; import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng"; @@ -184,6 +187,14 @@ 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 + "" + ) { + videoRef.current.srcObject = null; + } client.on( "user-published", async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { @@ -231,6 +242,10 @@ let VideoCompBuilder = (function (props) { } } if (mediaType === "video") { + console.log("user-unpublished video"); + if (videoRef.current && videoRef.current?.id == user.uid + "") { + videoRef.current.srcObject = null; + } if ( !user.hasVideo && user.uid + "" != userData.user && @@ -241,10 +256,17 @@ let VideoCompBuilder = (function (props) { } } ); + setUserId(userData.user); } }, [props.userId.value]); + // useEffect(() => { + // if (videoRef.current && videoRef.current?.id == userId + "") { + // videoRef.current.srcObject = null; + // } + // }, []); + return ( {(editorState) => ( From e601b46b7a48a65b1b5df4b862b8519ee52bf8c8 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 27 Oct 2023 14:03:59 +0300 Subject: [PATCH 05/20] fix: trasmitting audio and video stream --- .../videoMeetingControllerComp.tsx | 43 ++++++++++++++++--- .../meetingComp/videoMeetingStreamComp.tsx | 15 +++---- 2 files changed, 44 insertions(+), 14 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 6e60b5f78..06e375c43 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -308,15 +308,40 @@ let MTComp = (function () { [dispatch, isTopBom] ); const [userIds, setUserIds] = useState([]); + const [updateVolume, setUpdateVolume] = useState({ + update: false, + userid: null, + }); const [rtmMessages, setRtmMessages] = useState([]); useEffect(() => { - console.log(userIds); dispatch( changeChildAction("participants", getData(userIds).data, false) ); }, [userIds]); + useEffect(() => { + if (updateVolume.userid) { + console.log("userIds ", props.participants); + 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; + }); + console.log("updatedItems", updatedItems); + + dispatch( + changeChildAction("participants", getData(updatedItems).data, false) + ); + } + }, [updateVolume]); + useEffect(() => { if (props.endCall.value) { let newUsers = userIds.filter((item: any) => item.user !== userId); @@ -397,16 +422,16 @@ let MTComp = (function () { if (volumeInfos.length == 0) return; volumeInfos.map((volumeInfo: any) => { const speaking = volumeInfo.level >= 30; - if (volumeInfo.uid == userId) { + if ( + volumeInfo.uid == userId && + props.localUser.value.speaking != speaking + ) { props.localUser.onChange({ ...props.localUser.value, speaking, }); } else { - const userInfo = userIds.find( - (info: any) => info.user === volumeInfo.uid - ); - setUserIds([...userIds, { ...userInfo, speaking }]); + setUpdateVolume({ update: speaking, userid: volumeInfo.uid }); } }); }); @@ -582,6 +607,12 @@ MTComp = withMethodExposing(MTComp, [ } else { await turnOnCamera(value); } + comp.children.localUser.change({ + user: userId + "", + streamingVideo: value, + audiostatus: false, + speaking: false, + }); comp.children.videoControl.change(value); }, }, diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index 5e205034f..c66a3d0d1 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -187,18 +187,17 @@ 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 + "" - ) { - videoRef.current.srcObject = null; + if (userData.user == userId && userData.streamingVideo == false && videoRef.current && videoRef.current?.id == userId + "") { + if (videoRef.current && videoRef.current?.id == userId + "") { + videoRef.current.srcObject = null; + } } client.on( "user-published", async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { if (mediaType === "video") { + console.log("user-published",user.uid); + const remoteTrack = await client.subscribe(user, mediaType); let userId = user.uid + ""; if ( @@ -242,7 +241,7 @@ let VideoCompBuilder = (function (props) { } } if (mediaType === "video") { - console.log("user-unpublished video"); + console.log("user-unpublished video", user.uid); if (videoRef.current && videoRef.current?.id == user.uid + "") { videoRef.current.srcObject = null; } From d113fc28cad4a28df9716c506fe283e016d0cb5d Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 27 Oct 2023 14:06:15 +0300 Subject: [PATCH 06/20] fix: remove logs --- .../videoMeetingControllerComp.tsx | 45 ++----------------- .../meetingComp/videoMeetingStreamComp.tsx | 5 +-- 2 files changed, 4 insertions(+), 46 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 06e375c43..1d52cfac5 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -210,25 +210,11 @@ const publishVideo = async ( }; const sendMessageRtm = (message: any) => { - rtmChannelResponse - .sendMessage({ text: JSON.stringify(message) }) - .then(() => { - console.log("message sent " + JSON.stringify(message)); - }) - .catch((e: any) => { - console.log("error", e); - }); + rtmChannelResponse.sendMessage({ text: JSON.stringify(message) }); }; const sendPeerMessageRtm = (message: any, toId: string) => { - rtmClient - .sendMessageToPeer({ text: JSON.stringify(message) }, toId) - .then(() => { - console.log("message sent " + JSON.stringify(message)); - }) - .catch((e: any) => { - console.log("error", e); - }); + rtmClient.sendMessageToPeer({ text: JSON.stringify(message) }, toId); }; const rtmInit = async (appId: any, uid: any, channel: any) => { @@ -238,26 +224,9 @@ const rtmInit = async (appId: any, uid: any, channel: any) => { }; await rtmClient.login(options); - rtmClient.on("ConnectionStateChanged", function (state, reason) { - console.log("State changed To: " + state + " Reason: " + reason); - }); - rtmChannelResponse = rtmClient.createChannel(channel); - await rtmChannelResponse.join().then(async () => { - console.log( - "You have successfully joined channel " + rtmChannelResponse.channelId - ); - }); - - // Display channel member stats - rtmChannelResponse.on("MemberJoined", function (memberId) { - console.log(memberId + " joined the channel"); - }); - // Display channel member stats - rtmChannelResponse.on("MemberLeft", function (memberId) { - console.log(memberId + " left the channel"); - }); + await rtmChannelResponse.join(); }; export const meetingControllerChildren = { @@ -322,7 +291,6 @@ let MTComp = (function () { useEffect(() => { if (updateVolume.userid) { - console.log("userIds ", props.participants); let prevUsers: [] = props.participants as []; const updatedItems = prevUsers.map((userInfo: any) => { @@ -334,8 +302,6 @@ let MTComp = (function () { } return userInfo; }); - console.log("updatedItems", updatedItems); - dispatch( changeChildAction("participants", getData(updatedItems).data, false) ); @@ -365,7 +331,6 @@ let MTComp = (function () { if (newUsers.length == 0) return; newUsers = props.localUser.value; let updatedUsers = [...userIds, newUsers]; - console.log("updatedUsers", updatedUsers); dispatch( changeChildAction("participants", getData(updatedUsers).data, false) ); @@ -375,13 +340,9 @@ let MTComp = (function () { useEffect(() => { if (rtmChannelResponse) { rtmClient.on("MessageFromPeer", function (message, peerId) { - console.log( - "Message from: " + peerId + " Message: " + message.text - ); setRtmMessages(message.text); }); rtmChannelResponse.on("ChannelMessage", function (message, memberId) { - console.log("Message received from: " + memberId, message.text); setRtmMessages(message.text); dispatch( changeChildAction("messages", getData(rtmMessages).data, false) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index c66a3d0d1..3f686903e 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -195,9 +195,7 @@ let VideoCompBuilder = (function (props) { client.on( "user-published", async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { - if (mediaType === "video") { - console.log("user-published",user.uid); - + if (mediaType === "video") { const remoteTrack = await client.subscribe(user, mediaType); let userId = user.uid + ""; if ( @@ -241,7 +239,6 @@ let VideoCompBuilder = (function (props) { } } if (mediaType === "video") { - console.log("user-unpublished video", user.uid); if (videoRef.current && videoRef.current?.id == user.uid + "") { videoRef.current.srcObject = null; } From 691c42fe6587949284963646dd67507ae1914e9f Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 27 Oct 2023 14:58:49 +0300 Subject: [PATCH 07/20] feat: added no text when there is no user --- .../videoMeetingControllerComp.tsx | 1 + .../meetingComp/videoMeetingStreamComp.tsx | 57 +++++++++++++------ .../packages/lowcoder/src/i18n/locales/en.ts | 1 + 3 files changed, 43 insertions(+), 16 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 1d52cfac5..1aec71e1f 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -474,6 +474,7 @@ let MTComp = (function () { {children.meetingName.propertyView({ label: trans("meeting.meetingName"), })} + {children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true, diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index 3f686903e..b066caf54 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -62,6 +62,15 @@ const Container = styled.div<{ $style: any }>` align-items: center; justify-content: center; `; +const TextContainer = styled.div<{ $style: any }>` + height: 100%; + width: 100%; + display: flex; + align-items: center; + position: absolute; + justify-content: center; + ${(props) => props.$style && getStyle(props.$style)} +`; const VideoContainer = styled.video<{ $style: any }>` height: 100%; width: 100%; @@ -166,13 +175,16 @@ export const meetingStreamChildren = { style: ButtonStyleControl, viewRef: RefControl, userId: stringExposingStateControl(""), + noVideoText: stringExposingStateControl("No Video"), }; let VideoCompBuilder = (function (props) { return new UICompBuilder(meetingStreamChildren, (props) => { const videoRef = useRef(null); const conRef = useRef(null); + const userNameRef = useRef(null); const [userId, setUserId] = useState(); + const [userName, setUsername] = useState(""); useEffect(() => { onResize(); @@ -181,21 +193,31 @@ let VideoCompBuilder = (function (props) { const onResize = async () => { const container = conRef.current; let videoCo = videoRef.current; - videoCo!.style.height = container?.clientHeight + "px"; - videoCo!.style.width = container?.clientWidth + "px"; + if (videoCo) { + videoCo!.style.height = container?.clientHeight + "px"; + videoCo!.style.width = container?.clientWidth + "px"; + } }; 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 ( + userData.user == userId && + userData.streamingVideo == false && + videoRef.current && + videoRef.current?.id == userId + "" + ) { if (videoRef.current && videoRef.current?.id == userId + "") { videoRef.current.srcObject = null; + if (userNameRef.current) { + userNameRef.current.textContent = userData.user; + } } } client.on( "user-published", async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => { - if (mediaType === "video") { + if (mediaType === "video") { const remoteTrack = await client.subscribe(user, mediaType); let userId = user.uid + ""; if ( @@ -254,26 +276,29 @@ let VideoCompBuilder = (function (props) { ); setUserId(userData.user); + setUsername(userData.user); } }, [props.userId.value]); - // useEffect(() => { - // if (videoRef.current && videoRef.current?.id == userId + "") { - // videoRef.current.srcObject = null; - // } - // }, []); - return ( {(editorState) => ( - props.onEvent("videoClicked")} - ref={videoRef} - $style={props.style} - id={props.shareScreen ? "share-screen" : userId} - > + {props.shareScreen || userId ? ( +
+ props.onEvent("videoClicked")} + ref={videoRef} + $style={props.style} + id={props.shareScreen ? "share-screen" : userId} + > +
+ ) : ( + +

No Video

+ + )} )} diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index c52812d7b..1fdc28ddf 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1451,6 +1451,7 @@ export const en = { shareScreen: "Share Screen", appid: "Application Id", meetingName: "Meeting Name", + videoCompText: "No video Text", right: "Right", bottom: "Bottom", videoId: "Video Id", From 4a838cff06969d000fcf4afd5c3385e884d2a322 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Sat, 28 Oct 2023 12:36:04 +0300 Subject: [PATCH 08/20] feat: added no text when there is no user --- .../src/comps/comps/meetingComp/videoMeetingStreamComp.tsx | 2 -- .../packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index b066caf54..5b7d4315b 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -286,14 +286,12 @@ let VideoCompBuilder = (function (props) { {props.shareScreen || userId ? ( -
props.onEvent("videoClicked")} ref={videoRef} $style={props.style} id={props.shareScreen ? "share-screen" : userId} > -
) : (

No Video

diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx index 0c345aceb..0abcde27f 100644 --- a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx @@ -9,7 +9,7 @@ import { useState } from "react"; import { useMount } from "react-use"; import styled from "styled-components"; import { RemoteCompInfo, RemoteCompLoader } from "types/remoteComp"; -import { loaders } from "./loaders"; +import { loaders } from "./loaders"; import { withErrorBoundary } from "comps/generators/withErrorBoundary"; const ViewError = styled.div` From 3ebf5bc70b78e626214534c5a615cb9ccdec61b0 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Sat, 28 Oct 2023 14:09:26 +0300 Subject: [PATCH 09/20] feat: added username when there is no video stream --- .../meetingComp/videoMeetingStreamComp.tsx | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index 5b7d4315b..38d78225b 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -182,9 +182,10 @@ let VideoCompBuilder = (function (props) { return new UICompBuilder(meetingStreamChildren, (props) => { const videoRef = useRef(null); const conRef = useRef(null); - const userNameRef = useRef(null); + const placeholderRef = useRef(null); const [userId, setUserId] = useState(); const [userName, setUsername] = useState(""); + const [showVideo, setVideo] = useState(true); useEffect(() => { onResize(); @@ -209,10 +210,10 @@ let VideoCompBuilder = (function (props) { ) { if (videoRef.current && videoRef.current?.id == userId + "") { videoRef.current.srcObject = null; - if (userNameRef.current) { - userNameRef.current.textContent = userData.user; - } + setVideo(false); } + } else { + setVideo(true); } client.on( "user-published", @@ -228,6 +229,7 @@ let VideoCompBuilder = (function (props) { props.onEvent("videoOn"); } const element = document.getElementById(userId); + if (element) { remoteTrack.play(userId); } @@ -276,7 +278,7 @@ let VideoCompBuilder = (function (props) { ); setUserId(userData.user); - setUsername(userData.user); + setUsername(userData.userName); } }, [props.userId.value]); @@ -286,13 +288,25 @@ let VideoCompBuilder = (function (props) { {props.shareScreen || userId ? ( + <> props.onEvent("videoClicked")} ref={videoRef} + style={{ display: `${showVideo ? "flex" : "none"}` }} $style={props.style} id={props.shareScreen ? "share-screen" : userId} > + props.onEvent("videoClicked")} + ref={placeholderRef} + style={{ display: `${!showVideo ? "flex" : "none"}` }} + $style={props.style} + > + {userName ?? "No Username"} + + ) : ( + // )

No Video

 From ace706f50789f584d54a78ae48b2a71557e955bc Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Tue, 31 Oct 2023 13:33:45 +0300 Subject: [PATCH 10/20] feat: added profile image url provision on video comp --- .../meetingComp/videoMeetingStreamComp.tsx | 20 ++++++++++++++++++- .../packages/lowcoder/src/i18n/locales/en.ts | 1 + 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index 38d78225b..574751cb6 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -37,6 +37,7 @@ import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng"; import { MeetingEventHandlerControl, + StringStateControl, hiddenPropertyView, stringExposingStateControl, } from "@lowcoder-ee/index.sdk"; @@ -175,6 +176,10 @@ export const meetingStreamChildren = { style: ButtonStyleControl, viewRef: RefControl, userId: stringExposingStateControl(""), + profileImageUrl: withDefault( + StringStateControl, + "https://via.placeholder.com/120" + ), noVideoText: stringExposingStateControl("No Video"), }; @@ -299,9 +304,16 @@ let VideoCompBuilder = (function (props) { props.onEvent("videoClicked")} ref={placeholderRef} - style={{ display: `${!showVideo ? "flex" : "none"}` }} + style={{ + display: `${!showVideo ? "flex" : "none"}`, + flexDirection: "column", + }} $style={props.style} > + {userName ?? "No Username"} @@ -321,6 +333,10 @@ let VideoCompBuilder = (function (props) { <>
{children.userId.propertyView({ label: trans("meeting.videoId") })} + {children.profileImageUrl.propertyView({ + label: trans("meeting.profileImageUrl"), + placeholder: "https://via.placeholder.com/120", + })} {children.autoHeight.getPropertyView()} {children.shareScreen.propertyView({ label: trans("meeting.shareScreen"), @@ -348,5 +364,7 @@ VideoCompBuilder = class extends VideoCompBuilder { export const VideoMeetingStreamComp = withExposingConfigs(VideoCompBuilder, [ new NameConfig("loading", trans("button.loadingDesc")), + new NameConfig("profileImageUrl", trans("meeting.profileImageUrl")), + ...CommonNameConfig, ]); diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 1fdc28ddf..325903ea4 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1452,6 +1452,7 @@ export const en = { appid: "Application Id", meetingName: "Meeting Name", videoCompText: "No video Text", + profileImageUrl: "Profile Image Url", right: "Right", bottom: "Bottom", videoId: "Video Id", From dd56bfb55068b5eea105087d11f6b201c06cf69d Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Thu, 2 Nov 2023 10:28:04 +0300 Subject: [PATCH 11/20] fix: profile image styling --- .../videoMeetingControllerComp.tsx | 7 +--- .../meetingComp/videoMeetingStreamComp.tsx | 40 +++++++++++++++---- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 1aec71e1f..bb782c83c 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -387,10 +387,7 @@ let MTComp = (function () { volumeInfo.uid == userId && props.localUser.value.speaking != speaking ) { - props.localUser.onChange({ - ...props.localUser.value, - speaking, - }); + props.localUser.value.speaking = speaking; } else { setUpdateVolume({ update: speaking, userid: volumeInfo.uid }); } @@ -474,7 +471,7 @@ let MTComp = (function () { {children.meetingName.propertyView({ label: trans("meeting.meetingName"), })} - + {children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true, diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index 574751cb6..892fb15d2 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -37,6 +37,7 @@ import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng"; import { MeetingEventHandlerControl, + StringControl, StringStateControl, hiddenPropertyView, stringExposingStateControl, @@ -72,6 +73,15 @@ const TextContainer = styled.div<{ $style: any }>` justify-content: center; ${(props) => props.$style && getStyle(props.$style)} `; +const ProfileImageContainer = styled.div<{ $style: any }>` + height: 100%; + width: 100%; + display: flex; + align-items: center; + position: absolute; + justify-content: center; + ${(props) => props.$style && getStyle(props.$style)} +`; const VideoContainer = styled.video<{ $style: any }>` height: 100%; width: 100%; @@ -166,6 +176,8 @@ const typeOptions = [ export const meetingStreamChildren = { autoHeight: withDefault(AutoHeightControl, "fixed"), shareScreen: withDefault(BoolCodeControl, false), + profileImageHeight: withDefault(StringControl, "300px"), + profileImageWidth: withDefault(StringControl, "300px"), type: dropdownControl(typeOptions, ""), onEvent: MeetingEventHandlerControl, disabled: BoolCodeControl, @@ -311,16 +323,26 @@ let VideoCompBuilder = (function (props) { $style={props.style} > {userName ?? "No Username"} ) : ( - // ) -

No Video

+ )} @@ -333,10 +355,6 @@ let VideoCompBuilder = (function (props) { <>
{children.userId.propertyView({ label: trans("meeting.videoId") })} - {children.profileImageUrl.propertyView({ - label: trans("meeting.profileImageUrl"), - placeholder: "https://via.placeholder.com/120", - })} {children.autoHeight.getPropertyView()} {children.shareScreen.propertyView({ label: trans("meeting.shareScreen"), @@ -349,6 +367,14 @@ let VideoCompBuilder = (function (props) { {hiddenPropertyView(children)}
+ {children.profileImageUrl.propertyView({ + label: trans("meeting.profileImageUrl"), + placeholder: "https://via.placeholder.com/120", + })} + {children.profileImageHeight.propertyView({ + label: "Profile Height", + })} + {children.profileImageWidth.propertyView({ label: "Profile Width" })} {children.style.getPropertyView()}
From 07bfe358d1f1ede2e7da57ba4b7e8a6e986d9835 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Thu, 2 Nov 2023 11:14:15 +0300 Subject: [PATCH 12/20] feat: changed share screen bool from string to switch --- .../meetingComp/meetingControlerUtils.tsx | 36 +++++++++++++++++++ .../meetingComp/videoMeetingStreamComp.tsx | 24 +++++-------- .../comps/tableComp/expansionControl.tsx | 2 +- 3 files changed, 46 insertions(+), 16 deletions(-) create mode 100644 client/packages/lowcoder/src/comps/comps/meetingComp/meetingControlerUtils.tsx diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/meetingControlerUtils.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/meetingControlerUtils.tsx new file mode 100644 index 000000000..81b11f622 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/meetingControlerUtils.tsx @@ -0,0 +1,36 @@ +import { CheckBox, controlItem, Switch, SwitchWrapper } from "lowcoder-design"; +import { ReactNode } from "react"; +import { ControlParams, SimpleComp } from "@lowcoder-ee/index.sdk"; + +export class BoolShareVideoControl extends SimpleComp { + readonly IGNORABLE_DEFAULT_VALUE = false; + protected getDefaultValue(): boolean { + return false; + } + + getPropertyView(): ReactNode { + return ( + this.dispatchChangeValueAction(x)} + /> + ); + } + + propertyView(params: ControlParams & { type?: "switch" | "checkbox" }) { + return controlItem( + { filterText: params.label }, + + {params.type === "checkbox" ? ( + this.dispatchChangeValueAction(x.target.checked)} + /> + ) : ( + this.getPropertyView() + )} + + ); + } +} diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index 892fb15d2..dfb70a8b4 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -28,20 +28,20 @@ import { RefControl } from "comps/controls/refControl"; import { useEffect, useRef, useState } from "react"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; -import { - VideoMeetingControllerComp, - client, -} from "./videoMeetingControllerComp"; +import { client } from "./videoMeetingControllerComp"; import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng"; import { + ControlParams, MeetingEventHandlerControl, + SimpleComp, StringControl, StringStateControl, hiddenPropertyView, stringExposingStateControl, } from "@lowcoder-ee/index.sdk"; +import { BoolShareVideoControl } from "./meetingControlerUtils"; const FormLabel = styled(CommonBlueLabel)` font-size: 13px; @@ -73,15 +73,7 @@ const TextContainer = styled.div<{ $style: any }>` justify-content: center; ${(props) => props.$style && getStyle(props.$style)} `; -const ProfileImageContainer = styled.div<{ $style: any }>` - height: 100%; - width: 100%; - display: flex; - align-items: center; - position: absolute; - justify-content: center; - ${(props) => props.$style && getStyle(props.$style)} -`; + const VideoContainer = styled.video<{ $style: any }>` height: 100%; width: 100%; @@ -102,6 +94,7 @@ const getStyle = (style: any) => { } `; }; + function getForm(editorState: EditorState, formName: string) { const comp = editorState?.getUICompByName(formName); if (comp && comp.children.compType.getView() === "form") { @@ -175,7 +168,7 @@ const typeOptions = [ export const meetingStreamChildren = { autoHeight: withDefault(AutoHeightControl, "fixed"), - shareScreen: withDefault(BoolCodeControl, false), + shareScreen: withDefault(BoolShareVideoControl, false), profileImageHeight: withDefault(StringControl, "300px"), profileImageWidth: withDefault(StringControl, "300px"), type: dropdownControl(typeOptions, ""), @@ -304,7 +297,7 @@ let VideoCompBuilder = (function (props) { {(editorState) => ( - {props.shareScreen || userId ? ( + {userId ? ( <> props.onEvent("videoClicked")} @@ -360,6 +353,7 @@ let VideoCompBuilder = (function (props) { label: trans("meeting.shareScreen"), })}
+
{children.onEvent.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/expansionControl.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/expansionControl.tsx index 2bf838baf..6b5b41380 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/expansionControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/expansionControl.tsx @@ -54,7 +54,7 @@ let ExpansionControlTmp = (function () { .setControlItemData({ filterText: label }) .setPropertyViewFn((children, dispatch) => { return ( - <> + <> {children.expandable.propertyView({ label })} {children.expandable.getView() && children.slot From 385b89fc6fbb0aa470fb40379d3620d95324f9c3 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Thu, 2 Nov 2023 11:40:26 +0300 Subject: [PATCH 13/20] fix: speaking bool on local user object --- .../comps/meetingComp/videoMeetingControllerComp.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index bb782c83c..f7147dad7 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -387,7 +387,13 @@ let MTComp = (function () { volumeInfo.uid == userId && props.localUser.value.speaking != speaking ) { - props.localUser.value.speaking = speaking; + let localObject = { + user: userId + "", + audiostatus: props.audioControl.value, + streamingVideo: props.videoControl.value, + speaking: speaking, + }; + props.localUser.onChange(localObject); } else { setUpdateVolume({ update: speaking, userid: volumeInfo.uid }); } @@ -548,6 +554,8 @@ MTComp = withMethodExposing(MTComp, [ comp.children.localUser.change({ user: userId + "", audiostatus: value, + streamingVideo: comp.children.videoControl.getView().value, + speaking: false, }); await turnOnMicrophone(value); comp.children.audioControl.change(value); From 62c21f00da0fe5d19c917f7ee5c9577e411f99ac Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 3 Nov 2023 12:16:23 +0300 Subject: [PATCH 14/20] fix: profile image showing when audio is toggled --- .../videoMeetingControllerComp.tsx | 46 ++++++++++++++----- .../meetingComp/videoMeetingStreamComp.tsx | 2 + 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index f7147dad7..97993cfb7 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -29,7 +29,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; import { CanvasContainerID } from "constants/domLocators"; import { Layers } from "constants/Layers"; import { trans } from "i18n"; -import { changeChildAction } from "lowcoder-core"; +import { changeChildAction, changeValueAction } from "lowcoder-core"; import { Drawer, HintPlaceHolder, @@ -282,6 +282,7 @@ let MTComp = (function () { userid: null, }); const [rtmMessages, setRtmMessages] = useState([]); + const [localUserSpeaking, setLocalUserSpeaking] = useState(false); useEffect(() => { dispatch( @@ -325,6 +326,18 @@ let MTComp = (function () { } }, [rtmMessages]); + useEffect(() => { + if (localUserSpeaking === true) { + let localObject = { + user: userId + "", + audiostatus: props.audioControl.value, + streamingVideo: props.videoControl.value, + speaking: localUserSpeaking, + }; + props.localUser.onChange(localObject); + } + }, [localUserSpeaking]); + useEffect(() => { if (props.localUser.value) { let newUsers = userIds.filter((item: any) => item.user !== userId); @@ -387,13 +400,7 @@ let MTComp = (function () { volumeInfo.uid == userId && props.localUser.value.speaking != speaking ) { - let localObject = { - user: userId + "", - audiostatus: props.audioControl.value, - streamingVideo: props.videoControl.value, - speaking: speaking, - }; - props.localUser.onChange(localObject); + setLocalUserSpeaking(speaking); } else { setUpdateVolume({ update: speaking, userid: volumeInfo.uid }); } @@ -574,12 +581,14 @@ MTComp = withMethodExposing(MTComp, [ } else { await turnOnCamera(value); } - comp.children.localUser.change({ + let localData = { user: userId + "", streamingVideo: value, - audiostatus: false, - speaking: false, - }); + audiostatus: comp.children.audioControl.getView().value, + speaking: comp.children.localUser.getView().value.speaking, + }; + + comp.children.localUser.change(localData); comp.children.videoControl.change(value); }, }, @@ -598,6 +607,19 @@ MTComp = withMethodExposing(MTComp, [ 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 == "" diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index dfb70a8b4..ee1d6657b 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -287,6 +287,8 @@ let VideoCompBuilder = (function (props) { } ); + console.log(userData); + setUserId(userData.user); setUsername(userData.userName); } From 167211d318cd29341f61197bc13ff7f6c93be432 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 3 Nov 2023 13:41:23 +0300 Subject: [PATCH 15/20] feat: exposed meeting active bool and also fixed image padding issue --- .../videoMeetingControllerComp.tsx | 35 +++++++++---------- .../meetingComp/videoMeetingStreamComp.tsx | 25 +++++++------ 2 files changed, 29 insertions(+), 31 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 97993cfb7..1c29036f7 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -10,10 +10,8 @@ import { BoolControl } from "comps/controls/boolControl"; import { StringControl } from "comps/controls/codeControl"; import { booleanExposingStateControl, + BooleanStateControl, jsonObjectExposingStateControl, - numberExposingStateControl, - numberStateControl, - stringExposingStateControl, stringStateControl, } from "comps/controls/codeStateControl"; import { PositionControl } from "comps/controls/dropdownControl"; @@ -29,7 +27,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; import { CanvasContainerID } from "constants/domLocators"; import { Layers } from "constants/Layers"; import { trans } from "i18n"; -import { changeChildAction, changeValueAction } from "lowcoder-core"; +import { changeChildAction } from "lowcoder-core"; import { Drawer, HintPlaceHolder, @@ -55,7 +53,7 @@ import AgoraRTC, { import { JSONValue } from "@lowcoder-ee/index.sdk"; import { getData } from "../listViewComp/listViewUtils"; -import AgoraRTM, { RtmChannel, RtmClient, RtmMessage } from "agora-rtm-sdk"; +import AgoraRTM, { RtmChannel, RtmClient } from "agora-rtm-sdk"; const EventOptions = [closeEvent] as const; @@ -113,13 +111,13 @@ let screenShareStream: ILocalVideoTrack; let userId: UID | null | undefined; let rtmChannelResponse: RtmChannel; let rtmClient: RtmClient; +const agoraTokenUrl = `https://sandbox.wiggolive.com/token/rtc`; const generateToken = async ( appId: any, certificate: any, channelName: any ) => { - const agoraTokenUrl = `https://sandbox.wiggolive.com/token/rtc`; let response = await axios.post(agoraTokenUrl, { appId, certificate, @@ -204,8 +202,8 @@ const publishVideo = async ( const videoSettings = mediaStreamTrack.getSettings(); const videoWidth = videoSettings.width; const videoHeight = videoSettings.height; - height.videoWidth.change(videoWidth); - height.videoHeight.change(videoHeight); + // height.videoWidth.change(videoWidth); + // height.videoHeight.change(videoHeight); } }; @@ -230,7 +228,7 @@ const rtmInit = async (appId: any, uid: any, channel: any) => { }; export const meetingControllerChildren = { - visible: booleanExposingStateControl("visible"), + visible: withDefault(BooleanStateControl, "visible"), onEvent: eventHandlerControl(EventOptions), width: StringControl, height: StringControl, @@ -239,20 +237,17 @@ export const meetingControllerChildren = { placement: PositionControl, maskClosable: withDefault(BoolControl, true), showMask: withDefault(BoolControl, true), - audioControl: booleanExposingStateControl("false"), - videoControl: booleanExposingStateControl("true"), - endCall: booleanExposingStateControl("false"), - sharing: booleanExposingStateControl("false"), - videoSettings: jsonObjectExposingStateControl(""), - videoWidth: numberStateControl(200), - videoHeight: numberStateControl(200), + meetingActive: withDefault(BooleanStateControl, "false"), + audioControl: withDefault(BooleanStateControl, "false"), + videoControl: withDefault(BooleanStateControl, "true"), + endCall: withDefault(BooleanStateControl, "false"), + sharing: withDefault(BooleanStateControl, "false"), appId: withDefault(StringControl, trans("meeting.appid")), participants: stateComp([]), usersScreenShared: stateComp([]), localUser: jsonObjectExposingStateControl(""), meetingName: stringStateControl("meetingName"), - userName: stringStateControl("userName"), - certifiCateKey: stringExposingStateControl(""), + certifiCateKey: stringStateControl(""), messages: stateComp([]), }; let MTComp = (function () { @@ -628,6 +623,7 @@ MTComp = withMethodExposing(MTComp, [ comp.children, comp.children.certifiCateKey.getView().value ); + comp.children.meetingActive.change(true); }, }, { @@ -690,6 +686,7 @@ MTComp = withMethodExposing(MTComp, [ execute: async (comp, values) => { let value = !comp.children.endCall.getView().value; comp.children.endCall.change(value); + comp.children.meetingActive.change(false); await leaveChannel(); @@ -716,6 +713,8 @@ export const VideoMeetingControllerComp = 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.meetingName")), new NameConfig("meetingName", trans("meeting.meetingName")), new NameConfig("messages", trans("meeting.meetingName")), ]); + diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index ee1d6657b..c605291e7 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -169,8 +169,8 @@ const typeOptions = [ export const meetingStreamChildren = { autoHeight: withDefault(AutoHeightControl, "fixed"), shareScreen: withDefault(BoolShareVideoControl, false), - profileImageHeight: withDefault(StringControl, "300px"), - profileImageWidth: withDefault(StringControl, "300px"), + profilePadding: withDefault(StringControl, "0px"), + profileBorderRadius: withDefault(StringControl, "0px"), type: dropdownControl(typeOptions, ""), onEvent: MeetingEventHandlerControl, disabled: BoolCodeControl, @@ -287,8 +287,6 @@ let VideoCompBuilder = (function (props) { } ); - console.log(userData); - setUserId(userData.user); setUsername(userData.userName); } @@ -319,9 +317,8 @@ let VideoCompBuilder = (function (props) { > @@ -332,9 +329,9 @@ let VideoCompBuilder = (function (props) { @@ -367,10 +364,12 @@ let VideoCompBuilder = (function (props) { label: trans("meeting.profileImageUrl"), placeholder: "https://via.placeholder.com/120", })} - {children.profileImageHeight.propertyView({ - label: "Profile Height", + {children.profilePadding.propertyView({ + label: "Profile Padding", + })} + {children.profileBorderRadius.propertyView({ + label: "Profile Border Radius", })} - {children.profileImageWidth.propertyView({ label: "Profile Width" })} {children.style.getPropertyView()} From 4010b73f9936ef5202114657ed68d68db7c359e2 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sat, 4 Nov 2023 09:08:36 +0100 Subject: [PATCH 16/20] Fixes flaws in documentation --- client/README.md | 84 ++++++++++++++++++++++++++++++++++++++++++++---- client/VERSION | 2 +- 2 files changed, 79 insertions(+), 7 deletions(-) diff --git a/client/README.md b/client/README.md index 0130a7c73..203f65d58 100644 --- a/client/README.md +++ b/client/README.md @@ -12,7 +12,7 @@ Simply run below command to start a backend server. docker run -d --name lowcoder -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" lowcoderorg/lowcoder-ce ``` -For more information, view our [docs](../docs/self-hosting) +For more information, view our [docs](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting) #### Build Docker image from source @@ -32,9 +32,23 @@ docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" ### Start develop 1. Check out source code. -2. Change to client dir in the repository root via cd client. -3. Run yarn to install dependencies: . -4. Start dev server: `LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start`. +2. Change to **/client** dir in the source dir. + +```bash +cd client +``` +3. Run yarn to install dependencies. + +```bash +yarn install +``` + +4. Start dev server: + +```bash +LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start +``` + 5. After dev server starts successfully, it will be automatically opened in the default browser. ### Before submitting a pull request @@ -42,5 +56,63 @@ docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" In addition, before submitting a pull request, please make sure the following is done: 1. If you’ve fixed a bug or added code that should be tested and add unit test suite. -2. Run `yarn test` and ensure all test suites pass. -3. If you add new dependency, use yarn workspace lowcoder some-package to make sure yarn.lock is also updated. +2. Run test and ensure all test suites pass. + +```bash +yarn test +``` + +3. If you add new dependency, use the yarn worspace tool to make sure yarn.lock is also updated. + +```bash +yarn workspace lowcoder +``` + +### Developing and publishung UI components for Lowcoder + +1. Initialization + +Project initiation + +```bash +yarn create Lowcoder-plugin +``` + +Go to the project root + +```bash +cd my-plugin +``` + +Start the development environment + +```bash +yarn start +``` + +After executing yarn start, the browser is automatically opened and you enter the component development environment. +Please find more information in our [docs](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/develop-ui-components-for-apps) + +2. Export components + +To export all the components, use src/index.ts, for example: + +```bash +import HelloWorldComp from "./HelloWorldComp"; + +export default { + hello_world: HelloWorldComp, +}; +``` + +import HelloWorldComp from "./HelloWorldComp"; + +3. Publish plugins + +When you finish developing and testing the plugin, you can publish it into the npm registry. Login in to the npm registry locally, and then execute the following command: + +```bash +yarn build --publish +``` + +You can check a code demo here: [Code Demo on Github](https://github.com/lowcoder-org/lowcoder/tree/main/client/packages/lowcoder-plugin-demo) \ No newline at end of file diff --git a/client/VERSION b/client/VERSION index db1527897..c346e7a04 100644 --- a/client/VERSION +++ b/client/VERSION @@ -1 +1 @@ -1.1.8 \ No newline at end of file +2.1.4 \ No newline at end of file From 7506d3349a97d879b8a30909bedac3d4c0a69661 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sat, 4 Nov 2023 09:23:46 +0100 Subject: [PATCH 17/20] outcommented Browsercheck in index.html --- client/packages/lowcoder/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html index 10f704aa1..2a45e2639 100644 --- a/client/packages/lowcoder/index.html +++ b/client/packages/lowcoder/index.html @@ -95,6 +95,6 @@
- <%- browserCheckScript %> + From 7d4efa591c4c3e2d08cbcb17e62e1ff12a360c72 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Sat, 4 Nov 2023 13:46:38 +0300 Subject: [PATCH 18/20] fixed image and video aspect ratio --- .../videoMeetingControllerComp.tsx | 1 - .../meetingComp/videoMeetingStreamComp.tsx | 113 ++++++++---------- 2 files changed, 49 insertions(+), 65 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx index 1c29036f7..13b6b86e1 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx @@ -717,4 +717,3 @@ export const VideoMeetingControllerComp = withExposingConfigs(MTComp, [ new NameConfig("meetingName", trans("meeting.meetingName")), new NameConfig("messages", trans("meeting.meetingName")), ]); - diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index c605291e7..ab1ce1461 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -33,9 +33,7 @@ import { client } from "./videoMeetingControllerComp"; import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng"; import { - ControlParams, MeetingEventHandlerControl, - SimpleComp, StringControl, StringStateControl, hiddenPropertyView, @@ -57,44 +55,15 @@ function getFormOptions(editorState: EditorState) { value: info.name, })); } -const Container = styled.div<{ $style: any }>` - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; -`; -const TextContainer = styled.div<{ $style: any }>` - height: 100%; - width: 100%; - display: flex; - align-items: center; - position: absolute; - justify-content: center; - ${(props) => props.$style && getStyle(props.$style)} -`; -const VideoContainer = styled.video<{ $style: any }>` +const VideoContainer = styled.video` height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; - ${(props) => props.$style && getStyle(props.$style)} `; -const getStyle = (style: any) => { - return css` - { - border: 1px solid ${style.border}; - border-radius: ${style.radius}; - margin: ${style.margin}; - padding: ${style.padding}; - background-color: ${style.background}; - } - `; -}; - function getForm(editorState: EditorState, formName: string) { const comp = editorState?.getUICompByName(formName); if (comp && comp.children.compType.getView() === "form") { @@ -192,23 +161,10 @@ let VideoCompBuilder = (function (props) { return new UICompBuilder(meetingStreamChildren, (props) => { const videoRef = useRef(null); const conRef = useRef(null); - const placeholderRef = useRef(null); const [userId, setUserId] = useState(); const [userName, setUsername] = useState(""); const [showVideo, setVideo] = useState(true); - useEffect(() => { - onResize(); - }, []); - - const onResize = async () => { - const container = conRef.current; - let videoCo = videoRef.current; - if (videoCo) { - videoCo!.style.height = container?.clientHeight + "px"; - videoCo!.style.width = container?.clientWidth + "px"; - } - }; useEffect(() => { if (props.userId.value !== "") { let userData = JSON.parse(props.userId?.value); @@ -289,55 +245,84 @@ let VideoCompBuilder = (function (props) { setUserId(userData.user); setUsername(userData.userName); + console.log(userData); } }, [props.userId.value]); return ( {(editorState) => ( - - + +
{userId ? ( - <> + showVideo ? ( props.onEvent("videoClicked")} ref={videoRef} - style={{ display: `${showVideo ? "flex" : "none"}` }} - $style={props.style} + style={{ + display: `${showVideo ? "flex" : "none"}`, + aspectRatio: "1 / 1", + borderRadius: props.style.radius, + width: "auto", + }} id={props.shareScreen ? "share-screen" : userId} > - props.onEvent("videoClicked")} - ref={placeholderRef} + ) : ( +
- {userName ?? "No Username"} - - +

{userName ?? ""}

+
+ ) ) : ( - +
- +

{userName ?? ""}

+
)} - +
)} From 5366cd48db06f31f16e594f98ebc7ae6bcba611f Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sat, 4 Nov 2023 17:09:08 +0100 Subject: [PATCH 19/20] Fix Editable Aspect Ratio --- .../meetingComp/videoMeetingStreamComp.tsx | 62 ++++++++++--------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx index ab1ce1461..2b22ede61 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx @@ -1,11 +1,11 @@ import { BoolCodeControl } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; -import { IconControl } from "comps/controls/iconControl"; +// import { IconControl } from "comps/controls/iconControl"; import { CompNameContext, EditorContext, EditorState } from "comps/editorState"; import { withDefault } from "comps/generators"; import { UICompBuilder } from "comps/generators/uiCompBuilder"; import ReactResizeDetector from "react-resize-detector"; -import _ from "lodash"; +// import _ from "lodash"; import { CommonBlueLabel, controlItem, @@ -61,7 +61,7 @@ const VideoContainer = styled.video` width: 100%; display: flex; align-items: center; - justify-content: center; + justify-content: space-around; `; function getForm(editorState: EditorState, formName: string) { @@ -140,13 +140,14 @@ export const meetingStreamChildren = { shareScreen: withDefault(BoolShareVideoControl, false), profilePadding: withDefault(StringControl, "0px"), profileBorderRadius: withDefault(StringControl, "0px"), + videoAspectRatio: withDefault(StringControl, "1 / 1"), type: dropdownControl(typeOptions, ""), onEvent: MeetingEventHandlerControl, disabled: BoolCodeControl, loading: BoolCodeControl, form: SelectFormControl, - prefixIcon: IconControl, - suffixIcon: IconControl, + // prefixIcon: IconControl, + // suffixIcon: IconControl, style: ButtonStyleControl, viewRef: RefControl, userId: stringExposingStateControl(""), @@ -169,12 +170,12 @@ let VideoCompBuilder = (function (props) { if (props.userId.value !== "") { let userData = JSON.parse(props.userId?.value); if ( - userData.user == userId && - userData.streamingVideo == false && + userData.user === userId && + userData.streamingVideo === false && videoRef.current && - videoRef.current?.id == userId + "" + videoRef.current?.id === userId + "" ) { - if (videoRef.current && videoRef.current?.id == userId + "") { + if (videoRef.current && videoRef.current?.id === userId + "") { videoRef.current.srcObject = null; setVideo(false); } @@ -189,8 +190,8 @@ let VideoCompBuilder = (function (props) { let userId = user.uid + ""; if ( user.hasVideo && - user.uid + "" != userData.user && - userData.user != "" + user.uid + "" !== userData.user && + userData.user !== "" ) { props.onEvent("videoOn"); } @@ -204,8 +205,8 @@ let VideoCompBuilder = (function (props) { const remoteTrack = await client.subscribe(user, mediaType); if ( user.hasAudio && - user.uid + "" != userData.user && - userData.user != "" + user.uid + "" !== userData.user && + userData.user !== "" ) { userData.audiostatus = user.hasVideo; @@ -221,21 +222,21 @@ let VideoCompBuilder = (function (props) { if (mediaType === "audio") { if ( !user.hasAudio && - user.uid + "" != userData.user && - userData.user != "" + user.uid + "" !== userData.user && + userData.user !== "" ) { userData.audiostatus = user.hasVideo; props.onEvent("audioMuted"); } } if (mediaType === "video") { - if (videoRef.current && videoRef.current?.id == user.uid + "") { + if (videoRef.current && videoRef.current?.id === user.uid + "") { videoRef.current.srcObject = null; } if ( !user.hasVideo && - user.uid + "" != userData.user && - userData.user != "" + user.uid + "" !== userData.user && + userData.user !== "" ) { props.onEvent("videoOff"); } @@ -245,7 +246,7 @@ let VideoCompBuilder = (function (props) { setUserId(userData.user); setUsername(userData.userName); - console.log(userData); + // console.log(userData); } }, [props.userId.value]); @@ -261,7 +262,7 @@ let VideoCompBuilder = (function (props) { height: "100%", overflow: "hidden", borderRadius: props.style.radius, - aspectRatio: "1 / 1", + aspectRatio: props.videoAspectRatio, backgroundColor: props.style.background, padding: props.style.padding, margin: props.style.margin, @@ -274,7 +275,7 @@ let VideoCompBuilder = (function (props) { ref={videoRef} style={{ display: `${showVideo ? "flex" : "none"}`, - aspectRatio: "1 / 1", + aspectRatio: props.videoAspectRatio, borderRadius: props.style.radius, width: "auto", }} @@ -290,7 +291,7 @@ let VideoCompBuilder = (function (props) { padding: props.profilePadding, }} > - -
@@ -345,15 +350,14 @@ let VideoCompBuilder = (function (props) { {hiddenPropertyView(children)}
- {children.profileImageUrl.propertyView({ - label: trans("meeting.profileImageUrl"), - placeholder: "https://via.placeholder.com/120", - })} {children.profilePadding.propertyView({ - label: "Profile Padding", + label: "Profile Image Padding", })} {children.profileBorderRadius.propertyView({ - label: "Profile Border Radius", + label: "Profile Image Border Radius", + })} + {children.videoAspectRatio.propertyView({ + label: "Video Aspect Ratio", })} {children.style.getPropertyView()}
From e985886792e23812906d817ebf34d23d1a1ee05d Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Sat, 4 Nov 2023 18:08:35 +0100 Subject: [PATCH 20/20] Fix Version Display --- .../src/main/resources/selfhost/ce/application.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/api-service/lowcoder-server/src/main/resources/selfhost/ce/application.yml b/server/api-service/lowcoder-server/src/main/resources/selfhost/ce/application.yml index ce0618058..31255c54b 100644 --- a/server/api-service/lowcoder-server/src/main/resources/selfhost/ce/application.yml +++ b/server/api-service/lowcoder-server/src/main/resources/selfhost/ce/application.yml @@ -37,7 +37,7 @@ common: domain: default-value: lowcoder.org cloud: false - version: 1.1.8 + version: 2.1.4 block-hound-enable: false js-executor: host: ${LOWCODER_NODE_SERVICE_URL:http://127.0.0.1:6060}