@videosdk.live/react-sdk 0.4.7 → 0.4.9

package/dist/index.js

@@ -101,7 +101,8 @@ var events = {
   '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"
+  'media-relay-request-received': eventPrifix + "-media-relay-request-received",
+  'quality-limitation': eventPrifix + "-quality-limitation"
 };
 var eventEmitter = new EventEmitter();
 eventEmitter.setMaxListeners(9999);
@@ -199,7 +200,9 @@ var useMeeting = function useMeeting(_temp) {
     _ref$onMediaRelayRequ = _ref.onMediaRelayRequestResponse,
     onMediaRelayRequestResponse = _ref$onMediaRelayRequ === void 0 ? function () {} : _ref$onMediaRelayRequ,
     _ref$onMediaRelayRequ2 = _ref.onMediaRelayRequestReceived,
-    onMediaRelayRequestReceived = _ref$onMediaRelayRequ2 === void 0 ? function () {} : _ref$onMediaRelayRequ2;
+    onMediaRelayRequestReceived = _ref$onMediaRelayRequ2 === void 0 ? function () {} : _ref$onMediaRelayRequ2,
+    _ref$onQualityLimitat = _ref.onQualityLimitation,
+    onQualityLimitation = _ref$onQualityLimitat === void 0 ? function () {} : _ref$onQualityLimitat;
   React.useEffect(function () {
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
     eventEmitter.on(events['participant-left'], onParticipantLeft);
@@ -240,6 +243,7 @@ var useMeeting = function useMeeting(_temp) {
     eventEmitter.on(events['media-relay-error'], onMediaRelayError);
     eventEmitter.on(events['media-relay-request-response'], onMediaRelayRequestResponse);
     eventEmitter.on(events['media-relay-request-received'], onMediaRelayRequestReceived);
+    eventEmitter.on(events['quality-limitation'], onQualityLimitation);
     return function () {
       eventEmitter.off(events['meeting-state-changed'], onMeetingStateChanged);
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
@@ -280,6 +284,7 @@ var useMeeting = function useMeeting(_temp) {
       eventEmitter.off(events['media-relay-error'], onMediaRelayError);
       eventEmitter.off(events['media-relay-request-response'], onMediaRelayRequestResponse);
       eventEmitter.off(events['media-relay-request-received'], onMediaRelayRequestReceived);
+      eventEmitter.off(events['quality-limitation'], onQualityLimitation);
     };
   }, []);
   return React.useContext(MeetingProviderContex);
@@ -363,7 +368,9 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
     _ref2$onMediaRelayReq = _ref2.onMediaRelayRequestResponse,
     onMediaRelayRequestResponse = _ref2$onMediaRelayReq === void 0 ? function () {} : _ref2$onMediaRelayReq,
     _ref2$onMediaRelayReq2 = _ref2.onMediaRelayRequestReceived,
-    onMediaRelayRequestReceived = _ref2$onMediaRelayReq2 === void 0 ? function () {} : _ref2$onMediaRelayReq2;
+    onMediaRelayRequestReceived = _ref2$onMediaRelayReq2 === void 0 ? function () {} : _ref2$onMediaRelayReq2,
+    _ref2$onQualityLimita = _ref2.onQualityLimitation,
+    onQualityLimitation = _ref2$onQualityLimita === void 0 ? function () {} : _ref2$onQualityLimita;
   React.useEffect(function () {
     eventEmitter.on(events['meeting-state-changed'], onMeetingStateChanged);
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
@@ -404,6 +411,7 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
     eventEmitter.on(events['media-relay-error'], onMediaRelayError);
     eventEmitter.on(events['media-relay-request-response'], onMediaRelayRequestResponse);
     eventEmitter.on(events['media-relay-request-received'], onMediaRelayRequestReceived);
+    eventEmitter.on(events['quality-limitation'], onQualityLimitation);
     return function () {
       eventEmitter.off(events['meeting-state-changed'], onMeetingStateChanged);
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
@@ -444,12 +452,13 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
       eventEmitter.off(events['media-relay-error'], onMediaRelayError);
       eventEmitter.off(events['media-relay-request-response'], onMediaRelayRequestResponse);
       eventEmitter.off(events['media-relay-request-received'], onMediaRelayRequestReceived);
+      eventEmitter.off(events['quality-limitation'], onQualityLimitation);
     };
   }, []);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MeetingProviderContex.Consumer, null, children));
 };
 
-var version = "0.4.7";
+var version = "0.4.9";
 
 var MeetingProvider = function MeetingProvider(_ref) {
   var children = _ref.children,
@@ -759,6 +768,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
         meeting.off('media-relay-error', _handle_media_relay_error);
         meeting.off('media-relay-request-response', _handle_media_relay_request_response);
         meeting.off('media-relay-request-received', _handle_media_relay_request_received);
+        meeting.off('quality-limitation', _handle_quality_limitation_received);
       }
       if (typeof (meeting === null || meeting === void 0 ? void 0 : (_meeting$localPartici = meeting.localParticipant) === null || _meeting$localPartici === void 0 ? void 0 : _meeting$localPartici.off) === 'function') {
         meeting.localParticipant.off('stream-enabled', _handle_localParticipant_stream_enabled);
@@ -919,6 +929,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
   var _handle_media_relay_request_received = function _handle_media_relay_request_received(data) {
     eventEmitter.emit(events['media-relay-request-received'], data);
   };
+  var _handle_quality_limitation_received = function _handle_quality_limitation_received(data) {
+    eventEmitter.emit(events['quality-limitation'], data);
+  };
   var join = function join() {
     var meeting = jsSdk.VideoSDK && jsSdk.VideoSDK.initMeeting(configRef.current);
     setMeeting(meeting);
@@ -975,6 +988,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
     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.on('quality-limitation', _handle_quality_limitation_received);
     meeting.localParticipant.on('stream-enabled', _handle_localParticipant_stream_enabled);
     meeting.localParticipant.on('stream-disabled', _handle_localParticipant_stream_disabled);
     meeting.join();
@@ -1696,6 +1710,66 @@ var useParticipant = function useParticipant(participantId, _temp) {
   };
 };
 
+var useStream = function useStream(streamId, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    _ref$onStreamStateCha = _ref.onStreamStateChanged,
+    onStreamStateChanged = _ref$onStreamStateCha === void 0 ? function () {} : _ref$onStreamStateCha;
+  var _useState = React.useState(null),
+    stream = _useState[0],
+    setStream = _useState[1];
+  var meeting = useMeeting();
+  var _useMemo = React.useMemo(function () {
+      var participants = meeting === null || meeting === void 0 ? void 0 : meeting.participants;
+      return {
+        participants: participants
+      };
+    }, [meeting]),
+    participants = _useMemo.participants;
+  var _handleStreamStateChanged = function _handleStreamStateChanged(data) {
+    onStreamStateChanged(data);
+  };
+  React.useEffect(function () {
+    if (!meeting) return;
+    if (!streamId) return;
+    var findStream = function findStream() {
+      for (var _iterator = _createForOfIteratorHelperLoose(participants.values()), _step; !(_step = _iterator()).done;) {
+        var participant = _step.value;
+        var _stream = participant.streams.get(streamId);
+        if (_stream != null) {
+          return _stream;
+        }
+      }
+      return null;
+    };
+    var s = findStream();
+    if (!s) return;
+    setStream(s);
+    s === null || s === void 0 ? void 0 : s.on('state', _handleStreamStateChanged);
+    return function () {
+      s === null || s === void 0 ? void 0 : s.off('state', _handleStreamStateChanged);
+    };
+  }, [streamId]);
+  var pause = function pause() {
+    if (stream) {
+      stream.pause();
+    }
+  };
+  var resume = function resume() {
+    if (stream) {
+      stream.resume();
+    }
+  };
+  return {
+    kind: stream === null || stream === void 0 ? void 0 : stream.kind,
+    codec: stream === null || stream === void 0 ? void 0 : stream.codec,
+    track: stream === null || stream === void 0 ? void 0 : stream.track,
+    paused: stream === null || stream === void 0 ? void 0 : stream.paused,
+    stream: stream,
+    pause: pause,
+    resume: resume
+  };
+};
+
 var useConnection = function useConnection(connectionId, _temp) {
   var _ref = _temp === void 0 ? {
       onMeeting: {
@@ -2487,30 +2561,33 @@ var VideoSDKPlayer = React.forwardRef(function (_ref5, ref) {
     _ref5$classNameVideo = _ref5.classNameVideo,
     classNameVideo = _ref5$classNameVideo === void 0 ? '' : _ref5$classNameVideo,
     _ref5$videoStyle = _ref5.videoStyle,
-    videoStyle = _ref5$videoStyle === void 0 ? {} : _ref5$videoStyle;
+    videoStyle = _ref5$videoStyle === void 0 ? {} : _ref5$videoStyle,
+    videoRef = _ref5.videoRef;
   var _useParticipant2 = useParticipant(participantId),
     webcamOn = _useParticipant2.webcamOn,
     webcamStream = _useParticipant2.webcamStream,
     isLocal = _useParticipant2.isLocal,
     screenShareStream = _useParticipant2.screenShareStream,
     screenShareOn = _useParticipant2.screenShareOn;
-  var videoRef = React.useRef(null);
+  var internalRef = React.useRef(null);
+  var finalVideoRef = videoRef || internalRef;
   React.useEffect(function () {
     var stream = type === 'share' ? screenShareStream : webcamStream;
     var isOn = type === 'share' ? screenShareOn : webcamOn;
-    if (videoRef.current) {
+    if (finalVideoRef.current) {
       if (isOn && stream) {
         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);
+        finalVideoRef.current.setAttribute('muted', '');
+        finalVideoRef.current.srcObject = mediaStream;
+        finalVideoRef.current.setAttribute('playsinline', '');
+        finalVideoRef.current.setAttribute('x5-playsinline', '');
+        finalVideoRef.current.setAttribute('webkit-playsinline', '');
+        finalVideoRef.current.play()["catch"](function (error) {
+          return console.error('finalVideoRef.current.play() failed', error);
         });
       } else {
-        videoRef.current.srcObject = null;
+        finalVideoRef.current.srcObject = null;
       }
     }
   }, [type].concat(type === 'share' ? [screenShareOn, screenShareStream] : type === 'video' ? [webcamOn, webcamStream] : []));
@@ -2524,9 +2601,10 @@ var VideoSDKPlayer = React.forwardRef(function (_ref5, ref) {
   }, /*#__PURE__*/React__default.createElement("video", {
     width: "100%",
     height: "100%",
-    ref: videoRef,
+    ref: finalVideoRef,
     autoPlay: true,
     className: classNameVideo,
+    muted: true,
     style: isLocal && type !== 'share' ? _extends({
       transform: 'scaleX(-1)',
       WebkitTransform: 'scaleX(-1)'
@@ -2616,6 +2694,7 @@ exports.useMediaDevice = useMediaDevice;
 exports.useMeeting = useMeeting;
 exports.useParticipant = useParticipant;
 exports.usePubSub = usePubSub;
+exports.useStream = useStream;
 exports.useTranscription = useTranscription;
 exports.useTranslation = useTranslation;
 exports.useWhiteboard = useWhiteboard;