@agilemotion/oui-react-js 1.4.2 → 1.4.4

package/dist/components/media/Toolbar.js

@@ -11,8 +11,6 @@ require("./Toolbar.css");
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
 var _core = require("@material-ui/core");
@@ -29,6 +27,14 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
 var _Timer = _interopRequireDefault(require("./Timer"));
 
+var _VCEventType = require("./VCEventType");
+
+var _VCEventManager = _interopRequireDefault(require("./VCEventManager"));
+
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -36,30 +42,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /* eslint-disable react-hooks/exhaustive-deps */
-const config = {
-  eventHandlingConfig: {
-    subscriptions: [{
-      eventType: 'RAISE_HAND',
-      actions: [{
-        actionType: 'script',
-        script: {
-          lines: ['@#{this}.onRaiseHand($event.data)']
-        }
-      }]
-    }, {
-      eventType: 'LOWER_HAND',
-      actions: [{
-        actionType: 'script',
-        script: {
-          lines: ['@#{this}.onLowerHand($event.data)']
-        }
-      }]
-    }]
-  }
-};
-
 const Toolbar = props => {
-  const [numberOfHandsRaised, setNumberOfHandsRaised] = (0, _react.useState)(0);
   const [videoMuted, setVideoMuted] = (0, _react.useState)(props.videoMuted);
   const [audioMuted, setAudioMuted] = (0, _react.useState)(props.audioMuted);
   const [isRecording, setIsRecording] = (0, _react.useState)(false);
@@ -68,33 +51,7 @@ const Toolbar = props => {
   const openMoreActions = Boolean(anchorEl);
   const [screenShared, setScreenShared] = (0, _react.useState)(false);
   const [roomStatus, setRoomStatus] = (0, _react.useState)();
-  (0, _react.useEffect)(() => {
-    eventHandler.api = api();
-
-    let parsedConfig = _Utils.default.parseConfig(config, props.viewId);
-
-    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.eventHandler, props.viewId);
-
-    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
-
-    return () => {};
-  }, []);
-
-  const api = () => {
-    return {
-      get id() {
-        return 'meeting-toolbar';
-      },
-
-      onRaiseHand: be => {
-        onRaiseHand(be.payload);
-      },
-      onLowerHand: be => {
-        onLowerHand(be.payload);
-      }
-    };
-  };
-
+  const [raisedHandsNames, setRaisedHandsNames] = (0, _react.useState)([]);
   const {
     participants,
     hasUnreadChats,
@@ -105,7 +62,8 @@ const Toolbar = props => {
     isHost,
     someoneSharing,
     videoDisabled,
-    audioDisabled
+    audioDisabled,
+    raisedHands
   } = props;
   (0, _react.useEffect)(() => {
     setScreenShared(props.screenShared);
@@ -113,13 +71,24 @@ const Toolbar = props => {
   (0, _react.useEffect)(() => {
     setIsRecording(props.isRecording);
   }, [props.isRecording]);
+  (0, _react.useEffect)(() => {
+    setupRaisedHandsNames();
+  }, [raisedHands]);
 
-  const onRaiseHand = payload => {
-    setNumberOfHandsRaised(numberOfHandsRaised + 1);
-  };
+  const setupRaisedHandsNames = () => {
+    if (raisedHands.length === 0) {
+      setRaisedHandsNames([]);
+    } else {
+      let names = [];
+
+      for (const raisedHand of raisedHands) {
+        var _participants$find;
+
+        names.push((_participants$find = participants.find(p => p.userId === raisedHand)) === null || _participants$find === void 0 ? void 0 : _participants$find.name);
+      }
 
-  const onLowerHand = payload => {
-    setNumberOfHandsRaised(numberOfHandsRaised - 1);
+      setRaisedHandsNames(names);
+    }
   };
 
   const handleClick = event => {
@@ -162,9 +131,6 @@ const Toolbar = props => {
   (0, _react.useEffect)(() => {
     eventHandler.onMuteAudio(audioMuted);
   }, [audioMuted]);
-  (0, _react.useEffect)(() => {
-    eventHandler.api = api();
-  });
 
   const muteAudio = () => {
     setAudioMuted(prevStatus => !prevStatus);
@@ -173,12 +139,10 @@ const Toolbar = props => {
 
   const shareScreen = () => {
     eventHandler.shareScreen();
-    setScreenShared(true);
   };
 
   const stopShareScreen = () => {
     eventHandler.stopShareScreen();
-    setScreenShared(false);
   };
 
   const endCall = () => {
@@ -197,7 +161,8 @@ const Toolbar = props => {
     eventHandler.showChat();
   };
 
-  const raiseHand = () => {//eventHandler.raiseHand();
+  const raiseHand = () => {
+    eventHandler.raiseHand();
   };
 
   const lowerHand = () => {
@@ -213,13 +178,24 @@ const Toolbar = props => {
     eventHandler.toggleAutoPermit();
   };
 
+  const renderRaisedHandsToolTip = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        textAlign: 'center',
+        fontSize: '14px'
+      }
+    }, raisedHandsNames.map(name => {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, name, /*#__PURE__*/_react.default.createElement("br", null));
+    }));
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%'
     },
     className: 'centered-flex-box vc-toolbar'
   }, roomStatus === 'SESSION_ENDED' ? /*#__PURE__*/_react.default.createElement("div", {
-    className: 'row centered-flex-box'
+    className: 'row centered-flex-box button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Close"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -242,15 +218,20 @@ const Toolbar = props => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '120px'
-    }
+    },
+    className: 'timer'
   }, /*#__PURE__*/_react.default.createElement(_Timer.default, null)), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'right',
       width: 'calc(100% - 120px)'
     },
-    className: 'col'
-  }, isHost && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    className: 'col button-container'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row no-margin no-padding'
+  }, isHost && roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Record"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => {
@@ -272,7 +253,9 @@ const Toolbar = props => {
     id: 'RECORD'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, isRecording ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Recording") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Record"))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  }, isRecording ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Recording") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Record")))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Video"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => {
@@ -294,7 +277,9 @@ const Toolbar = props => {
     id: 'CAMERA'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "Camera")))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  }, "Camera"))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Audio"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => {
@@ -316,7 +301,9 @@ const Toolbar = props => {
     id: 'MIC'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "Mic")))), ' ', roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && (!someoneSharing || screenShared) && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  }, "Mic"))))), ' ', roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Share"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => {
@@ -351,7 +338,9 @@ const Toolbar = props => {
     style: {
       marginRight: '8px'
     }
-  }, "Share screen")))))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  }, "Share screen"))))))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Chat"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     style: {
@@ -371,11 +360,13 @@ const Toolbar = props => {
     id: 'CHAT_BUBBLE'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "Chat")))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Chat"))))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'centered-flex-box'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
-  }, participants.length), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  }, participants.length), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "People"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: e => showPeople(),
@@ -395,10 +386,12 @@ const Toolbar = props => {
     className: 'text'
   }, "People")))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'centered-flex-box'
-  }, numberOfHandsRaised > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, raisedHands.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
-  }, numberOfHandsRaised), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: "Raise hand"
+  }, raisedHands.length), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: raisedHands.length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, renderRaisedHandsToolTip()) : handRaised ? 'Lower hand' : 'Raise hand'
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: e => {
       if (handRaised) {
@@ -421,7 +414,9 @@ const Toolbar = props => {
     id: 'PAN_TOOL'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, handRaised ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Lower") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Raise"))))))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  }, handRaised ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Lower") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Raise"))))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding hang-up'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Hang up"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: endCall,
@@ -430,7 +425,8 @@ const Toolbar = props => {
       color: 'white',
       marginRight: '4px',
       minWidth: '120px',
-      width: '120px'
+      width: '120px',
+      height: '60px'
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
     style: {
@@ -439,7 +435,7 @@ const Toolbar = props => {
     }
   }, "Hang up"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CALL_END'
-  }))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+  }))))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
     anchorEl: anchorEl,
     id: "account-menu",
     open: openMoreActions,
@@ -487,7 +483,7 @@ const Toolbar = props => {
     onClick: toggleAutoPermit
   }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_icons.PersonAdd, {
     fontSize: "small"
-  })), autoPermit ? 'Disable auto permit [Auto permit is currently on]' : 'Enable auto permit [Auto permit is currently off]')), ";");
+  })), autoPermit ? 'Disable auto permit [Auto permit is currently on]' : 'Enable auto permit [Auto permit is currently off]')));
 };
 
 var _default = Toolbar;

package/dist/components/media/TrainingRoom.js

@@ -88,6 +88,10 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
 
   const [screenShared, setScreenShared] = _react.default.useState(null);
 
+  const [startScreenSharing, setStartScreenSharing] = _react.default.useState(false);
+
+  const [raisedHands, setRaisedHands] = (0, _react.useState)([]);
+
   const handler = () => {
     return {
       get id() {
@@ -116,13 +120,42 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
             break;
 
           case _VCEventType.VCEventType.SYSTEM_EVENT:
-            alert(_VCEventType.VCEventType.SYSTEM_EVENT);
+            break;
+
+          case _VCEventType.VCEventType.RAISE_HAND:
+            onRaiseHand(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.LOWER_HAND:
+            onLowerHand(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.SHARING_STOPPED:
+            setScreenShared(false);
+            setStartScreenSharing(false);
             break;
         }
       }
     };
   };
 
+  const onRaiseHand = payload => {
+    raisedHands.push(payload.userId);
+    setRaisedHands([].concat(raisedHands));
+  };
+
+  const onLowerHand = payload => {
+    if (raisedHands.length > 0) {
+      let index = raisedHands.findIndex(p => p.userId === payload.userId);
+
+      if (index > -1) {
+        raisedHands.splice(index, 1);
+      }
+    }
+
+    setRaisedHands([].concat(raisedHands));
+  };
+
   const fetchChats = () => {
     (0, _RestUtils.sendRequest)("".concat(location, "/api/v1/chat/fetchMeetingChat/").concat(props.calendarEvent.id), response => {
       if (response && response.id) {
@@ -234,6 +267,21 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       setVideoMuted(!props.settings.videoOn);
     }
   }, [props.settings]);
+  (0, _react.useEffect)(() => {
+    if (!_Utils.default.isNull(handRaised)) {
+      if (handRaised) {
+        _SocketManager.default.emitEvent(_VCEventType.VCEventType.RAISE_HAND, {
+          roomId: props.calendarEvent.id,
+          userId: sessionStorage.getItem('username')
+        }).catch(error => {});
+      } else {
+        _SocketManager.default.emitEvent(_VCEventType.VCEventType.LOWER_HAND, {
+          roomId: props.calendarEvent.id,
+          userId: sessionStorage.getItem('username')
+        }).catch(error => {});
+      }
+    }
+  }, [handRaised]);
   (0, _react.useEffect)(() => {
     _VCEventManager.default.removeSubscriptions(eventHandler);
 
@@ -253,7 +301,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       setDisplayState(initialContext ? initialContext.windowDisplayState : 'MAXIMIZED');
     });
 
-    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING, _VCEventType.VCEventType.USER_JOINED, _VCEventType.VCEventType.USER_LEFT_MEETING, _VCEventType.VCEventType.SYSTEM_EVENT, _VCEventType.VCEventType.SOCKET_CONNECT, _VCEventType.VCEventType.SOCKET_DISCONNECT, _VCEventType.VCEventType.PEER_DISCONNECT, _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED, _VCEventType.VCEventType.CREATE_TRANSPORT_FAILED);
+    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING, _VCEventType.VCEventType.USER_JOINED, _VCEventType.VCEventType.USER_LEFT_MEETING, _VCEventType.VCEventType.SYSTEM_EVENT, _VCEventType.VCEventType.SOCKET_CONNECT, _VCEventType.VCEventType.SOCKET_DISCONNECT, _VCEventType.VCEventType.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.PEER_DISCONNECT, _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED, _VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, _VCEventType.VCEventType.SHARING_STOPPED);
 
     document.addEventListener('sideBarToggleEvent', handleSidebarToggle);
 
@@ -282,6 +330,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     if (props.calendarEvent.host.username === sessionStorage.getItem('username')) {
       userFullName = props.calendarEvent.host.name;
     } else {
+      console.log("\n\n\n\nATTENDEEES : ", sessionStorage.getItem('username'));
       userFullName = props.calendarEvent.attendees.find(a => a.username === sessionStorage.getItem('username')).name;
     }
 
@@ -296,7 +345,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
         setOnloadScreenShareData(response.shareScreenProducerData);
         setRoomStatus(participants.length > 0 ? Status.SESSION : Status.LOBBY);
       }).catch(e => {
-        setRoomStatus(e.message);
+        setRoomStatus(Status.SYSTEM_ERROR);
       });
     } catch (e) {
       setRoomStatus(Status.SYSTEM_ERROR);
@@ -369,7 +418,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
 
     if (!toParticipantIds) {
       for (const participant of participants) {
-        if (participant.userId !== sessionStorage.getItem("username")) {
+        if (participant.userId !== sessionStorage.getItem('username')) {
           participantIds.push(participant.userId);
         }
       }
@@ -388,9 +437,9 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     _VCRoomRecorder.default.init(props.calendarEvent.id, props.calendarEvent.title);
 
     setIsRecording(true);
-    emitSystemEvent("MEETING_RECORDING", {
+    emitSystemEvent('MEETING_RECORDING', {
       recording: true,
-      userId: sessionStorage.getItem("username")
+      userId: sessionStorage.getItem('username')
     });
 
     _VCRoomRecorder.default.recordMeeting();
@@ -400,9 +449,9 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     setIsRecording(false);
 
     if (publish) {
-      emitSystemEvent("MEETING_RECORDING", {
+      emitSystemEvent('MEETING_RECORDING', {
         recording: false,
-        userId: sessionStorage.getItem("username")
+        userId: sessionStorage.getItem('username')
       });
     }
 
@@ -419,7 +468,10 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'row no-margin no-padding w-100 h-100'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col no-margin no-padding'
+    className: 'col no-margin no-padding',
+    style: {
+      minWidth: '280px'
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'row no-margin no-padding w-100 h-100'
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -446,16 +498,23 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
         setSideBarOpen(true);
       },
       shareScreen: () => {
-        setScreenShared(true);
+        setStartScreenSharing(true);
       },
       stopShareScreen: () => {
         setScreenShared(false);
+        setStartScreenSharing(false);
       },
       recordMeeting: () => {
         recordMeeting();
       },
       stopRecording: () => {
         stopRecordingMeeting();
+      },
+      raiseHand: () => {
+        setHandRaised(true);
+      },
+      lowerHand: () => {
+        setHandRaised(false);
       }
     },
     hasUnreadChats: hasUnreadChats,
@@ -471,7 +530,9 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     isHost: props.calendarEvent.host.username === sessionStorage.getItem('username'),
     autoPermit: !props.calendarEvent.host.askToJoin,
     someoneSharing: someoneSharing,
-    isRecording: isRecording
+    isRecording: isRecording,
+    raisedHands: raisedHands,
+    meetingId: props.calendarEvent.id
   })), roomStatus === Status.SYSTEM_ERROR && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       color: 'rgb(235, 63, 33)',
@@ -501,10 +562,19 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     onGridSetup: () => {
       setSideBarTab('People');
     },
+    sideBarTab: sideBarTab,
     roomStatus: roomStatus,
     isHost: isHost,
+    startScreenSharing: startScreenSharing,
     sharingHandler: someoneSharing => setSomeoneSharing(someoneSharing),
-    onStopSharing: () => setScreenShared(false),
+    onStopSharing: () => {
+      setScreenShared(false);
+      setStartScreenSharing(false);
+    },
+    onStartSharing: () => {
+      setScreenShared(true);
+      setStartScreenSharing(false);
+    },
     autoPermit: autoPermit,
     rtpCapabilities: rtpCapabilities,
     screenShared: screenShared,

package/dist/components/media/VCEventType.js

@@ -161,4 +161,8 @@ _defineProperty(VCEventType, "REQUEST_TO_JOIN_MEETING_ANSWERED", "REQUEST_TO_JOI
 
 _defineProperty(VCEventType, "PEER_DISCONNECT", "PEER_DISCONNECT");
 
-_defineProperty(VCEventType, "CONSUMER_CLOSED", "CONSUMER_CLOSED");
+_defineProperty(VCEventType, "CONSUMER_CLOSED", "CONSUMER_CLOSED");
+
+_defineProperty(VCEventType, "CANCEL_SCREEN_SHARE", "CANCEL_SCREEN_SHARE");
+
+_defineProperty(VCEventType, "SHARING_STOPPED", "SHARING_STOPPED");

package/dist/components/media/VCRoomParticipant.css

@@ -1,13 +1,20 @@
-.meeting-participant-container {
+.meeting-participant-container,
+.meeting-participant-container-current-user {
   display: inline-block;
   text-align: center;
   width: 100%;
   height: 100%;
-  max-height: 100%;
+  min-width: 120px;
+  min-height: 120px;
   color: rgb(40, 40, 43);
   background-color: #f9f9f9;
 }
 
+.meeting-participant-container-current-user {
+  min-width: 150px;
+  min-height: 150px;
+}
+
 .avatar-wrapper,
 .avatar-wrapper-sm {
   font-size: 36px;

package/dist/components/media/VCRoomParticipant.js

@@ -587,13 +587,11 @@ const VCRoomParticipant = props => {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col-*-* meeting-participant-container',
+    className: "".concat('col-*-* ' + (props.isCurrentUser ? 'meeting-participant-container-current-user' : 'meeting-participant-container')),
     style: {
       padding: props.padding ? props.padding : null,
       height: props.height ? props.height : null,
-      position: 'relative',
-      minWidth: '150px',
-      minHeight: '150px'
+      position: 'relative'
     }
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (videoMuted || !videoRef.current || !videoRef.current.srcObject) && /*#__PURE__*/_react.default.createElement("div", {
     className: 'centered-flex-box',

package/dist/components/media/VCRoomWorkspace.css

@@ -6,6 +6,20 @@
   width: 100%;
 }
 
+.window-pinned .strip-participants {
+  display: none;
+}
+
+.window-pinned .content-box {
+  align-items: flex-start;
+  max-height: 80%;
+}
+
+.window-pinned .people-content-list {
+  max-height: 400px;
+  padding: 16px 0;
+}
+
 .share-screen-video {
   height: 100%;
   width: 100%;