@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/media/VCRoomWorkspace.js

@@ -0,0 +1,666 @@
+"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,
+    displayState
+  } = props;
+
+  const startShareScreen = () => {
+    produceScreenShare();
+  };
+
+  const stopShareScreen = () => {
+    if (shareScreenStream.current) {
+      for (const track of shareScreenStream.current.getTracks()) {
+        track.stop();
+      }
+
+      shareScreenStream.current = null;
+      removeShareScreenElement();
+    }
+
+    props.onStopSharing();
+  };
+
+  const produceScreenShare = async () => {
+    if (!device) {
+      console.error('No available device');
+      return;
+    }
+
+    if (!producerTransport) {
+      console.error('No producer transport');
+      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: {
+          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
+        }
+      },
+      preferCurrentTab: true,
+      selfBrowserSurface: 'include',
+      systemAudio: 'exclude',
+      surfaceSwitching: 'exclude',
+      monitorTypeSurfaces: 'exclude'
+    };
+    navigator.mediaDevices.getDisplayMedia(videoConstraints).then(async stream => {
+      const track = stream.getVideoTracks()[0];
+
+      track.onended = e => {
+        track.stop();
+        stopShareScreen();
+      };
+
+      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);
+      });
+    }).catch(e => {
+      console.error(e);
+    });
+  };
+
+  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();
+    stopShareScreen();
+    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 removeShareScreenElement = () => {
+    let el = document.getElementById('share-screen-video');
+
+    if (el) {
+      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', () => {
+          removeShareScreenElement();
+        });
+        consumer.on('transportclose', () => {
+          removeShareScreenElement();
+        });
+      }
+    });
+  };
+
+  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) {
+              removeShareScreenElement();
+              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)(() => {
+    setScreenShared(props.screenShared);
+
+    if (props.screenShared) {
+      startShareScreen();
+    } else {
+      stopShareScreen();
+    }
+  }, [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,
+        displayState: displayState,
+        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,
+        sizing: displayState === 'MINIMIZED' ? 'sm' : 'md',
+        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
+      }));
+    })));
+  };
+
+  function renderCurrentParticipant() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, 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,
+      onHostAudioMute: () => props.onHostAudioMute(currentUserParticipant),
+      onHostVideoMute: () => props.onHostVideoMute(currentUserParticipant),
+      isHost: isHost
+    }));
+  }
+
+  function renderParticipantGrid() {
+    return (!screenShared && !whiteBoardShown || screenShared && !showSharedScreen && !someoneSharing) && /*#__PURE__*/_react.default.createElement(_Box.default, {
+      style: {
+        flexGrow: 1,
+        height: displayState === 'MAXIMIZED' ? 'calc(100% - 216px)' : '100%',
+        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)));
+    })));
+  }
+
+  return device ? /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row-*-* grid',
+    style: {
+      height: displayState === 'MAXIMIZED' ? '100%' : 'calc(100% - 100px)',
+      width: '100%',
+      display: displayState === 'MAXIMIZED' ? null : 'table'
+    }
+  }, (roomStatus === 'LOBBY' || props.allUserParticipantsLeft) && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: displayState === 'MAXIMIZED' ? 'calc(100% - 216px)' : '100%',
+      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, displayState === 'MAXIMIZED' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderParticipantGrid()), displayState === 'MINIMIZED' && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 'calc(100% - 200px)',
+      display: 'table-cell'
+    }
+  }, renderParticipantGrid()), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'content-box',
+    style: {
+      display: !(screenShared && showSharedScreen || someoneSharing) ? 'none' : null
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      maxHeight: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("video", {
+    id: 'screen-share-video',
+    autoPlay: true,
+    ref: shareScreenVideoRef,
+    muted: true,
+    style: {
+      width: '100%',
+      maxHeight: '100%',
+      zIndex: '0'
+    }
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(displayState === 'MAXIMIZED' ? 'row-*-*' : ''),
+    style: {
+      width: displayState === 'MAXIMIZED' ? '100%' : '200px',
+      height: displayState === 'MAXIMIZED' ? '152px' : '100%',
+      marginRight: '0',
+      display: screenShared && showSharedScreen || someoneSharing ? 'none' : displayState === 'MAXIMIZED' ? 'flex' : 'table-cell',
+      alignItems: 'center',
+      verticalAlign: 'top'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: displayState === 'MAXIMIZED' ? 'calc(100% - 232px)' : '100%',
+      height: '148px',
+      borderRadius: '4px',
+      marginRight: '16px',
+      paddingLeft: '16px'
+    }
+  }, (whiteBoardShown || roomStatus === 'LOBBY') && grid && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, renderStrip())), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat((displayState === 'MAXIMIZED' ? 'col ' : '') + 'no-margin no-padding'),
+    style: {
+      width: '200px',
+      height: '148px'
+    }
+  }, renderCurrentParticipant())), 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;
+}