@agilemotion/oui-react-js 1.3.9 → 1.4.0

package/dist/components/media/Toolbar.js

@@ -75,7 +75,7 @@ const Toolbar = props => {
 
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.eventHandler, props.viewId);
 
-    _Observable.default.addSystemSubscriptions(parsedConfig);
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
 
     return () => {};
   }, []);
@@ -98,7 +98,6 @@ const Toolbar = props => {
   const {
     participants,
     hasUnreadChats,
-    hasUnseenWhiteboardEvent,
     whiteBoardShown,
     displayState,
     eventHandler,
@@ -173,11 +172,13 @@ const Toolbar = props => {
   };
 
   const shareScreen = () => {
-    eventHandler.shareScreen(); //setScreenShared(true);
+    eventHandler.shareScreen();
+    setScreenShared(true);
   };
 
   const stopShareScreen = () => {
-    eventHandler.stopShareScreen(); //setScreenShared(false);
+    eventHandler.stopShareScreen();
+    setScreenShared(false);
   };
 
   const endCall = () => {
@@ -196,8 +197,7 @@ const Toolbar = props => {
     eventHandler.showChat();
   };
 
-  const raiseHand = () => {
-    eventHandler.raiseHand();
+  const raiseHand = () => {//eventHandler.raiseHand();
   };
 
   const lowerHand = () => {
@@ -217,7 +217,7 @@ const Toolbar = props => {
     style: {
       width: '100%'
     },
-    className: 'centered-flex-box'
+    className: 'centered-flex-box vc-toolbar'
   }, roomStatus === 'SESSION_ENDED' ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'row centered-flex-box'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -257,18 +257,22 @@ const Toolbar = props => {
       toggleRecorder();
     },
     style: {
-      color: isRecording ? 'white' : '#404239',
+      color: '#404239',
       marginRight: '4px'
     }
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginRight: '8px'
+      height: '100%'
     }
-  }, "Record"), isRecording ? /*#__PURE__*/_react.default.createElement(_LottieIcon.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, isRecording ? /*#__PURE__*/_react.default.createElement(_LottieIcon.default, {
     id: 'recording'
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'RECORD'
-  }))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  })), /*#__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, {
     title: "Video"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => {
@@ -278,15 +282,19 @@ const Toolbar = props => {
       color: videoMuted ? '#eb3f21' : '#404239',
       marginRight: '4px'
     }
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginRight: '8px'
+      height: '100%'
     }
-  }, "Camera"), videoMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, videoMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CAMERA_OFF'
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CAMERA'
-  }))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'text'
+  }, "Camera")))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Audio"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => {
@@ -296,15 +304,19 @@ const Toolbar = props => {
       color: audioMuted ? '#eb3f21' : '#404239',
       marginRight: '4px'
     }
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginRight: '8px'
+      height: '100%'
     }
-  }, "Mic"), audioMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, audioMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MIC_OFF'
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MIC'
-  }))), ' ', roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && (!someoneSharing || screenShared) && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'text'
+  }, "Mic")))), ' ', roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && (!someoneSharing || screenShared) && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Share"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => {
@@ -316,17 +328,30 @@ const Toolbar = props => {
     },
     style: {
       color: screenShared ? '#8eb2f5' : '#404239',
-      marginRight: '4px'
+      marginRight: '4px',
+      minWidth: '104px'
     }
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginRight: '8px'
+      height: '100%'
     }
-  }, "Share screen"), screenShared ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, screenShared ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CANCEL_PRESENTATION'
-  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'PRESENT_TO_ALL'
-  }))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'text'
+  }, screenShared ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Stop sharing")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Share screen")))))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Chat"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     style: {
@@ -336,13 +361,17 @@ const Toolbar = props => {
     onClick: e => showChat()
   }, hasUnreadChats && /*#__PURE__*/_react.default.createElement("div", {
     className: 'unread-dot'
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginRight: '8px'
+      height: '100%'
     }
-  }, "Chat"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CHAT_BUBBLE'
-  }))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'text'
+  }, "Chat")))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'centered-flex-box'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
@@ -354,13 +383,17 @@ const Toolbar = props => {
       color: '#404239',
       marginRight: '4px'
     }
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginRight: '8px'
+      height: '100%'
     }
-  }, "People"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'PEOPLE'
-  }))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'text'
+  }, "People")))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'centered-flex-box'
   }, numberOfHandsRaised > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
@@ -378,40 +411,31 @@ const Toolbar = props => {
       color: handRaised ? '#e2b030' : '#404239',
       marginRight: '4px'
     }
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      marginRight: '8px'
-    }
-  }, "Raise"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: 'PAN_TOOL'
-  }))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: "More Actions"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: handleClick,
-    sx: {
-      ml: 2
-    },
-    "aria-controls": openMoreActions ? 'account-menu' : undefined,
-    "aria-haspopup": "true",
-    "aria-expanded": openMoreActions ? 'true' : undefined,
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      color: '#404239',
-      marginRight: '4px'
+      height: '100%'
     }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: 'MORE'
-  }))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    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, {
     title: "Hang up"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: endCall,
     style: {
       backgroundColor: '#eb3f21',
       color: 'white',
-      marginRight: '4px'
+      marginRight: '4px',
+      minWidth: '120px',
+      width: '120px'
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
     style: {
-      marginRight: '8px'
+      marginRight: '8px',
+      fontSize: '12px'
     }
   }, "Hang up"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CALL_END'

package/dist/components/media/TrainingRoom.js

@@ -13,12 +13,10 @@ require("./Video.css");
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 
-var _Media = _interopRequireDefault(require("../../js/Media"));
-
 var _VCRoom = require("./VCRoom");
 
 var _VCRoomWorkspace = _interopRequireDefault(require("./VCRoomWorkspace"));
@@ -35,8 +33,14 @@ var _ClosablePanel = _interopRequireDefault(require("./ClosablePanel"));
 
 var _SideBarContent = _interopRequireDefault(require("./SideBarContent"));
 
+var _VCRoomRecorder = _interopRequireDefault(require("./VCRoomRecorder"));
+
 var _RestUtils = require("../../RestUtils");
 
+var _Media = _interopRequireDefault(require("../../js/Media"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
 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; }
@@ -59,12 +63,11 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
   const [participants, setParticipants] = (0, _react.useState)([]);
   const [handRaised, setHandRaised] = (0, _react.useState)(false);
   const [isRecording, setIsRecording] = (0, _react.useState)(false);
-  const [screenShared, setScreenShared] = (0, _react.useState)(null);
   const [videoDisabled] = (0, _react.useState)(props.videoDisabled);
   const [audioDisabled, setAudioDisabled] = (0, _react.useState)(props.audioDisabled);
   const [videoMuted, setVideoMuted] = (0, _react.useState)(true);
   const [audioMuted, setAudioMuted] = (0, _react.useState)(true);
-  const [displayState, setDisplayState] = (0, _react.useState)('MAXIMIZED');
+  const [displayState, setDisplayState] = (0, _react.useState)(null);
   const [roomStatus, setRoomStatus] = (0, _react.useState)(null);
   const [someoneSharing, setSomeoneSharing] = (0, _react.useState)(null);
   const [sideBarOpen, setSideBarOpen] = (0, _react.useState)(false);
@@ -82,7 +85,8 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
   const [currentUserFullName, setCurrentUserFullName] = (0, _react.useState)(null);
   const [eventHandler] = (0, _react.useState)({});
   const [meetingChat, setMeetingChat] = (0, _react.useState)(null);
-  const shareScreenSource = (0, _react.useRef)();
+
+  const [screenShared, setScreenShared] = _react.default.useState(null);
 
   const handler = () => {
     return {
@@ -233,27 +237,45 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
   (0, _react.useEffect)(() => {
     _VCEventManager.default.removeSubscriptions(eventHandler);
 
+    _ApplicationManager.default.addApplicationContextSubscription({
+      handler: {
+        get id() {
+          return 'training-room';
+        },
+
+        onContextChange: (context, newValues) => {
+          if (Object.keys(newValues).find(key => key === 'windowDisplayState')) {
+            setDisplayState(newValues.windowDisplayState);
+          }
+        }
+      }
+    }).then(initialContext => {
+      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);
 
     document.addEventListener('sideBarToggleEvent', handleSidebarToggle);
 
-    _ApplicationContext.default.setHasActiveMeeting(true);
+    _ApplicationManager.default.setHasActiveMeeting(true);
 
     return () => {
       _VCEventManager.default.removeSubscriptions(eventHandler);
 
+      _Observable.default.removeApplicationContextSubscriptions('training-room');
+
       document.removeEventListener('sideBarToggleEvent', handleSidebarToggle);
 
-      if (_ApplicationContext.default.hasActiveMeeting()) {
+      if (_ApplicationManager.default.hasActiveMeeting()) {
         _SocketManager.default.leaveMeeting(props.calendarEvent.id);
 
-        _ApplicationContext.default.setHasActiveMeeting(false);
+        _ApplicationManager.default.setHasActiveMeeting(false);
       }
     };
   }, []);
 
   _react.default.useEffect(() => {
-    _ApplicationContext.default.setHasActiveMeeting(true);
+    _ApplicationManager.default.setHasActiveMeeting(true);
 
     let userFullName;
 
@@ -281,7 +303,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     }
 
     return () => {
-      _ApplicationContext.default.setHasActiveMeeting(false);
+      _ApplicationManager.default.setHasActiveMeeting(false);
     };
   }, []);
 
@@ -334,14 +356,59 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
   const hangUp = () => {
     _SocketManager.default.leaveMeeting(props.calendarEvent.id);
 
-    _ApplicationContext.default.setHasActiveMeeting(false);
+    _ApplicationManager.default.setHasActiveMeeting(false);
 
-    _ApplicationContext.default.removeLoadedGraph(true);
+    _ApplicationManager.default.removeLoadedGraph(false);
 
     setSideBarOpen(false);
     setSideBarTab('');
   };
 
+  const emitSystemEvent = (eventType, data, toParticipantIds = null) => {
+    let participantIds = [];
+
+    if (!toParticipantIds) {
+      for (const participant of participants) {
+        if (participant.userId !== sessionStorage.getItem("username")) {
+          participantIds.push(participant.userId);
+        }
+      }
+    } else {
+      participantIds = participantIds.concat(toParticipantIds);
+    }
+
+    _SocketManager.default.emitEvent(_VCEventType.VCEventType.SYSTEM_EVENT, {
+      systemEventType: eventType,
+      recipients: participantIds,
+      data: data
+    }).catch(error => {});
+  };
+
+  const recordMeeting = () => {
+    _VCRoomRecorder.default.init(props.calendarEvent.id, props.calendarEvent.title);
+
+    setIsRecording(true);
+    emitSystemEvent("MEETING_RECORDING", {
+      recording: true,
+      userId: sessionStorage.getItem("username")
+    });
+
+    _VCRoomRecorder.default.recordMeeting();
+  };
+
+  const stopRecordingMeeting = (publish = true) => {
+    setIsRecording(false);
+
+    if (publish) {
+      emitSystemEvent("MEETING_RECORDING", {
+        recording: false,
+        userId: sessionStorage.getItem("username")
+      });
+    }
+
+    _VCRoomRecorder.default.stopRecordingMeeting();
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',
@@ -352,10 +419,7 @@ 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',
-    style: {
-      display: displayState === 'MAXIMIZED' ? 'inherit' : 'none'
-    }
+    className: 'col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'row no-margin no-padding w-100 h-100'
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -380,6 +444,18 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       showPeople: () => {
         setSideBarTab('People');
         setSideBarOpen(true);
+      },
+      shareScreen: () => {
+        setScreenShared(true);
+      },
+      stopShareScreen: () => {
+        setScreenShared(false);
+      },
+      recordMeeting: () => {
+        recordMeeting();
+      },
+      stopRecording: () => {
+        stopRecordingMeeting();
       }
     },
     hasUnreadChats: hasUnreadChats,
@@ -390,11 +466,11 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     videoMuted: videoMuted,
     audioMuted: audioMuted,
     displayState: displayState,
+    screenShared: screenShared,
     roomStatus: roomStatus,
     isHost: props.calendarEvent.host.username === sessionStorage.getItem('username'),
     autoPermit: !props.calendarEvent.host.askToJoin,
     someoneSharing: someoneSharing,
-    screenShared: screenShared,
     isRecording: isRecording
   })), roomStatus === Status.SYSTEM_ERROR && /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -420,7 +496,6 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     audioMuted: audioMuted,
     videoMuted: videoMuted,
     meetingTitle: props.calendarEvent.title,
-    shareScreenSource: shareScreenSource.current,
     meetingId: props.calendarEvent.id,
     currentUserFullName: currentUserFullName,
     onGridSetup: () => {
@@ -428,10 +503,12 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     },
     roomStatus: roomStatus,
     isHost: isHost,
-    screenShared: screenShared,
     sharingHandler: someoneSharing => setSomeoneSharing(someoneSharing),
+    onStopSharing: () => setScreenShared(false),
     autoPermit: autoPermit,
     rtpCapabilities: rtpCapabilities,
+    screenShared: screenShared,
+    displayState: displayState,
     onloadScreenShareData: onloadScreenShareData,
     allUserParticipantsLeft: allUserParticipantsLeft,
     onAudioDeviceChange: device => {

package/dist/components/media/VCRoom.js

@@ -44,7 +44,7 @@ const VCRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
 
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
 
-    _Observable.default.addSystemSubscriptions(parsedConfig);
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
   }, []);
 
   const api = () => {

package/dist/components/media/VCRoomParticipant.js

@@ -35,7 +35,7 @@ var _SocketManager = _interopRequireDefault(require("../SocketManager"));
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
-var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -77,7 +77,7 @@ const VIDEO_ENCODINGS = [{
   scalabilityMode: 'S1T3'
 }];
 exports.VIDEO_ENCODINGS = VIDEO_ENCODINGS;
-const location = window.location.protocol + "//" + window.location.hostname;
+const location = window.location.protocol + '//' + window.location.hostname;
 
 const VCRoomParticipant = props => {
   const [handRaised, setHandRaised] = _react.default.useState(false);
@@ -237,7 +237,7 @@ const VCRoomParticipant = props => {
 
   (0, _react.useEffect)(() => {
     if (props.data && !_Utils.default.isNull(props.data.avatarId) && props.data.avatarId !== 'undefined' && props.data.avatarId !== 'null') {
-      setDownloadUrl(location + _ApplicationContext.default.getContextRoot() + '/docs/api/v1/manager/download/' + props.data.avatarId + '?access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"));
+      setDownloadUrl(location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/download/' + props.data.avatarId + '?access_token=' + sessionStorage.getItem('accessToken') + '&idToken=' + sessionStorage.getItem('idToken'));
     }
   }, [props.data]);
   (0, _react.useEffect)(() => {
@@ -280,7 +280,7 @@ const VCRoomParticipant = props => {
   }, [selectedAudioDevice]);
   (0, _react.useEffect)(() => {
     if (consumerTransport) {
-      console.log("TRANSI ARRIVED WITH PRODUCERS : ", props.data.producers);
+      console.log('TRANSI ARRIVED WITH PRODUCERS : ', props.data.producers);
 
       if (props.data.producers) {
         onNewProducers(props.data.producers, true);
@@ -290,15 +290,15 @@ const VCRoomParticipant = props => {
       failedProducersDueToNullTransport.splice(0, failedProducersDueToNullTransport.length);
 
       if (producers) {
-        console.log("RE-INSTATING CONSUMERS");
+        console.log('RE-INSTATING CONSUMERS');
 
         for (let [key, value] of producers) {
-          console.log("PROCESSING PRODUCER OF TYPE : " + key + " : " + value.id);
+          console.log('PROCESSING PRODUCER OF TYPE : ' + key + ' : ' + value.id);
 
           if (!(props.data.producers && (void 0).props.data.producers.find(p => p.producerId === value.id))) {
             consume(value.id, key, true, value.userId);
           } else {
-            console.log("PRODUCER ALREADY PROCESSED");
+            console.log('PRODUCER ALREADY PROCESSED');
           }
         }
       }
@@ -306,7 +306,7 @@ const VCRoomParticipant = props => {
   }, [consumerTransport]);
 
   const createProducerTransport = async () => {
-    setProducerTransport(await _MediaSoupHelper.default.initProducerTransport(props.device, props.meetingId, sessionStorage.getItem("username")));
+    setProducerTransport(await _MediaSoupHelper.default.initProducerTransport(props.device, props.meetingId, sessionStorage.getItem('username')));
   };
 
   const handleDevicesChanged = devices => {
@@ -346,7 +346,7 @@ const VCRoomParticipant = props => {
     }
 
     return () => {
-      console.log("======================DESTROYING PARTICIPANT========================= : " + props.data.userId);
+      console.log('======================DESTROYING PARTICIPANT========================= : ' + props.data.userId);
 
       if (props.isCurrentUser) {
         stopProducing('audio');
@@ -468,13 +468,13 @@ const VCRoomParticipant = props => {
       callback();
     }
 
-    console.log("CLOSING PRODUCER OF ID : " + producerId);
+    console.log('CLOSING PRODUCER OF ID : ' + producerId);
 
     _SocketManager.default.emitEvent(_VCEventType.VCEventType.PRODUCER_CLOSED, {
       userId: props.data.userId,
       producerId,
       roomId: props.meetingId
-    }).then(data => {}).catch(e => console.log("PRODUCER_CLOSED ERROR : ", e));
+    }).then(data => {}).catch(e => console.log('PRODUCER_CLOSED ERROR : ', e));
   };
 
   const onNewProducers = (producers, loading = false) => {
@@ -482,7 +482,7 @@ const VCRoomParticipant = props => {
       if (consumerTransport) {
         if (producer.userId === props.data.userId) {
           if (producer.kind === 'video' && !producer.screenSharing) {
-            console.log("CALLING CONSUME FROM ON NEW PRODUCERS FOR : " + props.data.userId + " - " + producer.producerId);
+            console.log('CALLING CONSUME FROM ON NEW PRODUCERS FOR : ' + props.data.userId + ' - ' + producer.producerId);
             consume(producer.producerId, producer.kind, loading, producer.userId);
           }
         }
@@ -533,14 +533,14 @@ const VCRoomParticipant = props => {
   };
 
   const consume = async (producerId, kind, loading, userId) => {
-    _MediaSoupHelper.default.getConsumeStream(producerId, device.rtpCapabilities, consumerTransport, props.meetingId, sessionStorage.getItem("username"), kind).then(({
+    _MediaSoupHelper.default.getConsumeStream(producerId, device.rtpCapabilities, consumerTransport, props.meetingId, sessionStorage.getItem('username'), kind).then(({
       consumer,
       stream,
       kind
     }) => {
       if (consumer) {
         consumers.set(consumer.id, consumer);
-        console.log("\n\n\n=====================================CONSUME===================================== : " + kind + " FOR : " + userId);
+        console.log('=====================================CONSUME===================================== : ' + kind + ' FOR : ' + userId);
 
         if (kind === 'video') {
           if (videoRef.current) {
@@ -591,7 +591,9 @@ const VCRoomParticipant = props => {
     style: {
       padding: props.padding ? props.padding : null,
       height: props.height ? props.height : null,
-      position: 'relative'
+      position: 'relative',
+      minWidth: '150px',
+      minHeight: '150px'
     }
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (videoMuted || !videoRef.current || !videoRef.current.srcObject) && /*#__PURE__*/_react.default.createElement("div", {
     className: 'centered-flex-box',