diff --git a/package.json b/package.json index e40f9f1..772406b 100755 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "videosdk-rtc-react-prebuilt-ui", - "version": "0.3.7", + "version": "0.3.8", "private": true, - "homepage": "https://embed.videosdk.live/rtc-js-prebuilt/0.3.7/", + "homepage": "https://embed.videosdk.live/rtc-js-prebuilt/0.3.8/", "dependencies": { "@material-ui/core": "^4.11.4", "@material-ui/icons": "^4.11.2", diff --git a/src/App.js b/src/App.js index 8c361b6..a302d30 100755 --- a/src/App.js +++ b/src/App.js @@ -72,6 +72,8 @@ const App = () => { participantCanLeave: "participantCanLeave", participantCanToggleOtherWebcam: "participantCanToggleOtherWebcam", participantCanToggleOtherMic: "participantCanToggleOtherMic", + partcipantCanToogleOtherScreenShare: + "partcipantCanToogleOtherScreenShare", participantCanToggleLivestream: "participantCanToggleLivestream", participantCanEndMeeting: "participantCanEndMeeting", // @@ -506,6 +508,8 @@ const App = () => { paramKeys.participantCanToggleOtherMic === "true", participantCanToggleOtherWebcam: paramKeys.participantCanToggleOtherWebcam === "true", + partcipantCanToogleOtherScreenShare: + paramKeys.partcipantCanToogleOtherScreenShare === "true", participantCanToggleLivestream: paramKeys.participantCanToggleLivestream === "true", notificationSoundEnabled: diff --git a/src/MeetingAppContextDef.js b/src/MeetingAppContextDef.js index 702ff7d..a3c0b49 100755 --- a/src/MeetingAppContextDef.js +++ b/src/MeetingAppContextDef.js @@ -81,6 +81,7 @@ export const MeetingAppProvider = ({ askJoin, participantCanToggleOtherMic, participantCanToggleOtherWebcam, + partcipantCanToogleOtherScreenShare, canRemoveOtherParticipant, notificationSoundEnabled, canPin, @@ -205,6 +206,7 @@ export const MeetingAppProvider = ({ askJoin, participantCanToggleOtherMic, participantCanToggleOtherWebcam, + partcipantCanToogleOtherScreenShare, canRemoveOtherParticipant, notificationSoundEnabled, canToggleWhiteboard, diff --git a/src/components/JoinScreen.js b/src/components/JoinScreen.js index 5f16ede..7a6f1df 100644 --- a/src/components/JoinScreen.js +++ b/src/components/JoinScreen.js @@ -444,8 +444,11 @@ export default function JoinMeeting({ style={{ display: "flex", flex: 1, - flexDirection: - meetingUrl === "" || meetingTitle === "" ? "row" : "column", + flexDirection: isXStoSM + ? "column" + : meetingUrl === "" || meetingTitle === "" + ? "row" + : "column", justifyContent: "center", alignItems: "center", }} @@ -456,7 +459,11 @@ export default function JoinMeeting({ style={{ display: "flex", flex: isSMOnly ? 0 : 1, - flexDirection: meetingUrl || meetingTitle ? "row" : "column", + flexDirection: isXStoSM + ? "column" + : meetingUrl || meetingTitle + ? "row" + : "column", alignItems: "center", justifyContent: "center", }} @@ -685,7 +692,7 @@ export default function JoinMeeting({ { const [reqMicInfo, setReqMicInfo] = useState(reqInfoDefaultState); const [reqWebcamInfo, setReqWebcamInfo] = useState(reqInfoDefaultState); + const [reqScreenShareInfo, setReqScreenShareInfo] = + useState(reqInfoDefaultState); const mMeetingRef = useRef(); @@ -42,11 +44,33 @@ const MediaRequested = () => { mMeetingRef.current = mMeeting; }, [mMeeting]); + usePubSub(`SCR_SHR_REQ_${mMeeting?.localParticipant.id}`, { + onMessageReceived: (data) => { + if (data.message.setScreenShareOn) { + setReqScreenShareInfo({ + enabled: true, + participantName: "Host", + accept: () => { + mMeeting?.toggleScreenShare(); + }, + reject: () => {}, + }); + } else { + mMeeting?.toggleScreenShare(); + } + }, + }); + return ( <> {[ { ...reqMicInfo, setter: setReqMicInfo, type: "mic" }, { ...reqWebcamInfo, setter: setReqWebcamInfo, type: "webcam" }, + { + ...reqScreenShareInfo, + setter: setReqScreenShareInfo, + type: "screenShare", + }, ].map(({ accept, enabled, participantName, setter, reject, type }, i) => { return ( { ); })} - - - + {excludeFirstFourElements.length >= 1 && ( + + + + )} { + return presenterId === participantId; + }, [presenterId, participantId]); + + const { publish } = usePubSub(`SCR_SHR_REQ_${participantId}`); + const [isParticipantKickoutVisible, setIsParticipantKickoutVisible] = useState(false); @@ -284,6 +298,41 @@ function ParticipantListItem({ )} + + + + { + publish({ setScreenShareOn: !isParticipantPresenting }); + }} + > + + {isParticipantPresenting ? ( + + ) : ( + + )} + + + + + {!isLocal && canRemoveOtherParticipant && (