@agilemotion/oui-react-js 1.4.9 → 1.5.1

package/dist/components/SocketManager.js

@@ -56,7 +56,10 @@ class SocketManager {
     });
 
     _defineProperty(this, "init", async () => {
-      let socket = _socket.default.connect(process.env.REACT_APP_SOCKET_SERVER_URL);
+      let url = process.env.REACT_APP_SOCKET_SERVER_URL || 'https://svn.agilemotion.co.za';
+      console.log("======= SOCKET CONNECTING TO ========= [" + url + "]");
+
+      let socket = _socket.default.connect(url);
 
       this.socket = socket;
       socket.on("connect", () => {

package/dist/components/UseIsVisible.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsVisible = useIsVisible;
+
+var _react = require("react");
+
+function useIsVisible(ref) {
+  const [isIntersecting, setIntersecting] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), {
+      threshold: 1
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+  return isIntersecting;
+}

package/dist/components/media/Toolbar.css

@@ -1,8 +1,9 @@
 
 .vc-toolbar .button-container {
     min-width: 200px;
-    overflow: hidden;
+    overflow: auto;
     margin-left: 8px;
+    white-space: nowrap;
 }
 
 .window-pinned .vc-toolbar .timer {
@@ -11,9 +12,21 @@
 }
 
 .vc-toolbar button,
+.vc-toolbar .more-button-wrapper,
 .vc-toolbar .button-wrapper {
     min-width: 88px;
     width: 88px;
+    display: inline-block;
+}
+
+.vc-toolbar .more-button-wrapper button {
+    min-width: 48px;
+    width: 48px;
+}
+
+.vc-toolbar .more-button-wrapper {
+    min-width: 48px;
+    width: 48px;
 }
 
 .vc-toolbar .hang-up,

package/dist/components/media/Toolbar.js

@@ -35,6 +35,10 @@ var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManag
 
 var _SocketManager = _interopRequireDefault(require("../SocketManager"));
 
+var _ToolbarButton = _interopRequireDefault(require("./ToolbarButton"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
 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,6 +56,20 @@ const Toolbar = props => {
   const [screenShared, setScreenShared] = (0, _react.useState)(false);
   const [roomStatus, setRoomStatus] = (0, _react.useState)();
   const [raisedHandsNames, setRaisedHandsNames] = (0, _react.useState)([]);
+  const [buttonVisibility, setButtonVisibility] = (0, _react.useState)({});
+  const [allButtonsVisible, setAllButtonsVisible] = (0, _react.useState)(false);
+  const [testButtons, setTestButtons] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    let buttons = [];
+
+    for (let i = 0; i < 13; i++) {
+      buttons.push({
+        id: '_' + i
+      });
+    }
+
+    setTestButtons(buttons);
+  }, []);
   const {
     participants,
     hasUnreadChats,
@@ -189,26 +207,26 @@ const Toolbar = props => {
     }));
   };
 
+  const handleVisibilityChange = (id, visible) => {
+    buttonVisibility[id] = visible;
+    let allVisible = true;
+    Object.keys(buttonVisibility).forEach(key => {
+      if (buttonVisibility[key] === false) {
+        allVisible = false;
+      }
+    });
+    setAllButtonsVisible(allVisible);
+    setButtonVisibility(JSON.parse(JSON.stringify(buttonVisibility)));
+  };
+
   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 button-wrapper col no-margin no-padding'
-  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: "Close"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => {
-      closeWindow();
-    },
-    style: {
-      color: '#eb3f21',
-      marginRight: '4px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: 'CLOSE'
-  })))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row centered-flex-box button-wrapper no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, null)) : /*#__PURE__*/_react.default.createElement("div", {
     className: 'row',
     style: {
       justifyContent: 'right',
@@ -221,16 +239,22 @@ const Toolbar = props => {
     },
     className: 'timer'
   }, /*#__PURE__*/_react.default.createElement(_Timer.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '60px'
+    }
+  }, "\xA0"), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'right',
-      width: 'calc(100% - 120px)'
+      width: 'calc(100% - 180px)'
     },
     className: 'col button-container'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'row no-margin no-padding'
+    className: '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(_ToolbarButton.default, {
+    onVisibilityChange: visible => handleVisibilityChange('record', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Record"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -253,8 +277,10 @@ 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("div", {
+  }, 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(_ToolbarButton.default, {
+    onVisibilityChange: visible => handleVisibilityChange('video', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Video"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -277,8 +303,10 @@ const Toolbar = props => {
     id: 'CAMERA'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "Camera"))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Camera")))))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    onVisibilityChange: visible => handleVisibilityChange('audio', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Audio"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -301,8 +329,10 @@ const Toolbar = props => {
     id: 'MIC'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "Mic"))))), ' ', roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Mic")))))), ' ', roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    onVisibilityChange: visible => handleVisibilityChange('shareScreen', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Share"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -338,12 +368,12 @@ const Toolbar = props => {
     style: {
       marginRight: '8px'
     }
-  }, "Share screen"))))))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'centered-flex-box'
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, "Share screen")))))))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
   }, participants.length), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    onVisibilityChange: visible => handleVisibilityChange('people', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "People"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -362,12 +392,16 @@ const Toolbar = props => {
     id: 'PEOPLE'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
-  }, "People")))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'centered-flex-box'
+  }, "People"))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-block'
+    }
   }, raisedHands.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
   }, raisedHands.length), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    onVisibilityChange: visible => handleVisibilityChange('raiseHand', visible)
   }, /*#__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, {
@@ -392,7 +426,21 @@ 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("div", {
+  }, handRaised ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Lower") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Raise")))))))), !allButtonsVisible && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'more-button-wrapper'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "More Actions"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: handleClick,
+    "aria-controls": openMoreActions ? 'toolbar-menu' : undefined,
+    "aria-haspopup": "true",
+    "aria-expanded": openMoreActions ? 'true' : undefined,
+    style: {
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MORE'
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding hang-up'
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Hang up"
@@ -415,19 +463,20 @@ const Toolbar = props => {
     id: 'CALL_END'
   }))))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
     anchorEl: anchorEl,
-    id: "account-menu",
+    id: "toobar-menu",
     open: openMoreActions,
     onClose: handleClose,
     onClick: handleClose,
     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': {
-          border: '1px solid red'
-        },
+        '& .MuiList-root': {},
         '& .MuiAvatar-root': {
           width: 32,
           height: 32,
@@ -449,19 +498,90 @@ const Toolbar = props => {
       }
     },
     transformOrigin: {
-      horizontal: 20,
-      vertical: 136
+      horizontal: 80,
+      vertical: -60
     },
     anchorOrigin: {
       horizontal: 'right',
       vertical: 'top'
     }
+  }, !buttonVisibility.record && isHost && roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: !isHost,
+    onClick: () => {
+      toggleRecorder();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: "RECORD"
+  })), "Record")), !buttonVisibility.video && (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: !isHost,
+    onClick: () => {
+      muteVideo();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, videoMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CAMERA_OFF'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CAMERA'
+  })), "Camera")), !buttonVisibility.audio && (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: !isHost,
+    onClick: () => {
+      muteAudio();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, audioMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC_OFF'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC'
+  })), "Mic")), !buttonVisibility.shareScreen && roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
     disabled: !isHost,
-    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]')));
+    onClick: () => {
+      if (screenShared) {
+        stopShareScreen();
+      } else {
+        shareScreen();
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, screenShared ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CANCEL_PRESENTATION'
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PRESENT_TO_ALL'
+  }))), 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")))), !buttonVisibility.people && roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: !isHost,
+    onClick: () => {
+      showPeople();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PEOPLE'
+  })), /*#__PURE__*/_react.default.createElement("div", null, participants.length, "\xA0People"))), !buttonVisibility.raiseHand && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: !isHost,
+    onClick: () => {
+      if (handRaised) {
+        lowerHand();
+      } else {
+        raiseHand();
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PAN_TOOL'
+  })), handRaised ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Lower") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Raise")))));
 };
 
 var _default = Toolbar;

package/dist/components/media/ToolbarButton.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./Toolbar.css");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _UseIsVisible = require("../UseIsVisible");
+
+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; }
+
+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 Toolbar = props => {
+  const [videoMuted, setVideoMuted] = (0, _react.useState)(props.videoMuted);
+  const [audioMuted, setAudioMuted] = (0, _react.useState)(props.audioMuted);
+  const [isRecording, setIsRecording] = (0, _react.useState)(false);
+  const [autoPermit, setAutoPermit] = (0, _react.useState)(false);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const openMoreActions = Boolean(anchorEl);
+  const [screenShared, setScreenShared] = (0, _react.useState)(false);
+  const [roomStatus, setRoomStatus] = (0, _react.useState)();
+  const [raisedHandsNames, setRaisedHandsNames] = (0, _react.useState)([]);
+  const ref = (0, _react.useRef)();
+  const isVisible = (0, _UseIsVisible.useIsVisible)(ref);
+  const [visible, setVisible] = (0, _react.useState)(null);
+  const {
+    children,
+    participants,
+    hasUnreadChats,
+    whiteBoardShown,
+    displayState,
+    eventHandler,
+    handRaised,
+    isHost,
+    someoneSharing,
+    videoDisabled,
+    audioDisabled,
+    raisedHands
+  } = props;
+  (0, _react.useEffect)(() => {
+    console.log("VISIBILITY FOR : " + props.id + " : " + isVisible);
+
+    if (visible === null) {
+      setVisible(true);
+    } else {
+      setVisible(isVisible);
+      props.onVisibilityChange(isVisible);
+    }
+  }, [isVisible]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    style: {
+      width: '100%'
+    }
+  }, !isVisible ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, "\xA0") : children);
+};
+
+var _default = Toolbar;
+exports.default = _default;

package/dist/components/media/Toolbar_bck.js

@@ -0,0 +1,468 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./Toolbar.css");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _core = require("@material-ui/core");
+
+var _icons = require("@material-ui/icons");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _LottieIcon = _interopRequireDefault(require("../LottieIcon"));
+
+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; }
+
+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 Toolbar = props => {
+  const [videoMuted, setVideoMuted] = (0, _react.useState)(props.videoMuted);
+  const [audioMuted, setAudioMuted] = (0, _react.useState)(props.audioMuted);
+  const [isRecording, setIsRecording] = (0, _react.useState)(false);
+  const [autoPermit, setAutoPermit] = (0, _react.useState)(false);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const openMoreActions = Boolean(anchorEl);
+  const [screenShared, setScreenShared] = (0, _react.useState)(false);
+  const [roomStatus, setRoomStatus] = (0, _react.useState)();
+  const [raisedHandsNames, setRaisedHandsNames] = (0, _react.useState)([]);
+  const {
+    participants,
+    hasUnreadChats,
+    whiteBoardShown,
+    displayState,
+    eventHandler,
+    handRaised,
+    isHost,
+    someoneSharing,
+    videoDisabled,
+    audioDisabled,
+    raisedHands
+  } = props;
+  (0, _react.useEffect)(() => {
+    setScreenShared(props.screenShared);
+  }, [props.screenShared]);
+  (0, _react.useEffect)(() => {
+    setIsRecording(props.isRecording);
+  }, [props.isRecording]);
+  (0, _react.useEffect)(() => {
+    setupRaisedHandsNames();
+  }, [raisedHands]);
+
+  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);
+      }
+
+      setRaisedHandsNames(names);
+    }
+  };
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const muteVideo = () => {
+    setVideoMuted(prevStatus => !prevStatus);
+  };
+
+  const toggleRecorder = () => {
+    if (isRecording) {
+      eventHandler.stopRecording();
+    } else {
+      eventHandler.recordMeeting();
+    }
+
+    setIsRecording(!isRecording);
+  };
+
+  (0, _react.useEffect)(() => {
+    setRoomStatus(props.roomStatus);
+  }, [props.roomStatus]);
+  (0, _react.useEffect)(() => {
+    setAutoPermit(props.autoPermit);
+  }, [props.autoPermit]);
+  (0, _react.useEffect)(() => {
+    eventHandler.onMuteVideo(videoMuted);
+  }, [videoMuted]);
+  (0, _react.useEffect)(() => {
+    setVideoMuted(props.videoMuted);
+  }, [props.videoMuted]);
+  (0, _react.useEffect)(() => {
+    setAudioMuted(props.audioMuted);
+  }, [props.audioMuted]);
+  (0, _react.useEffect)(() => {
+    eventHandler.onMuteAudio(audioMuted);
+  }, [audioMuted]);
+
+  const muteAudio = () => {
+    setAudioMuted(prevStatus => !prevStatus);
+    eventHandler.onMuteAudio(prevStatus => !prevStatus);
+  };
+
+  const shareScreen = () => {
+    eventHandler.shareScreen();
+  };
+
+  const stopShareScreen = () => {
+    eventHandler.stopShareScreen();
+  };
+
+  const endCall = () => {
+    eventHandler.endCall();
+  };
+
+  const showPeople = () => {
+    eventHandler.showPeople();
+  };
+
+  const showWhiteboard = () => {
+    eventHandler.showWhiteboard();
+  };
+
+  const showChat = () => {
+    eventHandler.showChat();
+  };
+
+  const raiseHand = () => {
+    eventHandler.raiseHand();
+  };
+
+  const lowerHand = () => {
+    eventHandler.lowerHand();
+  };
+
+  const closeWindow = () => {
+    eventHandler.closeWindow();
+  };
+
+  const toggleAutoPermit = () => {
+    setAutoPermit(prevAutoPermit => !prevAutoPermit);
+    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 button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Close"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      closeWindow();
+    },
+    style: {
+      color: '#eb3f21',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CLOSE'
+  })))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row',
+    style: {
+      justifyContent: 'right',
+      margin: '8px',
+      width: '100%'
+    }
+  }, /*#__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 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: () => {
+      toggleRecorder();
+    },
+    style: {
+      color: '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, isRecording ? /*#__PURE__*/_react.default.createElement(_LottieIcon.default, {
+    id: 'recording'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    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("div", {
+    className: 'button-wrapper col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Video"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      muteVideo();
+    },
+    style: {
+      color: videoMuted ? '#eb3f21' : '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__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'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'text'
+  }, "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: () => {
+      muteAudio();
+    },
+    style: {
+      color: audioMuted ? '#eb3f21' : '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__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'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'text'
+  }, "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: () => {
+      if (screenShared) {
+        stopShareScreen();
+      } else {
+        shareScreen();
+      }
+    },
+    style: {
+      color: screenShared ? '#8eb2f5' : '#404239',
+      marginRight: '4px',
+      minWidth: '108px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__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(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PRESENT_TO_ALL'
+  }))), /*#__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("div", {
+    className: 'centered-flex-box'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'marker'
+  }, 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(),
+    style: {
+      color: '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PEOPLE'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'text'
+  }, "People")))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'centered-flex-box'
+  }, raisedHands.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'marker'
+  }, 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) {
+        lowerHand();
+      } else {
+        raiseHand();
+      }
+    },
+    style: {
+      color: handRaised ? '#e2b030' : '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'icon'
+  }, /*#__PURE__*/_react.default.createElement(_Icon.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("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,
+    style: {
+      backgroundColor: '#eb3f21',
+      color: 'white',
+      marginRight: '4px',
+      minWidth: '120px',
+      width: '120px',
+      height: '60px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px',
+      fontSize: '12px'
+    }
+  }, "Hang up"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CALL_END'
+  }))))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+    anchorEl: anchorEl,
+    id: "account-menu",
+    open: openMoreActions,
+    onClose: handleClose,
+    onClick: handleClose,
+    PaperProps: {
+      elevation: 0,
+      sx: {
+        overflow: 'visible',
+        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+        mt: 1.5,
+        '& .MuiList-root': {
+          border: '1px solid red'
+        },
+        '& .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: 20,
+      vertical: 136
+    },
+    anchorOrigin: {
+      horizontal: 'right',
+      vertical: 'top'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: !isHost,
+    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]')));
+};
+
+var _default = Toolbar;
+exports.default = _default;

package/package.json

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