@agilemotion/oui-react-js 1.3.7 → 1.3.9

package/dist/components/media/Timer.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./Timer.css");
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+
+var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
+
+var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const MINUTE = 60000;
+
+const Timer = props => {
+  const {
+    time
+  } = props;
+  const [minutes, setMinutes] = (0, _react.useState)(0);
+  const [hours, setHours] = (0, _react.useState)(0);
+  const interval = (0, _react.useRef)();
+
+  const setupInterval = () => {
+    interval.current = setInterval(function () {
+      if (minutes > 59) {
+        setMinutes(0);
+        setHours(hours + 1);
+      } else {
+        setMinutes(minutes + 1);
+      }
+    }, MINUTE);
+  };
+
+  (0, _react.useEffect)(() => {
+    setupInterval();
+    return () => {
+      clearInterval(interval.current);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (interval.current) {
+      clearInterval(interval.current);
+    }
+
+    setupInterval();
+  }, [minutes]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'timer-container row'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '72px'
+    },
+    className: 'col'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row digit no-padding'
+  }, hours), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row time-label no-margin no-padding'
+  }, "Hour", hours !== 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "s"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row digit no-padding'
+  }, minutes), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row time-label no-margin no-padding'
+  }, "Minute", minutes !== 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "s"))))));
+};
+
+var _default = Timer;
+exports.default = _default;

package/dist/components/media/Toolbar.css

@@ -0,0 +1,20 @@
+
+.ouiToolbar button {
+    width: 100% !important;
+}
+
+.ouiToolbar .itemWrapper div {
+    width: 100% !important;
+}
+
+.marker {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: #404239;
+    background-color: #e9e9e9;
+    font-size: 14px;
+}

package/dist/components/media/Toolbar.js

@@ -0,0 +1,470 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./Toolbar.css");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _core = require("@material-ui/core");
+
+var _icons = require("@material-ui/icons");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _LottieIcon = _interopRequireDefault(require("../LottieIcon"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _Timer = _interopRequireDefault(require("./Timer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const config = {
+  eventHandlingConfig: {
+    subscriptions: [{
+      eventType: 'RAISE_HAND',
+      actions: [{
+        actionType: 'script',
+        script: {
+          lines: ['@#{this}.onRaiseHand($event.data)']
+        }
+      }]
+    }, {
+      eventType: 'LOWER_HAND',
+      actions: [{
+        actionType: 'script',
+        script: {
+          lines: ['@#{this}.onLowerHand($event.data)']
+        }
+      }]
+    }]
+  }
+};
+
+const Toolbar = props => {
+  const [numberOfHandsRaised, setNumberOfHandsRaised] = (0, _react.useState)(0);
+  const [videoMuted, setVideoMuted] = (0, _react.useState)(props.videoMuted);
+  const [audioMuted, setAudioMuted] = (0, _react.useState)(props.audioMuted);
+  const [isRecording, setIsRecording] = (0, _react.useState)(false);
+  const [autoPermit, setAutoPermit] = (0, _react.useState)(false);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const openMoreActions = Boolean(anchorEl);
+  const [screenShared, setScreenShared] = (0, _react.useState)(false);
+  const [roomStatus, setRoomStatus] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    eventHandler.api = api();
+
+    let parsedConfig = _Utils.default.parseConfig(config, props.viewId);
+
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.eventHandler, props.viewId);
+
+    _Observable.default.addSystemSubscriptions(parsedConfig);
+
+    return () => {};
+  }, []);
+
+  const api = () => {
+    return {
+      get id() {
+        return 'meeting-toolbar';
+      },
+
+      onRaiseHand: be => {
+        onRaiseHand(be.payload);
+      },
+      onLowerHand: be => {
+        onLowerHand(be.payload);
+      }
+    };
+  };
+
+  const {
+    participants,
+    hasUnreadChats,
+    hasUnseenWhiteboardEvent,
+    whiteBoardShown,
+    displayState,
+    eventHandler,
+    handRaised,
+    isHost,
+    someoneSharing,
+    videoDisabled,
+    audioDisabled
+  } = props;
+  (0, _react.useEffect)(() => {
+    setScreenShared(props.screenShared);
+  }, [props.screenShared]);
+  (0, _react.useEffect)(() => {
+    setIsRecording(props.isRecording);
+  }, [props.isRecording]);
+
+  const onRaiseHand = payload => {
+    setNumberOfHandsRaised(numberOfHandsRaised + 1);
+  };
+
+  const onLowerHand = payload => {
+    setNumberOfHandsRaised(numberOfHandsRaised - 1);
+  };
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const muteVideo = () => {
+    setVideoMuted(prevStatus => !prevStatus);
+  };
+
+  const toggleRecorder = () => {
+    if (isRecording) {
+      eventHandler.stopRecording();
+    } else {
+      eventHandler.recordMeeting();
+    }
+
+    setIsRecording(!isRecording);
+  };
+
+  (0, _react.useEffect)(() => {
+    setRoomStatus(props.roomStatus);
+  }, [props.roomStatus]);
+  (0, _react.useEffect)(() => {
+    setAutoPermit(props.autoPermit);
+  }, [props.autoPermit]);
+  (0, _react.useEffect)(() => {
+    eventHandler.onMuteVideo(videoMuted);
+  }, [videoMuted]);
+  (0, _react.useEffect)(() => {
+    setVideoMuted(props.videoMuted);
+  }, [props.videoMuted]);
+  (0, _react.useEffect)(() => {
+    setAudioMuted(props.audioMuted);
+  }, [props.audioMuted]);
+  (0, _react.useEffect)(() => {
+    eventHandler.onMuteAudio(audioMuted);
+  }, [audioMuted]);
+  (0, _react.useEffect)(() => {
+    eventHandler.api = api();
+  });
+
+  const muteAudio = () => {
+    setAudioMuted(prevStatus => !prevStatus);
+    eventHandler.onMuteAudio(prevStatus => !prevStatus);
+  };
+
+  const shareScreen = () => {
+    eventHandler.shareScreen(); //setScreenShared(true);
+  };
+
+  const stopShareScreen = () => {
+    eventHandler.stopShareScreen(); //setScreenShared(false);
+  };
+
+  const endCall = () => {
+    eventHandler.endCall();
+  };
+
+  const showPeople = () => {
+    eventHandler.showPeople();
+  };
+
+  const showWhiteboard = () => {
+    eventHandler.showWhiteboard();
+  };
+
+  const showChat = () => {
+    eventHandler.showChat();
+  };
+
+  const raiseHand = () => {
+    eventHandler.raiseHand();
+  };
+
+  const lowerHand = () => {
+    eventHandler.lowerHand();
+  };
+
+  const closeWindow = () => {
+    eventHandler.closeWindow();
+  };
+
+  const toggleAutoPermit = () => {
+    setAutoPermit(prevAutoPermit => !prevAutoPermit);
+    eventHandler.toggleAutoPermit();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%'
+    },
+    className: 'centered-flex-box'
+  }, roomStatus === 'SESSION_ENDED' ? /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row centered-flex-box'
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Close"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      closeWindow();
+    },
+    style: {
+      color: '#eb3f21',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CLOSE'
+  })))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row',
+    style: {
+      justifyContent: 'right',
+      margin: '8px',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '120px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Timer.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'right',
+      width: 'calc(100% - 120px)'
+    },
+    className: 'col'
+  }, isHost && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Record"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      toggleRecorder();
+    },
+    style: {
+      color: isRecording ? 'white' : '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Record"), isRecording ? /*#__PURE__*/_react.default.createElement(_LottieIcon.default, {
+    id: 'recording'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'RECORD'
+  }))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !videoDisabled && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Video"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      muteVideo();
+    },
+    style: {
+      color: videoMuted ? '#eb3f21' : '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Camera"), videoMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CAMERA_OFF'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CAMERA'
+  }))), (roomStatus === 'SESSION' || roomStatus === 'LOBBY') && !audioDisabled && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Audio"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      muteAudio();
+    },
+    style: {
+      color: audioMuted ? '#eb3f21' : '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Mic"), audioMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC_OFF'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC'
+  }))), ' ', roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && !whiteBoardShown && (!someoneSharing || screenShared) && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Share"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      if (screenShared) {
+        stopShareScreen();
+      } else {
+        shareScreen();
+      }
+    },
+    style: {
+      color: screenShared ? '#8eb2f5' : '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Share screen"), screenShared ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CANCEL_PRESENTATION'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PRESENT_TO_ALL'
+  }))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Chat"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    style: {
+      color: '#404239',
+      marginRight: '4px'
+    },
+    onClick: e => showChat()
+  }, hasUnreadChats && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'unread-dot'
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Chat"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CHAT_BUBBLE'
+  }))), roomStatus === 'SESSION' && displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'centered-flex-box'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'marker'
+  }, participants.length), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "People"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: e => showPeople(),
+    style: {
+      color: '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "People"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PEOPLE'
+  }))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'centered-flex-box'
+  }, numberOfHandsRaised > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'marker'
+  }, numberOfHandsRaised), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Raise hand"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: e => {
+      if (handRaised) {
+        lowerHand();
+      } else {
+        raiseHand();
+      }
+    },
+    style: {
+      color: handRaised ? '#e2b030' : '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Raise"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'PAN_TOOL'
+  }))))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "More Actions"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleClick,
+    sx: {
+      ml: 2
+    },
+    "aria-controls": openMoreActions ? 'account-menu' : undefined,
+    "aria-haspopup": "true",
+    "aria-expanded": openMoreActions ? 'true' : undefined,
+    style: {
+      color: '#404239',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MORE'
+  }))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Hang up"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: endCall,
+    style: {
+      backgroundColor: '#eb3f21',
+      color: 'white',
+      marginRight: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '8px'
+    }
+  }, "Hang up"), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CALL_END'
+  }))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+    anchorEl: anchorEl,
+    id: "account-menu",
+    open: openMoreActions,
+    onClose: handleClose,
+    onClick: handleClose,
+    PaperProps: {
+      elevation: 0,
+      sx: {
+        overflow: 'visible',
+        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+        mt: 1.5,
+        '& .MuiList-root': {
+          border: '1px solid red'
+        },
+        '& .MuiAvatar-root': {
+          width: 32,
+          height: 32,
+          ml: -0.5,
+          mr: 1
+        },
+        '&:before': {
+          content: '""',
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          right: 14,
+          width: 10,
+          height: 10,
+          bgcolor: 'primary',
+          transform: 'translateY(-50%) rotate(45deg)',
+          zIndex: 0
+        }
+      }
+    },
+    transformOrigin: {
+      horizontal: 20,
+      vertical: 136
+    },
+    anchorOrigin: {
+      horizontal: 'right',
+      vertical: 'top'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    disabled: !isHost,
+    onClick: toggleAutoPermit
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_icons.PersonAdd, {
+    fontSize: "small"
+  })), autoPermit ? 'Disable auto permit [Auto permit is currently on]' : 'Enable auto permit [Auto permit is currently off]')), ";");
+};
+
+var _default = Toolbar;
+exports.default = _default;

package/dist/components/media/Tracks.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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 Tracks {
+  constructor() {
+    _defineProperty(this, "stopVideoTrack", () => {
+      if (this.videoTrack) {
+        this.videoTrack.stop();
+      }
+    });
+
+    _defineProperty(this, "setVideoTrack", track => {
+      this.videoTrack = track;
+    });
+
+    _defineProperty(this, "stopAudioTrack", () => {
+      if (this.audioTrack) {
+        this.audioTrack.stop();
+      }
+    });
+
+    _defineProperty(this, "getAudioTrack", () => {
+      return this.audioTrack;
+    });
+
+    _defineProperty(this, "setAudioTrack", track => {
+      this.audioTrack = track;
+    });
+  }
+
+}
+
+exports.default = Tracks;