@agilemotion/oui-react-js 1.3.7 → 1.3.9

package/dist/components/media/VCRoomWorkspace.js

@@ -0,0 +1,653 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./VCRoomWorkspace.css");
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+var _VCRoomParticipant = _interopRequireDefault(require("./VCRoomParticipant"));
+
+var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+
+var _VCEventManager = _interopRequireDefault(require("./VCEventManager"));
+
+var _MediaSoupHelper = _interopRequireDefault(require("./MediaSoupHelper"));
+
+var _Transports = _interopRequireDefault(require("./Transports"));
+
+var _VCEventType = require("./VCEventType");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+
+var _LobbyWaitingList = _interopRequireDefault(require("./LobbyWaitingList"));
+
+var _VCRoom = require("./VCRoom");
+
+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 MAX_COLS = 3;
+const MAX_ROWS = 2; // TODO : Clean-up all tracks and producers and consumers when the component closes
+
+const VCRoomWorkspace = props => {
+  const [currentUserParticipant, setCurrentUserParticipant] = _react.default.useState(null);
+
+  const [inViewParticipants, setInViewParticipants] = _react.default.useState([]);
+
+  const [consumerTransport, setConsumerTransport] = _react.default.useState(null); //const [videoRefresher, setVideoRefresher] = React.useState(false);
+
+
+  const [device, setDevice] = _react.default.useState(null);
+
+  const [shareScreenProducer, setShareScreenProducer] = _react.default.useState(null);
+
+  const [producerTransport, setProducerTransport] = _react.default.useState(null);
+
+  const [shareScreenSource, setShareScreenSource] = _react.default.useState(null);
+
+  const [screenShared, setScreenShared] = _react.default.useState(null);
+
+  const [someoneSharing, setSomeoneSharing] = _react.default.useState(null);
+
+  const [showSharedScreen, setShowSharedScreen] = _react.default.useState(false);
+
+  const [message, setMessage] = _react.default.useState('');
+
+  const [shareScreenConsumer, setShareScreenConsumer] = _react.default.useState(null);
+
+  const [grid, setGrid] = _react.default.useState(null);
+
+  const [eventHandler] = (0, _react.useState)({});
+  const transports = (0, _react.useRef)(new _Transports.default());
+  const shareScreenVideoRef = (0, _react.useRef)();
+  const shareScreenStream = (0, _react.useRef)();
+  const {
+    waitingList,
+    roomStatus,
+    meetingId,
+    meetingTitle,
+    whiteBoardShown,
+    videoMuted,
+    audioMuted,
+    isHost,
+    autoPermit,
+    rtpCapabilities,
+    onloadScreenShareData
+  } = props;
+
+  const produceScreenShare = async () => {
+    if (!device) {
+      console.error('No available device');
+      return;
+    }
+
+    if (!device.canProduce('video')) {
+      console.error('Cannot produce screen share');
+      return;
+    }
+
+    if (shareScreenProducer) {
+      console.log('Share screen producer already exist');
+      return;
+    }
+
+    const videoConstraints = {
+      cursor: true,
+      audio: false,
+      video: {
+        mandatory: {
+          chromeMediaSource: 'desktop',
+          chromeMediaSourceId: shareScreenSource.id,
+          width: {
+            min: 160,
+            ideal: 320,
+            max: 640
+          },
+          height: {
+            min: 120,
+            ideal: 240,
+            max: 480
+          },
+          frameRate: {
+            min: 15,
+            max: 15
+          },
+          googCpuOveruseDetection: true,
+          googCpuOveruseEncodeUsage: true,
+          googCpuOveruseThreshold: 70
+        }
+      }
+    };
+    let stream = await navigator.mediaDevices.getUserMedia(videoConstraints);
+    const track = stream.getVideoTracks()[0];
+    const params = {
+      track,
+      appData: {
+        screenSharing: true
+      }
+    };
+    let producer = await producerTransport.produce(params);
+    setShareScreenProducer(producer);
+    shareScreenStream.current = stream;
+
+    if (showSharedScreen) {
+      shareScreenVideoRef.current.srcObject = stream;
+    }
+
+    producer.on('transportclose', () => {
+      stream.srcObject.getTracks().forEach(function (track) {
+        track.stop();
+      });
+      setShareScreenProducer(null);
+    });
+    producer.on('close', () => {
+      stream.srcObject.getTracks().forEach(function (track) {
+        track.stop();
+      });
+      setShareScreenProducer(null);
+    });
+  };
+
+  const stopProducingScreenShare = async () => {
+    if (!shareScreenProducer) {
+      console.log('There is no share screen producer');
+      return;
+    }
+
+    let producerId = shareScreenProducer.id;
+    console.log('Close producer', producerId);
+
+    _SocketManager.default.emitEvent(_VCEventType.VCEventType.PRODUCER_CLOSED, {
+      userId: sessionStorage.getItem("username"),
+      producerId,
+      roomId: meetingId
+    }).catch(e => console.log("PRODUCER_CLOSED ERROR : ", e));
+
+    shareScreenProducer.close();
+    stopShareScreenConsumerTracks();
+    setShareScreenProducer(null);
+    setSomeoneSharing(false);
+    setShareScreenSource(null);
+    setScreenShared(false);
+
+    if (shareScreenStream.current) {
+      for (const track of shareScreenStream.current.getTracks()) {
+        track.stop();
+      }
+    }
+  };
+
+  const onNewProducers = producers => {
+    let screenShareProducer = producers.find(p => p.screenSharing);
+
+    if (screenShareProducer) {
+      consume(screenShareProducer);
+    }
+  };
+
+  const stopShareScreenConsumerTracks = () => {
+    let el = document.getElementById('share-screen-video');
+
+    if (el) {
+      for (const track of el.srcObject.getTracks()) {
+        track.stop();
+      }
+
+      el.parentNode.removeChild(el);
+    }
+  };
+
+  const consume = async producer => {
+    _MediaSoupHelper.default.getConsumeStream(producer.producerId, device.rtpCapabilities, consumerTransport, props.meetingId, sessionStorage.getItem("username"), 'video').then(({
+      consumer,
+      stream,
+      kind
+    }) => {
+      if (consumer) {
+        setShareScreenConsumer(consumer);
+        console.log("=====================================SHARING CONSUME=====================================");
+        props.sharingHandler(true);
+        setScreenShared(true);
+        setSomeoneSharing(true); //setShowSharedScreen(true);
+
+        setShareScreenSource(null);
+        setMessage(producer.username + " is sharing");
+        shareScreenVideoRef.current.srcObject = stream;
+        shareScreenStream.current = stream; //setVideoRefresher(!videoRefresher);
+
+        consumer.on('trackended', () => {
+          stopShareScreenConsumerTracks();
+        });
+        consumer.on('transportclose', () => {
+          stopShareScreenConsumerTracks();
+        });
+      }
+    });
+  };
+
+  const handler = () => {
+    return {
+      get id() {
+        return 'meeting-participant-grid';
+      },
+
+      on: (eventType, be) => {
+        switch (eventType) {
+          case _VCEventType.VCEventType.PARTICIPANT_IN_VIEW:
+            onBringToView(be);
+            break;
+
+          case _VCEventType.VCEventType.NEW_PRODUCERS:
+            onNewProducers(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.CONSUMER_CLOSED:
+            if (shareScreenConsumer && shareScreenConsumer.id === be.payload.consumerId) {
+              stopShareScreenConsumerTracks();
+              setMessage(null);
+              props.sharingHandler(false);
+              setSomeoneSharing(false);
+              setScreenShared(false);
+              setShowSharedScreen(false);
+            }
+
+            break;
+        }
+      }
+    };
+  };
+
+  const onBringToView = payload => {
+    if (!inViewParticipants.find(p => p.userId === payload.userId)) {
+      if (inViewParticipants.length === MAX_COLS * MAX_ROWS) {
+        let offViewParticipant = inViewParticipants[inViewParticipants.length - 1];
+
+        _VCEventManager.default.fireEvent(_VCEventType.VCEventType.PARTICIPANT_OFF_VIEW, offViewParticipant);
+
+        inViewParticipants.splice(inViewParticipants.length - 1, 1);
+        offViewParticipant.inView = false;
+      }
+
+      let participant = props.participants.find(p => p.userId === payload.userId);
+      inViewParticipants.push(participant); // Refresh the list
+
+      setInViewParticipants([].concat(inViewParticipants));
+    }
+  };
+
+  const removeFromView = participant => {
+    participant.inView = false;
+    setInViewParticipants(inViewParticipants.filter(p => p.userId !== participant.userId));
+
+    _VCEventManager.default.fireEvent(_VCEventType.VCEventType.PARTICIPANT_OFF_VIEW, participant);
+  };
+
+  const setupSelfDevices = async () => {
+    let device = await _MediaSoupHelper.default.getParticipantDevice(rtpCapabilities);
+    setDevice(device);
+    let consumerTransport = await _MediaSoupHelper.default.initConsumerTransport(device, meetingId, sessionStorage.getItem("username"));
+    let producerTransport = await _MediaSoupHelper.default.initProducerTransport(device, meetingId, sessionStorage.getItem("username"));
+    setConsumerTransport(consumerTransport);
+    setProducerTransport(producerTransport);
+    transports.current.setConsumerTransport(consumerTransport);
+    transports.current.setProducerTransport(producerTransport);
+  };
+
+  (0, _react.useEffect)(() => {
+    eventHandler.api = handler();
+  });
+  (0, _react.useEffect)(() => {}, [props.audioMuted]);
+  (0, _react.useEffect)(() => {
+    setupGrid();
+  }, [inViewParticipants]);
+  /*useEffect(() => {
+    if(grid === null) {
+      setupGrid();
+    }
+  }, [grid]);*/
+
+  (0, _react.useEffect)(() => {
+    if (screenShared && shareScreenSource) {
+      produceScreenShare();
+    } else {
+      stopProducingScreenShare();
+    }
+  }, [screenShared, shareScreenSource]);
+  (0, _react.useEffect)(() => {
+    if (onloadScreenShareData && device && consumerTransport) {
+      consume(onloadScreenShareData);
+    }
+  }, [onloadScreenShareData, device, consumerTransport]);
+  (0, _react.useEffect)(() => {
+    setShareScreenSource(props.shareScreenSource);
+
+    if (props.shareScreenSource && props.shareScreenSource.name) {
+      var _props$shareScreenSou;
+
+      setShowSharedScreen(((_props$shareScreenSou = props.shareScreenSource.name) === null || _props$shareScreenSou === void 0 ? void 0 : _props$shareScreenSou.toLowerCase()) !== 'entire screen' && props.shareScreenSource.name.toLowerCase() !== 'armscor connect');
+    }
+  }, [props.shareScreenSource]);
+  (0, _react.useEffect)(() => {
+    setScreenShared(props.screenShared);
+  }, [props.screenShared]);
+  (0, _react.useEffect)(() => {
+    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.NEW_PRODUCERS, _VCEventType.VCEventType.CONSUMER_CLOSED, _VCEventType.VCEventType.PARTICIPANT_IN_VIEW);
+
+    setupSelfDevices();
+    return () => {
+      _VCEventManager.default.removeSubscriptions(eventHandler);
+
+      transports.current.closeConsumerTransport();
+      transports.current.closeProducerTransport();
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (grid) {
+      props.onGridSetup();
+    }
+  }, [grid]);
+  (0, _react.useEffect)(() => {
+    if (props.participants && props.currentUserFullName) {
+      setCurrentUserParticipant({
+        isCurrentUser: true,
+        userId: sessionStorage.getItem("username"),
+        peer: null,
+        name: props.currentUserFullName,
+        avatarId: sessionStorage.getItem("userAvatarId"),
+        videoMuted,
+        audioMuted
+      });
+      let counter = 0;
+      inViewParticipants.splice(0, inViewParticipants.length);
+
+      for (const participant of props.participants) {
+        participant.inView = true;
+        inViewParticipants.push(participant);
+
+        if (++counter >= MAX_ROWS * MAX_COLS) {
+          break;
+        }
+      }
+
+      setupGrid(inViewParticipants);
+    }
+  }, [props.participants, props.currentUserFullName]);
+
+  const setupGrid = () => {
+    let inViewGrid = [];
+    let numRows = inViewParticipants.length < MAX_ROWS ? inViewParticipants.length : MAX_ROWS;
+    let rows = inViewParticipants.length === 2 ? 1 : numRows;
+
+    for (let i = 0; i < rows; i++) {
+      inViewGrid.push([]);
+    }
+
+    let currentRowIndex = 0;
+
+    for (let i = 0; i < inViewParticipants.length; i++) {
+      inViewGrid[currentRowIndex].push(inViewParticipants[i]);
+
+      if (currentRowIndex++ === rows - 1) {
+        currentRowIndex = 0;
+      }
+    }
+
+    setGrid(inViewGrid);
+  };
+
+  function renderStrip() {
+    return inViewParticipants && inViewParticipants.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        overflowX: 'auto',
+        maxWidth: '100%',
+        width: '100%',
+        borderRadius: '4px',
+        height: '148px',
+        overflowY: 'hidden',
+        alignItems: 'center'
+      },
+      className: "row flex-row flex-nowrap no-margin no-padding"
+    }, inViewParticipants.map((participant, index) => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'col-*-*',
+        key: index + "-" + participant.userId,
+        style: {
+          borderRadius: '4px',
+          minWidth: "200px",
+          padding: '4px',
+          height: '148px'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_VCRoomParticipant.default, {
+        data: participant,
+        device: device,
+        meetingId: meetingId,
+        audioMuted: participant.audioMuted,
+        videoMuted: participant.videoMuted,
+        onRemoveFromView: participant => removeFromView(participant),
+        consumerTransport: consumerTransport,
+        rtpCapabilities: rtpCapabilities,
+        numberOfInViewParticipants: inViewParticipants.length,
+        sizing: 'sm',
+        onHostAudioMute: () => props.onHostAudioMute(participant),
+        onHostVideoMute: () => props.onHostVideoMute(participant),
+        isHost: isHost
+      }));
+    }));
+  }
+
+  const renderRow = (row, index) => {
+    return /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      style: {
+        height: '100%',
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      key: index,
+      direction: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      container: true,
+      item: true,
+      spacing: 2
+    }, /*#__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
+        }
+      }, /*#__PURE__*/_react.default.createElement(_VCRoomParticipant.default, {
+        data: participant,
+        device: device,
+        meetingId: meetingId,
+        audioMuted: participant.audioMuted,
+        videoMuted: participant.videoMuted,
+        onRemoveFromView: participant => removeFromView(participant),
+        consumerTransport: consumerTransport,
+        numberOfInViewParticipants: inViewParticipants.length,
+        rtpCapabilities: rtpCapabilities,
+        onHostAudioMute: () => props.onHostAudioMute(participant),
+        onHostVideoMute: () => props.onHostVideoMute(participant),
+        isHost: isHost
+      }));
+    })));
+  };
+
+  return device ? /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row-*-* grid',
+    style: {
+      height: '100%',
+      width: '100%'
+    }
+  }, roomStatus !== "LOBBY" && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row-*-* messages',
+    style: {
+      width: '100%',
+      height: '40px',
+      marginLeft: '0',
+      marginRight: '0',
+      display: 'flex',
+      alignItems: 'center',
+      color: 'white',
+      fontSize: '16px',
+      padding: '4px',
+      overflowY: 'auto'
+    }
+  }, (screenShared && shareScreenSource && !showSharedScreen || someoneSharing) && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row-*-*'
+  }, shareScreenSource && shareScreenSource.name && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'WARNING',
+    color: 'rgb(235, 63, 33)'
+  })), /*#__PURE__*/_react.default.createElement("div", null, (shareScreenSource.name.toLowerCase() === 'entire screen' ? 'Your entire screen' : 'The ' + shareScreenSource.name + ' window') + ' is being shared with other participants')), message && /*#__PURE__*/_react.default.createElement("span", null, message))), (roomStatus === "LOBBY" || props.allUserParticipantsLeft) && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 'calc(100% - 216px)',
+      fontSize: '28px',
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      display: 'flex'
+    }
+  }, _VCRoom.WAITING_FOR_OTHERS_TO_JOIN_MESSAGE), grid && roomStatus !== "LOBBY" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (!screenShared && !whiteBoardShown || screenShared && !showSharedScreen && !someoneSharing) && /*#__PURE__*/_react.default.createElement(_Box.default, {
+    style: {
+      flexGrow: 1,
+      height: 'calc(100% - 296px)',
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    spacing: 1,
+    style: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      maxHeight: '100%',
+      height: "100%",
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    }
+  }, grid.map((row, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: "100%",
+        height: 100 / grid.length + "%",
+        maxHeight: "50%"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: index
+    }, renderRow(row, index)));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'content-box',
+    style: {
+      display: !(screenShared && showSharedScreen || someoneSharing) ? 'none' : null
+    }
+  }, /*#__PURE__*/_react.default.createElement("video", {
+    id: 'screen-share-video',
+    width: 640,
+    height: 320,
+    autoPlay: true,
+    ref: shareScreenVideoRef,
+    muted: true,
+    style: {
+      width: '100%',
+      height: '100%',
+      zIndex: '0'
+    }
+  })), whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'content-box'
+  }, "Whiteboard...")), roomStatus !== "LOBBY" && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row-*-*',
+    style: {
+      width: '100%',
+      height: '40px',
+      marginLeft: '0',
+      marginRight: '0',
+      display: 'flex',
+      alignItems: 'center',
+      color: 'white',
+      fontSize: '16px',
+      padding: '4px'
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row-*-*',
+    style: {
+      width: '100%',
+      height: '152px',
+      marginRight: '0',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 'calc(100% - 232px)',
+      height: '148px',
+      borderRadius: '4px',
+      marginRight: '16px',
+      paddingLeft: '16px'
+    }
+  }, (screenShared && showSharedScreen || whiteBoardShown || roomStatus === "LOBBY" || someoneSharing) && grid && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, renderStrip())), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col no-margin no-padding',
+    style: {
+      width: '200px',
+      height: '148px'
+    }
+  }, currentUserParticipant && /*#__PURE__*/_react.default.createElement(_VCRoomParticipant.default, {
+    data: currentUserParticipant,
+    device: device,
+    meetingId: meetingId,
+    meetingTitle: meetingTitle,
+    rtpCapabilities: rtpCapabilities,
+    isCurrentUser: true,
+    onAudioDeviceChange: props.onAudioDeviceChange,
+    consumerTransport: consumerTransport,
+    producerTransport: producerTransport,
+    audioMuted: audioMuted,
+    videoMuted: videoMuted,
+    numberOfInViewParticipants: inViewParticipants.length,
+    sizing: 'md',
+    onHostAudioMute: () => props.onHostAudioMute(currentUserParticipant),
+    onHostVideoMute: () => props.onHostVideoMute(currentUserParticipant),
+    isHost: isHost
+  }))), waitingList && waitingList.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'no-side-margin no-side-padding grid-side-bar',
+    style: {
+      backgroundColor: 'transparent',
+      position: 'absolute',
+      top: '0',
+      right: '16px'
+    }
+  }, waitingList && waitingList.length > 0 && /*#__PURE__*/_react.default.createElement(_LobbyWaitingList.default, {
+    waitingList: waitingList,
+    autoHeight: true,
+    rejectUserHandler: props.rejectUserHandler,
+    acceptUserHandler: props.acceptUserHandler
+  }))) : null;
+};
+
+var _default = VCRoomWorkspace;
+exports.default = _default;

package/dist/components/media/Video.css

@@ -0,0 +1,4 @@
+.user-video {
+    min-width: 280px;
+    height: 280px;
+}