Merge pull request #37 from videosdk-live/feature/screen-share-request

screen share request changes

Author: ChintanRajpara

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",

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:

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,

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({
             <Grid
               item
               xs={12}
-              md={meetingTitle || meetingUrl ? 5 : 6}
+              md={isXStoSM ? 5 : meetingTitle || meetingUrl ? 5 : 6}
               style={{
                 width: "100%",
                 display: "flex",

src/components/MediaRequested.js

@@ -1,4 +1,4 @@
-import { useMeeting } from "@videosdk.live/react-sdk";
+import { useMeeting, usePubSub } from "@videosdk.live/react-sdk";
 import React, { useEffect, useRef, useState } from "react";
 import ConfirmBox from "./ConfirmBox";
 
@@ -12,6 +12,8 @@ const MediaRequested = () => {
 
   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 (
           <ConfirmBox

src/meetingContainer/TopBar.js

@@ -1231,14 +1231,16 @@ const TopBar = ({ topBarHeight }) => {
         );
       })}
 
-      <Box ml={2}>
-        <OutlineIconButton
-          Icon={MoreHorizIcon}
-          // Icon={Boolean(anchorEl) ? CloseIcon : MoreHorizIcon}
-          // isFocused={anchorEl}
-          onClick={handleClickFAB}
-        />
-      </Box>
+      {excludeFirstFourElements.length >= 1 && (
+        <Box ml={2}>
+          <OutlineIconButton
+            Icon={MoreHorizIcon}
+            // Icon={Boolean(anchorEl) ? CloseIcon : MoreHorizIcon}
+            // isFocused={anchorEl}
+            onClick={handleClickFAB}
+          />
+        </Box>
+      )}
 
       <SwipeableDrawer
         anchor={"bottom"}

src/meetingContainer/sideViewContainer/ParticipantsTabPanel.js

@@ -1,4 +1,8 @@
-import { useMeeting, useParticipant } from "@videosdk.live/react-sdk";
+import {
+  useMeeting,
+  useParticipant,
+  usePubSub,
+} from "@videosdk.live/react-sdk";
 import {
   Close,
   MoreVert,
@@ -7,6 +11,8 @@ import {
   Mic as MicIcon,
   VideocamOff as VideocamOffIcon,
   Videocam as VideocamIcon,
+  ScreenShareOutlined,
+  ScreenShare,
 } from "@material-ui/icons";
 import {
   Avatar,
@@ -35,6 +41,7 @@ function ParticipantListItem({
   participantExpandedId,
   setParticipantExpandedId,
 }) {
+  const { presenterId } = useMeeting();
   const {
     participant,
     micOn,
@@ -53,11 +60,18 @@ function ParticipantListItem({
   const {
     participantCanToggleOtherMic,
     participantCanToggleOtherWebcam,
+    partcipantCanToogleOtherScreenShare,
     canRemoveOtherParticipant,
     canPin,
     animationsEnabled,
   } = useMeetingAppContext();
 
+  const isParticipantPresenting = useMemo(() => {
+    return presenterId === participantId;
+  }, [presenterId, participantId]);
+
+  const { publish } = usePubSub(`SCR_SHR_REQ_${participantId}`);
+
   const [isParticipantKickoutVisible, setIsParticipantKickoutVisible] =
     useState(false);
 
@@ -284,6 +298,41 @@ function ParticipantListItem({
                   </Tooltip>
                 </Box>
               )}
+
+              <Box ml={1} mr={0}>
+                <Tooltip title={`Screen share`}>
+                  <IconButton
+                    disabled={
+                      !(
+                        !isLocal &&
+                        partcipantCanToogleOtherScreenShare &&
+                        (presenterId ? isParticipantPresenting : true)
+                      )
+                    }
+                    style={{ padding: 0 }}
+                    onClick={() => {
+                      publish({ setScreenShareOn: !isParticipantPresenting });
+                    }}
+                  >
+                    <Box
+                      style={{
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        borderRadius: 100,
+                      }}
+                      p={0.5}
+                    >
+                      {isParticipantPresenting ? (
+                        <ScreenShare />
+                      ) : (
+                        <ScreenShareOutlined color="#ffffff80" />
+                      )}
+                    </Box>
+                  </IconButton>
+                </Tooltip>
+              </Box>
+
               {!isLocal && canRemoveOtherParticipant && (
                 <Box ml={1} mr={0}>
                   <Tooltip title={`Remove`}>