@videosdk.live/react-sdk 0.3.8 → 0.3.9

package/dist/index.js

@@ -103,7 +103,12 @@ var events = {
   'whiteboard-started': eventPrifix + "-whiteboard-started",
   'whiteboard-stopped': eventPrifix + "-whiteboard-stopped",
   'paused-all-streams': eventPrifix + "-paused-all-streams",
-  'resumed-all-streams': eventPrifix + "-resumed-all-streams"
+  'resumed-all-streams': eventPrifix + "-resumed-all-streams",
+  'media-relay-started': eventPrifix + "-media-relay-started",
+  'media-relay-stopped': eventPrifix + "-media-relay-stopped",
+  'media-relay-error': eventPrifix + "-media-relay-error",
+  'media-relay-request-response': eventPrifix + "-media-relay-request-response",
+  'media-relay-request-received': eventPrifix + "-media-relay-request-received"
 };
 var eventEmitter = new EventEmitter();
 eventEmitter.setMaxListeners(9999);
@@ -191,7 +196,17 @@ var useMeeting = function useMeeting(_temp) {
     _ref$onCharacterJoine = _ref.onCharacterJoined,
     onCharacterJoined = _ref$onCharacterJoine === void 0 ? function () {} : _ref$onCharacterJoine,
     _ref$onCharacterLeft = _ref.onCharacterLeft,
-    onCharacterLeft = _ref$onCharacterLeft === void 0 ? function () {} : _ref$onCharacterLeft;
+    onCharacterLeft = _ref$onCharacterLeft === void 0 ? function () {} : _ref$onCharacterLeft,
+    _ref$onMediaRelayStar = _ref.onMediaRelayStarted,
+    onMediaRelayStarted = _ref$onMediaRelayStar === void 0 ? function () {} : _ref$onMediaRelayStar,
+    _ref$onMediaRelayStop = _ref.onMediaRelayStopped,
+    onMediaRelayStopped = _ref$onMediaRelayStop === void 0 ? function () {} : _ref$onMediaRelayStop,
+    _ref$onMediaRelayErro = _ref.onMediaRelayError,
+    onMediaRelayError = _ref$onMediaRelayErro === void 0 ? function () {} : _ref$onMediaRelayErro,
+    _ref$onMediaRelayRequ = _ref.onMediaRelayRequestResponse,
+    onMediaRelayRequestResponse = _ref$onMediaRelayRequ === void 0 ? function () {} : _ref$onMediaRelayRequ,
+    _ref$onMediaRelayRequ2 = _ref.onMediaRelayRequestReceived,
+    onMediaRelayRequestReceived = _ref$onMediaRelayRequ2 === void 0 ? function () {} : _ref$onMediaRelayRequ2;
   React.useEffect(function () {
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
     eventEmitter.on(events['participant-left'], onParticipantLeft);
@@ -227,6 +242,11 @@ var useMeeting = function useMeeting(_temp) {
     eventEmitter.on(events['participant-mode-changed'], onParticipantModeChanged);
     eventEmitter.on(events['character-joined'], onCharacterJoined);
     eventEmitter.on(events['character-left'], onCharacterLeft);
+    eventEmitter.on(events['media-relay-started'], onMediaRelayStarted);
+    eventEmitter.on(events['media-relay-stopped'], onMediaRelayStopped);
+    eventEmitter.on(events['media-relay-error'], onMediaRelayError);
+    eventEmitter.on(events['media-relay-request-response'], onMediaRelayRequestResponse);
+    eventEmitter.on(events['media-relay-request-received'], onMediaRelayRequestReceived);
     return function () {
       eventEmitter.off(events['meeting-state-changed'], onMeetingStateChanged);
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
@@ -262,6 +282,11 @@ var useMeeting = function useMeeting(_temp) {
       eventEmitter.off(events['participant-mode-changed'], onParticipantModeChanged);
       eventEmitter.off(events['character-joined'], onCharacterJoined);
       eventEmitter.off(events['character-left'], onCharacterLeft);
+      eventEmitter.off(events['media-relay-started'], onMediaRelayStarted);
+      eventEmitter.off(events['media-relay-stopped'], onMediaRelayStopped);
+      eventEmitter.off(events['media-relay-error'], onMediaRelayError);
+      eventEmitter.off(events['media-relay-request-response'], onMediaRelayRequestResponse);
+      eventEmitter.off(events['media-relay-request-received'], onMediaRelayRequestReceived);
     };
   }, []);
   return React.useContext(MeetingProviderContex);
@@ -335,7 +360,17 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
     _ref2$onCharacterJoin = _ref2.onCharacterJoined,
     onCharacterJoined = _ref2$onCharacterJoin === void 0 ? function () {} : _ref2$onCharacterJoin,
     _ref2$onCharacterLeft = _ref2.onCharacterLeft,
-    onCharacterLeft = _ref2$onCharacterLeft === void 0 ? function () {} : _ref2$onCharacterLeft;
+    onCharacterLeft = _ref2$onCharacterLeft === void 0 ? function () {} : _ref2$onCharacterLeft,
+    _ref2$onMediaRelaySta = _ref2.onMediaRelayStarted,
+    onMediaRelayStarted = _ref2$onMediaRelaySta === void 0 ? function () {} : _ref2$onMediaRelaySta,
+    _ref2$onMediaRelaySto = _ref2.onMediaRelayStopped,
+    onMediaRelayStopped = _ref2$onMediaRelaySto === void 0 ? function () {} : _ref2$onMediaRelaySto,
+    _ref2$onMediaRelayErr = _ref2.onMediaRelayError,
+    onMediaRelayError = _ref2$onMediaRelayErr === void 0 ? function () {} : _ref2$onMediaRelayErr,
+    _ref2$onMediaRelayReq = _ref2.onMediaRelayRequestResponse,
+    onMediaRelayRequestResponse = _ref2$onMediaRelayReq === void 0 ? function () {} : _ref2$onMediaRelayReq,
+    _ref2$onMediaRelayReq2 = _ref2.onMediaRelayRequestReceived,
+    onMediaRelayRequestReceived = _ref2$onMediaRelayReq2 === void 0 ? function () {} : _ref2$onMediaRelayReq2;
   React.useEffect(function () {
     eventEmitter.on(events['meeting-state-changed'], onMeetingStateChanged);
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
@@ -371,6 +406,11 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
     eventEmitter.on(events['participant-mode-changed'], onParticipantModeChanged);
     eventEmitter.on(events['character-joined'], onCharacterJoined);
     eventEmitter.on(events['character-left'], onCharacterLeft);
+    eventEmitter.on(events['media-relay-started'], onMediaRelayStarted);
+    eventEmitter.on(events['media-relay-stopped'], onMediaRelayStopped);
+    eventEmitter.on(events['media-relay-error'], onMediaRelayError);
+    eventEmitter.on(events['media-relay-request-response'], onMediaRelayRequestResponse);
+    eventEmitter.on(events['media-relay-request-received'], onMediaRelayRequestReceived);
     return function () {
       eventEmitter.off(events['meeting-state-changed'], onMeetingStateChanged);
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
@@ -406,12 +446,17 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
       eventEmitter.off(events['participant-mode-changed'], onParticipantModeChanged);
       eventEmitter.off(events['character-joined'], onCharacterJoined);
       eventEmitter.off(events['character-left'], onCharacterLeft);
+      eventEmitter.off(events['media-relay-started'], onMediaRelayStarted);
+      eventEmitter.off(events['media-relay-stopped'], onMediaRelayStopped);
+      eventEmitter.off(events['media-relay-error'], onMediaRelayError);
+      eventEmitter.off(events['media-relay-request-response'], onMediaRelayRequestResponse);
+      eventEmitter.off(events['media-relay-request-received'], onMediaRelayRequestReceived);
     };
   }, []);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MeetingProviderContex.Consumer, null, children));
 };
 
-var version = "0.3.0";
+var version = "0.3.9";
 
 var MeetingProvider = function MeetingProvider(_ref) {
   var children = _ref.children,
@@ -419,7 +464,8 @@ var MeetingProvider = function MeetingProvider(_ref) {
     token = _ref.token,
     joinWithoutUserInteraction = _ref.joinWithoutUserInteraction,
     _reinitialiseMeetingOnConfigChange = _ref.reinitialiseMeetingOnConfigChange,
-    deviceInfo = _ref.deviceInfo;
+    deviceInfo = _ref.deviceInfo,
+    keyProvider = _ref.keyProvider;
   var _useState = React.useState(null),
     meeting = _useState[0],
     setMeeting = _useState[1];
@@ -495,6 +541,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
   var localWebcamOnRef = React.useRef();
   var localScreenShareOnRef = React.useRef();
   var isRecordingRef = React.useRef();
+  var keyProviderRef = React.useRef(keyProvider);
   var configRef = React.useRef(config);
   var tokenRef = React.useRef(token);
   var joinedOnFirstRender = React.useRef(false);
@@ -841,6 +888,21 @@ var MeetingProvider = function MeetingProvider(_ref) {
     }
     eventEmitter.emit(events['participant-mode-changed'], data);
   };
+  var _handle_media_relay_started = function _handle_media_relay_started(data) {
+    eventEmitter.emit(events['media-relay-started'], data);
+  };
+  var _handle_media_relay_stopped = function _handle_media_relay_stopped(data) {
+    eventEmitter.emit(events['media-relay-stopped'], data);
+  };
+  var _handle_media_relay_error = function _handle_media_relay_error(data) {
+    eventEmitter.emit(events['media-relay-error'], data);
+  };
+  var _handle_media_relay_request_response = function _handle_media_relay_request_response(data) {
+    eventEmitter.emit(events['media-relay-request-response'], data);
+  };
+  var _handle_media_relay_request_received = function _handle_media_relay_request_received(data) {
+    eventEmitter.emit(events['media-relay-request-received'], data);
+  };
   var join = function join() {
     var meeting = jsSdk.VideoSDK && jsSdk.VideoSDK.initMeeting(configRef.current);
     setMeeting(meeting);
@@ -889,6 +951,11 @@ var MeetingProvider = function MeetingProvider(_ref) {
     meeting.on('whiteboard-stopped', _handle_whiteboard_stopped);
     meeting.on('character-joined', _handle_character_joined);
     meeting.on('character-left', _handle_character_left);
+    meeting.on('media-relay-started', _handle_media_relay_started);
+    meeting.on('media-relay-stopped', _handle_media_relay_stopped);
+    meeting.on('media-relay-error', _handle_media_relay_error);
+    meeting.on('media-relay-request-response', _handle_media_relay_request_response);
+    meeting.on('media-relay-request-received', _handle_media_relay_request_received);
     meeting.localParticipant.on('stream-enabled', _handle_localParticipant_stream_enabled);
     meeting.localParticipant.on('stream-disabled', _handle_localParticipant_stream_disabled);
     meeting.join();
@@ -1123,8 +1190,27 @@ var MeetingProvider = function MeetingProvider(_ref) {
       meeting.disableAdaptiveSubscription();
     }
   };
-  var seekVideo = function seekVideo(_ref8) {
-    var currentTime = _ref8.currentTime;
+  var requestMediaRelay = function requestMediaRelay(_ref8) {
+    var destinationMeetingId = _ref8.destinationMeetingId,
+      token = _ref8.token,
+      kinds = _ref8.kinds;
+    var meeting = meetingRef.current;
+    if (meeting) {
+      meeting.requestMediaRelay({
+        destinationMeetingId: destinationMeetingId,
+        token: token,
+        kinds: kinds
+      });
+    }
+  };
+  var stopMediaRelay = function stopMediaRelay(destinationMeetingId) {
+    var meeting = meetingRef.current;
+    if (meeting) {
+      meeting.stopMediaRelay(destinationMeetingId);
+    }
+  };
+  var seekVideo = function seekVideo(_ref9) {
+    var currentTime = _ref9.currentTime;
     var meeting = meetingRef.current;
     if (meeting) {
       meeting.seekVideo({
@@ -1144,9 +1230,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
       meeting.stopLivestream();
     }
   };
-  var connectTo = function connectTo(_ref9) {
-    var meetingId = _ref9.meetingId,
-      payload = _ref9.payload;
+  var connectTo = function connectTo(_ref10) {
+    var meetingId = _ref10.meetingId,
+      payload = _ref10.payload;
     try {
       var _meeting3 = meetingRef.current;
       var _temp = function () {
@@ -1176,6 +1262,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
   };
   var initSDK = function initSDK() {
     jsSdk.VideoSDK.config(tokenRef.current);
+    keyProviderRef.current && jsSdk.VideoSDK.setKeyProvider(keyProviderRef.current);
     if (deviceInfo) {
       jsSdk.VideoSDK.analytics(deviceInfo);
     } else {
@@ -1262,7 +1349,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
       startHls: startHls,
       stopHls: stopHls,
       enableAdaptiveSubscription: enableAdaptiveSubscription,
-      disableAdaptiveSubscription: disableAdaptiveSubscription
+      disableAdaptiveSubscription: disableAdaptiveSubscription,
+      requestMediaRelay: requestMediaRelay,
+      stopMediaRelay: stopMediaRelay
     }
   }, children);
 };
@@ -1280,7 +1369,15 @@ var useParticipant = function useParticipant(participantId, _temp) {
     _ref$onStreamPaused = _ref.onStreamPaused,
     onStreamPaused = _ref$onStreamPaused === void 0 ? function () {} : _ref$onStreamPaused,
     _ref$onStreamResumed = _ref.onStreamResumed,
-    onStreamResumed = _ref$onStreamResumed === void 0 ? function () {} : _ref$onStreamResumed;
+    onStreamResumed = _ref$onStreamResumed === void 0 ? function () {} : _ref$onStreamResumed,
+    _ref$onProducerAdded = _ref.onProducerAdded,
+    onProducerAdded = _ref$onProducerAdded === void 0 ? function () {} : _ref$onProducerAdded,
+    _ref$onProducerRemove = _ref.onProducerRemoved,
+    onProducerRemoved = _ref$onProducerRemove === void 0 ? function () {} : _ref$onProducerRemove,
+    _ref$onConsumerAdded = _ref.onConsumerAdded,
+    onConsumerAdded = _ref$onConsumerAdded === void 0 ? function () {} : _ref$onConsumerAdded,
+    _ref$onConsumerRemove = _ref.onConsumerRemoved,
+    onConsumerRemoved = _ref$onConsumerRemove === void 0 ? function () {} : _ref$onConsumerRemove;
   var _useState = React.useState(null),
     webcamStream = _useState[0],
     setwebcamStream = _useState[1];
@@ -1417,6 +1514,9 @@ var useParticipant = function useParticipant(participantId, _temp) {
   var setViewPort = function setViewPort(width, height) {
     participant === null || participant === void 0 ? void 0 : participant.setViewPort(width, height);
   };
+  var setScreenShareQuality = function setScreenShareQuality(quality) {
+    participant === null || participant === void 0 ? void 0 : participant.setScreenShareQuality(quality);
+  };
   var enableMic = function enableMic() {
     participant === null || participant === void 0 ? void 0 : participant.enableMic();
   };
@@ -1471,9 +1571,6 @@ var useParticipant = function useParticipant(participantId, _temp) {
   var stopConsumingMicStreams = function stopConsumingMicStreams() {
     participant === null || participant === void 0 ? void 0 : participant.stopConsumingMicStreams();
   };
-  var switchTo = function switchTo(data) {
-    return Promise.resolve(participant === null || participant === void 0 ? void 0 : participant.switchTo(data)).then(function () {});
-  };
   React.useEffect(function () {
     var streams = participant === null || participant === void 0 ? void 0 : participant.streams;
     if (streams) {
@@ -1497,6 +1594,18 @@ var useParticipant = function useParticipant(participantId, _temp) {
     });
     participant === null || participant === void 0 ? void 0 : participant.on('media-status-changed', _handleMediaStatusChanged);
     participant === null || participant === void 0 ? void 0 : participant.on('video-quality-changed', _handleVideoQualityChanged);
+    participant === null || participant === void 0 ? void 0 : participant.on('producer-added', function (data) {
+      onProducerAdded(data);
+    });
+    participant === null || participant === void 0 ? void 0 : participant.on('producer-removed', function (data) {
+      onProducerRemoved(data);
+    });
+    participant === null || participant === void 0 ? void 0 : participant.on('consumer-added', function (data) {
+      onConsumerAdded(data);
+    });
+    participant === null || participant === void 0 ? void 0 : participant.on('consumer-removed', function (data) {
+      onConsumerRemoved(data);
+    });
     eventEmitter.on(events['participant-mode-changed'], _handleParticipantModeChanged);
     return function () {
       participant === null || participant === void 0 ? void 0 : participant.off('stream-enabled', _handleStreamEnabled);
@@ -1527,6 +1636,7 @@ var useParticipant = function useParticipant(participantId, _temp) {
     stopConsumingMicStreams: stopConsumingMicStreams,
     stopConsumingWebcamStreams: stopConsumingWebcamStreams,
     setQuality: setQuality,
+    setScreenShareQuality: setScreenShareQuality,
     setViewPort: setViewPort,
     enableMic: enableMic,
     disableMic: disableMic,
@@ -1536,7 +1646,6 @@ var useParticipant = function useParticipant(participantId, _temp) {
     pin: pin,
     unpin: unpin,
     remove: remove,
-    switchTo: switchTo,
     getAudioStats: getAudioStats,
     getVideoStats: getVideoStats,
     getShareStats: getShareStats,
@@ -2150,12 +2259,15 @@ var createScreenShareVideoTrack = function createScreenShareVideoTrack(_ref2) {
     _ref2$optimizationMod = _ref2.optimizationMode,
     optimizationMode = _ref2$optimizationMod === void 0 ? undefined : _ref2$optimizationMod,
     _ref2$withAudio = _ref2.withAudio,
-    withAudio = _ref2$withAudio === void 0 ? 'enable' : _ref2$withAudio;
+    withAudio = _ref2$withAudio === void 0 ? 'enable' : _ref2$withAudio,
+    _ref2$multiStream = _ref2.multiStream,
+    multiStream = _ref2$multiStream === void 0 ? false : _ref2$multiStream;
   try {
     return Promise.resolve(jsSdk.VideoSDK.createScreenShareVideoTrack({
       encoderConfig: encoderConfig,
       optimizationMode: optimizationMode,
-      withAudio: withAudio
+      withAudio: withAudio,
+      multiStream: multiStream
     }));
   } catch (e) {
     return Promise.reject(e);
@@ -2206,27 +2318,28 @@ var withAdaptiveObservers = function withAdaptiveObservers(VideoPlayerComponent)
     var resizeObserverRef = React.useRef(null);
     var _useParticipant = useParticipant(participantId),
       participant = _useParticipant.participant;
+    var _useMeeting = useMeeting(),
+      localParticipant = _useMeeting.localParticipant;
     React.useEffect(function () {
-      if (type === 'share' || !ref.current || !participant) return;
+      if (type === 'share' || !ref.current || !participant || participantId === localParticipant.id) return;
       var element = ref.current;
       if (!element || !participant) return;
       if (observerRef.current) observerRef.current.disconnect();
       var handleIntersectionChange = debounce(function (entries) {
-        for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
-          var entry = _step.value;
-          if (entry.intersectionRatio > 0) {
-            for (var _iterator2 = _createForOfIteratorHelperLoose(participant.streams.values()), _step2; !(_step2 = _iterator2()).done;) {
-              var stream = _step2.value;
-              if (stream.kind === 'video' && stream.pausedBy !== 'SUB_MANAGER') {
-                stream.resume();
-              }
+        if (!Array.isArray(entries) || entries.length === 0) return;
+        var entry = entries[entries.length - 1];
+        if (entry.intersectionRatio > 0) {
+          for (var _iterator = _createForOfIteratorHelperLoose(participant.streams.values()), _step; !(_step = _iterator()).done;) {
+            var stream = _step.value;
+            if (stream.kind === 'video' && stream.pausedBy !== 'SUB_MANAGER') {
+              stream.resume();
             }
-          } else {
-            for (var _iterator3 = _createForOfIteratorHelperLoose(participant.streams.values()), _step3; !(_step3 = _iterator3()).done;) {
-              var _stream = _step3.value;
-              if (_stream.kind === 'video') {
-                _stream.pause();
-              }
+          }
+        } else {
+          for (var _iterator2 = _createForOfIteratorHelperLoose(participant.streams.values()), _step2; !(_step2 = _iterator2()).done;) {
+            var _stream = _step2.value;
+            if (_stream.kind === 'video') {
+              _stream.pause();
             }
           }
         }
@@ -2287,6 +2400,9 @@ var VideoSDKPlayer = React.forwardRef(function (_ref5, ref) {
         var mediaStream = new MediaStream();
         mediaStream.addTrack(stream.track);
         videoRef.current.srcObject = mediaStream;
+        videoRef.current.setAttribute('playsinline', '');
+        videoRef.current.setAttribute('x5-playsinline', '');
+        videoRef.current.setAttribute('webkit-playsinline', '');
         videoRef.current.play()["catch"](function (error) {
           return console.error('videoRef.current.play() failed', error);
         });
@@ -2369,6 +2485,12 @@ Object.defineProperty(exports, 'DeviceInfo', {
     return jsSdk.DeviceInfo;
   }
 });
+Object.defineProperty(exports, 'ExternalE2EEKeyProvider', {
+  enumerable: true,
+  get: function () {
+    return jsSdk.ExternalE2EEKeyProvider;
+  }
+});
 Object.defineProperty(exports, 'MicrophoneDeviceInfo', {
   enumerable: true,
   get: function () {