@videosdk.live/react-sdk 0.2.1 → 0.2.3

package/dist/index.modern.js

@@ -1,8 +1,56 @@
-import React, { createContext, useEffect, useContext, useState, useRef, useMemo } from 'react';
+import React, { createContext, useEffect, useContext, useState, useRef, useMemo, forwardRef } from 'react';
 import EventEmitter from 'events';
 import { VideoSDK } from '@videosdk.live/js-sdk';
 export { CameraDeviceInfo, DeviceInfo, MicrophoneDeviceInfo } from '@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",
@@ -45,6 +93,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 = createContext();
 var useMeeting = function useMeeting(_temp) {
@@ -320,7 +381,7 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MeetingProviderContex.Consumer, null, children));
 };
 
-var version = "0.2.1";
+var version = "0.2.2";
 
 var MeetingProvider = function MeetingProvider(_ref) {
   var children = _ref.children,
@@ -558,12 +619,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']);
@@ -858,6 +926,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) {
@@ -944,8 +1023,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({
@@ -965,8 +1044,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({
@@ -974,8 +1053,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({
@@ -995,9 +1086,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 () {
@@ -1093,6 +1184,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
       disableScreenShare: disableScreenShare,
       enableScreenShare: enableScreenShare,
       toggleScreenShare: toggleScreenShare,
+      switchTo: switchTo,
       getMics: getMics,
       getWebcams: getWebcams,
       changeWebcam: changeWebcam,
@@ -1108,7 +1200,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
       stopLivestream: stopLivestream,
       connectTo: connectTo,
       startHls: startHls,
-      stopHls: stopHls
+      stopHls: stopHls,
+      enableAdaptiveSubscription: enableAdaptiveSubscription,
+      disableAdaptiveSubscription: disableAdaptiveSubscription
     }
   }, children);
 };
@@ -1122,7 +1216,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 = useState(null),
     webcamStream = _useState[0],
     setwebcamStream = _useState[1];
@@ -1331,6 +1429,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);
@@ -1955,6 +2059,7 @@ var useWhiteboard = function useWhiteboard() {
   };
 };
 
+var _excluded = ["participantId", "type"];
 var Constants = VideoSDK.Constants;
 var createCameraVideoTrack = function createCameraVideoTrack(_ref) {
   var _ref$cameraId = _ref.cameraId,
@@ -2026,6 +2131,171 @@ 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 = useRef(null);
+    var observerRef = useRef(null);
+    var resizeObserverRef = useRef(null);
+    var _useParticipant = useParticipant(participantId),
+      participant = _useParticipant.participant;
+    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.createElement(VideoPlayerComponent, _extends({
+      ref: ref
+    }, props));
+  };
+};
+var VideoSDKPlayer = 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,
+    screenShareStream = _useParticipant2.screenShareStream,
+    screenShareOn = _useParticipant2.screenShareOn;
+  var videoRef = useRef(null);
+  useEffect(function () {
+    var stream = type === 'share' ? screenShareStream : webcamStream;
+    var isOn = type === 'share' ? screenShareOn : webcamOn;
+    if (videoRef.current) {
+      if (isOn && stream) {
+        var mediaStream = new MediaStream();
+        mediaStream.addTrack(stream.track);
+        videoRef.current.srcObject = mediaStream;
+        videoRef.current.play()["catch"](function (error) {
+          return console.error('videoRef.current.play() failed', error);
+        });
+      } else {
+        videoRef.current.srcObject = null;
+      }
+    }
+  }, [type].concat(type === 'share' ? [screenShareOn, screenShareStream] : type === 'video' ? [webcamOn, webcamStream] : []));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "video-container participant-video-" + participantId + " " + (className || ''),
+    style: _extends({
+      objectFit: type === 'share' ? 'contain' : 'none',
+      height: '100%'
+    }, containerStyle)
+  }, /*#__PURE__*/React.createElement("video", {
+    width: "100%",
+    height: "100%",
+    ref: videoRef,
+    autoPlay: true,
+    className: classNameVideo,
+    style: isLocal && type !== 'share' ? _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 = useMemo(function () {
+    return type === 'share' ? VideoSDKPlayer : withAdaptiveObservers(VideoSDKPlayer);
+  }, [type, participantId]);
+  return /*#__PURE__*/React.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 = useRef(null);
+  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.createElement("audio", {
+    ref: micRef,
+    autoPlay: true,
+    playsInline: true,
+    muted: isLocal
+  });
+};
 
-export { Constants, MeetingConsumer, MeetingProvider, createCameraVideoTrack, createMicrophoneAudioTrack, createScreenShareVideoTrack, getNetworkStats, useCharacter, useConnection, useFile, useMediaDevice, useMeeting, useParticipant, usePubSub, useTranscription, useWhiteboard };
+export { AudioPlayer, Constants, MeetingConsumer, MeetingProvider, VideoPlayer, createCameraVideoTrack, createMicrophoneAudioTrack, createScreenShareVideoTrack, getNetworkStats, useCharacter, useConnection, useFile, useMediaDevice, useMeeting, useParticipant, usePubSub, useTranscription, useWhiteboard, withAdaptiveObservers };
 //# sourceMappingURL=index.modern.js.map