@videosdk.live/react-sdk 0.2.1 → 0.2.2

package/dist/index.js

@@ -5,6 +5,54 @@ var React__default = _interopDefault(React);
 var EventEmitter = _interopDefault(require('events'));
 var jsSdk = require('@videosdk.live/js-sdk');
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
 var eventPrifix = 'videosdk-live-react-sdk';
 var events = {
   'participant-joined': eventPrifix + "-participant-joined",
@@ -47,6 +95,19 @@ var events = {
 };
 var eventEmitter = new EventEmitter();
 eventEmitter.setMaxListeners(9999);
+function debounce(func, delay) {
+  var timeout;
+  return function () {
+    var _this = this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      return func.apply(_this, args);
+    }, delay);
+  };
+}
 
 var MeetingProviderContex = React.createContext();
 var useMeeting = function useMeeting(_temp) {
@@ -560,12 +621,19 @@ var MeetingProvider = function MeetingProvider(_ref) {
     eventEmitter.emit(events['mic-requested'], data);
   };
   var _handle_meeting_joined = function _handle_meeting_joined(data) {
-    joinedOnFirstRender.current = true;
-    setMessages(function (s) {
-      return [].concat(s, data.messages);
-    });
-    eventEmitter.emit(events['meeting-joined'], data);
-    setIsMeetingJoined(true);
+    if (data.switchRoomId) {
+      setMessages(function (s) {
+        return [].concat(s, data.messages);
+      });
+      eventEmitter.emit(events['meeting-joined'], data);
+    } else {
+      joinedOnFirstRender.current = true;
+      setMessages(function (s) {
+        return [].concat(s, data.messages);
+      });
+      eventEmitter.emit(events['meeting-joined'], data);
+      setIsMeetingJoined(true);
+    }
   };
   var _handle_meeting_left2 = function _handle_meeting_left() {
     eventEmitter.emit(events['meeting-left']);
@@ -860,6 +928,17 @@ var MeetingProvider = function MeetingProvider(_ref) {
       enableWebcam(customVideoTrack);
     }
   };
+  var switchTo = function switchTo(_ref3) {
+    var meetingId = _ref3.meetingId,
+      token = _ref3.token;
+    var meeting = meetingRef.current;
+    if (meeting) {
+      meeting.switchTo({
+        meetingId: meetingId,
+        token: token
+      });
+    }
+  };
   var disableScreenShare = function disableScreenShare() {
     var meeting = meetingRef.current;
     if (meeting) {
@@ -946,8 +1025,8 @@ var MeetingProvider = function MeetingProvider(_ref) {
       meeting.changeMic(obj);
     }
   };
-  var startVideo = function startVideo(_ref3) {
-    var link = _ref3.link;
+  var startVideo = function startVideo(_ref4) {
+    var link = _ref4.link;
     var meeting = meetingRef.current;
     if (meeting) {
       meeting.startVideo({
@@ -967,8 +1046,8 @@ var MeetingProvider = function MeetingProvider(_ref) {
       meeting.resumeVideo();
     }
   };
-  var pauseVideo = function pauseVideo(_ref4) {
-    var currentTime = _ref4.currentTime;
+  var pauseVideo = function pauseVideo(_ref5) {
+    var currentTime = _ref5.currentTime;
     var meeting = meetingRef.current;
     if (meeting) {
       meeting.pauseVideo({
@@ -976,8 +1055,20 @@ var MeetingProvider = function MeetingProvider(_ref) {
       });
     }
   };
-  var seekVideo = function seekVideo(_ref5) {
-    var currentTime = _ref5.currentTime;
+  var enableAdaptiveSubscription = function enableAdaptiveSubscription() {
+    var meeting = meetingRef.current;
+    if (meeting) {
+      meeting.enableAdaptiveSubscription();
+    }
+  };
+  var disableAdaptiveSubscription = function disableAdaptiveSubscription() {
+    var meeting = meetingRef.current;
+    if (meeting) {
+      meeting.disableAdaptiveSubscription();
+    }
+  };
+  var seekVideo = function seekVideo(_ref6) {
+    var currentTime = _ref6.currentTime;
     var meeting = meetingRef.current;
     if (meeting) {
       meeting.seekVideo({
@@ -997,9 +1088,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
       meeting.stopLivestream();
     }
   };
-  var connectTo = function connectTo(_ref6) {
-    var meetingId = _ref6.meetingId,
-      payload = _ref6.payload;
+  var connectTo = function connectTo(_ref7) {
+    var meetingId = _ref7.meetingId,
+      payload = _ref7.payload;
     try {
       var _meeting3 = meetingRef.current;
       var _temp = function () {
@@ -1095,6 +1186,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
       disableScreenShare: disableScreenShare,
       enableScreenShare: enableScreenShare,
       toggleScreenShare: toggleScreenShare,
+      switchTo: switchTo,
       getMics: getMics,
       getWebcams: getWebcams,
       changeWebcam: changeWebcam,
@@ -1110,7 +1202,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
       stopLivestream: stopLivestream,
       connectTo: connectTo,
       startHls: startHls,
-      stopHls: stopHls
+      stopHls: stopHls,
+      enableAdaptiveSubscription: enableAdaptiveSubscription,
+      disableAdaptiveSubscription: disableAdaptiveSubscription
     }
   }, children);
 };
@@ -1124,7 +1218,11 @@ var useParticipant = function useParticipant(participantId, _temp) {
     _ref$onMediaStatusCha = _ref.onMediaStatusChanged,
     onMediaStatusChanged = _ref$onMediaStatusCha === void 0 ? function () {} : _ref$onMediaStatusCha,
     _ref$onVideoQualityCh = _ref.onVideoQualityChanged,
-    onVideoQualityChanged = _ref$onVideoQualityCh === void 0 ? function () {} : _ref$onVideoQualityCh;
+    onVideoQualityChanged = _ref$onVideoQualityCh === void 0 ? function () {} : _ref$onVideoQualityCh,
+    _ref$onStreamPaused = _ref.onStreamPaused,
+    onStreamPaused = _ref$onStreamPaused === void 0 ? function () {} : _ref$onStreamPaused,
+    _ref$onStreamResumed = _ref.onStreamResumed,
+    onStreamResumed = _ref$onStreamResumed === void 0 ? function () {} : _ref$onStreamResumed;
   var _useState = React.useState(null),
     webcamStream = _useState[0],
     setwebcamStream = _useState[1];
@@ -1333,6 +1431,12 @@ var useParticipant = function useParticipant(participantId, _temp) {
     }
     participant === null || participant === void 0 ? void 0 : participant.on('stream-enabled', _handleStreamEnabled);
     participant === null || participant === void 0 ? void 0 : participant.on('stream-disabled', _handleStreamDisabled);
+    participant === null || participant === void 0 ? void 0 : participant.on('stream-paused', function (data) {
+      onStreamPaused(data);
+    });
+    participant === null || participant === void 0 ? void 0 : participant.on('stream-resumed', function (data) {
+      onStreamResumed(data);
+    });
     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);
     eventEmitter.on(events['participant-mode-changed'], _handleParticipantModeChanged);
@@ -1957,6 +2061,7 @@ var useWhiteboard = function useWhiteboard() {
   };
 };
 
+var _excluded = ["participantId", "type"];
 var Constants = jsSdk.VideoSDK.Constants;
 var createCameraVideoTrack = function createCameraVideoTrack(_ref) {
   var _ref$cameraId = _ref.cameraId,
@@ -2028,6 +2133,167 @@ var getNetworkStats = function getNetworkStats(_temp) {
     return Promise.reject(e);
   }
 };
+var withAdaptiveObservers = function withAdaptiveObservers(VideoPlayerComponent) {
+  var intersectionObserverOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0
+  };
+  var debounceDelay = 400;
+  return function (props) {
+    var participantId = props.participantId,
+      type = props.type;
+    var ref = React.useRef(null);
+    var observerRef = React.useRef(null);
+    var resizeObserverRef = React.useRef(null);
+    var _useParticipant = useParticipant(participantId),
+      participant = _useParticipant.participant;
+    React.useEffect(function () {
+      if (type === 'share' || !ref.current || !participant) 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();
+              }
+            }
+          } else {
+            for (var _iterator3 = _createForOfIteratorHelperLoose(participant.streams.values()), _step3; !(_step3 = _iterator3()).done;) {
+              var _stream = _step3.value;
+              if (_stream.kind === 'video') {
+                _stream.pause();
+              }
+            }
+          }
+        }
+      }, debounceDelay);
+      observerRef.current = new IntersectionObserver(handleIntersectionChange, intersectionObserverOptions);
+      var processResize = function processResize(width, height) {
+        if (width > 0 && height > 0) {
+          participant.setViewPort(width, height);
+        }
+      };
+      var handleResize = debounce(function (entries) {
+        var _entries$0$contentRec = entries[0].contentRect,
+          width = _entries$0$contentRec.width,
+          height = _entries$0$contentRec.height;
+        processResize(width, height);
+      }, debounceDelay);
+      resizeObserverRef.current = new ResizeObserver(handleResize);
+      resizeObserverRef.current.observe(element);
+      observerRef.current.observe(element);
+      return function () {
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+        }
+        if (resizeObserverRef.current) {
+          resizeObserverRef.current.disconnect();
+        }
+      };
+    }, []);
+    return /*#__PURE__*/React__default.createElement(VideoPlayerComponent, _extends({
+      ref: ref
+    }, props));
+  };
+};
+var VideoSDKPlayer = React.forwardRef(function (_ref5, ref) {
+  var participantId = _ref5.participantId,
+    _ref5$type = _ref5.type,
+    type = _ref5$type === void 0 ? 'video' : _ref5$type,
+    _ref5$containerStyle = _ref5.containerStyle,
+    containerStyle = _ref5$containerStyle === void 0 ? {} : _ref5$containerStyle,
+    _ref5$className = _ref5.className,
+    className = _ref5$className === void 0 ? '' : _ref5$className,
+    _ref5$classNameVideo = _ref5.classNameVideo,
+    classNameVideo = _ref5$classNameVideo === void 0 ? '' : _ref5$classNameVideo,
+    _ref5$videoStyle = _ref5.videoStyle,
+    videoStyle = _ref5$videoStyle === void 0 ? {} : _ref5$videoStyle;
+  var _useParticipant2 = useParticipant(participantId),
+    webcamOn = _useParticipant2.webcamOn,
+    webcamStream = _useParticipant2.webcamStream,
+    isLocal = _useParticipant2.isLocal;
+  var webcamRef = React.useRef(null);
+  React.useEffect(function () {
+    if (webcamRef.current) {
+      if (webcamOn && webcamStream) {
+        var mediaStream = new MediaStream();
+        mediaStream.addTrack(webcamStream.track);
+        webcamRef.current.srcObject = mediaStream;
+        webcamRef.current.play()["catch"](function (error) {
+          return console.error('videoElem.current.play() failed', error);
+        });
+      } else {
+        webcamRef.current.srcObject = null;
+      }
+    }
+  }, [webcamStream, webcamOn]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: ref,
+    className: "video-container participant-video-" + participantId + " " + (className || ''),
+    style: _extends({
+      objectFit: type === 'share' ? 'contain' : 'none',
+      height: '100%'
+    }, containerStyle)
+  }, /*#__PURE__*/React__default.createElement("video", {
+    width: "100%",
+    height: "100%",
+    ref: webcamRef,
+    autoPlay: true,
+    className: classNameVideo,
+    style: isLocal ? _extends({
+      transform: 'scaleX(-1)',
+      WebkitTransform: 'scaleX(-1)'
+    }, videoStyle) : videoStyle
+  }));
+});
+var VideoPlayer = function VideoPlayer(_ref6) {
+  var participantId = _ref6.participantId,
+    type = _ref6.type,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded);
+  var VideoPlayerComponent = React.useMemo(function () {
+    return type === 'share' ? VideoSDKPlayer : withAdaptiveObservers(VideoSDKPlayer);
+  }, [type, participantId]);
+  return /*#__PURE__*/React__default.createElement(VideoPlayerComponent, _extends({
+    participantId: participantId,
+    type: type
+  }, props));
+};
+var AudioPlayer = function AudioPlayer(_ref7) {
+  var participantId = _ref7.participantId,
+    type = _ref7.type;
+  var _useParticipant3 = useParticipant(participantId),
+    micStream = _useParticipant3.micStream,
+    isLocal = _useParticipant3.isLocal,
+    screenShareAudioStream = _useParticipant3.screenShareAudioStream;
+  var micRef = React.useRef(null);
+  React.useEffect(function () {
+    if (micRef.current) {
+      var audioStream = type === 'shareAudio' ? screenShareAudioStream : micStream;
+      if (audioStream) {
+        var mediaStream = new MediaStream();
+        mediaStream.addTrack(audioStream.track);
+        micRef.current.srcObject = mediaStream;
+        micRef.current.play()["catch"](function (error) {
+          return console.error('micRef.current.play() failed', error);
+        });
+      } else {
+        micRef.current.srcObject = null;
+      }
+    }
+  }, [micStream, screenShareAudioStream, type]);
+  return /*#__PURE__*/React__default.createElement("audio", {
+    ref: micRef,
+    autoPlay: true,
+    playsInline: true,
+    muted: isLocal
+  });
+};
 
 Object.defineProperty(exports, 'CameraDeviceInfo', {
   enumerable: true,
@@ -2047,9 +2313,11 @@ Object.defineProperty(exports, 'MicrophoneDeviceInfo', {
     return jsSdk.MicrophoneDeviceInfo;
   }
 });
+exports.AudioPlayer = AudioPlayer;
 exports.Constants = Constants;
 exports.MeetingConsumer = MeetingConsumer;
 exports.MeetingProvider = MeetingProvider;
+exports.VideoPlayer = VideoPlayer;
 exports.createCameraVideoTrack = createCameraVideoTrack;
 exports.createMicrophoneAudioTrack = createMicrophoneAudioTrack;
 exports.createScreenShareVideoTrack = createScreenShareVideoTrack;
@@ -2063,4 +2331,5 @@ exports.useParticipant = useParticipant;
 exports.usePubSub = usePubSub;
 exports.useTranscription = useTranscription;
 exports.useWhiteboard = useWhiteboard;
+exports.withAdaptiveObservers = withAdaptiveObservers;
 //# sourceMappingURL=index.js.map