@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/layout/Window.js

@@ -0,0 +1,287 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./Window.css");
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _reactDraggable = _interopRequireDefault(require("react-draggable"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+
+var _AlertBar = _interopRequireDefault(require("../AlertBar"));
+
+var _VCEventManager = _interopRequireDefault(require("../media/VCEventManager"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+
+var _TitleBar = _interopRequireDefault(require("../TitleBar"));
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const minimizeWidth = '848';
+const StyledDialog = (0, _withStyles.default)({
+  root: {
+    pointerEvents: 'none'
+  },
+  paper: {
+    pointerEvents: 'auto',
+    width: 'calc(100% - 344px)',
+    maxWidth: '100%',
+    height: 'calc(100% - 88px)',
+    position: 'absolute',
+    margin: '8px',
+    bottom: 0,
+    right: 0,
+    overflow: 'hidden',
+    borderRadius: 4,
+    ['@media (max-width:991px)']: {
+      maxWidth: '100%'
+    }
+  }
+})(props => /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({
+  hideBackdrop: true
+}, props)));
+
+const PaperComponent = props => {
+  const [bounds, setBounds] = (0, _react.useState)({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  });
+
+  const handleStart = (e, data) => {
+    console.log("DRAG START");
+
+    if (!data) {
+      return;
+    } //const x = data.node.offsetLeft - data.node.offsetWidth;
+
+
+    const top = -data.node.offsetTop + 64;
+    const bottom = window.innerHeight - (data.node.offsetTop + 64);
+    setBounds({
+      left: 0,
+      right: 0,
+      top: top,
+      bottom: bottom
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
+    disabled: props.disabled,
+    bounds: bounds,
+    onStart: handleStart,
+    handle: "#meeting-window-header",
+    cancel: '[class*="MuiDialogContent-root"]'
+  }, /*#__PURE__*/_react.default.createElement(_Paper.default, props));
+};
+
+const Window = props => {
+  const {
+    children,
+    open,
+    minimizable
+  } = props;
+  const [displayState, setDisplayState] = (0, _react.useState)(props.displayState);
+  const [windowTransformValue, setWindowTransformValue] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (props.displayState) {
+      setDisplayState(props.displayState);
+
+      _ApplicationManager.default.updateContext({
+        windowDisplayState: props.displayState
+      });
+    }
+  }, [props.displayState]);
+  (0, _react.useEffect)(() => {
+    _ApplicationManager.default.addApplicationContextSubscription({
+      handler: {
+        get id() {
+          return 'window';
+        },
+
+        onContextChange: (context, newValues) => {
+          if (Object.keys(newValues).find(key => key === 'windowDisplayState')) {
+            console.log('MIN : ' + newValues.windowDisplayState);
+
+            if (newValues.windowDisplayState === 'MAXIMIZED') {
+              maximizeView(null, false);
+            } else {
+              minimizeView(null, false);
+            }
+          }
+        }
+      }
+    }).then(initialContext => {
+      setDisplayState(initialContext ? initialContext.windowDisplayState : 'MAXIMIZED');
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (displayState === 'MAXIMIZED') {
+      maximizeView(null);
+    } else {
+      minimizeView(null);
+    }
+  }, [displayState]);
+
+  const getMinimizedStyle = () => {
+    return {
+      transform: 'translate(0, 0)',
+      backgroundColor: '#FFFFFF',
+      width: minimizeWidth + 'px',
+      height: '500px',
+      margin: '0 16px 16px 16px'
+    };
+  };
+
+  const getMaximizedStyle = () => {
+    return {
+      transform: 'translate(0, 0)',
+      backgroundColor: '#FFFFFF',
+      width: 'calc(100% - 344px)',
+      height: 'calc(100% - 88px)',
+      margin: '8px'
+    };
+  };
+
+  const minimizeView = (e, updateContext = true) => {
+    if (minimizable) {
+      let paper = document.getElementById('meetingDialogPaper');
+
+      if (paper) {
+        if (windowTransformValue) {
+          paper.style.transform = windowTransformValue;
+        }
+
+        paper.style.width = minimizeWidth + 'px';
+        paper.style.height = '500px';
+        paper.style.margin = '0 16px 16px 16px';
+        let header = document.getElementsByClassName('dialogHeader')[0];
+        header.getElementsByTagName('button')[0].style.color = '#000000';
+        document.getElementById('meeting-window-header').style.cursor = 'move';
+        setDisplayState('MINIMIZED');
+
+        if (updateContext) {
+          _ApplicationManager.default.updateContext({
+            windowDisplayState: 'MINIMIZED'
+          });
+        }
+      }
+    }
+  };
+
+  function getLeftOffset() {
+    let sidebarWidth = parseInt(document.getElementsByClassName('sidebar')[0].style.width.replace('px', ''));
+    return sidebarWidth + (sidebarWidth === 0 ? 16 : 36);
+  }
+
+  const maximizeView = (e, updateContext = true) => {
+    let paper = document.getElementById('meetingDialogPaper');
+
+    if (paper) {
+      let sidebar = document.getElementsByClassName('sidebar')[0];
+      let sidebarTransform = window.getComputedStyle(sidebar, null).transform;
+      setWindowTransformValue(paper.style.transform);
+      paper.style.transform = 'translate(0, 0)';
+      paper.style.backgroundColor = '#FFFFFF';
+      paper.style.width = 'calc(100% - ' + getLeftOffset() + 'px)';
+      paper.style.height = 'calc(100% - 88px)';
+      paper.style.margin = '8px';
+      let header = document.getElementsByClassName('dialogHeader')[0];
+      header.getElementsByTagName('button')[0].style.color = 'rgba(0, 0, 0, 0.54)';
+      document.getElementById('meeting-window-header').style.cursor = 'default';
+      setDisplayState('MAXIMIZED');
+
+      if (updateContext) {
+        _ApplicationManager.default.updateContext({
+          windowDisplayState: 'MAXIMIZED'
+        });
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      maxHeight: '100%',
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      display: 'none',
+      color: '#000000'
+    }
+  }, /*#__PURE__*/_react.default.createElement(StyledDialog, {
+    disableEnforceFocus: true,
+    open: open,
+    onClose: e => {},
+    keepMounted: true,
+    hideBackdrop: true,
+    "aria-labelledby": "meeting-window-title",
+    "aria-describedby": "meeting-window-description",
+    className: props.containerClassName,
+    PaperComponent: PaperComponent,
+    PaperProps: {
+      id: 'meetingDialogPaper',
+      disabled: displayState === 'MAXIMIZED',
+      style: displayState === 'MINIMIZED' ? getMinimizedStyle() : getMaximizedStyle
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'meeting-window-header',
+    id: "meeting-window-header"
+  }, /*#__PURE__*/_react.default.createElement("div", null, minimizable && displayState && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '48px',
+      height: '48px',
+      margin: '8px 16px 0 0',
+      position: 'absolute',
+      right: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'dialogHeader row'
+  }, /*#__PURE__*/_react.default.createElement("div", null, displayState === 'MAXIMIZED' ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: e => {
+      minimizeView(e);
+    },
+    style: {
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MINIMIZE'
+  })) : /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: e => {
+      maximizeView(e);
+    },
+    style: {
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MAXIMIZE'
+  }))))))), children));
+};
+
+var _default = Window;
+exports.default = _default;

package/dist/components/layout/WindowViewPort.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./ViewContainer.css");
+
+var _Window = _interopRequireDefault(require("./Window"));
+
+var _View = require("./View");
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+
+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; }
+
+const WindowViewContainer = props => {
+  const [view, setView] = _react.default.useState(null);
+
+  function loadView(context) {
+    if (context) {
+      if (Object.keys(context).find(key => key === 'windowView')) {
+        setView(null);
+        setView(context.windowView);
+      }
+    }
+  }
+
+  _react.default.useEffect(() => {
+    _ApplicationManager.default.addApplicationContextSubscription({
+      handler: {
+        get id() {
+          return 'window-view-port';
+        },
+
+        onContextChange: (context, newValues) => {
+          loadView(newValues);
+        }
+      }
+    }).then(initialContext => {
+      loadView(initialContext);
+    });
+  }, []);
+
+  const renderView = () => {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, view && /*#__PURE__*/_react.default.createElement(_Window.default, {
+      minimizable: true,
+      open: true,
+      displayState: 'MAXIMIZED'
+    }, /*#__PURE__*/_react.default.createElement(_View.View, {
+      config: view.config,
+      parameters: view.parameters,
+      ref: /*#__PURE__*/_react.default.createRef(),
+      handle: view.handle
+    })));
+  };
+
+  return renderView();
+};
+
+var _default = WindowViewContainer;
+exports.default = _default;

package/dist/components/loader.css

@@ -1,7 +1,7 @@
 .loaderModal {
 	display: block; /* Hidden by default */
 	position: fixed; /* Stay in place */
-	z-index: 1; /* Sit on top */
+	z-index: 3000; /* Sit on top */
 	left: 0;
 	top: 0;
 	width: 100vw; /* Full width */

package/dist/components/media/ClosablePanel.css

@@ -0,0 +1,37 @@
+.closable-panel {
+  border-radius: 4px;
+  color: rgb(40, 40, 43);
+  height: 100%;
+}
+
+.closable-panel-header {
+  height: 72px;
+  text-align: right;
+  padding: 8px;
+  display: inline-block;
+  width: 100%;
+  font-size: 24px;
+  font-weight: 500;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  color: rgb(40, 40, 43);
+}
+
+#people-window-title .closable-panel-header .title {
+}
+
+.closable-panel-header .title{
+  font-size: 24px;
+  text-align: left;
+  font-weight: normal;
+  width: calc(100% - 64px);
+  padding-top: 8px;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  color: rgb(40, 40, 43);
+}
+
+.closable-panel-content {
+  height: calc(100% - 72px);
+  overflow: hidden;
+}

package/dist/components/media/ClosablePanel.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./ClosablePanel.css");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ClosablePanel = props => {
+  const params = (0, _reactRouterDom.useParams)();
+  const location = (0, _reactRouterDom.useLocation)();
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%'
+    },
+    className: 'closable-panel'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'closable-panel-header row'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'title col'
+  }, props.title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '64px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    style: {
+      marginRight: '4px'
+    },
+    onClick: e => props.closeHandler(e)
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CLOSE',
+    color: '#404239'
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'closable-panel-content'
+  }, children));
+};
+
+var _default = ClosablePanel;
+exports.default = _default;

package/dist/components/media/LobbyWaitingList.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RegularButton = _interopRequireDefault(require("../RegularButton"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const HOST_WAITING_MESSAGE = 'Waiting for others to join';
+const ATTENDEE_WAITING_MESSAGE = 'Waiting for the meeting host to let you in';
+
+const LobbyWaitingList = props => {
+  const {
+    waitingList
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, waitingList && waitingList.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '320px',
+      height: props.autoHeight ? null : '100%',
+      borderRadius: '4px',
+      color: '#ffffff',
+      backgroundColor: 'rgb(40, 40, 43)',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '20px',
+      margin: '16px'
+    }
+  }, "Users requesting to join"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '16px',
+      margin: '16px'
+    }
+  }, waitingList.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        margin: '16px 0 16px 0',
+        paddingBottom: '16px'
+      },
+      className: 'row'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        margin: '10px 4px 0 0'
+      },
+      className: 'col'
+    }, item.userName), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginRight: '4px'
+      },
+      className: 'col-*-*'
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: e => {
+        props.acceptUserHandler(item);
+      },
+      style: {
+        color: '#FFFFFF'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'CHECK',
+      color: '#4caf50'
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'col-*-*'
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: e => {
+        props.rejectUserHandler(item);
+      },
+      style: {
+        color: '#FFFFFF'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'CLOSE',
+      color: '#f44336'
+    })))));
+  }))));
+};
+
+var _default = LobbyWaitingList;
+exports.default = _default;