@agilemotion/oui-react-js 1.3.9 → 1.4.1

package/dist/components/layout/ViewContainer.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./ViewContainer.css");
+
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+
+var _Dashboard = _interopRequireDefault(require("../../view/Dashboard"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _View = require("./View");
+
+var _reactRouterDom = require("react-router-dom");
+
+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 ViewContainer = props => {
+  const params = (0, _reactRouterDom.useParams)();
+  const attributes = (0, _react.useRef)({
+    windowView: null,
+    anchorView: null
+  });
+  const windowOpen = (0, _react.useRef)(null);
+
+  _react.default.useEffect(() => {}, []);
+
+  const renderView = () => {
+    let viewId = params.id;
+
+    let view = _ApplicationManager.default.getView(viewId);
+
+    let element = viewId === 'dashboard' ? /*#__PURE__*/_react.default.createElement(_Dashboard.default, {
+      ref: /*#__PURE__*/_react.default.createRef()
+    }) : !_Utils.default.isNull(view) && !_Utils.default.isNull(view.config) ? /*#__PURE__*/_react.default.createElement(_View.View, {
+      config: view.config,
+      parameters: view.parameters,
+      ref: /*#__PURE__*/_react.default.createRef(),
+      handle: view.handle
+    }) : null;
+    console.log("\n\n\n\nLOADING : " + viewId, element);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, element);
+  };
+
+  return renderView();
+};
+
+var _default = ViewContainer;
+exports.default = _default;

package/dist/components/layout/ViewPort.js

@@ -9,94 +9,64 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _View = require("./View");
-
 var _Utils = _interopRequireDefault(require("../../Utils"));
 
-var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
 var _ConfirmationDialog = require("../ConfirmationDialog");
 
 var _PopupView = _interopRequireDefault(require("../PopupView"));
 
-var _Dashboard = _interopRequireDefault(require("../../view/Dashboard"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-class ViewPort extends _react.default.PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "openPopupView", view => {
-      this.popupViewController.open(view);
-    });
-
-    _defineProperty(this, "closePopupView", () => {
-      this.popupViewController.close();
-    });
-
-    _defineProperty(this, "renderView", routerProps => {
-      let viewId = routerProps.match.params.id;
-
-      let view = _ApplicationContext.default.getView(viewId);
-
-      return viewId === 'dashboard' ? /*#__PURE__*/_react.default.createElement(_Dashboard.default, {
-        settings: this.props.settings,
-        ref: /*#__PURE__*/_react.default.createRef()
-      }) : !_Utils.default.isNull(view) && !_Utils.default.isNull(view.config) ? /*#__PURE__*/_react.default.createElement(_View.View, {
-        config: view.config,
-        parameters: view.parameters,
-        ref: /*#__PURE__*/_react.default.createRef(),
-        handle: view.handle
-      }) : null;
-    });
-
-    this.confirmationDialogController = {};
-    this.popupViewController = {};
-  }
-  /*openDialog(message, resultCallback) {
-      if (this.state.confirmDialogOpen) {
-          console.error("There is already a confirm dialog open");
-      } else {
-          this.setState({
-              ...this.state, confirmDialogOpen: true, confirmDialogMessage: message,
-              confirmDialogResultCallback: resultCallback
-          });
-      }
-  };*/
-
-
-  componentDidMount() {
-    this.confirmationDialogController.openPopupView = this.openPopupView;
-    this.confirmationDialogController.closePopupView = this.closePopupView;
-
-    _ApplicationContext.default.setViewPortHistory(this.props.history);
-
-    _ApplicationContext.default.setConfirmDialogHandler(this.confirmationDialogController);
-
-    let defaultRoute = !_Utils.default.isNull(this.props.defaultView) ? this.props.defaultView : "/view/dashboard";
-    this.props.history.push(defaultRoute);
-  }
-
-  render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        height: _Utils.default.isNull(this.props.height) ? 'calc(100vh - 90px)' : this.props.height
-      }
-    }, /*#__PURE__*/_react.default.createElement(_PopupView.default, {
-      controller: this.popupViewController
-    }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
-      path: "/view/:id",
-      render: routerProps => this.renderView(routerProps)
-    }), /*#__PURE__*/_react.default.createElement(_ConfirmationDialog.ConfirmationDialog, {
-      controller: this.confirmationDialogController
-    }));
-  }
-
-}
-
-var _default = (0, _reactRouterDom.withRouter)(ViewPort);
+const ViewPort = () => {
+  const navigate = (0, _reactRouterDom.useNavigate)();
+
+  const [loading, setLoading] = _react.default.useState(true);
+
+  const confirmationDialogController = _react.default.useRef({});
+
+  const popupViewController = _react.default.useRef({});
+
+  const openPopupView = view => {
+    popupViewController.current.open(view);
+  };
+
+  const closePopupView = () => {
+    popupViewController.current.close();
+  };
+
+  _react.default.useEffect(() => {
+    if (loading) {
+      setLoading(false);
+    }
+  });
+
+  _react.default.useEffect(() => {
+    if (!loading) {
+      navigate("/view/dashboard");
+    }
+  }, [loading]);
+
+  _react.default.useEffect(() => {
+    confirmationDialogController.current.openPopupView = openPopupView;
+    confirmationDialogController.current.closePopupView = closePopupView; //applicationManager.setViewPortHistory(props.history);
+
+    _ApplicationManager.default.setConfirmDialogHandler(confirmationDialogController.current);
+
+    console.log("LOADING VIEWPORT");
+  }, []);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 'calc(100vh - 90px)'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PopupView.default, {
+    controller: popupViewController.current
+  }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Outlet, null), /*#__PURE__*/_react.default.createElement(_ConfirmationDialog.ConfirmationDialog, {
+    controller: confirmationDialogController.current
+  }));
+};
 
+var _default = ViewPort;
 exports.default = _default;

package/dist/components/layout/Window.css

@@ -0,0 +1,18 @@
+.meeting-window-header {
+  width: 100%;
+  padding: 8px 0;
+  color: #000000;
+  cursor: move;
+}
+
+#meeting-window-title {
+  margin: 0 32px;
+}
+
+.meeting-title {
+  margin: 8px 0 0 0;
+  font-size: 24px;
+  font-weight: 400;
+  text-align: left;
+  padding-left: 0 !important;
+}

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/media/MediaSoupHelper.js

@@ -35,7 +35,7 @@ class MediaSoupHelper {
     });
 
     _defineProperty(this, "getConsumeStream", async (producerId, rtpCapabilities, consumerTransport, roomId, userId, type) => {
-      console.log("\n\n\n\n\nCONSUMING FROM : " + producerId);
+      console.log("CONSUMING FROM : " + producerId);
 
       if (consumerTransport) {
         const data = await _SocketManager.default.emitEvent(_VCEventType.VCEventType.CONSUME, {

package/dist/components/media/Toolbar.css

@@ -1,9 +1,24 @@
 
-.ouiToolbar button {
-    width: 100% !important;
+.vc-toolbar button {
+    min-width: 80px;
+    width: 80px;
+}
+
+.vc-toolbar button .icon,
+.vc-toolbar button .text {
+    width: 100%;
+    text-align: center;
+}
+
+.vc-toolbar button .text {
+    font-size: 10px;
+}
+
+.vc-toolbar button .icon {
+    height: 28px;
 }
 
-.ouiToolbar .itemWrapper div {
+.vc-toolbar .itemWrapper div {
     width: 100% !important;
 }