@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/media/MediaSoupHelper.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _mediasoupClient = require("mediasoup-client");
+
+var _VCEventType = require("./VCEventType");
+
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+
+var _VCEventManager = _interopRequireDefault(require("./VCEventManager"));
+
+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 MediaSoupHelper {
+  constructor() {
+    _defineProperty(this, "getParticipantDevice", async routerRtpCapabilities => {
+      let device;
+
+      try {
+        device = new _mediasoupClient.Device();
+      } catch (error) {
+        console.error(error);
+      }
+
+      await device.load({
+        routerRtpCapabilities
+      });
+      return device;
+    });
+
+    _defineProperty(this, "getConsumeStream", async (producerId, rtpCapabilities, consumerTransport, roomId, userId, type) => {
+      console.log("CONSUMING FROM : " + producerId);
+
+      if (consumerTransport) {
+        const data = await _SocketManager.default.emitEvent(_VCEventType.VCEventType.CONSUME, {
+          rtpCapabilities,
+          consumerTransportId: consumerTransport.id,
+          producerId,
+          roomId,
+          userId,
+          kind: type
+        });
+
+        if (data.params) {
+          const {
+            id,
+            kind,
+            rtpParameters
+          } = data.params;
+          let codecOptions = {};
+
+          try {
+            const consumer = await consumerTransport.consume({
+              id,
+              producerId,
+              kind,
+              rtpParameters,
+              codecOptions
+            });
+            console.log(consumer);
+            const stream = new MediaStream();
+            stream.addTrack(consumer.track);
+            return {
+              consumer,
+              stream,
+              kind
+            };
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+
+      return {};
+    });
+  }
+
+  async initConsumerTransport(device, roomId, userId) {
+    console.log("CREATING CONSUMER TRANSPORT FOR : " + userId);
+    let data = null;
+
+    try {
+      data = await _SocketManager.default.emitEvent(_VCEventType.VCEventType.CREATE_WEBRTC_TRANSPORT, {
+        forceTcp: false,
+        userId,
+        roomId
+      });
+    } catch (e) {
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, {});
+    }
+
+    if (!data || data.status === 'ERROR') {
+      if (data) {
+        console.error(data.error);
+      }
+
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, {});
+
+      return;
+    }
+
+    let consumerTransport = device.createRecvTransport(data.params);
+    consumerTransport.on('connect', function ({
+      dtlsParameters
+    }, callback, errback) {
+      console.log("CONSUMER CONNECT DTLS PARAMS : ", dtlsParameters);
+
+      _SocketManager.default.emitEvent(_VCEventType.VCEventType.CONNECT_TRANSPORT, {
+        dtlsParameters,
+        transportId: data.params.id,
+        userId,
+        roomId
+      }).then(callback).catch(errback);
+    }.bind(this));
+    consumerTransport.on('connectionstatechange', async function (state) {
+      switch (state) {
+        case 'connecting':
+          break;
+
+        case 'connected':
+          break;
+
+        case 'failed':
+          _VCEventManager.default.fireEvent(_VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED, {});
+
+          break;
+
+        default:
+          break;
+      }
+    }.bind(this));
+    return consumerTransport;
+  }
+
+  async initProducerTransport(device, roomId, userId) {
+    let data = null;
+
+    try {
+      data = await _SocketManager.default.emitEvent(_VCEventType.VCEventType.CREATE_WEBRTC_TRANSPORT, {
+        forceTcp: false,
+        rtpCapabilities: device.rtpCapabilities,
+        roomId,
+        userId
+      });
+    } catch (e) {
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, {});
+    }
+
+    if (!data || data.status === 'ERROR') {
+      if (data) {
+        console.error(data.error);
+      }
+
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, {});
+
+      return;
+    }
+
+    let producerTransport = device.createSendTransport(data.params);
+    producerTransport.on('connect', async function ({
+      dtlsParameters
+    }, callback, errback) {
+      _SocketManager.default.emitEvent(_VCEventType.VCEventType.CONNECT_TRANSPORT, {
+        dtlsParameters,
+        transportId: data.params.id,
+        roomId,
+        userId
+      }).then(callback).catch(errback);
+    }.bind(this));
+    producerTransport.on('produce', async function ({
+      kind,
+      rtpParameters,
+      appData
+    }, callback, errback) {
+      try {
+        const {
+          producerId
+        } = await _SocketManager.default.emitEvent(_VCEventType.VCEventType.PRODUCE, {
+          producerTransportId: producerTransport.id,
+          kind,
+          rtpParameters,
+          roomId,
+          userId,
+          appData
+        });
+        callback({
+          id: producerId
+        });
+      } catch (err) {
+        errback(err);
+      }
+    }.bind(this));
+    producerTransport.on('connectionstatechange', function (state) {
+      switch (state) {
+        case 'connecting':
+          break;
+
+        case 'connected':
+          break;
+
+        case 'failed':
+          producerTransport.close();
+          break;
+
+        default:
+          break;
+      }
+    }.bind(this));
+    return producerTransport;
+  }
+
+}
+
+const instance = new MediaSoupHelper();
+Object.freeze(instance);
+var _default = instance;
+exports.default = _default;

package/dist/components/media/Recorder.js

@@ -0,0 +1,235 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+
+var _VCEventManager = _interopRequireDefault(require("./VCEventManager"));
+
+var _VCEventType = require("./VCEventType");
+
+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; }
+
+const {
+  electron
+} = window;
+
+class Recorder {
+  constructor() {
+    _defineProperty(this, "init", async (meetingId, meetingTitle) => {
+      this.meetingId = meetingId;
+      this.meetingTitle = meetingTitle;
+    });
+
+    _defineProperty(this, "addTrack", (id, track) => {
+      console.log("ADDING TRACK FOR : " + id);
+      this.audioTracks.set(id, track);
+
+      if (this.recorder && this.recorder.state === 'recording') {
+        let mediaStream = new MediaStream([track]);
+        const mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(this.audioContext, {
+          mediaStream: mediaStream
+        });
+        mediaStreamAudioSourceNode.connect(this.mediaStreamAudioDestinationNode);
+      }
+    });
+
+    _defineProperty(this, "removeTrack", id => {
+      if (this.audioTracks.has(id)) {
+        this.audioTracks.delete(id);
+      }
+    });
+
+    _defineProperty(this, "handleRecordingDataAvailable", e => {
+      if (e.data.size > 0) {
+        console.log("ADDED CHUNK : " + this.recordingSequence);
+        const blob = new Blob([e.data], {
+          type: "video/webm"
+        });
+        const data = {
+          userId: _VCEventManager.default.getUserDetails().userId,
+          meetingId: this.meetingId,
+          name: this.meetingTitle,
+          type: blob.type,
+          size: blob.size,
+          sequenceNumber: this.recordingSequence,
+          sessionId: this.currentRecordingId
+        };
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+
+        let _this = this;
+
+        reader.onload = function (evt) {
+          const result = evt.target.result;
+          _this.recordingType = blob.type;
+          _this.recordingSize += blob.size;
+          data.recordedData = result.replace('data:video/webm;base64,', '');
+          console.log("======== SAVING RECORDING CHUNK =========");
+          console.log(data);
+
+          _SocketManager.default.emitEvent(_VCEventType.VCEventType.SAVE_RECORDING, data).then(data => {
+            console.log("===== SAVE RECORDING SUCCESS ======");
+
+            if (!_this.isRecording) {
+              console.log("======= STOPPING RECORDING =======", _this.meetingTitle);
+              const data = {
+                meetingId: _this.meetingId,
+                name: _this.meetingTitle,
+                type: _this.recordingType,
+                size: _this.recordingSize,
+                sequenceNumber: _this.recordingSequence,
+                sessionId: _this.currentRecordingId
+              };
+
+              _SocketManager.default.emitEvent(_VCEventType.VCEventType.STOP_RECORDING, data).catch(error => {});
+            }
+          }).catch(error => {
+            console.log("===== SAVE RECORDING ERROR ======");
+          });
+        };
+
+        _this.recordingSequence++;
+      } else {
+        console.log("no data to push");
+      }
+    });
+
+    _defineProperty(this, "recordMeeting", async () => {
+      this.recorder = await this.createMediaRecorder();
+
+      let _this = this;
+
+      if (this.recorder != null) {
+        _SocketManager.default.emitEvent(_VCEventType.VCEventType.TOGGLE_RECORD_MEETING, {
+          roomID: _this.meetingId,
+          isRecording: true
+        }).then(data => {
+          console.log("RECORDING STARTED : " + data.id);
+          _this.currentRecordingId = data.id;
+          _this.recordingSequence = 0;
+          _this.recordingSize = 0;
+          _this.recordingType = '';
+
+          _this.recorder.start(60000);
+
+          _this.isRecording = true;
+        }).catch(error => {
+          console.log("RECORD START ERROR");
+          console.log(error);
+        });
+      }
+    });
+
+    _defineProperty(this, "stopRecordingMeeting", () => {
+      try {
+        this.isRecording = false;
+
+        _SocketManager.default.emitEvent(_VCEventType.VCEventType.TOGGLE_RECORD_MEETING, {
+          roomID: this.meetingId,
+          isRecording: false
+        }).catch(error => {});
+
+        if (this.recorder && this.recorder.state === 'recording') {
+          if (this.recorder.stream) {
+            var _this$recorder$stream;
+
+            if (((_this$recorder$stream = this.recorder.stream.getVideoTracks()) === null || _this$recorder$stream === void 0 ? void 0 : _this$recorder$stream.length) > 0) {
+              this.recorder.stream.getVideoTracks()[0].stop();
+            }
+          }
+
+          this.recorder.stop();
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    });
+
+    _defineProperty(this, "handleStopRecording", e => {
+      this.isRecording = false;
+    });
+
+    _defineProperty(this, "createMediaRecorder", () => {
+      return new Promise((resolve, reject) => {
+        electron.ipcRenderer.getMainWindowId().then(id => {
+          if (id) {
+            const videoConstraints = {
+              audio: false,
+              video: {
+                mandatory: {
+                  chromeMediaSource: 'desktop',
+                  chromeMediaSourceId: id,
+                  minWidth: 1280,
+                  maxWidth: 1280,
+                  minHeight: 720,
+                  maxHeight: 720
+                }
+              }
+            };
+
+            let _this = this;
+
+            navigator.mediaDevices.getUserMedia(videoConstraints).then(stream => {
+              const options = {
+                mimeType: "video/webm; codecs=vp9"
+              };
+              let audioContext = new AudioContext();
+              let mediaStreamAudioDestinationNode = new MediaStreamAudioDestinationNode(audioContext);
+              let tracks = [mediaStreamAudioDestinationNode.stream.getAudioTracks()[0], stream.getVideoTracks()[0]];
+
+              if (this.audioTracks.size > 0) {
+                for (const value of this.audioTracks.values()) {
+                  tracks.push(value);
+                  let mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, {
+                    mediaStream: new MediaStream([value])
+                  });
+                  mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);
+                }
+              } else {
+                let mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, {
+                  mediaStream: new MediaStream(tracks)
+                });
+                mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);
+              }
+
+              console.log("INIT WITH TRACKS : ", tracks);
+              let initialMediaStream = new MediaStream(tracks);
+              const recorder = new MediaRecorder(initialMediaStream, options);
+              recorder.ondataavailable = _this.handleRecordingDataAvailable;
+              recorder.onstop = _this.handleStopRecording;
+              this.audioContext = audioContext;
+              this.mediaStreamAudioDestinationNode = mediaStreamAudioDestinationNode;
+              resolve(recorder);
+            }).catch(e => {
+              console.error(e);
+              reject(new Error(e.message));
+            });
+          } else {
+            reject(new Error("Cannot initialize recorder. Application screen source not found"));
+          }
+        });
+      });
+    });
+
+    this.meetingId = null;
+    this.meetingTitle = '';
+    this.recordingSequence = 0;
+    this.currentRecordingId = null;
+    this.recordingType = null;
+    this.recordingSize = null;
+    this.isRecording = false;
+    this.recorder = null;
+    this.audioTracks = new Map();
+  }
+
+}
+
+const instance = new Recorder();
+var _default = instance;
+exports.default = _default;

package/dist/components/media/SideBarContent.css

@@ -0,0 +1,54 @@
+.meeting-room-sb-container {
+  width: 100%;
+  height: 92%;
+}
+
+.meeting-room-sb-container .people-container,
+.request-to-join-dialog-content .people-container {
+  padding: 0 !important;
+}
+
+.meeting-room-sb-container .people-content,
+.request-to-join-dialog-content .people-content {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.meeting-room-sb-container .person-card-wrapper,
+.request-to-join-dialog-content .person-card-wrapper {
+  min-width: 100% !important;
+  padding-bottom: 4px;
+  padding-right: 0 !important;
+}
+
+.request-to-join-dialog-content .people-content {
+  max-height: 85% !important;
+  overflow-x: hidden !important;
+}
+
+.request-to-join-dialog-content .person-card-wrapper,
+.people-main-view .person-card-wrapper {
+  padding: 16px !important;
+  margin-right: 4px;
+  margin-top: 0;
+  margin-bottom: 4px !important;
+  background-color: #e9e9e9;
+  border-radius: 4px;
+}
+
+.meeting-room-sb-container .raised-hands{
+}
+
+.meeting-room-sb-container .toolbar{
+  height: 40px;
+  padding: 0 8px;
+  width: 100%;
+}
+
+.meeting-room-sb-container .toolbar button:hover {
+  transform: unset;
+}
+
+.meeting-room-sb-container .list{
+  height: 100%;
+}

package/dist/components/media/SideBarContent.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./SideBarContent.css");
+
+var _VCParticipantList = _interopRequireDefault(require("./VCParticipantList"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//import ChatRoom from '../chat/ChatRoom';
+const SideBarContent = props => {
+  const {
+    tab,
+    isHost,
+    meetingId,
+    participants,
+    meetingChat
+  } = props;
+
+  _react.default.useEffect(() => {}, [meetingChat]);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'meeting-room-sb-container'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'list'
+  }, tab === 'People' ? /*#__PURE__*/_react.default.createElement(_VCParticipantList.default, {
+    onChangeMeetingHostHandler: e => props.onChangeMeetingHostHandler(e),
+    onPinHandler: (participant, pinned) => props.onPinHandler(participant, pinned),
+    onBringToViewHandler: participant => props.onBringToViewHandler(participant),
+    onHostVideoMute: participant => props.onHostVideoMute(participant),
+    onHostAudioMute: participant => props.onHostAudioMute(participant),
+    isHost: isHost,
+    participants: participants
+  }) : null
+  /*<ChatRoom chatTab={true} selectedChat={meetingChat} meetingId={meetingId}/>*/
+  ));
+};
+
+var _default = SideBarContent;
+exports.default = _default;

package/dist/components/media/SocketRequest.js

@@ -0,0 +1,20 @@
+"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 SocketRequest {}
+
+exports.default = SocketRequest;
+
+_defineProperty(SocketRequest, "REGISTER_ONLINE", "REGISTER_ONLINE");
+
+_defineProperty(SocketRequest, "JOIN_MEETING", "JOIN_MEETING");
+
+_defineProperty(SocketRequest, "GET_LOBBY", "GET_LOBBY");
+
+_defineProperty(SocketRequest, "REQUEST_TO_JOIN_MEETING", "REQUEST_TO_JOIN_MEETING");

package/dist/components/media/SocketResponse.js

@@ -0,0 +1,16 @@
+"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 SocketResponse {}
+
+exports.default = SocketResponse;
+
+_defineProperty(SocketResponse, "WAITING_FOR_PERMISSION", "WAITING_FOR_PERMISSION");
+
+_defineProperty(SocketResponse, "JOIN_MEETING_PERMIT", "JOIN_MEETING_PERMIT");

package/dist/components/media/Timer.css

@@ -0,0 +1,30 @@
+.timer-container {
+  min-height: 48px;
+  min-width: 160px;
+  overflow: hidden;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.digit,
+.time-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.digit {
+  font-size: 20px;
+  border-radius: 4px;
+  border: 1px solid #d1d1d1;
+  background-color: #f1f1f1;
+  margin-right: 2px !important;
+  margin-left: 0 !important;
+  color: #000000;
+}
+
+.time-label {
+  font-size: 12px;
+}