@agilemotion/oui-react-js 1.5.1 → 1.5.3

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/BasicApp.js

@@ -89,7 +89,12 @@ const BasicApp = props => {
     element: /*#__PURE__*/_react.default.createElement(_ForgotPasswordBasic.default, {
       url: location + props.contextRoot + props.authUrl + "/password/forgot",
       background: 'rgba(0, 0, 0, 0.65)',
-      title: 'Business Agility',
+      textColor: props.loginTextColor,
+      footerLogo: props.footerLogo,
+      footerText: props.footerText,
+      footerWidth: props.footerWidth,
+      footerSplitterColor: props.footerSplitterColor,
+      title: props.loginTitle,
       logo: props.logo
     })
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
@@ -98,7 +103,11 @@ const BasicApp = props => {
       url: location + props.contextRoot + props.authUrl + "/password/confirmForgot",
       background: 'rgba(0, 0, 0, 0.65)',
       textColor: props.loginTextColor,
-      title: 'Business Agility',
+      footerLogo: props.footerLogo,
+      footerText: props.footerText,
+      footerWidth: props.footerWidth,
+      footerSplitterColor: props.footerSplitterColor,
+      title: props.loginTitle,
       logo: props.logo
     })
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
@@ -107,7 +116,11 @@ const BasicApp = props => {
       url: location + props.contextRoot + props.authUrl + "/password/challenge",
       background: 'rgba(0, 0, 0, 0.65)',
       textColor: props.loginTextColor,
-      title: 'Business Agility',
+      footerLogo: props.footerLogo,
+      footerText: props.footerText,
+      footerWidth: props.footerWidth,
+      footerSplitterColor: props.footerSplitterColor,
+      title: props.loginTitle,
       logo: props.logo
     })
   }))));

package/dist/assets/jss/views/loginBasicStyle.js

@@ -18,7 +18,7 @@ const styles = {
   loginContainer: {
     minWidth: 320,
     maxWidth: 400,
-    padding: '16px',
+    padding: '16px 0',
     height: 'auto'
   },
   paper: {
@@ -48,10 +48,12 @@ const styles = {
     }
   },
   loginBtn: {
-    float: 'right'
+    float: 'right',
+    background: '#FCB614',
+    color: '#000000'
   },
   btn: {
-    background: '#4f81e9',
+    background: '#FCB614',
     color: _colors.white,
     padding: 7,
     borderRadius: 2,
@@ -59,7 +61,7 @@ const styles = {
     fontSize: 13
   },
   btnFacebook: {
-    background: '#4f81e9'
+    background: '#FCB614'
   },
   btnGoogle: {
     background: '#e14441'

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

package/dist/components/footer/Footer.js

@@ -70,9 +70,10 @@ const Footer = props => {
     className: classes.inlineBlock
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.right + " row"
-  }, "\xA9 ", 1900 + new Date().getYear(), " ", " ", /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      paddingLeft: 10
+      paddingLeft: "8px",
+      marginRight: '20px'
     }
   }, /*#__PURE__*/_react.default.createElement(_CardAvatar.default, {
     plain: true
@@ -85,7 +86,7 @@ const Footer = props => {
     alt: "..."
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: "col-*-*"
-  }, props.text ? /*#__PURE__*/_react.default.createElement("div", null, "\xA0\xA0", props.text) : null))))))));
+  }, props.text ? /*#__PURE__*/_react.default.createElement("div", null, "\xA0\xA0", props.text) : null)))), "\xA9 ", 1900 + new Date().getYear(), " ", " "))));
 };
 
 Footer.propTypes = {

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,10 +366,12 @@ const Toolbar = props => {
     style: {
       marginRight: '8px'
     }
-  }, "Share screen")))))))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+  }, "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, {
@@ -393,13 +393,11 @@ const Toolbar = props => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'text'
   }, "People"))))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'inline-block'
-    }
+    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,10 +503,9 @@ 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,
     onClick: () => {
       toggleRecorder();
     }
@@ -517,7 +514,6 @@ const Toolbar = props => {
   })), "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();
     }
@@ -528,7 +524,6 @@ const Toolbar = props => {
   })), "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();
     }
@@ -536,10 +531,9 @@ 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,
     onClick: () => {
       if (screenShared) {
         stopShareScreen();
@@ -559,10 +553,9 @@ 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,
     onClick: () => {
       showPeople();
     }
@@ -571,7 +564,6 @@ const Toolbar = props => {
   })), /*#__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();

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);
@@ -231,16 +231,16 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     });
   };
 
-  const removeUser = user => {
-    if (props.calendarEvent.id === user.meetingId) {
-      const userId = user.userId;
+  const removeUser = payload => {
+    if (props.calendarEvent.id === payload.meetingId) {
+      const userId = payload.userId;
       const find = participants.find(p => p.userId === userId);
 
       if (find) {
         const newParticipants = participants.filter(p => p.userId !== userId);
+        setParticipants(newParticipants);
 
         if (newParticipants.length === 0) {
-          setParticipants(newParticipants);
           setAllUserParticipantsLeft(true);
           setRoomStatus(Status.LOBBY);
         }
@@ -330,7 +330,6 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     if (props.calendarEvent.host.username === sessionStorage.getItem('username')) {
       userFullName = props.calendarEvent.host.name;
     } else {
-      console.log("\n\n\n\nATTENDEEES : ", sessionStorage.getItem('username'));
       userFullName = props.calendarEvent.attendees.find(a => a.username === sessionStorage.getItem('username')).name;
     }
 
@@ -466,7 +465,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 +476,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/VCParticipantListItem.js

@@ -242,21 +242,7 @@ const VCParticipantListItem = props => {
   }), videoMuted && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'CAMERA_OFF',
     color: '#eb3f21'
-  })), sessionStorage.getItem('username') !== participant.userId && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: "More Actions"
-  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    onClick: handleClick,
-    size: "small",
-    sx: {
-      ml: 2
-    },
-    "aria-controls": openMoreActions ? 'account-menu' : undefined,
-    "aria-haspopup": "true",
-    "aria-expanded": openMoreActions ? 'true' : undefined
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: 'MORE',
-    color: '#404239'
-  })))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+  }))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
     anchorEl: anchorEl,
     id: "account-menu",
     open: openMoreActions,

package/dist/components/media/VCRoomParticipant.css

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

package/dist/components/media/VCRoomParticipant.js

@@ -651,8 +651,8 @@ const VCRoomParticipant = props => {
     className: props.sizing === 'sm' ? 'name-label-sm' : 'name-label',
     style: {
       position: 'absolute',
-      bottom: '0',
-      padding: props.isCurrentUser ? '4px 16px' : props.sizing !== 'sm' ? '16px' : '4px'
+      bottom: props.isCurrentUser ? '12px' : '0',
+      padding: props.isCurrentUser ? '4px 16px' : props.sizing !== 'sm' ? '4px' : '4px'
     }
   }, !props.isCurrentUser && getParticipantName(), !props.isCurrentUser && /*#__PURE__*/_react.default.createElement("span", {
     style: {

package/dist/components/media/VCRoomWorkspace.js

@@ -502,12 +502,10 @@ const VCRoomWorkspace = props => {
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, row.map((participant, index) => {
       return /*#__PURE__*/_react.default.createElement(_Grid.default, {
         item: true,
-        xs: 4,
         key: index + '-' + participant.userId,
         className: 'meetingParticipantContainer',
         style: {
           borderRadius: '4px',
-          width: 100 / row.length + '%',
           height: '100%',
           flexBasis: null,
           maxWidth: null
@@ -576,8 +574,7 @@ const VCRoomWorkspace = props => {
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           width: '100%',
-          height: 100 / grid.length + '%',
-          maxHeight: '50%'
+          height: '280px'
         }
       }, /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: index

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/dist/view/security/ChangePasswordBasic.js

@@ -159,25 +159,24 @@ const ChangePassword = props => {
       margin: 'auto'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row",
+    className: "row no-margin no-padding",
     style: _loginBasicStyle.default.title
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '30%',
-      textAlign: 'right'
-    },
-    className: 'col-*-*'
+      textAlign: 'right',
+      maxWidth: '60%'
+    }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
     alt: "..."
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '70%',
+      width: props.title.length === 0 ? '0' : '70%',
       textAlign: 'left',
       margin: 'auto',
       paddingLeft: '16px'
     },
-    className: 'col-*-*'
+    className: 'col'
   }, props.title)), !_Utils.default.isNull(message) ? /*#__PURE__*/_react.default.createElement(_Alert.default, {
     variant: alertVariant,
     show: !_Utils.default.isNull(message),
@@ -277,7 +276,11 @@ const ChangePassword = props => {
       marginRight: "8px"
     }
   }), isLoading && /*#__PURE__*/_react.default.createElement("span", null, "LOADING..."), !isLoading && /*#__PURE__*/_react.default.createElement("span", null, "CHANGE PASSWORD")))))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Footer.default, {
-    white: true
+    white: true,
+    logo: props.footerLogo,
+    text: props.footerText,
+    width: props.footerWidth,
+    splitterColor: props.footerSplitterColor
   })));
 };
 

package/dist/view/security/ForgotPasswordBasic.js

@@ -104,25 +104,24 @@ const ResetPassword = props => {
       margin: 'auto'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row",
+    className: "row no-margin no-padding",
     style: _loginBasicStyle.default.title
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '30%',
-      textAlign: 'right'
-    },
-    className: 'col-*-*'
+      textAlign: 'right',
+      maxWidth: '60%'
+    }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
     alt: "..."
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '70%',
+      width: props.title.length === 0 ? '0' : '70%',
       textAlign: 'left',
       margin: 'auto',
       paddingLeft: '16px'
     },
-    className: 'col-*-*'
+    className: 'col'
   }, props.title)), !_Utils.default.isNull(message) ? /*#__PURE__*/_react.default.createElement(_Alert.default, {
     variant: alertVariant,
     show: !_Utils.default.isNull(message),
@@ -171,7 +170,11 @@ const ResetPassword = props => {
     style: _loginBasicStyle.default.flatButton,
     startIcon: /*#__PURE__*/_react.default.createElement(_Lock.default, null)
   }, "Back to Login"))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Footer.default, {
-    white: true
+    white: true,
+    logo: props.footerLogo,
+    text: props.footerText,
+    width: props.footerWidth,
+    splitterColor: props.footerSplitterColor
   })));
 };
 

package/dist/view/security/LoginBasic.js

@@ -92,25 +92,24 @@ const Login = props => {
       margin: 'auto'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row",
+    className: "row no-margin no-padding",
     style: _loginBasicStyle.default.title
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '30%',
-      textAlign: 'right'
-    },
-    className: 'col-*-*'
+      textAlign: 'right',
+      maxWidth: '60%'
+    }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
     alt: "..."
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '70%',
+      width: props.title.length === 0 ? '0' : '70%',
       textAlign: 'left',
       margin: 'auto',
       paddingLeft: '16px'
     },
-    className: 'col-*-*'
+    className: 'col'
   }, props.title)), !_Utils.default.isNull(errorMessage) ? /*#__PURE__*/_react.default.createElement(_Alert.default, {
     variant: "danger",
     show: !_Utils.default.isNull(errorMessage),

package/dist/view/security/ResetPasswordBasic.js

@@ -156,25 +156,24 @@ const ResetPassword = props => {
       margin: 'auto'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row",
+    className: "row no-margin no-padding",
     style: _loginBasicStyle.default.title
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '30%',
-      textAlign: 'right'
-    },
-    className: 'col-*-*'
+      textAlign: 'right',
+      maxWidth: '60%'
+    }
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: props.logo,
     alt: "..."
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '70%',
+      width: props.title.length === 0 ? '0' : '70%',
       textAlign: 'left',
       margin: 'auto',
       paddingLeft: '16px'
     },
-    className: 'col-*-*'
+    className: 'col'
   }, props.title)), !_Utils.default.isNull(message) ? /*#__PURE__*/_react.default.createElement(_Alert.default, {
     variant: alertVariant,
     show: !_Utils.default.isNull(message),
@@ -273,7 +272,11 @@ const ResetPassword = props => {
       marginRight: "8px"
     }
   }), isLoading && /*#__PURE__*/_react.default.createElement("span", null, "LOADING..."), !isLoading && /*#__PURE__*/_react.default.createElement("span", null, "RESET PASSWORD")))))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Footer.default, {
-    white: true
+    white: true,
+    logo: props.footerLogo,
+    text: props.footerText,
+    width: props.footerWidth,
+    splitterColor: props.footerSplitterColor
   })));
 };
 

package/package.json

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