@agilemotion/oui-react-js 1.3.9 → 1.4.0

package/dist/components/media/VCRoomWorkspace.js

@@ -84,15 +84,38 @@ const VCRoomWorkspace = props => {
     isHost,
     autoPermit,
     rtpCapabilities,
-    onloadScreenShareData
+    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;
@@ -108,8 +131,6 @@ const VCRoomWorkspace = props => {
       audio: false,
       video: {
         mandatory: {
-          chromeMediaSource: 'desktop',
-          chromeMediaSourceId: shareScreenSource.id,
           width: {
             min: 160,
             ideal: 320,
@@ -128,35 +149,49 @@ const VCRoomWorkspace = props => {
           googCpuOveruseEncodeUsage: true,
           googCpuOveruseThreshold: 70
         }
-      }
-    };
-    let stream = await navigator.mediaDevices.getUserMedia(videoConstraints);
-    const track = stream.getVideoTracks()[0];
-    const params = {
-      track,
-      appData: {
-        screenSharing: true
-      }
+      },
+      preferCurrentTab: true,
+      selfBrowserSurface: 'include',
+      systemAudio: 'exclude',
+      surfaceSwitching: 'exclude',
+      monitorTypeSurfaces: 'exclude'
     };
-    let producer = await producerTransport.produce(params);
-    setShareScreenProducer(producer);
-    shareScreenStream.current = stream;
+    navigator.mediaDevices.getDisplayMedia(videoConstraints).then(async stream => {
+      const track = stream.getVideoTracks()[0];
 
-    if (showSharedScreen) {
-      shareScreenVideoRef.current.srcObject = stream;
-    }
-
-    producer.on('transportclose', () => {
-      stream.srcObject.getTracks().forEach(function (track) {
+      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);
       });
-      setShareScreenProducer(null);
-    });
-    producer.on('close', () => {
-      stream.srcObject.getTracks().forEach(function (track) {
-        track.stop();
+      producer.on('close', () => {
+        stream.srcObject.getTracks().forEach(function (track) {
+          track.stop();
+        });
+        setShareScreenProducer(null);
       });
-      setShareScreenProducer(null);
+    }).catch(e => {
+      console.error(e);
     });
   };
 
@@ -170,13 +205,13 @@ const VCRoomWorkspace = props => {
     console.log('Close producer', producerId);
 
     _SocketManager.default.emitEvent(_VCEventType.VCEventType.PRODUCER_CLOSED, {
-      userId: sessionStorage.getItem("username"),
+      userId: sessionStorage.getItem('username'),
       producerId,
       roomId: meetingId
-    }).catch(e => console.log("PRODUCER_CLOSED ERROR : ", e));
+    }).catch(e => console.log('PRODUCER_CLOSED ERROR : ', e));
 
     shareScreenProducer.close();
-    stopShareScreenConsumerTracks();
+    stopShareScreen();
     setShareScreenProducer(null);
     setSomeoneSharing(false);
     setShareScreenSource(null);
@@ -197,41 +232,37 @@ const VCRoomWorkspace = props => {
     }
   };
 
-  const stopShareScreenConsumerTracks = () => {
+  const removeShareScreenElement = () => {
     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(({
+    _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=====================================");
+        console.log('=====================================SHARING CONSUME=====================================');
         props.sharingHandler(true);
         setScreenShared(true);
         setSomeoneSharing(true); //setShowSharedScreen(true);
 
         setShareScreenSource(null);
-        setMessage(producer.username + " is sharing");
+        setMessage(producer.username + ' is sharing');
         shareScreenVideoRef.current.srcObject = stream;
         shareScreenStream.current = stream; //setVideoRefresher(!videoRefresher);
 
         consumer.on('trackended', () => {
-          stopShareScreenConsumerTracks();
+          removeShareScreenElement();
         });
         consumer.on('transportclose', () => {
-          stopShareScreenConsumerTracks();
+          removeShareScreenElement();
         });
       }
     });
@@ -255,7 +286,7 @@ const VCRoomWorkspace = props => {
 
           case _VCEventType.VCEventType.CONSUMER_CLOSED:
             if (shareScreenConsumer && shareScreenConsumer.id === be.payload.consumerId) {
-              stopShareScreenConsumerTracks();
+              removeShareScreenElement();
               setMessage(null);
               props.sharingHandler(false);
               setSomeoneSharing(false);
@@ -297,8 +328,8 @@ const VCRoomWorkspace = props => {
   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"));
+    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);
@@ -331,16 +362,13 @@ const VCRoomWorkspace = props => {
     }
   }, [onloadScreenShareData, device, consumerTransport]);
   (0, _react.useEffect)(() => {
-    setShareScreenSource(props.shareScreenSource);
-
-    if (props.shareScreenSource && props.shareScreenSource.name) {
-      var _props$shareScreenSou;
+    setScreenShared(props.screenShared);
 
-      setShowSharedScreen(((_props$shareScreenSou = props.shareScreenSource.name) === null || _props$shareScreenSou === void 0 ? void 0 : _props$shareScreenSou.toLowerCase()) !== 'entire screen' && props.shareScreenSource.name.toLowerCase() !== 'armscor connect');
+    if (props.screenShared) {
+      startShareScreen();
+    } else {
+      stopShareScreen();
     }
-  }, [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);
@@ -362,10 +390,10 @@ const VCRoomWorkspace = props => {
     if (props.participants && props.currentUserFullName) {
       setCurrentUserParticipant({
         isCurrentUser: true,
-        userId: sessionStorage.getItem("username"),
+        userId: sessionStorage.getItem('username'),
         peer: null,
         name: props.currentUserFullName,
-        avatarId: sessionStorage.getItem("userAvatarId"),
+        avatarId: sessionStorage.getItem('userAvatarId'),
         videoMuted,
         audioMuted
       });
@@ -422,10 +450,10 @@ const VCRoomWorkspace = props => {
     }, inViewParticipants.map((participant, index) => {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: 'col-*-*',
-        key: index + "-" + participant.userId,
+        key: index + '-' + participant.userId,
         style: {
           borderRadius: '4px',
-          minWidth: "200px",
+          minWidth: '200px',
           padding: '4px',
           height: '148px'
         }
@@ -433,6 +461,7 @@ const VCRoomWorkspace = props => {
         data: participant,
         device: device,
         meetingId: meetingId,
+        displayState: displayState,
         audioMuted: participant.audioMuted,
         videoMuted: participant.videoMuted,
         onRemoveFromView: participant => removeFromView(participant),
@@ -451,8 +480,8 @@ const VCRoomWorkspace = props => {
     return /*#__PURE__*/_react.default.createElement(_Grid.default, {
       style: {
         height: '100%',
-        justifyContent: "center",
-        alignItems: "center"
+        justifyContent: 'center',
+        alignItems: 'center'
       },
       key: index,
       direction: "row",
@@ -465,12 +494,12 @@ const VCRoomWorkspace = props => {
       return /*#__PURE__*/_react.default.createElement(_Grid.default, {
         item: true,
         xs: 4,
-        key: index + "-" + participant.userId,
+        key: index + '-' + participant.userId,
         className: 'meetingParticipantContainer',
         style: {
           borderRadius: '4px',
-          width: 100 / row.length + "%",
-          height: "100%",
+          width: 100 / row.length + '%',
+          height: '100%',
           flexBasis: null,
           maxWidth: null
         }
@@ -478,6 +507,7 @@ const VCRoomWorkspace = props => {
         data: participant,
         device: device,
         meetingId: meetingId,
+        sizing: displayState === 'MINIMIZED' ? 'sm' : 'md',
         audioMuted: participant.audioMuted,
         videoMuted: participant.videoMuted,
         onRemoveFromView: participant => removeFromView(participant),
@@ -491,149 +521,132 @@ const VCRoomWorkspace = props => {
     })));
   };
 
+  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: '100%',
-      width: '100%'
-    }
-  }, roomStatus !== "LOBBY" && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'row-*-* messages',
-    style: {
+      height: displayState === 'MAXIMIZED' ? '100%' : 'calc(100% - 100px)',
       width: '100%',
-      height: '40px',
-      marginLeft: '0',
-      marginRight: '0',
-      display: 'flex',
-      alignItems: 'center',
-      color: 'white',
-      fontSize: '16px',
-      padding: '4px',
-      overflowY: 'auto'
+      display: displayState === 'MAXIMIZED' ? null : 'table'
     }
-  }, (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", {
+  }, (roomStatus === 'LOBBY' || props.allUserParticipantsLeft) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      height: 'calc(100% - 216px)',
+      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, (!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,
+  }, _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: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      maxHeight: '100%',
-      height: "100%",
-      overflowY: 'auto',
-      overflowX: 'hidden'
+      width: 'calc(100% - 200px)',
+      display: 'table-cell'
     }
-  }, 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", {
+  }, 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',
-    width: 640,
-    height: 320,
     autoPlay: true,
     ref: shareScreenVideoRef,
     muted: true,
     style: {
       width: '100%',
-      height: '100%',
+      maxHeight: '100%',
       zIndex: '0'
     }
-  })), whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'content-box'
-  }, "Whiteboard...")), roomStatus !== "LOBBY" && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'row-*-*',
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(displayState === 'MAXIMIZED' ? 'row-*-*' : ''),
     style: {
-      width: '100%',
-      height: '40px',
-      marginLeft: '0',
+      width: displayState === 'MAXIMIZED' ? '100%' : '200px',
+      height: displayState === 'MAXIMIZED' ? '152px' : '100%',
       marginRight: '0',
-      display: 'flex',
+      display: screenShared && showSharedScreen || someoneSharing ? 'none' : displayState === 'MAXIMIZED' ? 'flex' : 'table-cell',
       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'
+      verticalAlign: 'top'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: 'calc(100% - 232px)',
+      width: displayState === 'MAXIMIZED' ? 'calc(100% - 232px)' : '100%',
       height: '148px',
       borderRadius: '4px',
       marginRight: '16px',
       paddingLeft: '16px'
     }
-  }, (screenShared && showSharedScreen || whiteBoardShown || roomStatus === "LOBBY" || someoneSharing) && grid && /*#__PURE__*/_react.default.createElement("div", {
+  }, (whiteBoardShown || roomStatus === 'LOBBY') && grid && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',
       height: '100%'
     }
   }, renderStrip())), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col no-margin no-padding',
+    className: "".concat((displayState === 'MAXIMIZED' ? '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", {
+  }, renderCurrentParticipant())), waitingList && waitingList.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: 'no-side-margin no-side-padding grid-side-bar',
     style: {
       backgroundColor: 'transparent',

package/dist/components/media/VideoPlayer.css

@@ -0,0 +1,10 @@
+.player-wrapper {
+    position: relative;
+    padding-top: 56.25%; /* 720 / 1280 = 0.5625 */;
+}
+
+.react-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+}

package/dist/components/media/VideoPlayer.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+require("./VideoPlayer.css");
+
+var _reactPlayer = _interopRequireDefault(require("react-player"));
+
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+
+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; }
+
+const location = window.location.protocol + '//' + window.location.hostname;
+
+const VideoPlayer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [playing, setPlaying] = (0, _react.useState)(false);
+  const [documentId, setDocumentId] = (0, _react.useState)(false);
+  const [downloadUrl, setDownloadUrl] = (0, _react.useState)(null);
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+
+  _react.default.useEffect(() => {}, [playing]);
+
+  _react.default.useEffect(() => {
+    if (documentId) {
+      setDownloadUrl(location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/download/' + documentId + '?access_token=' + sessionStorage.getItem('accessToken') + '&idToken=' + sessionStorage.getItem('idToken'));
+      console.log(location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/download/' + documentId + '?access_token=' + sessionStorage.getItem('accessToken') + '&idToken=' + sessionStorage.getItem('idToken'));
+    } else {
+      setDownloadUrl(null);
+    }
+  }, [documentId]);
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      set playing(playing) {
+        setPlaying(playing);
+      },
+
+      set documentId(documentId) {
+        setDocumentId(documentId);
+      },
+
+      getChildren: () => {
+        return [];
+      }
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({}, props.config)
+  }, downloadUrl && /*#__PURE__*/_react.default.createElement("div", {
+    className: "player-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactPlayer.default, {
+    style: {
+      borderRadius: '4px'
+    },
+    url: downloadUrl,
+    className: "react-player",
+    playing: playing,
+    controls: true,
+    width: "100%",
+    height: "100%",
+    onPlay: () => setPlaying(true),
+    onPause: () => setPlaying(false)
+  })));
+}));
+
+var _default = VideoPlayer;
+exports.default = _default;

package/dist/components/menu/MenuButton.js

@@ -69,17 +69,29 @@ const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
   _react.default.useEffect(() => {
     props.handle.api = api();
+  });
 
-    if (_Utils.default.isNull(config)) {
-      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+  _react.default.useEffect(() => {
+    if (config) {
+      props.handle.api = api();
 
-      setConfig(parsedConfig);
+      let parsedConfig = _Utils.default.parseConfig(config, props.viewId);
 
       _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
 
-      _Observable.default.addSystemSubscriptions(parsedConfig);
+      _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+
+      props.handle.api.refresh();
     }
-  });
+  }, [config]);
+
+  _react.default.useEffect(() => {
+    var _props$tableRow$id;
+
+    setConfig(props.tableRow ? { ...props.config,
+      id: props.config.id + '_' + ((_props$tableRow$id = props.tableRow.id) === null || _props$tableRow$id === void 0 ? void 0 : _props$tableRow$id.replaceAll('-', ''))
+    } : props.config);
+  }, []);
 
   const handleToggle = () => {
     setOpen(prevOpen => !prevOpen);
@@ -103,7 +115,11 @@ const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const api = () => {
     return {
       get id() {
-        return props.config.id;
+        return config ? config.id : props.config.id;
+      },
+
+      get tableRow() {
+        return props.tableRow;
       },
 
       getChildren: () => {