@agilemotion/oui-react-js 1.5.6 → 1.5.7

package/dist/components/Icon.js

@@ -71,6 +71,8 @@ var _CallEnd = _interopRequireDefault(require("@material-ui/icons/CallEnd"));
 
 var _Dock = _interopRequireDefault(require("@material-ui/icons/Dock"));
 
+var _Settings = _interopRequireDefault(require("@material-ui/icons/Settings"));
+
 var _icons = require("@material-ui/icons");
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -99,6 +101,12 @@ class Icon extends _react.Component {
           color: this.props.color
         }
       });
+    } else if (this.props.id === 'SETTINGS') {
+      return /*#__PURE__*/_react.default.createElement(_Settings.default, {
+        style: {
+          color: this.props.color
+        }
+      });
     } else if (this.props.id === 'PAN_TOOL') {
       return /*#__PURE__*/_react.default.createElement(_icons.PanTool, null);
     } else if (this.props.id === 'PEOPLE') {

package/dist/components/SocketManager.js

@@ -127,6 +127,20 @@ class SocketManager {
       }
     });
 
+    _defineProperty(this, "endSession", meetingId => {
+      if (this.socket) {
+        this.emitEvent(_VCEventType.VCEventType.LEAVE_MEETING, {
+          userId: sessionStorage.getItem("username"),
+          meetingId: meetingId
+        }).then(() => {
+          this.emitEvent(_VCEventType.VCEventType.END_SESSION, {
+            userId: sessionStorage.getItem("username"),
+            meetingId: meetingId
+          }).catch(error => {});
+        }).catch(error => {});
+      }
+    });
+
     this.usersOnline = [];
     this.profile = null;
   }

package/dist/components/media/Toolbar.js

@@ -39,6 +39,16 @@ var _ToolbarButton = _interopRequireDefault(require("./ToolbarButton"));
 
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
+var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+
+var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
+
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+
 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; }
@@ -52,7 +62,9 @@ const Toolbar = props => {
   const [isRecording, setIsRecording] = (0, _react.useState)(false);
   const [autoPermit, setAutoPermit] = (0, _react.useState)(false);
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const [leaveButtonAnchorEl, setLeaveButtonAnchorEl] = (0, _react.useState)(null);
   const openMoreActions = Boolean(anchorEl);
+  const leaveButtonOpen = Boolean(leaveButtonAnchorEl);
   const [screenShared, setScreenShared] = (0, _react.useState)(false);
   const [roomStatus, setRoomStatus] = (0, _react.useState)();
   const [raisedHandsNames, setRaisedHandsNames] = (0, _react.useState)([]);
@@ -117,6 +129,14 @@ const Toolbar = props => {
     setAnchorEl(null);
   };
 
+  const handleLeaveButtonClick = event => {
+    setLeaveButtonAnchorEl(event.currentTarget);
+  };
+
+  const handleLeaveButtonClose = () => {
+    setLeaveButtonAnchorEl(null);
+  };
+
   const muteVideo = () => {
     setVideoMuted(prevStatus => !prevStatus);
   };
@@ -167,6 +187,10 @@ const Toolbar = props => {
     eventHandler.endCall();
   };
 
+  const endSession = () => {
+    eventHandler.endSession();
+  };
+
   const showPeople = () => {
     eventHandler.showPeople();
   };
@@ -438,12 +462,44 @@ const Toolbar = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MORE'
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), (isHost && participants.length === 0 || !isHost) && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding hang-up'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: "Hang up"
+    title: "Leave"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: endCall,
+    style: {
+      backgroundColor: '#eb3f21',
+      color: 'white',
+      marginRight: '4px',
+      minWidth: '120px',
+      width: '120px',
+      height: '60px'
+    },
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'CALL_END'
+    })
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px',
+      fontSize: '12px'
+    }
+  }, "Leave")))), isHost && participants.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper col no-margin no-padding hang-up'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Leave"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    color: "primary",
+    size: "large",
+    onClick: handleLeaveButtonClick,
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'CALL_END'
+    }),
+    ref: leaveButtonAnchorEl,
+    "aria-controls": leaveButtonOpen ? 'toolbar-menu' : undefined,
+    "aria-haspopup": "true",
+    "aria-expanded": leaveButtonOpen ? 'true' : undefined,
     style: {
       backgroundColor: '#eb3f21',
       color: 'white',
@@ -457,9 +513,59 @@ const Toolbar = props => {
       marginRight: '8px',
       fontSize: '12px'
     }
-  }, "Hang up"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: 'CALL_END'
-  }))))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+  }, "Leave"))))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+    anchorEl: leaveButtonAnchorEl,
+    id: "toobar-menu",
+    open: leaveButtonOpen,
+    onClose: handleLeaveButtonClose,
+    onClick: handleLeaveButtonClose,
+    PaperProps: {
+      elevation: 0,
+      style: {
+        boxShadow: '0 8px 16px 0 rgba(0, 0, 0, 0.2)'
+      },
+      sx: {
+        overflow: 'visible',
+        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+        mt: 1.5,
+        '& .MuiList-root': {},
+        '& .MuiAvatar-root': {
+          width: 32,
+          height: 32,
+          ml: -0.5,
+          mr: 1
+        },
+        '&:before': {
+          content: '""',
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          right: 14,
+          width: 10,
+          height: 10,
+          bgcolor: 'primary',
+          transform: 'translateY(-50%) rotate(45deg)',
+          zIndex: 0
+        }
+      }
+    },
+    transformOrigin: {
+      horizontal: 120,
+      vertical: -60
+    },
+    anchorOrigin: {
+      horizontal: 'right',
+      vertical: 'top'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    onClick: () => {
+      endCall();
+    }
+  }, "Leave"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    onClick: () => {
+      endSession();
+    }
+  }, "End session")), /*#__PURE__*/_react.default.createElement(_core.Menu, {
     anchorEl: anchorEl,
     id: "toobar-menu",
     open: openMoreActions,

package/dist/components/media/TrainingRoom.js

@@ -130,6 +130,10 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
             onLowerHand(be.payload);
             break;
 
+          case _VCEventType.VCEventType.END_SESSION:
+            hangUp();
+            break;
+
           case _VCEventType.VCEventType.SHARING_STOPPED:
             setScreenShared(false);
             setStartScreenSharing(false);
@@ -301,7 +305,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.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.PEER_DISCONNECT, _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED, _VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, _VCEventType.VCEventType.SHARING_STOPPED);
+    _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, _VCEventType.VCEventType.END_SESSION);
 
     document.addEventListener('sideBarToggleEvent', handleSidebarToggle);
 
@@ -412,6 +416,21 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     setSideBarTab('');
   };
 
+  const endSession = () => {
+    _ApplicationManager.default.openConfirmDialog("Are you sure you want to end the current session?", result => {
+      if (result === true) {
+        _SocketManager.default.endSession(props.calendarEvent.id);
+
+        _ApplicationManager.default.setHasActiveMeeting(false);
+
+        _ApplicationManager.default.removeLoadedGraph(false);
+
+        setSideBarOpen(false);
+        setSideBarTab('');
+      }
+    });
+  };
+
   const emitSystemEvent = (eventType, data, toParticipantIds = null) => {
     let participantIds = [];
 
@@ -490,6 +509,9 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       endCall: () => {
         hangUp();
       },
+      endSession: () => {
+        endSession();
+      },
       showChat: () => {
         fetchChats();
       },

package/dist/components/media/VCEventType.js

@@ -69,6 +69,8 @@ _defineProperty(VCEventType, "END_CALL", "END_CALL");
 
 _defineProperty(VCEventType, "LEAVE_MEETING", "LEAVE_MEETING");
 
+_defineProperty(VCEventType, "END_SESSION", "END_SESSION");
+
 _defineProperty(VCEventType, "CALL_ENDED", "CALL_ENDED");
 
 _defineProperty(VCEventType, "ALL_USERS", "ALL_USERS");

package/dist/components/media/VCRoomParticipant.js

@@ -420,29 +420,38 @@ const VCRoomParticipant = props => {
       tracks.current.setVideoTrack(track);
     }
 
-    let producer = await producerTransport.produce(params);
-    producerTransport.getStats().then(data => console.log(data));
-    producers.set(type, producer);
+    let producer;
 
-    if (type === 'video') {
-      videoRef.current.srcObject = stream;
-      videoStream.current = stream;
-      setVideoRefresher(!videoRefresher);
-      console.log(stream);
+    try {
+      producer = await producerTransport.produce(params);
+    } catch (e) {
+      console.log(e);
     }
 
-    producer.on('transportclose', () => {
-      stream.srcObject.getTracks().forEach(function (track) {
-        track.stop();
+    if (producer) {
+      producerTransport.getStats().then(data => console.log(data));
+      producers.set(type, producer);
+
+      if (type === 'video') {
+        videoRef.current.srcObject = stream;
+        videoStream.current = stream;
+        setVideoRefresher(!videoRefresher);
+        console.log(stream);
+      }
+
+      producer.on('transportclose', () => {
+        stream.srcObject.getTracks().forEach(function (track) {
+          track.stop();
+        });
+        producers.delete(type);
       });
-      producers.delete(type);
-    });
-    producer.on('close', () => {
-      stream.srcObject.getTracks().forEach(function (track) {
-        track.stop();
+      producer.on('close', () => {
+        stream.srcObject.getTracks().forEach(function (track) {
+          track.stop();
+        });
+        producers.delete(type);
       });
-      producers.delete(type);
-    });
+    }
   };
 
   const stopProducing = (type, callback) => {
@@ -674,22 +683,7 @@ const VCRoomParticipant = props => {
     id: 'MIC_OFF'
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MIC'
-  })), props.data.inView && numberOfInViewParticipants > 1 && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: "Remove from view"
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onClick: e => {
-      stopProducing('video');
-      props.onRemoveFromView(props.data);
-    },
-    style: {
-      marginRight: '4px',
-      width: '16px',
-      height: '16px',
-      color: 'white'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: 'CLOSE'
-  }))), props.isHost && !videoMuted && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  })), props.isHost && !videoMuted && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     onClick: e => {
       props.onHostVideoMute(props.data);
     },
@@ -732,11 +726,10 @@ const VCRoomParticipant = props => {
     "aria-haspopup": "true",
     "aria-expanded": openMoreActions ? 'true' : undefined,
     style: {
-      color: '#198754',
       height: '8px'
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: 'MIC'
+    id: 'SETTINGS'
   }))))))), !props.isCurrentUser && /*#__PURE__*/_react.default.createElement("span", {
     style: {
       marginLeft: '4px'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "babel": {
     "presets": [
       "@babel/preset-env",