@videosdk.live/react-sdk 0.1.28 → 0.1.29

package/README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img src="https://static.zujonow.com/videosdk.live/videosdk_logo_circle_big.png"/><br/>
+  <img src="https://www.linkpicture.com/q/videosdk_Full-Logo_blue.png"/><br/>
 <p align="center">
   Video SDK React App<br/>
   <a href="https://videosdk.live/">videosdk.live</a>
@@ -9,7 +9,15 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@videosdk.live/react-sdk"><img src="https://img.shields.io/npm/dw/@videosdk.live/react-sdk.svg?style=for-the-badge" alt="NPM downloads"></a>
   <a href="https://www.npmjs.com/package/@videosdk.live/react-sdk"><img src="https://img.shields.io/npm/v/@videosdk.live/react-sdk/latest.svg?style=for-the-badge" alt="NPM latest version"></a>
-   <a href="https://discord.com/invite/f2WsNDN9S5"><img src="https://img.shields.io/discord/876774498798551130?color=%237289da&label=Chat%20on%20Discrd&style=for-the-badge" alt="Chat on Discord"></a>
+   <a href="https://discord.gg/kgAvyxtTxv">
+<img src="https://img.shields.io/discord/734858252939952248?logo=discord&style=for-the-badge" />
+</a>
+<a href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fpublish.twitter.com%2F&ref_src=twsrc%5Etfw%7Ctwcamp%5Ebuttonembed%7Ctwterm%5Efollow%7Ctwgr%5Evideo_sdk&screen_name=video_sdk">
+<img src="https://img.shields.io/twitter/follow/video_sdk?label=Twitter&logo=twitter&style=for-the-badge" />
+</a>
+<a href="http://youtube.com/videosdk?sub_confirmation=1">
+<img src="https://img.shields.io/youtube/channel/subscribers/UCuY7JzXnpp874oa7uQbUwsA?logo=Youtube&style=for-the-badge" />
+</a>
 </p>
 
 ## Features
@@ -28,6 +36,9 @@
 
 Visit our official guide for [Browser Support](https://docs.videosdk.live/docs/realtime-communication/see-also/device-browser-support)
 
+## Demo App
+Check out demo [here](https://videosdk.live/prebuilt/)
+
 ## Prerequisites
 
 You must have the following installed:
@@ -67,10 +78,13 @@ import {
 } from "@videosdk.live/react-sdk";
 ```
 
-
 ## Documentation
 
-Check the components and their usage in our [documentation](https://docs.videosdk.live/docs/realtime-communication/sdk-reference/react-sdk/setup).
+Check the components and their usage in our [documentation](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/getting-started).
+
+## Quick Start
+
+Check the Quick Start guide to our [documentation](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/quick-start).
 
 
 ## Try it out

package/dist/index.js

@@ -29,7 +29,9 @@ var events = {
   'connection-open': eventPrifix + "-connection-open",
   'connection-close': eventPrifix + "-connection-close",
   'switch-meeting': eventPrifix + "-switch-meeting",
-  error: eventPrifix + "-error"
+  error: eventPrifix + "-error",
+  'hls-started': eventPrifix + "-hls-started",
+  'hls-stopped': eventPrifix + "-hls-stopped"
 };
 var eventEmitter = new EventEmitter();
 eventEmitter.setMaxListeners(9999);
@@ -82,7 +84,11 @@ var useMeeting = function useMeeting(_temp) {
       _ref$onSwitchMeeting = _ref.onSwitchMeeting,
       onSwitchMeeting = _ref$onSwitchMeeting === void 0 ? function () {} : _ref$onSwitchMeeting,
       _ref$onError = _ref.onError,
-      onError = _ref$onError === void 0 ? function () {} : _ref$onError;
+      onError = _ref$onError === void 0 ? function () {} : _ref$onError,
+      _ref$onHlsStarted = _ref.onHlsStarted,
+      onHlsStarted = _ref$onHlsStarted === void 0 ? function () {} : _ref$onHlsStarted,
+      _ref$onHlsStopped = _ref.onHlsStopped,
+      onHlsStopped = _ref$onHlsStopped === void 0 ? function () {} : _ref$onHlsStopped;
 
   React.useEffect(function () {
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
@@ -108,6 +114,8 @@ var useMeeting = function useMeeting(_temp) {
     eventEmitter.on(events['connection-close'], onConnetionClose);
     eventEmitter.on(events['switch-meeting'], onSwitchMeeting);
     eventEmitter.on(events['error'], onError);
+    eventEmitter.on(events['hls-started'], onHlsStarted);
+    eventEmitter.on(events['hls-stopped'], onHlsStopped);
     return function () {
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
       eventEmitter.off(events['participant-left'], onParticipantLeft);
@@ -132,6 +140,8 @@ var useMeeting = function useMeeting(_temp) {
       eventEmitter.off(events['connection-close'], onConnetionClose);
       eventEmitter.off(events['switch-meeting'], onSwitchMeeting);
       eventEmitter.off(events['error'], onError);
+      eventEmitter.off(events['hls-started'], onHlsStarted);
+      eventEmitter.off(events['hls-stopped'], onHlsStopped);
     };
   }, []);
   return React.useContext(MeetingProviderContex);
@@ -183,7 +193,11 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
       _ref2$onSwitchMeeting = _ref2.onSwitchMeeting,
       onSwitchMeeting = _ref2$onSwitchMeeting === void 0 ? function () {} : _ref2$onSwitchMeeting,
       _ref2$onError = _ref2.onError,
-      onError = _ref2$onError === void 0 ? function () {} : _ref2$onError;
+      onError = _ref2$onError === void 0 ? function () {} : _ref2$onError,
+      _ref2$onHlsStarted = _ref2.onHlsStarted,
+      onHlsStarted = _ref2$onHlsStarted === void 0 ? function () {} : _ref2$onHlsStarted,
+      _ref2$onHlsStopped = _ref2.onHlsStopped,
+      onHlsStopped = _ref2$onHlsStopped === void 0 ? function () {} : _ref2$onHlsStopped;
   React.useEffect(function () {
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
     eventEmitter.on(events['participant-left'], onParticipantLeft);
@@ -208,6 +222,8 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
     eventEmitter.on(events['connection-close'], onConnetionClose);
     eventEmitter.on(events['switch-meeting'], onSwitchMeeting);
     eventEmitter.on(events['error'], onError);
+    eventEmitter.on(events['hls-started'], onHlsStarted);
+    eventEmitter.on(events['hls-stopped'], onHlsStopped);
     return function () {
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
       eventEmitter.off(events['participant-left'], onParticipantLeft);
@@ -232,12 +248,14 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
       eventEmitter.off(events['connection-close'], onConnetionClose);
       eventEmitter.off(events['switch-meeting'], onSwitchMeeting);
       eventEmitter.off(events['error'], onError);
+      eventEmitter.off(events['hls-started'], onHlsStarted);
+      eventEmitter.off(events['hls-stopped'], onHlsStopped);
     };
   }, []);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MeetingProviderContex.Consumer, null, children));
 };
 
-var version = "0.1.23";
+var version = "0.1.27";
 
 var MeetingProvider = function MeetingProvider(_ref) {
   var children = _ref.children,
@@ -307,6 +325,10 @@ var MeetingProvider = function MeetingProvider(_ref) {
       isMeetingJoined = _useState15[0],
       setIsMeetingJoined = _useState15[1];
 
+  var _useState16 = React.useState(false),
+      isHls = _useState16[0],
+      setIsHls = _useState16[1];
+
   var meetingRef = React.useRef();
   var localMicOnRef = React.useRef();
   var localWebcamOnRef = React.useRef();
@@ -315,6 +337,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
   var configRef = React.useRef(config);
   var tokenRef = React.useRef(token);
   var joinedOnFirstRender = React.useRef(false);
+  var isHlsRef = React.useRef();
   var reinitialiseMeetingOnConfigChange = React.useMemo(function () {
     return _reinitialiseMeetingOnConfigChange;
   }, []);
@@ -339,6 +362,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
   React.useEffect(function () {
     tokenRef.current = token;
   }, [token]);
+  React.useEffect(function () {
+    isHlsRef.current = isHls;
+  }, [isHls]);
 
   var resetStates = function resetStates() {
     setMeeting(null);
@@ -356,6 +382,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
     setPinnedParticipants(new Map());
     setConnections(new Map());
     setIsMeetingJoined(false);
+    setIsHls(false);
   };
 
   var _handle_participant_joined = function _handle_participant_joined(participant) {
@@ -449,6 +476,16 @@ var MeetingProvider = function MeetingProvider(_ref) {
     eventEmitter.emit(events['live-stream-stopped']);
   };
 
+  var _handle_hls_started = function _handle_hls_started(data) {
+    setIsHls(true);
+    eventEmitter.emit(events['hls-started'], data);
+  };
+
+  var _handle_hls_stopped = function _handle_hls_stopped() {
+    setIsHls(false);
+    eventEmitter.emit(events['hls-stopped']);
+  };
+
   var _handle_video_state_changed = function _handle_video_state_changed(data) {
     eventEmitter.emit(events['video-state-changed'], data);
   };
@@ -505,6 +542,8 @@ var MeetingProvider = function MeetingProvider(_ref) {
         meeting.off('connection-close', _handle_connection_close);
         meeting.off('switch-meeting', _handle_switch_meeting);
         meeting.off('error', _handle_error);
+        meeting.off('hls-started', _handle_hls_started);
+        meeting.off('hls-stopped', _handle_hls_stopped);
       }
 
       if (typeof (meeting === null || meeting === void 0 ? void 0 : (_meeting$localPartici = meeting.localParticipant) === null || _meeting$localPartici === void 0 ? void 0 : _meeting$localPartici.off) === 'function') {
@@ -555,14 +594,14 @@ var MeetingProvider = function MeetingProvider(_ref) {
     eventEmitter.emit(events['connection-close'], connectionId);
   };
 
-  var _handle_error = function _handle_error(data) {
-    eventEmitter.emit(events['error'], data);
-  };
-
   var _handle_switch_meeting = function _handle_switch_meeting(d) {
     eventEmitter.emit(events['switch-meeting'], d);
   };
 
+  var _handle_error = function _handle_error(data) {
+    eventEmitter.emit(events['error'], data);
+  };
+
   var join = function join() {
     var meeting = jsSdk.VideoSDK && jsSdk.VideoSDK.initMeeting(configRef.current);
     setMeeting(meeting);
@@ -594,6 +633,8 @@ var MeetingProvider = function MeetingProvider(_ref) {
     meeting.on('connection-close', _handle_connection_close);
     meeting.on('switch-meeting', _handle_switch_meeting);
     meeting.on('error', _handle_error);
+    meeting.on('hls-started', _handle_hls_started);
+    meeting.on('hls-stopped', _handle_hls_stopped);
     meeting.localParticipant.on('stream-enabled', _handle_localParticipant_stream_enabled);
     meeting.localParticipant.on('stream-disabled', _handle_localParticipant_stream_disabled);
     meeting.join();
@@ -635,11 +676,15 @@ var MeetingProvider = function MeetingProvider(_ref) {
     }
   };
 
-  var unmuteMic = function unmuteMic() {
+  var unmuteMic = function unmuteMic(customAudioTrack) {
+    if (customAudioTrack === void 0) {
+      customAudioTrack = undefined;
+    }
+
     var meeting = meetingRef.current;
 
     if (meeting) {
-      meeting.unmuteMic();
+      meeting.unmuteMic(customAudioTrack);
     }
   };
 
@@ -651,13 +696,17 @@ var MeetingProvider = function MeetingProvider(_ref) {
     }
   };
 
-  var toggleMic = function toggleMic() {
+  var toggleMic = function toggleMic(customAudioTrack) {
+    if (customAudioTrack === void 0) {
+      customAudioTrack = undefined;
+    }
+
     var localMicOn = localMicOnRef.current;
 
     if (localMicOn) {
       muteMic();
     } else {
-      unmuteMic();
+      unmuteMic(customAudioTrack);
     }
   };
 
@@ -669,21 +718,29 @@ var MeetingProvider = function MeetingProvider(_ref) {
     }
   };
 
-  var enableWebcam = function enableWebcam() {
+  var enableWebcam = function enableWebcam(customVideoTrack) {
+    if (customVideoTrack === void 0) {
+      customVideoTrack = undefined;
+    }
+
     var meeting = meetingRef.current;
 
     if (meeting) {
-      meeting.enableWebcam();
+      meeting.enableWebcam(customVideoTrack);
     }
   };
 
-  var toggleWebcam = function toggleWebcam() {
+  var toggleWebcam = function toggleWebcam(customVideoTrack) {
+    if (customVideoTrack === void 0) {
+      customVideoTrack = undefined;
+    }
+
     var localWebcamOn = localWebcamOnRef.current;
 
     if (localWebcamOn) {
       disableWebcam();
     } else {
-      enableWebcam();
+      enableWebcam(customVideoTrack);
     }
   };
 
@@ -695,21 +752,29 @@ var MeetingProvider = function MeetingProvider(_ref) {
     }
   };
 
-  var enableScreenShare = function enableScreenShare() {
+  var enableScreenShare = function enableScreenShare(customScreenShareTrack) {
+    if (customScreenShareTrack === void 0) {
+      customScreenShareTrack = undefined;
+    }
+
     var meeting = meetingRef.current;
 
     if (meeting) {
-      meeting.enableScreenShare();
+      meeting.enableScreenShare(customScreenShareTrack);
     }
   };
 
-  var toggleScreenShare = function toggleScreenShare() {
+  var toggleScreenShare = function toggleScreenShare(customScreenShareTrack) {
+    if (customScreenShareTrack === void 0) {
+      customScreenShareTrack = undefined;
+    }
+
     var localScreenShareOn = localScreenShareOnRef.current;
 
     if (localScreenShareOn) {
       disableScreenShare();
     } else {
-      enableScreenShare();
+      enableScreenShare(customScreenShareTrack);
     }
   };
 
@@ -858,6 +923,22 @@ var MeetingProvider = function MeetingProvider(_ref) {
     }
   };
 
+  var startHls = function startHls(config) {
+    var meeting = meetingRef.current;
+
+    if (meeting) {
+      meeting.startHls(config);
+    }
+  };
+
+  var stopHls = function stopHls() {
+    var meeting = meetingRef.current;
+
+    if (meeting) {
+      meeting.stopHls();
+    }
+  };
+
   var initSDK = function initSDK() {
     jsSdk.VideoSDK.config(tokenRef.current);
 
@@ -902,6 +983,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
       isLiveStreaming: isLiveStreaming,
       pinnedParticipants: pinnedParticipants,
       connections: connections,
+      isHls: isHls,
       join: join,
       leave: leave,
       end: end,
@@ -930,7 +1012,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
       startLivestream: startLivestream,
       stopLivestream: stopLivestream,
       connectTo: connectTo,
-      isMeetingJoined: isMeetingJoined
+      isMeetingJoined: isMeetingJoined,
+      startHls: startHls,
+      stopHls: stopHls
     }
   }, children);
 };
@@ -1184,10 +1268,11 @@ var useConnection = function useConnection(connectionId, _temp) {
 };
 
 var usePubSub = function usePubSub(topic, _temp) {
-  var _ref = _temp === void 0 ? {
-    onMessageReceived: function onMessageReceived() {}
-  } : _temp,
-      onMessageReceived = _ref.onMessageReceived;
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$onMessageReceive = _ref.onMessageReceived,
+      onMessageReceived = _ref$onMessageReceive === void 0 ? function () {} : _ref$onMessageReceive,
+      _ref$onOldMessagesRec = _ref.onOldMessagesReceived,
+      onOldMessagesReceived = _ref$onOldMessagesRec === void 0 ? function () {} : _ref$onOldMessagesRec;
 
   var _useMeeting = useMeeting(),
       meeting = _useMeeting.meeting,
@@ -1218,6 +1303,7 @@ var usePubSub = function usePubSub(topic, _temp) {
 
       return Promise.resolve(meeting === null || meeting === void 0 ? void 0 : (_meeting$pubSub = meeting.pubSub) === null || _meeting$pubSub === void 0 ? void 0 : _meeting$pubSub.subscribe(topic, _handlePubSub)).then(function (data) {
         if (data) {
+          onOldMessagesReceived(data.messages);
           setMessages(data.messages);
         }
       });
@@ -1245,9 +1331,69 @@ var usePubSub = function usePubSub(topic, _temp) {
 
 var Constants = jsSdk.VideoSDK.Constants;
 
+var createCameraVideoTrack = function createCameraVideoTrack(_ref) {
+  var _ref$cameraId = _ref.cameraId,
+      cameraId = _ref$cameraId === void 0 ? undefined : _ref$cameraId,
+      _ref$encoderConfig = _ref.encoderConfig,
+      encoderConfig = _ref$encoderConfig === void 0 ? undefined : _ref$encoderConfig,
+      _ref$facingMode = _ref.facingMode,
+      facingMode = _ref$facingMode === void 0 ? undefined : _ref$facingMode,
+      _ref$optimizationMode = _ref.optimizationMode,
+      optimizationMode = _ref$optimizationMode === void 0 ? undefined : _ref$optimizationMode;
+
+  try {
+    return Promise.resolve(jsSdk.VideoSDK.createCameraVideoTrack({
+      cameraId: cameraId,
+      encoderConfig: encoderConfig,
+      facingMode: facingMode,
+      optimizationMode: optimizationMode
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+var createScreenShareVideoTrack = function createScreenShareVideoTrack(_ref2) {
+  var _ref2$encoderConfig = _ref2.encoderConfig,
+      encoderConfig = _ref2$encoderConfig === void 0 ? undefined : _ref2$encoderConfig,
+      _ref2$optimizationMod = _ref2.optimizationMode,
+      optimizationMode = _ref2$optimizationMod === void 0 ? undefined : _ref2$optimizationMod;
+
+  try {
+    return Promise.resolve(jsSdk.VideoSDK.createScreenShareVideoTrack({
+      encoderConfig: encoderConfig,
+      optimizationMode: optimizationMode
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+var createMicrophoneAudioTrack = function createMicrophoneAudioTrack(_ref3) {
+  var _ref3$noiseConfig = _ref3.noiseConfig,
+      noiseConfig = _ref3$noiseConfig === void 0 ? undefined : _ref3$noiseConfig,
+      _ref3$encoderConfig = _ref3.encoderConfig,
+      encoderConfig = _ref3$encoderConfig === void 0 ? undefined : _ref3$encoderConfig,
+      _ref3$microphoneId = _ref3.microphoneId,
+      microphoneId = _ref3$microphoneId === void 0 ? undefined : _ref3$microphoneId;
+
+  try {
+    return Promise.resolve(jsSdk.VideoSDK.createMicrophoneAudioTrack({
+      noiseConfig: noiseConfig,
+      encoderConfig: encoderConfig,
+      microphoneId: microphoneId
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 exports.Constants = Constants;
 exports.MeetingConsumer = MeetingConsumer;
 exports.MeetingProvider = MeetingProvider;
+exports.createCameraVideoTrack = createCameraVideoTrack;
+exports.createMicrophoneAudioTrack = createMicrophoneAudioTrack;
+exports.createScreenShareVideoTrack = createScreenShareVideoTrack;
 exports.useConnection = useConnection;
 exports.useMeeting = useMeeting;
 exports.useParticipant = useParticipant;