@videosdk.live/react-sdk 0.1.12 → 0.1.13

package/dist/index.modern.js

@@ -1,8 +1,8 @@
 import React, { createContext, useEffect, useContext, useState, useRef, useMemo } from 'react';
 import EventEmitter from 'events';
-import { ZujoSDK } from '@videosdk.live/js-sdk';
+import { VideoSDK } from '@videosdk.live/js-sdk';
 
-var eventPrifix = 'zn-meeting-react-sdk';
+var eventPrifix = 'videosdk-live-react-sdk';
 var events = {
   'participant-joined': eventPrifix + "-participant-joined",
   'participant-left': eventPrifix + "-participant-left",
@@ -22,7 +22,10 @@ var events = {
   'video-seeked': eventPrifix + "-video-seeked",
   'webcam-requested': eventPrifix + "-webcam-requested",
   'mic-requested': eventPrifix + "-mic-requested",
-  'pin-state-changed': eventPrifix + "-pin-state-changed"
+  'pin-state-changed': eventPrifix + "-pin-state-changed",
+  'connection-open': eventPrifix + "-connection-open",
+  'connection-close': eventPrifix + "-connection-close",
+  'switch-meeting': eventPrifix + "-switch-meeting"
 };
 var eventEmitter = new EventEmitter();
 eventEmitter.setMaxListeners(9999);
@@ -67,7 +70,13 @@ var useMeeting = function useMeeting(_temp) {
       _ref$onMicRequested = _ref.onMicRequested,
       onMicRequested = _ref$onMicRequested === void 0 ? function () {} : _ref$onMicRequested,
       _ref$onPinStateChange = _ref.onPinStateChanged,
-      onPinStateChanged = _ref$onPinStateChange === void 0 ? function () {} : _ref$onPinStateChange;
+      onPinStateChanged = _ref$onPinStateChange === void 0 ? function () {} : _ref$onPinStateChange,
+      _ref$onConnectionOpen = _ref.onConnectionOpen,
+      onConnectionOpen = _ref$onConnectionOpen === void 0 ? function () {} : _ref$onConnectionOpen,
+      _ref$onConnetionClose = _ref.onConnetionClose,
+      onConnetionClose = _ref$onConnetionClose === void 0 ? function () {} : _ref$onConnetionClose,
+      _ref$onSwitchMeeting = _ref.onSwitchMeeting,
+      onSwitchMeeting = _ref$onSwitchMeeting === void 0 ? function () {} : _ref$onSwitchMeeting;
 
   useEffect(function () {
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
@@ -89,6 +98,9 @@ var useMeeting = function useMeeting(_temp) {
     eventEmitter.on(events['webcam-requested'], onWebcamRequested);
     eventEmitter.on(events['mic-requested'], onMicRequested);
     eventEmitter.on(events['pin-state-changed'], onPinStateChanged);
+    eventEmitter.on(events['connection-open'], onConnectionOpen);
+    eventEmitter.on(events['connection-close'], onConnetionClose);
+    eventEmitter.on(events['switch-meeting'], onSwitchMeeting);
     return function () {
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
       eventEmitter.off(events['participant-left'], onParticipantLeft);
@@ -109,6 +121,9 @@ var useMeeting = function useMeeting(_temp) {
       eventEmitter.off(events['webcam-requested'], onWebcamRequested);
       eventEmitter.off(events['mic-requested'], onMicRequested);
       eventEmitter.off(events['pin-state-changed'], onPinStateChanged);
+      eventEmitter.off(events['connection-open'], onConnectionOpen);
+      eventEmitter.off(events['connection-close'], onConnetionClose);
+      eventEmitter.off(events['switch-meeting'], onSwitchMeeting);
     };
   }, []);
   return useContext(MeetingProviderContex);
@@ -152,7 +167,13 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
       _ref2$onMicRequested = _ref2.onMicRequested,
       onMicRequested = _ref2$onMicRequested === void 0 ? function () {} : _ref2$onMicRequested,
       _ref2$onPinStateChang = _ref2.onPinStateChanged,
-      onPinStateChanged = _ref2$onPinStateChang === void 0 ? function () {} : _ref2$onPinStateChang;
+      onPinStateChanged = _ref2$onPinStateChang === void 0 ? function () {} : _ref2$onPinStateChang,
+      _ref2$onConnectionOpe = _ref2.onConnectionOpen,
+      onConnectionOpen = _ref2$onConnectionOpe === void 0 ? function () {} : _ref2$onConnectionOpe,
+      _ref2$onConnetionClos = _ref2.onConnetionClose,
+      onConnetionClose = _ref2$onConnetionClos === void 0 ? function () {} : _ref2$onConnetionClos,
+      _ref2$onSwitchMeeting = _ref2.onSwitchMeeting,
+      onSwitchMeeting = _ref2$onSwitchMeeting === void 0 ? function () {} : _ref2$onSwitchMeeting;
   useEffect(function () {
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
     eventEmitter.on(events['participant-left'], onParticipantLeft);
@@ -173,6 +194,9 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
     eventEmitter.on(events['webcam-requested'], onWebcamRequested);
     eventEmitter.on(events['mic-requested'], onMicRequested);
     eventEmitter.on(events['pin-state-changed'], onPinStateChanged);
+    eventEmitter.on(events['connection-open'], onConnectionOpen);
+    eventEmitter.on(events['connection-close'], onConnetionClose);
+    eventEmitter.on(events['switch-meeting'], onSwitchMeeting);
     return function () {
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
       eventEmitter.off(events['participant-left'], onParticipantLeft);
@@ -193,6 +217,9 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
       eventEmitter.off(events['webcam-requested'], onWebcamRequested);
       eventEmitter.off(events['mic-requested'], onMicRequested);
       eventEmitter.off(events['pin-state-changed'], onPinStateChanged);
+      eventEmitter.off(events['connection-open'], onConnectionOpen);
+      eventEmitter.off(events['connection-close'], onConnetionClose);
+      eventEmitter.off(events['switch-meeting'], onSwitchMeeting);
     };
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MeetingProviderContex.Consumer, null, children));
@@ -202,7 +229,8 @@ var MeetingProvider = function MeetingProvider(_ref) {
   var children = _ref.children,
       config = _ref.config,
       token = _ref.token,
-      joinWithoutUserInteraction = _ref.joinWithoutUserInteraction;
+      joinWithoutUserInteraction = _ref.joinWithoutUserInteraction,
+      _reinitialiseMeetingOnConfigChange = _ref.reinitialiseMeetingOnConfigChange;
 
   var _useState = useState(null),
       meeting = _useState[0],
@@ -256,11 +284,21 @@ var MeetingProvider = function MeetingProvider(_ref) {
       isLiveStreaming = _useState13[0],
       setIsLiveStreaming = _useState13[1];
 
+  var _useState14 = useState(new Map()),
+      connections = _useState14[0],
+      setConnections = _useState14[1];
+
   var meetingRef = useRef();
   var localMicOnRef = useRef();
   var localWebcamOnRef = useRef();
   var localScreenShareOnRef = useRef();
   var isRecordingRef = useRef();
+  var configRef = useRef(config);
+  var tokenRef = useRef(token);
+  var joinedOnFirstRender = useRef(false);
+  var reinitialiseMeetingOnConfigChange = useMemo(function () {
+    return _reinitialiseMeetingOnConfigChange;
+  }, []);
   useEffect(function () {
     meetingRef.current = meeting;
   }, [meeting]);
@@ -276,6 +314,12 @@ var MeetingProvider = function MeetingProvider(_ref) {
   useEffect(function () {
     isRecordingRef.current = isRecording;
   }, [isRecording]);
+  useEffect(function () {
+    configRef.current = config;
+  }, [config]);
+  useEffect(function () {
+    tokenRef.current = token;
+  }, [token]);
 
   var resetStates = function resetStates() {
     setMeeting(null);
@@ -291,6 +335,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
     setIsLiveStreaming(false);
     setParticipants(new Map());
     setPinnedParticipants(new Map());
+    setConnections(new Map());
   };
 
   var _handle_participant_joined = function _handle_participant_joined(participant) {
@@ -401,6 +446,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
   };
 
   var _handle_meeting_joined = function _handle_meeting_joined(data) {
+    joinedOnFirstRender.current = true;
     setMessages(function (s) {
       return [].concat(s, data.messages);
     });
@@ -433,6 +479,10 @@ var MeetingProvider = function MeetingProvider(_ref) {
         meeting.off('video-seeked', _handle_video_seeked);
         meeting.off('webcam-requested', _handle_webcam_requested);
         meeting.off('mic-requested', _handle_mic_requested);
+        meeting.off('pin-state-changed', _handle_pin_state_changed);
+        meeting.off('connection-open', _handle_connection_open);
+        meeting.off('connection-close', _handle_connection_close);
+        meeting.off('switch-meeting', _handle_switch_meeting);
       }
 
       if (typeof (meeting === null || meeting === void 0 ? void 0 : (_meeting$localPartici = meeting.localParticipant) === null || _meeting$localPartici === void 0 ? void 0 : _meeting$localPartici.off) === 'function') {
@@ -465,8 +515,30 @@ var MeetingProvider = function MeetingProvider(_ref) {
     });
   };
 
+  var _handle_connection_open = function _handle_connection_open(connection) {
+    setConnections(function (s) {
+      s.set(connection.id, connection);
+      var connectionsToSet = new Map(s);
+      return connectionsToSet;
+    });
+    eventEmitter.emit(events['connection-open'], connection);
+  };
+
+  var _handle_connection_close = function _handle_connection_close(connectionId) {
+    setConnections(function (s) {
+      s["delete"](connectionId);
+      var newConnections = new Map(s);
+      return newConnections;
+    });
+    eventEmitter.emit(events['connection-close'], connectionId);
+  };
+
+  var _handle_switch_meeting = function _handle_switch_meeting(d) {
+    eventEmitter.emit(events['switch-meeting'], d);
+  };
+
   var join = function join() {
-    var meeting = ZujoSDK && ZujoSDK.initMeeting(config);
+    var meeting = VideoSDK && VideoSDK.initMeeting(configRef.current);
     setMeeting(meeting);
     var localParticipant = meeting.localParticipant,
         participants = meeting.participants;
@@ -492,6 +564,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
     meeting.on('webcam-requested', _handle_webcam_requested);
     meeting.on('mic-requested', _handle_mic_requested);
     meeting.on('pin-state-changed', _handle_pin_state_changed);
+    meeting.on('connection-open', _handle_connection_open);
+    meeting.on('connection-close', _handle_connection_close);
+    meeting.on('switch-meeting', _handle_switch_meeting);
     meeting.localParticipant.on('stream-enabled', _handle_localParticipant_stream_enabled);
     meeting.localParticipant.on('stream-disabled', _handle_localParticipant_stream_disabled);
     meeting.join();
@@ -734,8 +809,30 @@ var MeetingProvider = function MeetingProvider(_ref) {
     }
   };
 
+  var connectTo = function connectTo(_ref6) {
+    var meetingId = _ref6.meetingId,
+        payload = _ref6.payload;
+
+    try {
+      var _meeting3 = meetingRef.current;
+
+      var _temp2 = function () {
+        if (_meeting3) {
+          return Promise.resolve(_meeting3.connectTo({
+            meetingId: meetingId,
+            payload: payload
+          })).then(function () {});
+        }
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
   var initSDK = function initSDK() {
-    ZujoSDK.config(token);
+    VideoSDK.config(tokenRef.current);
 
     if (joinWithoutUserInteraction) {
       join();
@@ -745,9 +842,16 @@ var MeetingProvider = function MeetingProvider(_ref) {
   useEffect(function () {
     initSDK();
   }, []);
+  useEffect(function () {
+    if (reinitialiseMeetingOnConfigChange && joinedOnFirstRender.current) {
+      leave();
+      initSDK();
+      !joinWithoutUserInteraction && join();
+    }
+  }, [config.meetingId, token, reinitialiseMeetingOnConfigChange]);
   return /*#__PURE__*/React.createElement(MeetingProviderContex.Provider, {
     value: {
-      meetingId: config.meetingId,
+      meetingId: meeting === null || meeting === void 0 ? void 0 : meeting.id,
       meeting: meeting,
       localParticipant: localParticipant,
       mainParticipant: mainParticipant,
@@ -761,6 +865,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
       isRecording: isRecording,
       isLiveStreaming: isLiveStreaming,
       pinnedParticipants: pinnedParticipants,
+      connections: connections,
       join: join,
       leave: leave,
       end: end,
@@ -787,7 +892,8 @@ var MeetingProvider = function MeetingProvider(_ref) {
       pauseVideo: pauseVideo,
       seekVideo: seekVideo,
       startLivestream: startLivestream,
-      stopLivestream: stopLivestream
+      stopLivestream: stopLivestream,
+      connectTo: connectTo
     }
   }, children);
 };
@@ -914,6 +1020,10 @@ var useParticipant = function useParticipant(participantId, _temp) {
     participant === null || participant === void 0 ? void 0 : participant.unpin(data);
   };
 
+  var switchTo = function switchTo(data) {
+    return Promise.resolve(participant === null || participant === void 0 ? void 0 : participant.switchTo(data)).then(function () {});
+  };
+
   useEffect(function () {
     var streams = participant === null || participant === void 0 ? void 0 : participant.streams;
 
@@ -949,9 +1059,92 @@ var useParticipant = function useParticipant(participantId, _temp) {
     enableWebcam: enableWebcam,
     disableWebcam: disableWebcam,
     pin: pin,
-    unpin: unpin
+    unpin: unpin,
+    switchTo: switchTo
+  };
+};
+
+var useConnection = function useConnection(connectionId, _temp) {
+  var _ref = _temp === void 0 ? {
+    onMeeting: {
+      onParticipantJoined: function onParticipantJoined() {},
+      onParticipantLeft: function onParticipantLeft() {},
+      onChatMessage: function onChatMessage() {}
+    }
+  } : _temp,
+      onMeeting = _ref.onMeeting;
+
+  var onParticipantJoined = onMeeting === null || onMeeting === void 0 ? void 0 : onMeeting.onParticipantJoined;
+  var onParticipantLeft = onMeeting === null || onMeeting === void 0 ? void 0 : onMeeting.onParticipantLeft;
+  var onChatMessage = onMeeting === null || onMeeting === void 0 ? void 0 : onMeeting.onChatMessage;
+  var meeting = useMeeting();
+
+  var _useMemo = useMemo(function () {
+    var connection = meeting === null || meeting === void 0 ? void 0 : meeting.connections.get(connectionId);
+
+    if (!connection) {
+      throw new Error('connectionId not found');
+    }
+
+    var connectionParticipants = new Map(connection.meeting.participants);
+    return {
+      connection: connection,
+      connectionParticipants: connectionParticipants
+    };
+  }, [meeting]),
+      connection = _useMemo.connection,
+      connectionParticipants = _useMemo.connectionParticipants;
+
+  var _useState = useState(new Map(connectionParticipants)),
+      _connectionParticipants = _useState[0],
+      setConnectionParticipants = _useState[1];
+
+  var _handleParticipantJoined = function _handleParticipantJoined(participant) {
+    setConnectionParticipants(function (s) {
+      s.set(participant.id, participant);
+      var participantsToSet = new Map(s);
+      return participantsToSet;
+    });
+    onParticipantJoined(participant);
+  };
+
+  var _handleParticipantLeft = function _handleParticipantLeft(participantId) {
+    setConnectionParticipants(function (s) {
+      s["delete"](participantId);
+      var newParticipants = new Map(s);
+      return newParticipants;
+    });
+    onParticipantLeft(participantId);
+  };
+
+  var _handleChatMessage = function _handleChatMessage(data) {
+    onChatMessage(data);
+  };
+
+  useEffect(function () {
+    connection === null || connection === void 0 ? void 0 : connection.meeting.on('participant-joined', _handleParticipantJoined);
+    connection === null || connection === void 0 ? void 0 : connection.meeting.on('participant-left', _handleParticipantLeft);
+    connection === null || connection === void 0 ? void 0 : connection.meeting.on('chat-message', _handleChatMessage);
+    return function () {
+      connection === null || connection === void 0 ? void 0 : connection.meeting.off('participant-joined', _handleParticipantJoined);
+      connection === null || connection === void 0 ? void 0 : connection.meeting.off('participant-left', _handleParticipantLeft);
+      connection === null || connection === void 0 ? void 0 : connection.meeting.off('chat-message', _handleChatMessage);
+    };
+  }, [connection]);
+  return {
+    connection: {
+      id: connection.id,
+      close: connection.close,
+      payload: connection.payload,
+      meeting: {
+        id: connection.meeting.id,
+        sendChatMessage: connection.meeting.sendChatMessage,
+        end: connection.meeting.end,
+        participants: _connectionParticipants
+      }
+    }
   };
 };
 
-export { MeetingConsumer, MeetingProvider, useMeeting, useParticipant };
+export { MeetingConsumer, MeetingProvider, useConnection, useMeeting, useParticipant };
 //# sourceMappingURL=index.modern.js.map