UNPKG

@videosdk.live/react-sdk

Version:

<h1 align="center"> <img src="https://cdn.videosdk.live/docs/images/react/banner.png" /><br/> </h1>

1,223 lines (1,215 loc) 137 kB
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } var React = require('react'); var React__default = _interopDefault(React); var reactTracked = require('react-tracked'); 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 _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } 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", 'participant-left': eventPrifix + "-participant-left", 'speaker-changed': eventPrifix + "-speaker-changed", 'presenter-changed': eventPrifix + "-presenter-changed", 'main-participant-changed': eventPrifix + "-main-participant-changed", 'entry-requested': eventPrifix + "-entry-requested", 'entry-responded': eventPrifix + "-entry-responded", 'recording-started': eventPrifix + "-recording-started", 'recording-stopped': eventPrifix + "-recording-stopped", data: eventPrifix + "-data", 'meeting-joined': eventPrifix + "-meeting-joined", 'meeting-left': eventPrifix + "-meeting-left", 'live-stream-started': eventPrifix + "-live-stream-started", 'live-stream-stopped': eventPrifix + "-live-stream-stopped", 'video-state-changed': eventPrifix + "-video-state-changed", 'video-seeked': eventPrifix + "-video-seeked", 'webcam-requested': eventPrifix + "-webcam-requested", 'mic-requested': eventPrifix + "-mic-requested", 'pin-state-changed': eventPrifix + "-pin-state-changed", 'connection-open': eventPrifix + "-connection-open", 'connection-close': eventPrifix + "-connection-close", 'switch-meeting': eventPrifix + "-switch-meeting", error: eventPrifix + "-error", 'hls-started': eventPrifix + "-hls-started", 'hls-stopped': eventPrifix + "-hls-stopped", 'hls-state-changed': eventPrifix + "-hls-state-changed", 'hls-playable-state-changed': eventPrifix + "-hls-playable-state-changed", 'recording-state-changed': eventPrifix + "-recording-state-changed", 'livestream-state-changed': eventPrifix + "-livestream-state-changed", 'meeting-state-changed': eventPrifix + "-meeting-state-changed", 'participant-mode-changed': eventPrifix + "-participant-mode-changed", 'transcription-state-changed': eventPrifix + "-transcription-state-changed", 'transcription-text': eventPrifix + "-transcription-text", 'translation-state-changed': eventPrifix + "-translation-state-changed", 'translation-language-changed': eventPrifix + "-translation-language-changed", 'translation-text': eventPrifix + "-translation-text", 'character-joined': eventPrifix + "-character-joined", 'character-left': eventPrifix + "-character-left", 'whiteboard-started': eventPrifix + "-whiteboard-started", 'whiteboard-stopped': eventPrifix + "-whiteboard-stopped", 'paused-all-streams': eventPrifix + "-paused-all-streams", 'resumed-all-streams': eventPrifix + "-resumed-all-streams", 'media-relay-started': eventPrifix + "-media-relay-started", '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", 'quality-limitation': eventPrifix + "-quality-limitation", 'audio-input-silence': eventPrifix + "-audio-input-silence", 'participant-stream-enabled': eventPrifix + "-p-stream-enabled", 'participant-stream-disabled': eventPrifix + "-p-stream-disabled", 'participant-media-status-changed': eventPrifix + "-p-media-status-changed", 'participant-video-quality-changed': eventPrifix + "-p-video-quality-changed", 'participant-stream-paused': eventPrifix + "-p-stream-paused", 'participant-stream-resumed': eventPrifix + "-p-stream-resumed", 'participant-producer-added': eventPrifix + "-p-producer-added", 'participant-producer-removed': eventPrifix + "-p-producer-removed", 'participant-consumer-added': eventPrifix + "-p-consumer-added", 'participant-consumer-removed': eventPrifix + "-p-consumer-removed", 'agent-state-changed': eventPrifix + "-p-agent-state-changed", 'agent-transcription-received': eventPrifix + "-p-agent-transcription-received", 'agent-metrics': eventPrifix + "-p-agent-metrics", 'character-state-changed': eventPrifix + "-c-state-changed", 'character-message': eventPrifix + "-c-message", 'user-message': eventPrifix + "-c-user-message", 'character-data': eventPrifix + "-c-data", 'character-error': eventPrifix + "-c-error" }; 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 _excluded = ["children"]; var NOOP = function NOOP() {}; var INITIAL_STATE = { meetingId: null, meeting: null, baseUrl: null, localParticipant: null, mainParticipant: null, activeSpeakerId: null, presenterId: null, participants: new Map(), characters: new Map(), pinnedParticipants: new Map(), connections: new Map(), localMicOn: false, localWebcamOn: false, localScreenShareOn: false, messages: [], isMeetingJoined: false, isRecording: false, isLiveStreaming: false, isHls: false, recordingState: 'RECORDING_STOPPED', livestreamState: 'LIVESTREAM_STOPPED', hlsState: 'HLS_STOPPED', hlsUrls: { downstreamUrl: null, playbackHlsUrl: null, livestreamUrl: null }, transcriptionState: 'TRANSCRIPTION_STOPPED', translationState: 'TRANSLATION_STOPPED', selectedCameraDevice: null, selectedMicrophoneDevice: null }; var reducer = function reducer(state, patch) { if (patch === 'RESET') { return _extends({}, INITIAL_STATE); } var changes = typeof patch === 'function' ? patch(state) : patch; var hasRealChange = Object.keys(changes).some(function (k) { return state[k] !== changes[k]; }); if (!hasRealChange) return state; return _extends({}, state, changes); }; var _createContainer = reactTracked.createContainer(function () { return React.useReducer(reducer, INITIAL_STATE); }), MeetingStateProviderBase = _createContainer.Provider, useMeetingState = _createContainer.useTrackedState, useMeetingSelector = _createContainer.useSelector, useMeetingDispatch = _createContainer.useUpdate; var MeetingStateProvider = function MeetingStateProvider(_ref) { var children = _ref.children; return /*#__PURE__*/React__default.createElement(MeetingStateProviderBase, null, children); }; var MeetingMethodsContext = React.createContext(null); var useStableEvent = function useStableEvent(eventName, handler) { var handlerRef = React.useRef(handler); React.useEffect(function () { handlerRef.current = handler; }); React.useEffect(function () { var stable = function stable() { return handlerRef.current.apply(handlerRef, arguments); }; eventEmitter.on(eventName, stable); return function () { return eventEmitter.off(eventName, stable); }; }, [eventName]); }; var useMeeting = function useMeeting(_temp) { var _ref2 = _temp === void 0 ? {} : _temp, _ref2$onParticipantJo = _ref2.onParticipantJoined, onParticipantJoined = _ref2$onParticipantJo === void 0 ? NOOP : _ref2$onParticipantJo, _ref2$onParticipantLe = _ref2.onParticipantLeft, onParticipantLeft = _ref2$onParticipantLe === void 0 ? NOOP : _ref2$onParticipantLe, _ref2$onSpeakerChange = _ref2.onSpeakerChanged, onSpeakerChanged = _ref2$onSpeakerChange === void 0 ? NOOP : _ref2$onSpeakerChange, _ref2$onPresenterChan = _ref2.onPresenterChanged, onPresenterChanged = _ref2$onPresenterChan === void 0 ? NOOP : _ref2$onPresenterChan, _ref2$onMainParticipa = _ref2.onMainParticipantChanged, onMainParticipantChanged = _ref2$onMainParticipa === void 0 ? NOOP : _ref2$onMainParticipa, _ref2$onEntryRequeste = _ref2.onEntryRequested, onEntryRequested = _ref2$onEntryRequeste === void 0 ? NOOP : _ref2$onEntryRequeste, _ref2$onEntryResponde = _ref2.onEntryResponded, onEntryResponded = _ref2$onEntryResponde === void 0 ? NOOP : _ref2$onEntryResponde, _ref2$onPausedAllStre = _ref2.onPausedAllStreams, onPausedAllStreams = _ref2$onPausedAllStre === void 0 ? NOOP : _ref2$onPausedAllStre, _ref2$onResumedAllStr = _ref2.onResumedAllStreams, onResumedAllStreams = _ref2$onResumedAllStr === void 0 ? NOOP : _ref2$onResumedAllStr, _ref2$onRecordingStar = _ref2.onRecordingStarted, onRecordingStarted = _ref2$onRecordingStar === void 0 ? NOOP : _ref2$onRecordingStar, _ref2$onRecordingStop = _ref2.onRecordingStopped, onRecordingStopped = _ref2$onRecordingStop === void 0 ? NOOP : _ref2$onRecordingStop, _ref2$onData = _ref2.onData, onData = _ref2$onData === void 0 ? NOOP : _ref2$onData, _ref2$onMeetingJoined = _ref2.onMeetingJoined, onMeetingJoined = _ref2$onMeetingJoined === void 0 ? NOOP : _ref2$onMeetingJoined, _ref2$onMeetingLeft = _ref2.onMeetingLeft, onMeetingLeft = _ref2$onMeetingLeft === void 0 ? NOOP : _ref2$onMeetingLeft, _ref2$onLiveStreamSta = _ref2.onLiveStreamStarted, onLiveStreamStarted = _ref2$onLiveStreamSta === void 0 ? NOOP : _ref2$onLiveStreamSta, _ref2$onLiveStreamSto = _ref2.onLiveStreamStopped, onLiveStreamStopped = _ref2$onLiveStreamSto === void 0 ? NOOP : _ref2$onLiveStreamSto, _ref2$onVideoStateCha = _ref2.onVideoStateChanged, onVideoStateChanged = _ref2$onVideoStateCha === void 0 ? NOOP : _ref2$onVideoStateCha, _ref2$onVideoSeeked = _ref2.onVideoSeeked, onVideoSeeked = _ref2$onVideoSeeked === void 0 ? NOOP : _ref2$onVideoSeeked, _ref2$onWebcamRequest = _ref2.onWebcamRequested, onWebcamRequested = _ref2$onWebcamRequest === void 0 ? NOOP : _ref2$onWebcamRequest, _ref2$onMicRequested = _ref2.onMicRequested, onMicRequested = _ref2$onMicRequested === void 0 ? NOOP : _ref2$onMicRequested, _ref2$onPinStateChang = _ref2.onPinStateChanged, onPinStateChanged = _ref2$onPinStateChang === void 0 ? NOOP : _ref2$onPinStateChang, _ref2$onConnectionOpe = _ref2.onConnectionOpen, onConnectionOpen = _ref2$onConnectionOpe === void 0 ? NOOP : _ref2$onConnectionOpe, _ref2$onConnetionClos = _ref2.onConnetionClose, onConnetionClose = _ref2$onConnetionClos === void 0 ? NOOP : _ref2$onConnetionClos, _ref2$onSwitchMeeting = _ref2.onSwitchMeeting, onSwitchMeeting = _ref2$onSwitchMeeting === void 0 ? NOOP : _ref2$onSwitchMeeting, _ref2$onError = _ref2.onError, onError = _ref2$onError === void 0 ? NOOP : _ref2$onError, _ref2$onHlsStarted = _ref2.onHlsStarted, onHlsStarted = _ref2$onHlsStarted === void 0 ? NOOP : _ref2$onHlsStarted, _ref2$onHlsStopped = _ref2.onHlsStopped, onHlsStopped = _ref2$onHlsStopped === void 0 ? NOOP : _ref2$onHlsStopped, _ref2$onHlsStateChang = _ref2.onHlsStateChanged, onHlsStateChanged = _ref2$onHlsStateChang === void 0 ? NOOP : _ref2$onHlsStateChang, _ref2$onRecordingStat = _ref2.onRecordingStateChanged, onRecordingStateChanged = _ref2$onRecordingStat === void 0 ? NOOP : _ref2$onRecordingStat, _ref2$onLivestreamSta = _ref2.onLivestreamStateChanged, onLivestreamStateChanged = _ref2$onLivestreamSta === void 0 ? NOOP : _ref2$onLivestreamSta, _ref2$onMeetingStateC = _ref2.onMeetingStateChanged, onMeetingStateChanged = _ref2$onMeetingStateC === void 0 ? NOOP : _ref2$onMeetingStateC, _ref2$onParticipantMo = _ref2.onParticipantModeChanged, onParticipantModeChanged = _ref2$onParticipantMo === void 0 ? NOOP : _ref2$onParticipantMo, _ref2$onCharacterJoin = _ref2.onCharacterJoined, onCharacterJoined = _ref2$onCharacterJoin === void 0 ? NOOP : _ref2$onCharacterJoin, _ref2$onCharacterLeft = _ref2.onCharacterLeft, onCharacterLeft = _ref2$onCharacterLeft === void 0 ? NOOP : _ref2$onCharacterLeft, _ref2$onMediaRelaySta = _ref2.onMediaRelayStarted, onMediaRelayStarted = _ref2$onMediaRelaySta === void 0 ? NOOP : _ref2$onMediaRelaySta, _ref2$onMediaRelaySto = _ref2.onMediaRelayStopped, onMediaRelayStopped = _ref2$onMediaRelaySto === void 0 ? NOOP : _ref2$onMediaRelaySto, _ref2$onMediaRelayErr = _ref2.onMediaRelayError, onMediaRelayError = _ref2$onMediaRelayErr === void 0 ? NOOP : _ref2$onMediaRelayErr, _ref2$onMediaRelayReq = _ref2.onMediaRelayRequestResponse, onMediaRelayRequestResponse = _ref2$onMediaRelayReq === void 0 ? NOOP : _ref2$onMediaRelayReq, _ref2$onMediaRelayReq2 = _ref2.onMediaRelayRequestReceived, onMediaRelayRequestReceived = _ref2$onMediaRelayReq2 === void 0 ? NOOP : _ref2$onMediaRelayReq2, _ref2$onQualityLimita = _ref2.onQualityLimitation, onQualityLimitation = _ref2$onQualityLimita === void 0 ? NOOP : _ref2$onQualityLimita, _ref2$onAudioInputSil = _ref2.onAudioInputSilence, onAudioInputSilence = _ref2$onAudioInputSil === void 0 ? NOOP : _ref2$onAudioInputSil; useStableEvent(events['participant-joined'], onParticipantJoined); useStableEvent(events['participant-left'], onParticipantLeft); useStableEvent(events['speaker-changed'], onSpeakerChanged); useStableEvent(events['presenter-changed'], onPresenterChanged); useStableEvent(events['main-participant-changed'], onMainParticipantChanged); useStableEvent(events['entry-requested'], onEntryRequested); useStableEvent(events['entry-responded'], onEntryResponded); useStableEvent(events['paused-all-streams'], onPausedAllStreams); useStableEvent(events['resumed-all-streams'], onResumedAllStreams); useStableEvent(events['recording-started'], onRecordingStarted); useStableEvent(events['recording-stopped'], onRecordingStopped); useStableEvent(events['data'], onData); useStableEvent(events['meeting-joined'], onMeetingJoined); useStableEvent(events['meeting-left'], onMeetingLeft); useStableEvent(events['live-stream-started'], onLiveStreamStarted); useStableEvent(events['live-stream-stopped'], onLiveStreamStopped); useStableEvent(events['video-state-changed'], onVideoStateChanged); useStableEvent(events['video-seeked'], onVideoSeeked); useStableEvent(events['webcam-requested'], onWebcamRequested); useStableEvent(events['mic-requested'], onMicRequested); useStableEvent(events['pin-state-changed'], onPinStateChanged); useStableEvent(events['connection-open'], onConnectionOpen); useStableEvent(events['connection-close'], onConnetionClose); useStableEvent(events['switch-meeting'], onSwitchMeeting); useStableEvent(events['error'], onError); useStableEvent(events['hls-started'], onHlsStarted); useStableEvent(events['hls-stopped'], onHlsStopped); useStableEvent(events['hls-state-changed'], onHlsStateChanged); useStableEvent(events['recording-state-changed'], onRecordingStateChanged); useStableEvent(events['livestream-state-changed'], onLivestreamStateChanged); useStableEvent(events['meeting-state-changed'], onMeetingStateChanged); useStableEvent(events['participant-mode-changed'], onParticipantModeChanged); useStableEvent(events['character-joined'], onCharacterJoined); useStableEvent(events['character-left'], onCharacterLeft); useStableEvent(events['media-relay-started'], onMediaRelayStarted); useStableEvent(events['media-relay-stopped'], onMediaRelayStopped); useStableEvent(events['media-relay-error'], onMediaRelayError); useStableEvent(events['media-relay-request-response'], onMediaRelayRequestResponse); useStableEvent(events['media-relay-request-received'], onMediaRelayRequestReceived); useStableEvent(events['quality-limitation'], onQualityLimitation); useStableEvent(events['audio-input-silence'], onAudioInputSilence); var state = useMeetingState(); var methods = React.useContext(MeetingMethodsContext); var methodsRef = React.useRef(methods); methodsRef.current = methods; return React.useMemo(function () { return new Proxy(state, { get: function get(target, prop, receiver) { if (prop in INITIAL_STATE) return target[prop]; var m = methodsRef.current; if (m && prop in m) return m[prop]; return Reflect.get(target, prop, receiver); }, has: function has(target, prop) { return prop in INITIAL_STATE || !!(methodsRef.current && prop in methodsRef.current); }, ownKeys: function ownKeys() { var _methodsRef$current; var stateKeys = Object.keys(INITIAL_STATE); var methodKeys = Object.keys((_methodsRef$current = methodsRef.current) != null ? _methodsRef$current : {}); return [].concat(new Set([].concat(stateKeys, methodKeys))); }, getOwnPropertyDescriptor: function getOwnPropertyDescriptor() { return { configurable: true, enumerable: true, writable: false }; } }); }, [state]); }; var MeetingConsumer = function MeetingConsumer(_ref3) { var children = _ref3.children, callbacks = _objectWithoutPropertiesLoose(_ref3, _excluded); var meetingValue = useMeeting(callbacks); return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children(meetingValue)); }; var DEFAULT_PIN_STATE = { cam: false, share: false }; var PARTICIPANT_STATE_KEYS = { participant: true, displayName: true, metaData: true, micOn: true, webcamOn: true, screenShareOn: true, screenShareAudioOn: true, webcamStream: true, micStream: true, screenShareStream: true, screenShareAudioStream: true, isLocal: true, isActiveSpeaker: true, isMainParticipant: true, pinState: true, mode: true, agentState: true, agentId: true, id: true, isAgent: true }; var EMPTY_PARTICIPANT_STATE = { participant: null, displayName: undefined, metaData: undefined, micOn: false, webcamOn: false, screenShareOn: false, screenShareAudioOn: false, webcamStream: null, micStream: null, screenShareStream: null, screenShareAudioStream: null, isLocal: false, isActiveSpeaker: false, isMainParticipant: false, pinState: DEFAULT_PIN_STATE, mode: undefined, agentState: null, agentId: undefined, id: undefined, isAgent: false }; var reducer$1 = function reducer(state, action) { if (action === 'RESET') return {}; var type = action.type, id = action.id, data = action.data; switch (type) { case 'INIT': { var _extends2; return _extends({}, state, (_extends2 = {}, _extends2[id] = _extends({}, EMPTY_PARTICIPANT_STATE, data), _extends2)); } case 'REMOVE': { var rest = _objectWithoutPropertiesLoose(state, [id].map(_toPropertyKey)); return rest; } case 'UPDATE': { var _extends3; var prev = state[id]; if (!prev) return state; var hasChange = Object.keys(data).some(function (k) { return prev[k] !== data[k]; }); if (!hasChange) return state; return _extends({}, state, (_extends3 = {}, _extends3[id] = _extends({}, prev, data), _extends3)); } default: return state; } }; var _createContainer$1 = reactTracked.createContainer(function () { return React.useReducer(reducer$1, {}); }), ParticipantStateProviderBase = _createContainer$1.Provider, useParticipantTrackedState = _createContainer$1.useTrackedState, useParticipantDispatch = _createContainer$1.useUpdate; var ParticipantStateProvider = function ParticipantStateProvider(_ref) { var children = _ref.children; return /*#__PURE__*/React__default.createElement(ParticipantStateProviderBase, null, children); }; var CHARACTER_STATE_KEYS = { character: true, displayName: true, interactionId: true, id: true, micOn: true, webcamOn: true, webcamStream: true, micStream: true, characterState: true, characterMode: true, characterRole: true, knowledgeBases: true, language: true, metaData: true, isActiveSpeaker: true }; var EMPTY_CHARACTER_STATE = { character: null, displayName: undefined, interactionId: undefined, id: undefined, micOn: false, webcamOn: false, webcamStream: null, micStream: null, characterState: null, characterMode: undefined, characterRole: undefined, knowledgeBases: undefined, language: undefined, metaData: undefined, isActiveSpeaker: false }; var reducer$2 = function reducer(state, action) { if (action === 'RESET') return {}; var type = action.type, id = action.id, data = action.data; switch (type) { case 'INIT': { var _extends2; return _extends({}, state, (_extends2 = {}, _extends2[id] = _extends({}, EMPTY_CHARACTER_STATE, data), _extends2)); } case 'REMOVE': { var rest = _objectWithoutPropertiesLoose(state, [id].map(_toPropertyKey)); return rest; } case 'UPDATE': { var _extends3; var prev = state[id]; if (!prev) return state; var hasChange = Object.keys(data).some(function (k) { return prev[k] !== data[k]; }); if (!hasChange) return state; return _extends({}, state, (_extends3 = {}, _extends3[id] = _extends({}, prev, data), _extends3)); } default: return state; } }; var _createContainer$2 = reactTracked.createContainer(function () { return React.useReducer(reducer$2, {}); }), CharacterStateProviderBase = _createContainer$2.Provider, useCharacterTrackedState = _createContainer$2.useTrackedState, useCharacterDispatch = _createContainer$2.useUpdate; var CharacterStateProvider = function CharacterStateProvider(_ref) { var children = _ref.children; return /*#__PURE__*/React__default.createElement(CharacterStateProviderBase, null, children); }; var version = "0.11.0"; var StateRefSync = function StateRefSync(_ref) { var stateRef = _ref.stateRef; var currentState = useMeetingSelector(function (s) { return s; }); stateRef.current = currentState; return null; }; var MeetingProviderInner = function MeetingProviderInner(_ref2) { var children = _ref2.children, config = _ref2.config, token = _ref2.token, joinWithoutUserInteraction = _ref2.joinWithoutUserInteraction, _reinitialiseMeetingOnConfigChange = _ref2.reinitialiseMeetingOnConfigChange, deviceInfo = _ref2.deviceInfo, keyProvider = _ref2.keyProvider, stateRef = _ref2.stateRef; var configRef_ = React.useRef(config); var tokenRef = React.useRef(token); var keyProviderRef = React.useRef(keyProvider); var deviceInfoRef = React.useRef(deviceInfo); var joinedOnFirstRender = React.useRef(false); var reinitialiseMeetingOnConfigChange = React.useRef(_reinitialiseMeetingOnConfigChange).current; configRef_.current = config; tokenRef.current = token; keyProviderRef.current = keyProvider; deviceInfoRef.current = deviceInfo; var dispatch = useMeetingDispatch(); var pDispatch = useParticipantDispatch(); var cDispatch = useCharacterDispatch(); var prevActiveSpeakerRef = React.useRef(null); var prevMainParticipantRef = React.useRef(null); var participantListenersRef = React.useRef(new Map()); var characterListenersRef = React.useRef(new Map()); var _attachParticipantListeners = React.useCallback(function (participant, isLocal) { var _participant$micOn, _participant$webcamOn, _participant$screenSh, _participant$screenSh2, _participant$agentSta, _participant$streams; var pid = participant.id; pDispatch({ type: 'INIT', id: pid, data: { participant: participant, displayName: participant.displayName, metaData: participant.metaData, micOn: (_participant$micOn = participant.micOn) != null ? _participant$micOn : false, webcamOn: (_participant$webcamOn = participant.webcamOn) != null ? _participant$webcamOn : false, screenShareOn: (_participant$screenSh = participant.screenShareOn) != null ? _participant$screenSh : false, screenShareAudioOn: (_participant$screenSh2 = participant.screenShareAudioOn) != null ? _participant$screenSh2 : false, mode: participant.mode, isLocal: !!isLocal, isAgent: !!participant.isAgent, agentId: participant.agentId, agentState: (_participant$agentSta = participant.agentState) != null ? _participant$agentSta : null, id: pid } }); var streamKeyMap = { video: 'webcamStream', audio: 'micStream', share: 'screenShareStream', shareAudio: 'screenShareAudioStream' }; var mediaKeyMap = { audio: 'micOn', video: 'webcamOn', share: 'screenShareOn', shareAudio: 'screenShareAudioOn' }; (_participant$streams = participant.streams) === null || _participant$streams === void 0 ? void 0 : _participant$streams.forEach(function (stream) { var _extends2, _ref3; if (stream.track.readyState !== 'live') return; var key = streamKeyMap[stream.kind]; var onKey = mediaKeyMap[stream.kind]; if (key) pDispatch({ type: 'UPDATE', id: pid, data: _extends((_extends2 = {}, _extends2[key] = stream, _extends2), onKey ? (_ref3 = {}, _ref3[onKey] = true, _ref3) : {}) }); }); var onStreamEnabled = function onStreamEnabled(stream) { var _extends3, _ref4; if (stream.track.readyState !== 'live') return; var key = streamKeyMap[stream.kind]; var onKey = mediaKeyMap[stream.kind]; if (key) pDispatch({ type: 'UPDATE', id: pid, data: _extends((_extends3 = {}, _extends3[key] = stream, _extends3), onKey ? (_ref4 = {}, _ref4[onKey] = true, _ref4) : {}) }); eventEmitter.emit(events['participant-stream-enabled'] + "-" + pid, stream); }; var onStreamDisabled = function onStreamDisabled(stream) { var _extends4, _ref5; var key = streamKeyMap[stream.kind]; var onKey = mediaKeyMap[stream.kind]; if (key) pDispatch({ type: 'UPDATE', id: pid, data: _extends((_extends4 = {}, _extends4[key] = null, _extends4), onKey ? (_ref5 = {}, _ref5[onKey] = false, _ref5) : {}) }); eventEmitter.emit(events['participant-stream-disabled'] + "-" + pid, stream); }; var onMediaStatusChanged = function onMediaStatusChanged(data) { var _data; var key = mediaKeyMap[data.kind]; if (key) pDispatch({ type: 'UPDATE', id: pid, data: (_data = {}, _data[key] = data.newStatus, _data) }); eventEmitter.emit(events['participant-media-status-changed'] + "-" + pid, data); }; var onVideoQualityChanged = function onVideoQualityChanged(data) { eventEmitter.emit(events['participant-video-quality-changed'] + "-" + pid, data); }; var onStreamPaused = function onStreamPaused(data) { eventEmitter.emit(events['participant-stream-paused'] + "-" + pid, data); }; var onStreamResumed = function onStreamResumed(data) { eventEmitter.emit(events['participant-stream-resumed'] + "-" + pid, data); }; var onProducerAdded = function onProducerAdded(data) { eventEmitter.emit(events['participant-producer-added'] + "-" + pid, data); }; var onProducerRemoved = function onProducerRemoved(data) { eventEmitter.emit(events['participant-producer-removed'] + "-" + pid, data); }; var onConsumerAdded = function onConsumerAdded(data) { eventEmitter.emit(events['participant-consumer-added'] + "-" + pid, data); }; var onConsumerRemoved = function onConsumerRemoved(data) { eventEmitter.emit(events['participant-consumer-removed'] + "-" + pid, data); }; var onAgentStateChanged = function onAgentStateChanged(s) { pDispatch({ type: 'UPDATE', id: pid, data: { agentState: s } }); eventEmitter.emit(events['agent-state-changed'] + "-" + pid, s); }; var onAgentTranscriptionReceived = function onAgentTranscriptionReceived(data) { eventEmitter.emit(events['agent-transcription-received'] + "-" + pid, data); }; var onAgentMetrics = function onAgentMetrics(data) { eventEmitter.emit(events['agent-metrics'] + "-" + pid, data); }; participant.on('stream-enabled', onStreamEnabled); participant.on('stream-disabled', onStreamDisabled); participant.on('media-status-changed', onMediaStatusChanged); participant.on('video-quality-changed', onVideoQualityChanged); participant.on('stream-paused', onStreamPaused); participant.on('stream-resumed', onStreamResumed); participant.on('producer-added', onProducerAdded); participant.on('producer-removed', onProducerRemoved); participant.on('consumer-added', onConsumerAdded); participant.on('consumer-removed', onConsumerRemoved); if (participant.isAgent) { participant.on('agent-state-changed', onAgentStateChanged); participant.on('agent-transcription-received', onAgentTranscriptionReceived); participant.on('agent-metrics', onAgentMetrics); } participantListenersRef.current.set(pid, { participant: participant, onStreamEnabled: onStreamEnabled, onStreamDisabled: onStreamDisabled, onMediaStatusChanged: onMediaStatusChanged, onVideoQualityChanged: onVideoQualityChanged, onStreamPaused: onStreamPaused, onStreamResumed: onStreamResumed, onProducerAdded: onProducerAdded, onProducerRemoved: onProducerRemoved, onConsumerAdded: onConsumerAdded, onConsumerRemoved: onConsumerRemoved, onAgentStateChanged: onAgentStateChanged, onAgentTranscriptionReceived: onAgentTranscriptionReceived, onAgentMetrics: onAgentMetrics }); }, [pDispatch]); var _detachParticipantListeners = React.useCallback(function (pid) { var entry = participantListenersRef.current.get(pid); if (!entry) return; var p = entry.participant; p.off('stream-enabled', entry.onStreamEnabled); p.off('stream-disabled', entry.onStreamDisabled); p.off('media-status-changed', entry.onMediaStatusChanged); p.off('video-quality-changed', entry.onVideoQualityChanged); p.off('stream-paused', entry.onStreamPaused); p.off('stream-resumed', entry.onStreamResumed); p.off('producer-added', entry.onProducerAdded); p.off('producer-removed', entry.onProducerRemoved); p.off('consumer-added', entry.onConsumerAdded); p.off('consumer-removed', entry.onConsumerRemoved); if (p.isAgent) { p.off('agent-state-changed', entry.onAgentStateChanged); p.off('agent-transcription-received', entry.onAgentTranscriptionReceived); p.off('agent-metrics', entry.onAgentMetrics); } participantListenersRef.current["delete"](pid); }, []); var _attachCharacterListeners = React.useCallback(function (character) { var _character$characterS, _character$micOn, _character$webcamOn, _character$streams; var cid = character.id; var initData = { character: character, displayName: character.displayName, interactionId: character.interactionId, id: cid, characterMode: character.characterMode, characterRole: character.characterRole, characterState: (_character$characterS = character.characterState) != null ? _character$characterS : null, knowledgeBases: character.knowledgeBases, language: character.language, metaData: character.metaData, micOn: (_character$micOn = character.micOn) != null ? _character$micOn : false, webcamOn: (_character$webcamOn = character.webcamOn) != null ? _character$webcamOn : false }; cDispatch({ type: 'INIT', id: cid, data: initData }); (_character$streams = character.streams) === null || _character$streams === void 0 ? void 0 : _character$streams.forEach(function (stream) { var _data2; if (stream.track.readyState !== 'live') return; var key = { video: 'webcamStream', audio: 'micStream' }[stream.kind]; if (key) cDispatch({ type: 'UPDATE', id: cid, data: (_data2 = {}, _data2[key] = stream, _data2) }); }); var streamKeyMap = { video: 'webcamStream', audio: 'micStream' }; var mediaKeyMap = { audio: 'micOn', video: 'webcamOn' }; var onStreamEnabled = function onStreamEnabled(stream) { var _data3; if (stream.track.readyState !== 'live') return; var key = streamKeyMap[stream.kind]; if (key) cDispatch({ type: 'UPDATE', id: cid, data: (_data3 = {}, _data3[key] = stream, _data3) }); eventEmitter.emit(events['participant-stream-enabled'] + "-" + cid, stream); }; var onStreamDisabled = function onStreamDisabled(stream) { var _data4; var key = streamKeyMap[stream.kind]; if (key) cDispatch({ type: 'UPDATE', id: cid, data: (_data4 = {}, _data4[key] = null, _data4) }); eventEmitter.emit(events['participant-stream-disabled'] + "-" + cid, stream); }; var onMediaStatusChanged = function onMediaStatusChanged(data) { var _data5; var key = mediaKeyMap[data.kind]; if (key) cDispatch({ type: 'UPDATE', id: cid, data: (_data5 = {}, _data5[key] = data.newStatus, _data5) }); eventEmitter.emit(events['participant-media-status-changed'] + "-" + cid, data); }; var onVideoQualityChanged = function onVideoQualityChanged(data) { eventEmitter.emit(events['participant-video-quality-changed'] + "-" + cid, data); }; var onCharacterStateChanged = function onCharacterStateChanged(d) { var _d$status; cDispatch({ type: 'UPDATE', id: cid, data: { characterState: (_d$status = d === null || d === void 0 ? void 0 : d.status) != null ? _d$status : d } }); eventEmitter.emit(events['character-state-changed'] + "-" + cid, d); }; var onCharacterMessage = function onCharacterMessage(d) { eventEmitter.emit(events['character-message'] + "-" + cid, d); }; var onUserMessage = function onUserMessage(d) { eventEmitter.emit(events['user-message'] + "-" + cid, d); }; var onData = function onData(topic, d) { eventEmitter.emit(events['character-data'] + "-" + cid, topic, d); }; var onError = function onError(d) { eventEmitter.emit(events['character-error'] + "-" + cid, d); }; var onCharacterJoinedInstance = function onCharacterJoinedInstance() { eventEmitter.emit(events['character-joined'] + "-" + cid); }; var onCharacterLeftInstance = function onCharacterLeftInstance() { eventEmitter.emit(events['character-left'] + "-" + cid); }; character.on('stream-enabled', onStreamEnabled); character.on('stream-disabled', onStreamDisabled); character.on('media-status-changed', onMediaStatusChanged); character.on('video-quality-changed', onVideoQualityChanged); character.on('character-state-changed', onCharacterStateChanged); character.on('character-message', onCharacterMessage); character.on('user-message', onUserMessage); character.on('data', onData); character.on('error', onError); character.on('character-joined', onCharacterJoinedInstance); character.on('character-left', onCharacterLeftInstance); characterListenersRef.current.set(cid, { character: character, onStreamEnabled: onStreamEnabled, onStreamDisabled: onStreamDisabled, onMediaStatusChanged: onMediaStatusChanged, onVideoQualityChanged: onVideoQualityChanged, onCharacterStateChanged: onCharacterStateChanged, onCharacterMessage: onCharacterMessage, onUserMessage: onUserMessage, onData: onData, onError: onError, onCharacterJoinedInstance: onCharacterJoinedInstance, onCharacterLeftInstance: onCharacterLeftInstance }); }, [cDispatch]); var _detachCharacterListeners = React.useCallback(function (cid) { var entry = characterListenersRef.current.get(cid); if (!entry) return; var c = entry.character; c.off('stream-enabled', entry.onStreamEnabled); c.off('stream-disabled', entry.onStreamDisabled); c.off('media-status-changed', entry.onMediaStatusChanged); c.off('video-quality-changed', entry.onVideoQualityChanged); c.off('character-state-changed', entry.onCharacterStateChanged); c.off('character-message', entry.onCharacterMessage); c.off('user-message', entry.onUserMessage); c.off('data', entry.onData); c.off('error', entry.onError); c.off('character-joined', entry.onCharacterJoinedInstance); c.off('character-left', entry.onCharacterLeftInstance); characterListenersRef.current["delete"](cid); }, []); var _handle_participant_joined = React.useCallback(function (participant) { dispatch(function (prev) { var next = new Map(prev.participants); next.set(participant.id, participant); return { participants: next }; }); _attachParticipantListeners(participant, false); eventEmitter.emit(events['participant-joined'], participant); }, [dispatch, _attachParticipantListeners]); var _handle_participant_left = React.useCallback(function (participant, reason) { _detachParticipantListeners(participant.id); pDispatch({ type: 'REMOVE', id: participant.id }); dispatch(function (prev) { var next = new Map(prev.participants); next["delete"](participant.id); return { participants: next }; }); eventEmitter.emit(events['participant-left'], participant, reason); }, [dispatch, pDispatch, _detachParticipantListeners]); var _handle_presenter_changed = React.useCallback(function (presenterId) { dispatch(function (prev) { var _prev$meeting, _prev$meeting$localPa; return { presenterId: presenterId, localScreenShareOn: presenterId === ((_prev$meeting = prev.meeting) === null || _prev$meeting === void 0 ? void 0 : (_prev$meeting$localPa = _prev$meeting.localParticipant) === null || _prev$meeting$localPa === void 0 ? void 0 : _prev$meeting$localPa.id) }; }); eventEmitter.emit(events['presenter-changed'], presenterId); }, [dispatch]); var _handle_main_participant_changed = React.useCallback(function (participant) { dispatch({ mainParticipant: participant }); var prev = prevMainParticipantRef.current; if (prev) pDispatch({ type: 'UPDATE', id: prev, data: { isMainParticipant: false } }); if (participant !== null && participant !== void 0 && participant.id) pDispatch({ type: 'UPDATE', id: participant.id, data: { isMainParticipant: true } }); prevMainParticipantRef.current = participant === null || participant === void 0 ? void 0 : participant.id; eventEmitter.emit(events['main-participant-changed'], participant); }, [dispatch, pDispatch]); var _handle_speaker_changed = React.useCallback(function (activeSpeakerId) { dispatch({ activeSpeakerId: activeSpeakerId }); var prev = prevActiveSpeakerRef.current; if (prev) { pDispatch({ type: 'UPDATE', id: prev, data: { isActiveSpeaker: false } }); cDispatch({ type: 'UPDATE', id: prev, data: { isActiveSpeaker: false } }); } if (activeSpeakerId) { pDispatch({ type: 'UPDATE', id: activeSpeakerId, data: { isActiveSpeaker: true } }); cDispatch({ type: 'UPDATE', id: activeSpeakerId, data: { isActiveSpeaker: true } }); } prevActiveSpeakerRef.current = activeSpeakerId; eventEmitter.emit(events['speaker-changed'], activeSpeakerId); }, [dispatch, pDispatch, cDispatch]); var _handle_chat_message = React.useCallback(function (data) { dispatch(function (prev) { return { messages: [].concat(prev.messages, [data]) }; }); eventEmitter.emit(events['data'], data); }, [dispatch]); var _handle_entry_requested = React.useCallback(function (data) { eventEmitter.emit(events['entry-requested'], data); }, []); var _handle_entry_responded = React.useCallback(function (id, d) { eventEmitter.emit(events['entry-responded'], id, d); }, []); var _handle_video_state_changed = React.useCallback(function (data) { eventEmitter.emit(events['video-state-changed'], data); }, []); var _handle_video_seeked = React.useCallback(function (data) { eventEmitter.emit(events['video-seeked'], data); }, []); var _handle_webcam_requested = React.useCallback(function (data) { eventEmitter.emit(events['webcam-requested'], data); }, []); var _handle_mic_requested = React.useCallback(function (data) { eventEmitter.emit(events['mic-requested'], data); }, []); var _handle_switch_meeting = React.useCallback(function (d) { eventEmitter.emit(events['switch-meeting'], d); }, []); var _handle_error = React.useCallback(function (d) { eventEmitter.emit(events['error'], d); }, []); var _handle_streams_paused = React.useCallback(function (_ref6) { var kind = _ref6.kind; eventEmitter.emit(events['paused-all-streams'], { kind: kind }); }, []); var _handle_streams_resumed = React.useCallback(function (_ref7) { var kind = _ref7.kind; eventEmitter.emit(events['resumed-all-streams'], { kind: kind }); }, []); var _handle_whiteboard_started = React.useCallback(function (data) { eventEmitter.emit(events['whiteboard-started'], data); }, []); var _handle_whiteboard_stopped = React.useCallback(function (data) { eventEmitter.emit(events['whiteboard-stopped'], data); }, []); var _handle_transcription_text = React.useCallback(function (data) { eventEmitter.emit(events['transcription-text'], data); }, []); var _handle_translation_text = React.useCallback(function (data) { eventEmitter.emit(events['translation-text'], data); }, []); var _handle_translation_language_changed = React.useCallback(function (data) { eventEmitter.emit(events['translation-language-changed'], data); }, []); var _handle_media_relay_started = React.useCallback(function (data) { eventEmitter.emit(events['media-relay-started'], data); }, []); var _handle_media_relay_stopped = React.useCallback(function (data) { eventEmitter.emit(events['media-relay-stopped'], data); }, []); var _handle_media_relay_error = React.useCallback(function (data) { eventEmitter.emit(events['media-relay-error'], data); }, []); var _handle_media_relay_request_response = React.useCallback(function (data) { eventEmitter.emit(events['media-relay-request-response'], data); }, []); var _handle_media_relay_request_received = React.useCallback(function (data) { eventEmitter.emit(events['media-relay-request-received'], data); }, []); var _handle_quality_limitation_received = React.useCallback(function (data) { eventEmitter.emit(events['quality-limitation'], data); }, []); var _handle_audio_input_silence = React.useCallback(function (data) { eventEmitter.emit(events['audio-input-silence'], data); }, []); var _handle_recording_started = React.useCallback(function () { dispatch({ isRecording: true }); eventEmitter.emit(events['recording-started']); }, [dispatch]); var _handle_recording_stopped = React.useCallback(function () { dispatch({ isRecording: false }); eventEmitter.emit(events['recording-stopped']); }, [dispatch]); var _handle_localParticipant_stream_enabled = React.useCallback(function (stream) { if (stream.track.readyState === 'live') { if (stream.kind === 'video') dispatch({ localWebcamOn: true });else if (stream.kind === 'audio') dispatch({ localMicOn: true }); } }, [dispatch]); var _handle_localParticipant_stream_disabled = React.useCallback(function (stream) { if (stream.kind === 'video') dispatch({ localWebcamOn: false });else if (stream.kind === 'audio') dispatch({ localMicOn: false }); }, [dispatch]); var _handle_live_stream_started = React.useCallback(function (data) { dispatch({ isLiveStreaming: true }); eventEmitter.emit(events['live-stream-started'], data); }, [dispatch]); var _handle_live_stream_stopped = React.useCallback(function () { dispatch({ isLiveStreaming: false }); eventEmitter.emit(events['live-stream-stopped']); }, [dispatch]); var _handle_hls_started = React.useCallback(function (data) { dispatch({ isHls: true }); eventEmitter.emit(events['hls-started'], data); }, [dispatch]); var _handle_hls_stopped = React.useCallback(function () { dispatch({ isHls: false }); eventEmitter.emit(events['hls-stopped']); }, [dispatch]); var _handle_meeting_joined = React.useCallback(function (data) { if (data.switchRoomId) { dispatch(function (prev) { return { messages: [].concat(prev.messages, data.messages) }; }); } else { joinedOnFirstRender.current = true; dispatch(function (prev) { return { messages: [].concat(prev.messages, data.messages), isMeetingJoined: true }; }); } eventEmitter.emit(events['meeting-joined'], data); }, [dispatch]); var _handle_pin_state_changed = React.useCallback(function (_ref8) { var participantId = _ref8.participantId, state = _ref8.state, pinnedBy = _ref8.pinnedBy; dispatch(function (prev) { var next = new Map(prev.pinnedParticipants); if (!state.cam && !state.share) next["delete"](participantId);else next.set(participantId, state); return { pinnedParticipants: next }; }); pDispatch({ type: 'UPDATE', id: participantId, data: { pinState: !state.cam && !state.share ? { cam: false, share: false } : state } }); eventEmitter.emit(events['pin-state-changed'], { participantId: participantId, state: state, pinnedBy: pinnedBy }); }, [dispatch, pDispatch]); var _handle_connection_open = React.useCallback(function (connection) { dispatch(function (prev) { var next = new Map(prev.connections); next.set(connection.id, connection); return { connections: next }; }); eventEmitter.emit(events['connection-open'], connection); }, [dispatch]); var _handle_connection_close = React.useCallback(function (connectionId) { dispatch(function (prev) { var next = new Map(prev.connections); next["delete"](connectionId); return { connections: next }; }); eventEmitter.emit(events['connection-close'], connectionId); }, [dispatch]); var _handle_recording_state_changed = React.useCallback(function (data) { dispatch({ recordingState: data === null || data === void 0 ? void 0 : data.status }); eventEmitter.emit(events['recording-state-changed'], data); }, [dispatch]); var _handle_livestream_state_changed = React.useCallback(function (data) { dispatch({ livestreamState: data === null || data === void 0 ? void 0 : data.status }); eventEmitter.emit(events['livestream-state-changed'], data); }, [dispatch]); var _handle_hls_state_changed = React.useCallback(function (data) { var patch = { hlsState: data === null || data === void 0 ? void 0 : data.status }; if ((data === null || data === void 0 ? void 0 :