@agilemotion/oui-react-js 1.5.0 → 1.5.2

package/dist/ApplicationManager.js

@@ -114,7 +114,7 @@ class ApplicationManager {
       } else if (!view.popUp) {
         let legendPath = '';
 
-        for (let i = 0; i < this.graphs[0].initialNavHistoryDepth; i++) {
+        for (let i = 0; i < this.graphs[0].initialNavHistoryDepth && i < this.navHistory.length; i++) {
           legendPath += "".concat(this.navHistory[i].title);
 
           if (i < this.graphs[0].initialNavHistoryDepth - 1) {
@@ -123,7 +123,7 @@ class ApplicationManager {
         }
 
         legendPath = legendPath.length > 0 ? legendPath + legendIconArrow : '';
-        this.props.appBarTitle = "".concat(legendPath, "<span>").concat(this.graphs[0].title, "</span>");
+        this.props.appBarTitle = this.graphs[0].initialNavHistoryDepth === 0 ? titleValue : "".concat(legendPath, "<span>").concat(this.graphs[0].title, "</span>");
         this.graphs[0].setCurrentNodeTitle(titleValue);
       }
 
@@ -267,8 +267,9 @@ class ApplicationManager {
       if (!view.window && view.parent && currentGraph && currentGraph.config.isWindow) {
         currentGraph.anchorView = view;
         currentGraph.anchorHistoryElement = this.navHistory[this.navHistory.length - 1];
+        currentGraph.initialNavHistoryDepth = 0;
         this.updateContext({
-          windowDisplayState: 'MINIMIZED'
+          windowDisplayState: 'PINNED'
         });
       }
     });
@@ -338,6 +339,12 @@ class ApplicationManager {
 
           applicationContext.windowView = null;
         }
+
+        if (view.window) {
+          this.updateContext({
+            windowDisplayState: 'CLOSED'
+          });
+        }
       }
     });
 
@@ -622,6 +629,10 @@ class ApplicationManager {
 
         removeLoadedGraph(routeToAnchor) {
           instance.removeLoadedGraph(routeToAnchor);
+        },
+
+        hasActiveMeeting() {
+          return instance.hasActiveMeeting();
         }
 
       };
@@ -791,6 +802,12 @@ class ApplicationManager {
       if (!_Utils.default.isNull(graph.anchorHistoryElement)) {
         this.updateAppBarTitle(graph.anchorView.config.id, graph.anchorView.config.title);
       }
+
+      if (graph.config.isWindow) {
+        this.updateContext({
+          windowDisplayState: 'CLOSED'
+        });
+      }
     }
   }
 

package/dist/components/Calendar.js

@@ -111,7 +111,9 @@ const Calendar = props => {
   const dialogRef = (0, _react.useRef)(null);
   const [dialogTop, setDialogTop] = (0, _react.useState)(null);
   const [dialogLeft, setDialogLeft] = (0, _react.useState)(null);
-  const [refresher, setRefresher] = (0, _react.useState)(null);
+  const [refresher, setRefresher] = (0, _react.useState)(0);
+  const contextChangeHandler = {};
+  let counter = 1;
   const StyledDialog = (0, _withStyles.default)({
     root: {
       pointerEvents: "none"
@@ -146,23 +148,31 @@ const Calendar = props => {
     }).catch(ignored => {});
   };
 
+  const handler = () => {
+    return {
+      get id() {
+        return 'calendar';
+      },
+
+      onContextChange: (context, newValues) => {
+        if (Object.keys(newValues).find(key => key === 'windowDisplayState')) {
+          setRefresher(counter > 20 ? 0 : counter++);
+        }
+      }
+    };
+  };
+
   (0, _react.useEffect)(() => {
+    contextChangeHandler.api = handler();
     loadEvents();
 
     _ApplicationManager.default.addApplicationContextSubscription({
-      handler: {
-        get id() {
-          return 'window';
-        },
-
-        onContextChange: (context, newValues) => {
-          if (Object.keys(newValues).find(key => key === 'windowDisplayState')) {
-            setRefresher(!refresher);
-          }
-        }
-      }
+      handler: contextChangeHandler
     });
   }, []);
+  (0, _react.useEffect)(() => {
+    contextChangeHandler.api = handler();
+  });
 
   const calenderScrollListener = () => {
     setOpen(false);
@@ -411,7 +421,7 @@ const Calendar = props => {
       style: {
         marginTop: '16px'
       }
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    }, !_ApplicationManager.default.hasActiveMeeting() && /*#__PURE__*/_react.default.createElement(_Button.default, {
       variant: 'contained',
       size: "large",
       color: "primary",
@@ -438,7 +448,10 @@ const Calendar = props => {
       height: '100%',
       maxHeight: '100%'
     }, props.config)
-  }, /*#__PURE__*/_react.default.createElement(_react2.default, calendarOptions), ' ', /*#__PURE__*/_react.default.createElement(StyledDialog, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    key: refresher,
+    className: 'w-100 h-100'
+  }, /*#__PURE__*/_react.default.createElement(_react2.default, calendarOptions), ' '), /*#__PURE__*/_react.default.createElement(StyledDialog, {
     open: open,
     ref: dialogRef,
     onClose: () => {

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/layout/Window.css

@@ -16,3 +16,9 @@
   text-align: left;
   padding-left: 0 !important;
 }
+
+@media (max-width: 991px) {
+  .window-paper-max {
+    width: calc(100% - 16px) !important;
+  }
+}

package/dist/components/layout/Window.js

@@ -122,7 +122,7 @@ const Window = props => {
               maximizeView(null, false);
             } else if (newValues.windowDisplayState === 'MINIMIZED') {
               minimizeView(null, false);
-            } else {
+            } else if (newValues.windowDisplayState === 'PINNED') {
               pinView(null, false);
             }
           }
@@ -195,6 +195,8 @@ const Window = props => {
             windowDisplayState: 'PINNED'
           });
         }
+
+        props.onPinned();
       }
     }
   };
@@ -279,8 +281,9 @@ const Window = props => {
     PaperComponent: PaperComponent,
     PaperProps: {
       id: 'meetingDialogPaper',
+      className: displayState === 'MINIMIZED' ? 'window-paper-min' : displayState === 'MAXIMIZED' ? 'window-paper-max' : 'window-paper-pinned',
       disabled: displayState === 'MAXIMIZED',
-      style: displayState === 'MINIMIZED' ? getMinimizedStyle() : displayState === 'MAXIMIZED' ? getMaximizedStyle() : getMinimizedStyle()
+      style: displayState === 'MINIMIZED' ? getMinimizedStyle() : displayState === 'MAXIMIZED' ? getMaximizedStyle() : getPinnedStyle()
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: 'window-content',

package/dist/components/layout/WindowViewPort.js

@@ -70,6 +70,11 @@ const WindowViewContainer = props => {
       minimizable: false,
       open: true,
       displayState: 'MAXIMIZED',
+      onPinned: () => {
+        if (!pinned) {
+          setPinned(true);
+        }
+      },
       onPin: () => {
         _ApplicationManager.default.updateContext({
           windowDisplayState: pinned ? 'MAXIMIZED' : 'PINNED'
@@ -77,8 +82,7 @@ const WindowViewContainer = props => {
 
         setPinned(!pinned);
       },
-      onClose: () => {//setPinned(false)
-      }
+      onClose: () => {}
     }, /*#__PURE__*/_react.default.createElement(_View.View, {
       config: view.config,
       parameters: view.parameters,

package/dist/components/media/Timer.css

@@ -18,8 +18,6 @@
 .digit {
   font-size: 20px;
   border-radius: 4px;
-  border: 1px solid #d1d1d1;
-  background-color: #f1f1f1;
   margin-right: 2px !important;
   margin-left: 0 !important;
   color: #000000;

package/dist/components/media/Toolbar.css

@@ -1,3 +1,6 @@
+.vc-toolbar {
+    height: 80px !important;
+}
 
 .vc-toolbar .button-container {
     min-width: 200px;
@@ -6,11 +9,15 @@
     white-space: nowrap;
 }
 
-.window-pinned .vc-toolbar .timer {
-    width: 100% !important;
+.vc-toolbar .timer {
+    width: 48px !important;
     text-align: center !important;
 }
 
+.window-pinned .vc-toolbar .spacer {
+    width: 8px !important;
+}
+
 .vc-toolbar button,
 .vc-toolbar .more-button-wrapper,
 .vc-toolbar .button-wrapper {
@@ -64,6 +71,16 @@
     background-color: #e9e9e9;
     font-size: 14px;
     position: absolute;
-    margin-left: -56px;
+    margin-left: 60px;
     margin-bottom: 16px;
 }
+
+@media only screen and (max-width: 600px) {
+    .timer {
+        display: none;
+    }
+
+    .spacer {
+        display: none;
+    }
+}

package/dist/components/media/Toolbar.js

@@ -227,21 +227,19 @@ const Toolbar = props => {
   }, roomStatus === 'SESSION_ENDED' ? /*#__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',
+    className: 'row flex-nowrap',
     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: {
       width: '60px'
-    }
+    },
+    className: 'spacer'
   }, "\xA0"), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -251,7 +249,7 @@ const Toolbar = props => {
     className: 'col button-container'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'no-margin no-padding'
-  }, isHost && roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+  }, isHost && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
     onVisibilityChange: visible => handleVisibilityChange('record', visible)
@@ -329,7 +327,7 @@ 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' && !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)
@@ -368,12 +366,12 @@ const Toolbar = props => {
     style: {
       marginRight: '8px'
     }
-  }, "Share screen")))))))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'centered-flex-box'
+  }, "Share screen")))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
   }, participants.length), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'button-wrapper col no-margin no-padding'
+    className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
     onVisibilityChange: visible => handleVisibilityChange('people', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -395,11 +393,11 @@ const Toolbar = props => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
   }, "People"))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'centered-flex-box'
+    className: 'button-wrapper'
   }, 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'
+    className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
     onVisibilityChange: visible => handleVisibilityChange('raiseHand', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -505,7 +503,7 @@ const Toolbar = props => {
       horizontal: 'right',
       vertical: 'top'
     }
-  }, !buttonVisibility.record && isHost && roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+  }, !buttonVisibility.record && isHost && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
     disabled: !isHost,
@@ -536,7 +534,7 @@ const Toolbar = props => {
     id: 'MIC_OFF'
   }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'MIC'
-  })), "Mic")), !buttonVisibility.shareScreen && roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
+  })), "Mic")), !buttonVisibility.shareScreen && roomStatus === 'SESSION' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
     disabled: !isHost,
@@ -559,7 +557,7 @@ const Toolbar = props => {
     style: {
       marginRight: '8px'
     }
-  }, "Share screen")))), !buttonVisibility.people && roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+  }, "Share screen")))), !buttonVisibility.people && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
     disabled: !isHost,

package/dist/components/media/TrainingRoom.js

@@ -146,7 +146,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
 
   const onLowerHand = payload => {
     if (raisedHands.length > 0) {
-      let index = raisedHands.findIndex(p => p.userId === payload.userId);
+      let index = raisedHands.findIndex(p => p === payload.userId);
 
       if (index > -1) {
         raisedHands.splice(index, 1);
@@ -466,7 +466,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       borderRadius: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'row no-margin no-padding w-100 h-100'
+    className: 'row flex-nowrap no-margin no-padding w-100 h-100'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'col no-margin no-padding',
     style: {
@@ -477,6 +477,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',
+      height: '80px',
       borderBottom: '1px solid #e2e2e2'
     }
   }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {

package/dist/components/media/VCRoomParticipant.css

@@ -4,8 +4,8 @@
   text-align: center;
   width: 100%;
   height: 100%;
-  min-width: 120px;
-  min-height: 120px;
+  min-width: 280px;
+  min-height: 200px;
   color: rgb(40, 40, 43);
   background-color: #f9f9f9;
 }

package/dist/components/media/VideoPlayer.js

@@ -15,6 +15,8 @@ var _reactPlayer = _interopRequireDefault(require("react-player"));
 
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -28,10 +30,30 @@ const VideoPlayer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
   const [documentId, setDocumentId] = (0, _react.useState)(false);
   const [downloadUrl, setDownloadUrl] = (0, _react.useState)(null);
 
+  const [disabled, setDisabled] = _react.default.useState(false);
+
+  const [visible, setVisible] = _react.default.useState(true);
+
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
 
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+
+    props.handle.api.refresh();
+  }, []);
+
+  _react.default.useEffect(() => {
+    props.handle.api.refresh();
+  }, [documentId]);
+
   _react.default.useEffect(() => {}, [playing]);
 
   _react.default.useEffect(() => {
@@ -57,13 +79,32 @@ const VideoPlayer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
         setDocumentId(documentId);
       },
 
+      get documentId() {
+        return documentId;
+      },
+
+      set disabled(disabled) {
+        setDisabled(disabled);
+      },
+
+      set visible(visible) {
+        setVisible(visible);
+      },
+
+      refresh() {
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+        setDisabled(_Utils.default.evaluateBooleanExpression(parsedConfig.disabled, parsedConfig.id));
+        setVisible(_Utils.default.isNull(parsedConfig.visible) || _Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id));
+      },
+
       getChildren: () => {
         return [];
       }
     };
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, visible && /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({}, props.config)
   }, downloadUrl && /*#__PURE__*/_react.default.createElement("div", {
     className: "player-wrapper"
@@ -79,7 +120,7 @@ const VideoPlayer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
     height: "100%",
     onPlay: () => setPlaying(true),
     onPause: () => setPlaying(false)
-  })));
+  }))));
 }));
 
 var _default = VideoPlayer;

package/dist/event/Observable.js

@@ -141,7 +141,11 @@ class Observable {
 
   async emitContextChangeEvent(context, newValues) {
     for (const applicationContextSubscription of this.applicationContextSubscription) {
-      applicationContextSubscription.handler.onContextChange(context, newValues);
+      if (applicationContextSubscription.handler.api) {
+        applicationContextSubscription.handler.api.onContextChange(context, newValues);
+      } else {
+        applicationContextSubscription.handler.onContextChange(context, newValues);
+      }
     }
   }
   /**

package/package.json

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