@whereby.com/browser-sdk 2.0.0-beta3 → 2.0.0-beta4

package/dist/react/index.esm.js

@@ -1,6 +1,8 @@
-import React, { useRef, useEffect, useState, useReducer } from 'react';
-import adapter from 'webrtc-adapter';
+import * as React from 'react';
+import React__default, { useRef, useEffect, useState, useCallback } from 'react';
+import { createListenerMiddleware, createSlice, createAsyncThunk, createAction, createSelector, isAnyOf, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { io } from 'socket.io-client';
+import adapter from 'webrtc-adapter';
 import SDPUtils from 'sdp';
 import * as sdpTransform from 'sdp-transform';
 import { v4 } from 'uuid';
@@ -116,9 +118,520 @@ var VideoView = (_a) => {
             videoEl.current.muted = Boolean(muted);
         }
     }, [muted, stream, videoEl]);
-    return (React.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest, { style: Object.assign({ transform: mirror ? "scaleX(-1)" : "none", width: "100%", height: "100%" }, rest.style) })));
+    return (React__default.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest, { style: Object.assign({ transform: mirror ? "scaleX(-1)" : "none", width: "100%", height: "100%" }, rest.style) })));
+};
+
+const listenerMiddleware = createListenerMiddleware();
+const startAppListening = listenerMiddleware.startListening;
+/**
+ * Creates a reactor that will be called whenever the provided selectors change.
+ * Every reactor needs to update a piece of state that it depends on, to avoid infinite loops.
+ * example:
+ * ```ts
+ * createReactor(
+ *    [selectAppWantsToJoin, selectDeviceCredentialsRaw],
+ *   ({ dispatch }, wantsToJoin, deviceCredentialsRaw) => {
+ *      if (wantsToJoin && deviceCredentialsRaw.data) {
+ *         dispatch(doSignalIdentifyDevice({ deviceCredentials: deviceCredentialsRaw.data }));
+ *    }
+ * });
+ * ```
+ * @param selectors. The selectors to be used to check if the state has changed.
+ * @param callback. The callback to be called on every action. The first argument is the listenerApi, the second argument is the result of the selectors.
+ * @returns The unsubscribe function.
+ */
+const createReactor = (selectors, callback) => {
+    return startAppListening({
+        predicate: (_, currentState, previousState) => {
+            const previousValues = selectors.map((selector) => selector(previousState));
+            const currentValues = selectors.map((selector) => selector(currentState));
+            return previousValues.some((previousValue, index) => previousValue !== currentValues[index]);
+        },
+        effect: (action, { dispatch, getState, extra }) => {
+            const selectorResults = selectors.map((selector) => selector(getState()));
+            callback({
+                dispatch,
+                getState,
+                extra,
+            }, ...selectorResults);
+        },
+    });
+};
+
+const initialState$g = {
+    wantsToJoin: false,
+    roomName: null,
+    roomKey: null,
+    roomUrl: null,
+    displayName: null,
+    sdkVersion: null,
+    externalId: null,
+};
+const appSlice = createSlice({
+    name: "app",
+    initialState: initialState$g,
+    reducers: {
+        doAppJoin: (state, action) => {
+            const url = new URL(action.payload.roomUrl);
+            return Object.assign(Object.assign(Object.assign({}, state), action.payload), { roomName: url.pathname, wantsToJoin: true });
+        },
+        appLeft: (state) => {
+            return Object.assign(Object.assign({}, state), { wantsToJoin: false });
+        },
+        setRoomKey: (state, action) => {
+            return Object.assign(Object.assign({}, state), { roomKey: action.payload });
+        },
+    },
+});
+/**
+ * Action creators
+ */
+const { doAppJoin, appLeft, setRoomKey } = appSlice.actions;
+const selectAppWantsToJoin = (state) => state.app.wantsToJoin;
+const selectAppRoomName = (state) => state.app.roomName;
+const selectAppRoomUrl = (state) => state.app.roomUrl;
+const selectAppRoomKey = (state) => state.app.roomKey;
+const selectAppDisplayName = (state) => state.app.displayName;
+const selectAppSdkVersion = (state) => state.app.sdkVersion;
+const selectAppExternalId = (state) => state.app.externalId;
+
+function createAppAsyncThunk(typePrefix, payloadCreator) {
+    return createAsyncThunk(typePrefix, payloadCreator);
+}
+function createAppThunk(thunk) {
+    return thunk;
+}
+
+function createSignalEventAction(name) {
+    return createAction(`signalConnection/event/${name}`);
+}
+const signalEvents = {
+    audioEnabled: createSignalEventAction("audioEnabled"),
+    chatMessage: createSignalEventAction("chatMessage"),
+    clientLeft: createSignalEventAction("clientLeft"),
+    clientMetadataReceived: createSignalEventAction("clientMetadataReceived"),
+    cloudRecordingStarted: createSignalEventAction("cloudRecordingStarted"),
+    cloudRecordingStopped: createSignalEventAction("cloudRecordingStopped"),
+    disconnect: createSignalEventAction("disconnect"),
+    knockerLeft: createSignalEventAction("knockerLeft"),
+    knockHandled: createSignalEventAction("knockHandled"),
+    newClient: createSignalEventAction("newClient"),
+    roomJoined: createSignalEventAction("roomJoined"),
+    roomKnocked: createSignalEventAction("roomKnocked"),
+    screenshareStarted: createSignalEventAction("screenshareStarted"),
+    screenshareStopped: createSignalEventAction("screenshareStopped"),
+    streamingStopped: createSignalEventAction("streamingStopped"),
+    videoEnabled: createSignalEventAction("videoEnabled"),
 };
 
+const initialState$f = {
+    isFetching: false,
+    data: null,
+};
+const deviceCredentialsSlice = createSlice({
+    name: "deviceCredentials",
+    initialState: initialState$f,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(doGetDeviceCredentials.pending, (state) => {
+            return Object.assign(Object.assign({}, state), { isFetching: true });
+        });
+        builder.addCase(doGetDeviceCredentials.fulfilled, (state, action) => {
+            return Object.assign(Object.assign({}, state), { isFetching: false, data: action.payload });
+        });
+        builder.addCase(doGetDeviceCredentials.rejected, (state) => {
+            // not handled in the pwa either.
+            return Object.assign(Object.assign({}, state), { isFetching: true });
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const doGetDeviceCredentials = createAppAsyncThunk("deviceCredentials/doGetDeviceCredentials", (payload, { extra }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const deviceCredentials = yield extra.services.credentialsService.getCredentials();
+        return deviceCredentials;
+    }
+    catch (error) {
+        console.error(error);
+    }
+}));
+/**
+ * Selectors
+ */
+const selectDeviceCredentialsRaw = (state) => state.deviceCredentials;
+const selectDeviceId = (state) => { var _a, _b; return (_b = (_a = state.deviceCredentials.data) === null || _a === void 0 ? void 0 : _a.credentials) === null || _b === void 0 ? void 0 : _b.uuid; };
+/**
+ * Reactors
+ */
+const selectShouldFetchDeviceCredentials = createSelector(selectAppWantsToJoin, selectDeviceCredentialsRaw, (wantsToJoin, deviceCredentials) => {
+    if (wantsToJoin && !deviceCredentials.isFetching && !deviceCredentials.data) {
+        return true;
+    }
+    return false;
+});
+createReactor([selectShouldFetchDeviceCredentials], ({ dispatch }, shouldFetchDeviceCredentials) => {
+    if (shouldFetchDeviceCredentials) {
+        dispatch(doGetDeviceCredentials());
+    }
+});
+
+const DEFAULT_SOCKET_PATH = "/protocol/socket.io/v4";
+
+/**
+ * Wrapper class that extends the Socket.IO client library.
+ */
+class ServerSocket {
+    constructor(hostName, optionsOverrides) {
+        this._socket = io(hostName, {
+            path: DEFAULT_SOCKET_PATH,
+            randomizationFactor: 0.5,
+            reconnectionDelay: 250,
+            reconnectionDelayMax: 5000,
+            timeout: 5000,
+            transports: ["websocket"],
+            withCredentials: true,
+            ...optionsOverrides,
+        });
+        this._socket.io.on("reconnect", () => {
+            this._socket.sendBuffer = [];
+        });
+        this._socket.io.on("reconnect_attempt", () => {
+            if (this._wasConnectedUsingWebsocket) {
+                this._socket.io.opts.transports = ["websocket"];
+                // only fallback to polling if not safari
+                // safari doesn't support cross doamin cookies making load-balancer stickiness not work
+                // and if socket.io reconnects to another signal instance with polling it will fail
+                // remove if we move signal to a whereby.com subdomain
+                if (adapter.browserDetails.browser !== "safari") delete this._wasConnectedUsingWebsocket;
+            } else {
+                this._socket.io.opts.transports = ["websocket", "polling"];
+            }
+        });
+        this._socket.on("connect", () => {
+            const transport = this.getTransport();
+            if (transport === "websocket") {
+                this._wasConnectedUsingWebsocket = true;
+            }
+        });
+    }
+
+    connect() {
+        if (this.isConnected() || this.isConnecting()) {
+            return;
+        }
+        this._socket.open();
+    }
+
+    disconnect() {
+        this._socket.disconnect();
+    }
+
+    disconnectOnConnect() {
+        this._socket.once("connect", () => {
+            this._socket.disconnect();
+        });
+    }
+
+    emit() {
+        this._socket.emit.apply(this._socket, arguments);
+    }
+
+    emitIfConnected(eventName, data) {
+        if (!this.isConnected()) {
+            return;
+        }
+        this.emit(eventName, data);
+    }
+
+    getTransport() {
+        return (
+            this._socket &&
+            this._socket.io &&
+            this._socket.io.engine &&
+            this._socket.io.engine.transport &&
+            this._socket.io.engine.transport.name
+        );
+    }
+
+    getManager() {
+        return this._socket.io;
+    }
+
+    isConnecting() {
+        return this._socket && this._socket.connecting;
+    }
+
+    isConnected() {
+        return this._socket && this._socket.connected;
+    }
+
+    /**
+     * Register a new event handler.
+     *
+     * @param {string} eventName - Name of the event to listen for.
+     * @param {function} handler - The callback function that should be called for the event.
+     * @returns {function} Function to deregister the listener.
+     */
+    on(eventName, handler) {
+        this._socket.on(eventName, handler);
+
+        return () => {
+            this._socket.off(eventName, handler);
+        };
+    }
+
+    /**
+     * Register a new event handler to be triggered only once.
+     *
+     * @param {string} eventName - Name of the event to listen for.
+     * @param {function} handler - The function that should be called for the event.
+     */
+    once(eventName, handler) {
+        this._socket.once(eventName, handler);
+    }
+
+    /**
+     * Deregister an event handler.
+     *
+     * @param {string} eventName - Name of the event the handler is registered for.
+     * @param {function} handler - The callback that will be deregistered.
+     */
+    off(eventName, handler) {
+        this._socket.off(eventName, handler);
+    }
+}
+
+function forwardSocketEvents(socket, dispatch) {
+    socket.on("room_joined", (payload) => dispatch(signalEvents.roomJoined(payload)));
+    socket.on("new_client", (payload) => dispatch(signalEvents.newClient(payload)));
+    socket.on("client_left", (payload) => dispatch(signalEvents.clientLeft(payload)));
+    socket.on("audio_enabled", (payload) => dispatch(signalEvents.audioEnabled(payload)));
+    socket.on("video_enabled", (payload) => dispatch(signalEvents.videoEnabled(payload)));
+    socket.on("client_metadata_received", (payload) => dispatch(signalEvents.clientMetadataReceived(payload)));
+    socket.on("chat_message", (payload) => dispatch(signalEvents.chatMessage(payload)));
+    socket.on("disconnect", () => dispatch(signalEvents.disconnect()));
+    socket.on("room_knocked", (payload) => dispatch(signalEvents.roomKnocked(payload)));
+    socket.on("knocker_left", (payload) => dispatch(signalEvents.knockerLeft(payload)));
+    socket.on("knock_handled", (payload) => dispatch(signalEvents.knockHandled(payload)));
+    socket.on("screenshare_started", (payload) => dispatch(signalEvents.screenshareStarted(payload)));
+    socket.on("screenshare_stopped", (payload) => dispatch(signalEvents.screenshareStopped(payload)));
+    socket.on("cloud_recording_started", (payload) => dispatch(signalEvents.cloudRecordingStarted(payload)));
+    socket.on("cloud_recording_stopped", () => dispatch(signalEvents.cloudRecordingStopped()));
+    socket.on("streaming_stopped", () => dispatch(signalEvents.streamingStopped()));
+}
+const SIGNAL_BASE_URL = "wss://signal.appearin.net" ;
+function createSocket() {
+    const parsedUrl = new URL(SIGNAL_BASE_URL);
+    const socketHost = parsedUrl.origin;
+    const socketOverrides = {
+        autoConnect: false,
+    };
+    return new ServerSocket(socketHost, socketOverrides);
+}
+const initialState$e = {
+    deviceIdentified: false,
+    isIdentifyingDevice: false,
+    status: "",
+    socket: null,
+};
+const signalConnectionSlice = createSlice({
+    name: "signalConnection",
+    initialState: initialState$e,
+    reducers: {
+        socketConnecting: (state) => {
+            return Object.assign(Object.assign({}, state), { status: "connecting" });
+        },
+        socketConnected: (state, action) => {
+            return Object.assign(Object.assign({}, state), { socket: action.payload, status: "connected" });
+        },
+        socketDisconnected: (state) => {
+            return Object.assign(Object.assign({}, state), { status: "disconnected" });
+        },
+        socketReconnecting: (state) => {
+            return Object.assign(Object.assign({}, state), { status: "reconnect" });
+        },
+        deviceIdentifying: (state) => {
+            return Object.assign(Object.assign({}, state), { isIdentifyingDevice: true });
+        },
+        deviceIdentified: (state) => {
+            return Object.assign(Object.assign({}, state), { deviceIdentified: true, isIdentifyingDevice: false });
+        },
+    },
+});
+const { deviceIdentifying, deviceIdentified, socketConnected, socketConnecting, socketDisconnected } = signalConnectionSlice.actions;
+/**
+ * Action creators
+ */
+const doSignalSocketConnect = createAppThunk(() => {
+    return (dispatch, getState) => {
+        if (selectSignalConnectionSocket(getState())) {
+            return;
+        }
+        dispatch(socketConnecting());
+        const socket = createSocket();
+        socket.on("connect", () => dispatch(socketConnected(socket)));
+        socket.on("device_identified", () => dispatch(deviceIdentified()));
+        socket.getManager().on("reconnect", () => dispatch(doSignalReconnect()));
+        forwardSocketEvents(socket, dispatch);
+        socket.connect();
+    };
+});
+const doSignalIdentifyDevice = createAppThunk(({ deviceCredentials }) => (dispatch, getState) => {
+    const state = getState();
+    const signalSocket = selectSignalConnectionSocket(state);
+    if (!signalSocket) {
+        return;
+    }
+    signalSocket.emit("identify_device", { deviceCredentials });
+    dispatch(deviceIdentifying());
+});
+const doSignalDisconnect = createAppThunk(() => (dispatch, getState) => {
+    const socket = selectSignalConnectionRaw(getState()).socket;
+    socket === null || socket === void 0 ? void 0 : socket.emit("leave_room");
+    socket === null || socket === void 0 ? void 0 : socket.disconnect();
+    dispatch(socketDisconnected());
+});
+const doSignalReconnect = createAppThunk(() => (dispatch, getState) => {
+    const deviceCredentialsRaw = selectDeviceCredentialsRaw(getState());
+    dispatch(socketReconnecting());
+    if (deviceCredentialsRaw.data) {
+        dispatch(doSignalIdentifyDevice({ deviceCredentials: deviceCredentialsRaw.data }));
+    }
+});
+const { socketReconnecting } = signalConnectionSlice.actions;
+/**
+ * Selectors
+ */
+const selectSignalConnectionRaw = (state) => state.signalConnection;
+const selectSignalIsIdentifyingDevice = (state) => state.signalConnection.isIdentifyingDevice;
+const selectSignalConnectionDeviceIdentified = (state) => state.signalConnection.deviceIdentified;
+const selectSignalStatus = (state) => state.signalConnection.status;
+const selectSignalConnectionSocket = (state) => state.signalConnection.socket;
+/**
+ * Reactors
+ */
+startAppListening({
+    actionCreator: appLeft,
+    effect: (_, { dispatch }) => {
+        dispatch(doSignalDisconnect());
+    },
+});
+const selectShouldConnectSignal = createSelector(selectAppWantsToJoin, selectSignalStatus, (wantsToJoin, signalStatus) => {
+    if (wantsToJoin && ["", "reconnect"].includes(signalStatus)) {
+        return true;
+    }
+    return false;
+});
+createReactor([selectShouldConnectSignal], ({ dispatch }, shouldConnectSignal) => {
+    if (shouldConnectSignal) {
+        dispatch(doSignalSocketConnect());
+    }
+});
+const selectShouldIdentifyDevice = createSelector(selectDeviceCredentialsRaw, selectSignalStatus, selectSignalConnectionDeviceIdentified, selectSignalIsIdentifyingDevice, (deviceCredentialsRaw, signalStatus, deviceIdentified, isIdentifyingDevice) => {
+    if (deviceCredentialsRaw.data && signalStatus === "connected" && !deviceIdentified && !isIdentifyingDevice) {
+        return true;
+    }
+    return false;
+});
+createReactor([selectShouldIdentifyDevice, selectDeviceCredentialsRaw], ({ dispatch }, shouldIdentifyDevice, deviceCredentialsRaw) => {
+    if (shouldIdentifyDevice && deviceCredentialsRaw.data) {
+        dispatch(doSignalIdentifyDevice({ deviceCredentials: deviceCredentialsRaw.data }));
+    }
+});
+
+const initialState$d = {
+    chatMessages: [],
+};
+const chatSlice = createSlice({
+    name: "chat",
+    initialState: initialState$d,
+    reducers: {},
+    extraReducers(builder) {
+        builder.addCase(signalEvents.chatMessage, (state, action) => {
+            const message = {
+                senderId: action.payload.senderId,
+                timestamp: action.payload.timestamp,
+                text: action.payload.text,
+            };
+            return Object.assign(Object.assign({}, state), { chatMessages: [...state.chatMessages, message] });
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const doSendChatMessage = createAppThunk((payload) => (_, getState) => {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    socket === null || socket === void 0 ? void 0 : socket.emit("chat_message", { text: payload.text });
+});
+const selectChatMessages = (state) => state.chat.chatMessages;
+
+const initialState$c = {
+    isRecording: false,
+    error: null,
+    startedAt: undefined,
+};
+const cloudRecordingSlice = createSlice({
+    name: "cloudRecording",
+    initialState: initialState$c,
+    reducers: {
+        recordingRequestStarted: (state) => {
+            return Object.assign(Object.assign({}, state), { status: "requested" });
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(signalEvents.cloudRecordingStopped, (state) => {
+            return Object.assign(Object.assign({}, state), { isRecording: false, status: undefined });
+        });
+        builder.addCase(signalEvents.cloudRecordingStarted, (state, action) => {
+            const { payload } = action;
+            if (!payload.error) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { isRecording: false, status: "error", error: payload.error });
+        });
+        builder.addCase(signalEvents.newClient, (state, { payload }) => {
+            var _a;
+            const { client } = payload;
+            if (((_a = client.role) === null || _a === void 0 ? void 0 : _a.roleName) === "recorder") {
+                return Object.assign(Object.assign({}, state), { isRecording: true, status: "recording", startedAt: client.startedCloudRecordingAt
+                        ? new Date(client.startedCloudRecordingAt).getTime()
+                        : new Date().getTime() });
+            }
+            return state;
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const { recordingRequestStarted } = cloudRecordingSlice.actions;
+const doStartCloudRecording = createAppThunk(() => (dispatch, getState) => {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    const status = selectCloudRecordingStatus(state);
+    if (status && ["recording", "requested"].includes(status)) {
+        return;
+    }
+    socket === null || socket === void 0 ? void 0 : socket.emit("start_recording", {
+        recording: "cloud",
+    });
+    dispatch(recordingRequestStarted());
+});
+const doStopCloudRecording = createAppThunk(() => (dispatch, getState) => {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    socket === null || socket === void 0 ? void 0 : socket.emit("stop_recording");
+});
+/**
+ * Selectors
+ */
+const selectCloudRecordingRaw = (state) => state.cloudRecording;
+const selectCloudRecordingStatus = (state) => state.cloudRecording.status;
+
 const isSafari = adapter.browserDetails.browser === "safari";
 
 // Expects format 640x360@25, returns [width, height, fps]
@@ -318,6 +831,63 @@ function getUserMedia(constraints) {
     });
 }
 
+function getSettingsFromTrack(kind, track, devices, lastUsedId) {
+    let settings = { deviceId: null };
+
+    if (!track) {
+        // In SFU V2 the track can be closed by the RtcManager, so check if the
+        // last used deviceId still is available
+        if (lastUsedId && devices) {
+            settings.deviceId = devices.find((d) => d.deviceId === lastUsedId && d.kind === kind)?.deviceId;
+        }
+        return settings;
+    }
+
+    settings.label = track.label;
+
+    // if MediaTrackSettings.deviceId is supported (not firefox android/esr)
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#Browser_compatibility
+    if (track.getSettings) {
+        settings = { ...settings, ...track.getSettings() };
+    }
+    if (settings.deviceId) return settings;
+    // if MediaTrackCapabilities is supported (not by firefox or samsung internet in general)
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities#Browser_compatibility
+    if (track.getCapabilities) {
+        settings.deviceId = track.getCapabilities().deviceId;
+    }
+    if (settings.deviceId) return settings;
+
+    // Firefox ESR (guessing), has no way of getting deviceId, but
+    // it probably gives us label, let's use that to find it!
+    if (track.label && devices) {
+        settings.deviceId = devices.find((d) => track.label === d.label && d.kind === kind)?.deviceId;
+    }
+    if (settings.deviceId) return settings;
+
+    // Okay. As if the above wasn't hacky enough (it was), this
+    // is even more, basically see what we sent before
+    // It's really sad if we get down to this point.
+    settings.deviceId = track.getConstraints()?.deviceId?.exact;
+    settings.broken = 1; // just a hint
+    return settings;
+}
+
+/**
+ * Gets audio and video device data from stream
+ *
+ * @returns {{video: {deviceId}, audio: {deviceId}}} - the ids are null if not found
+ */
+function getDeviceData({ audioTrack, videoTrack, devices, stoppedVideoTrack, lastAudioId, lastVideoId }) {
+    const usable = (d) => (d?.readyState === "live" ? d : null);
+    videoTrack = usable(videoTrack) || stoppedVideoTrack;
+    audioTrack = usable(audioTrack);
+    const video = getSettingsFromTrack("videoinput", videoTrack, devices, lastVideoId);
+    const audio = getSettingsFromTrack("audioinput", audioTrack, devices, lastAudioId);
+
+    return { video, audio };
+}
+
 /**
  * Stops all tracks in a media stream.
  */
@@ -496,374 +1066,1152 @@ async function getStream(constraintOpt, { replaceStream, fallback = true } = {})
     return { error: error && addDetails(error), stream, replacedTracks };
 }
 
-class LocalMediaEvent extends CustomEvent {
-    constructor(eventType, eventInitDict) {
-        super(eventType, eventInitDict);
-    }
-}
-const TypedLocalMediaEventTarget = EventTarget;
-class LocalMedia extends TypedLocalMediaEventTarget {
-    constructor(optionsOrStream) {
-        var _a, _b;
-        super();
-        this._options = null;
-        this._devices = [];
-        this._isTogglingCameraEnabled = false;
-        if (optionsOrStream instanceof MediaStream) {
-            this.stream = optionsOrStream;
-        }
-        else {
-            this._options = optionsOrStream;
-            this.stream = new MediaStream();
-        }
-        this._cameraEnabled = ((_a = this.stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.enabled) || false;
-        this._microphoneEnabled = ((_b = this.stream.getAudioTracks()[0]) === null || _b === void 0 ? void 0 : _b.enabled) || false;
-        this._rtcManagers = [];
-        this.screenshareStream = undefined;
-        navigator.mediaDevices.addEventListener("devicechange", this._updateDeviceList.bind(this));
-    }
-    addRtcManager(rtcManager) {
-        this._rtcManagers.push(rtcManager);
-    }
-    removeRtcManager(rtcManager) {
-        this._rtcManagers = this._rtcManagers.filter((r) => r !== rtcManager);
-    }
-    getCameraDeviceId() {
-        return this._currentCameraDeviceId;
-    }
-    getMicrophoneDeviceId() {
-        return this._currentMicrophoneDeviceId;
-    }
-    isCameraEnabled() {
-        return this._cameraEnabled;
-    }
-    isMicrophoneEnabled() {
-        return this._microphoneEnabled;
-    }
-    toggleCameraEnabled(enabled) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._isTogglingCameraEnabled) {
-                return;
-            }
-            let track = this.stream.getVideoTracks()[0];
-            const newValue = enabled !== null && enabled !== void 0 ? enabled : !(track === null || track === void 0 ? void 0 : track.enabled);
-            if (this._cameraEnabled === newValue) {
-                return;
+function compareLocalDevices(before, after) {
+    const [beforeByKind, afterByKind] = [before, after].map((list) =>
+        list
+            .filter((device) => device.kind && device.deviceId)
+            .reduce(
+                (result, device) => ({
+                    ...result,
+                    [device.kind]: { ...result[device.kind], [device.deviceId]: device },
+                }),
+                {}
+            )
+    );
+    const changesByKind = {};
+    // find devices removed
+    before.forEach((device) => {
+        if (!device.kind || !device.deviceId) return;
+        if (!changesByKind[device.kind]) changesByKind[device.kind] = { added: {}, removed: {}, changed: {} };
+        if (!afterByKind[device.kind] || !afterByKind[device.kind][device.deviceId]) {
+            changesByKind[device.kind].removed[device.deviceId] = device;
+        }
+    });
+    // find devices either added or changed
+    after.forEach((device) => {
+        if (!device.kind || !device.deviceId) return;
+        if (!changesByKind[device.kind]) changesByKind[device.kind] = { added: {}, removed: {}, changed: {} };
+        if (!beforeByKind[device.kind] || !beforeByKind[device.kind][device.deviceId]) {
+            changesByKind[device.kind].added[device.deviceId] = device;
+        } else if (
+            beforeByKind[device.kind][device.deviceId].label && // ignore when initially without label
+            beforeByKind[device.kind][device.deviceId].label !== device.label
+        ) {
+            changesByKind[device.kind].changed[device.deviceId] = device;
+        }
+    });
+    return changesByKind;
+}
+
+function getUpdatedDevices({ oldDevices, newDevices, currentAudioId, currentVideoId, currentSpeakerId }) {
+    const changesByKind = compareLocalDevices(oldDevices, newDevices);
+    const changedDevices = {};
+    const addedDevices = {};
+    [
+        ["audioinput", currentAudioId],
+        ["videoinput", currentVideoId],
+        ["audiooutput", currentSpeakerId],
+    ].forEach(([kind, currentDeviceId]) => {
+        const changes = changesByKind[kind];
+        if (!changes) {
+            return;
+        }
+        if (currentDeviceId) {
+            // fall back to default if removed
+            if (changes.removed[currentDeviceId]) {
+                changedDevices[kind] = { deviceId: null }; // let browser decide
+                if (kind === "audiooutput") {
+                    const fallbackSpeakerDevice = newDevices.find((d) => d.kind === "audiooutput");
+                    changedDevices[kind] = { deviceId: fallbackSpeakerDevice?.deviceId };
+                }
+            }
+            // re-request if device has changed
+            if (changes.changed[currentDeviceId]) {
+                changedDevices[kind] = { deviceId: currentDeviceId };
+            }
+        }
+        // request new device if added
+        if (Object.keys(changes.added).length) {
+            const [deviceAdded] = Object.keys(changes.added).slice(0, 1);
+            const add = changes.added[deviceAdded];
+            // device props are not enumerable (used in notificatio
+            addedDevices[kind] = { deviceId: add.deviceId, label: add.label, kind: add.kind };
+        }
+    });
+
+    return { addedDevices, changedDevices };
+}
+
+const initialState$b = {
+    busyDeviceIds: [],
+    cameraEnabled: false,
+    devices: [],
+    isSettingCameraDevice: false,
+    isSettingMicrophoneDevice: false,
+    isTogglingCamera: false,
+    microphoneEnabled: false,
+    status: "",
+    isSwitchingStream: false,
+};
+const localMediaSlice = createSlice({
+    name: "localMedia",
+    initialState: initialState$b,
+    reducers: {
+        deviceBusy(state, action) {
+            if (state.busyDeviceIds.includes(action.payload.deviceId)) {
+                return state;
             }
-            this._cameraEnabled = newValue;
-            this.dispatchEvent(new LocalMediaEvent("camera_enabled", { detail: { enabled: this._cameraEnabled } }));
-            // Only stop tracks if we fully own the media stream
-            const shouldStopTrack = !!this._options;
-            this._isTogglingCameraEnabled = true;
-            try {
-                if (this._cameraEnabled) {
-                    if (track) {
-                        // We have existing video track, just enable it
-                        track.enabled = true;
-                    }
-                    else {
-                        // We dont have video track, get new one
-                        yield getStream(Object.assign(Object.assign({}, this._getConstraintsOptions()), { audioId: false, videoId: this._currentCameraDeviceId, type: "exact" }), { replaceStream: this.stream });
-                        track = this.stream.getVideoTracks()[0];
-                    }
-                }
-                else {
-                    if (!track) {
-                        return;
-                    }
-                    track.enabled = false;
-                    if (shouldStopTrack) {
-                        track.stop();
-                        this.stream.removeTrack(track);
-                    }
-                }
-                // Dispatch event on stream to allow RTC layer effects
-                this.stream.dispatchEvent(new LocalMediaEvent("stopresumevideo", { detail: { track, enable: this._cameraEnabled } }));
+            return Object.assign(Object.assign({}, state), { busyDeviceIds: [...state.busyDeviceIds, action.payload.deviceId] });
+        },
+        toggleCameraEnabled(state, action) {
+            var _a;
+            return Object.assign(Object.assign({}, state), { cameraEnabled: (_a = action.payload.enabled) !== null && _a !== void 0 ? _a : !state.cameraEnabled });
+        },
+        setCurrentCameraDeviceId(state, action) {
+            return Object.assign(Object.assign({}, state), { currentCameraDeviceId: action.payload.deviceId });
+        },
+        toggleMicrophoneEnabled(state, action) {
+            var _a;
+            return Object.assign(Object.assign({}, state), { microphoneEnabled: (_a = action.payload.enabled) !== null && _a !== void 0 ? _a : !state.microphoneEnabled });
+        },
+        setCurrentMicrophoneDeviceId(state, action) {
+            return Object.assign(Object.assign({}, state), { currentMicrophoneDeviceId: action.payload.deviceId });
+        },
+        setDevices(state, action) {
+            return Object.assign(Object.assign({}, state), { devices: action.payload.devices });
+        },
+        setLocalMediaStream(state, action) {
+            return Object.assign(Object.assign({}, state), { stream: action.payload.stream });
+        },
+        setLocalMediaOptions(state, action) {
+            return Object.assign(Object.assign({}, state), { options: action.payload.options });
+        },
+        localMediaStopped(state) {
+            return Object.assign(Object.assign({}, state), { status: "stopped", stream: undefined });
+        },
+        localStreamMetadataUpdated(state, action) {
+            const { audio, video } = action.payload;
+            return Object.assign(Object.assign({}, state), { currentCameraDeviceId: video.deviceId, currentMicrophoneDeviceId: audio.deviceId, busyDeviceIds: state.busyDeviceIds.filter((id) => id !== audio.deviceId && id !== video.deviceId) });
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(doAppJoin, (state, action) => {
+            return Object.assign(Object.assign({}, state), { options: action.payload.localMediaOptions });
+        });
+        builder.addCase(doSetDevice.pending, (state, action) => {
+            const { audio, video } = action.meta.arg;
+            return Object.assign(Object.assign({}, state), { isSettingCameraDevice: video, isSettingMicrophoneDevice: audio });
+        });
+        builder.addCase(doSetDevice.fulfilled, (state, action) => {
+            const { audio, video } = action.meta.arg;
+            return Object.assign(Object.assign({}, state), { isSettingCameraDevice: video ? false : state.isSettingCameraDevice, isSettingMicrophoneDevice: audio ? false : state.isSettingMicrophoneDevice });
+        });
+        builder.addCase(doSetDevice.rejected, (state, action) => {
+            const { audio, video } = action.meta.arg;
+            return Object.assign(Object.assign({}, state), { isSettingCameraDevice: video ? false : state.isSettingCameraDevice, isSettingMicrophoneDevice: audio ? false : state.isSettingMicrophoneDevice, cameraDeviceError: video ? action.error : state.cameraDeviceError, microphoneDeviceError: audio ? action.error : state.microphoneDeviceError });
+        });
+        builder.addCase(doToggleCamera.pending, (state) => {
+            return Object.assign(Object.assign({}, state), { isTogglingCamera: true });
+        });
+        builder.addCase(doToggleCamera.fulfilled, (state) => {
+            return Object.assign(Object.assign({}, state), { isTogglingCamera: false });
+        });
+        builder.addCase(doUpdateDeviceList.fulfilled, (state, action) => {
+            return Object.assign(Object.assign({}, state), { devices: action.payload.devices });
+        });
+        builder.addCase(doStartLocalMedia.pending, (state) => {
+            return Object.assign(Object.assign({}, state), { status: "starting" });
+        });
+        builder.addCase(doStartLocalMedia.fulfilled, (state, { payload: { stream, onDeviceChange } }) => {
+            let cameraDeviceId = undefined;
+            let cameraEnabled = false;
+            let microphoneDeviceId = undefined;
+            let microphoneEnabled = false;
+            const audioTrack = stream.getAudioTracks()[0];
+            const videoTrack = stream.getVideoTracks()[0];
+            if (audioTrack) {
+                microphoneDeviceId = audioTrack.getSettings().deviceId;
+                microphoneEnabled = audioTrack.enabled;
             }
-            catch (error) {
-                // TODO: Update error state
+            if (videoTrack) {
+                cameraEnabled = videoTrack.enabled;
+                cameraDeviceId = videoTrack.getSettings().deviceId;
             }
-            this._isTogglingCameraEnabled = false;
+            return Object.assign(Object.assign({}, state), { stream, status: "started", currentCameraDeviceId: cameraDeviceId, currentMicrophoneDeviceId: microphoneDeviceId, cameraEnabled,
+                microphoneEnabled,
+                onDeviceChange });
         });
+        builder.addCase(doStartLocalMedia.rejected, (state, action) => {
+            return Object.assign(Object.assign({}, state), { status: "error", startError: action.error });
+        });
+        builder.addCase(doSwitchLocalStream.pending, (state) => {
+            return Object.assign(Object.assign({}, state), { isSwitchingStream: true });
+        });
+        builder.addCase(doSwitchLocalStream.fulfilled, (state) => {
+            return Object.assign(Object.assign({}, state), { isSwitchingStream: false });
+        });
+        builder.addCase(doSwitchLocalStream.rejected, (state) => {
+            return Object.assign(Object.assign({}, state), { isSwitchingStream: false });
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const { deviceBusy, setCurrentCameraDeviceId, setCurrentMicrophoneDeviceId, toggleCameraEnabled, toggleMicrophoneEnabled, setLocalMediaOptions, setLocalMediaStream, localMediaStopped, localStreamMetadataUpdated, } = localMediaSlice.actions;
+const doToggleCamera = createAppAsyncThunk("localMedia/doToggleCamera", (_, { getState, rejectWithValue }) => __awaiter(void 0, void 0, void 0, function* () {
+    const state = getState();
+    const stream = selectLocalMediaStream(state);
+    if (!stream) {
+        return;
     }
-    toggleMichrophoneEnabled(enabled) {
-        const audioTrack = this.stream.getAudioTracks()[0];
-        if (!audioTrack) {
-            return;
+    let track = stream.getVideoTracks()[0];
+    const enabled = selectIsCameraEnabled(state);
+    // Only stop tracks if we fully own the media stream
+    const shouldStopTrack = selectLocalMediaOwnsStream(state);
+    try {
+        if (enabled) {
+            if (track) {
+                // We have existing video track, just enable it
+                track.enabled = true;
+            }
+            else {
+                // We dont have video track, get new one
+                const constraintsOptions = selectLocalMediaConstraintsOptions(state);
+                const cameraDeviceId = selectCurrentCameraDeviceId(state);
+                yield getStream(Object.assign(Object.assign({}, constraintsOptions), { audioId: false, videoId: cameraDeviceId, type: "exact" }), { replaceStream: stream });
+                track = stream.getVideoTracks()[0];
+            }
         }
-        // Update internal state and dispatch event early
-        this._microphoneEnabled = enabled !== null && enabled !== void 0 ? enabled : !audioTrack.enabled;
-        this.dispatchEvent(new LocalMediaEvent("microphone_enabled", { detail: { enabled: this._microphoneEnabled } }));
-        audioTrack.enabled = this._microphoneEnabled;
-    }
-    startScreenshare() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.screenshareStream) {
-                return this.screenshareStream;
+        else {
+            if (!track) {
+                return;
             }
-            const screenshareStream = yield navigator.mediaDevices.getDisplayMedia();
-            this.screenshareStream = screenshareStream;
-            return this.screenshareStream;
-        });
-    }
-    stopScreenshare() {
-        var _a;
-        (_a = this.screenshareStream) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
-        this.screenshareStream = undefined;
-    }
-    _getConstraintsOptions() {
-        return {
-            devices: this._devices,
-            options: {
-                disableAEC: false,
-                disableAGC: false,
-                hd: true,
-                lax: false,
-                lowDataMode: false,
-                simulcast: true,
-                widescreen: true,
-            },
-        };
-    }
-    _setDevice({ audioId, videoId }) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { replacedTracks } = yield getStream(Object.assign(Object.assign({}, this._getConstraintsOptions()), { audioId,
-                videoId, type: "exact" }), { replaceStream: this.stream });
-            if (replacedTracks) {
-                replacedTracks.forEach((oldTrack) => {
-                    const newTrack = oldTrack.kind === "audio" ? this.stream.getAudioTracks()[0] : this.stream.getVideoTracks()[0];
-                    this._rtcManagers.forEach((rtcManager) => {
-                        rtcManager.replaceTrack(oldTrack, newTrack);
-                    });
-                });
+            track.enabled = false;
+            if (shouldStopTrack) {
+                track.stop();
+                stream.removeTrack(track);
             }
-            this.dispatchEvent(new LocalMediaEvent("stream_updated", {
-                detail: { stream: this.stream },
-            }));
-        });
+        }
+        // Dispatch event on stream to allow RTC layer effects
+        stream.dispatchEvent(new CustomEvent("stopresumevideo", { detail: { track, enable: enabled } }));
+    }
+    catch (error) {
+        return rejectWithValue(error);
+    }
+}));
+const doToggleMicrophone = createAppAsyncThunk("localMedia/doToggleMicrophone", (_, { getState }) => {
+    var _a;
+    const state = getState();
+    const stream = selectLocalMediaStream(state);
+    if (!stream) {
+        return;
     }
-    setCameraDevice(deviceId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this._currentCameraDeviceId = deviceId;
-            yield this._setDevice({ videoId: this._currentCameraDeviceId, audioId: false });
-        });
+    const enabled = selectIsMicrophoneEnabled(state);
+    const audioTrack = (_a = stream.getAudioTracks()) === null || _a === void 0 ? void 0 : _a[0];
+    if (!audioTrack) {
+        return;
     }
-    setMicrophoneDevice(deviceId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this._currentMicrophoneDeviceId = deviceId;
-            yield this._setDevice({ audioId: this._currentMicrophoneDeviceId, videoId: false });
+    audioTrack.enabled = enabled;
+});
+const doSetDevice = createAppAsyncThunk("localMedia/reactSetDevice", ({ audio, video }, { getState, rejectWithValue }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const state = getState();
+        const stream = selectLocalMediaStream(state);
+        if (!stream) {
+            throw new Error("No stream");
+        }
+        const audioId = audio ? selectCurrentMicrophoneDeviceId(state) : false;
+        const videoId = video ? selectCurrentCameraDeviceId(state) : false;
+        const constraintsOptions = selectLocalMediaConstraintsOptions(state);
+        const { replacedTracks } = yield getStream(Object.assign(Object.assign({}, constraintsOptions), { audioId,
+            videoId, type: "exact" }), { replaceStream: stream });
+        const isAudioEnabled = selectIsMicrophoneEnabled(state);
+        stream.getAudioTracks().forEach((track) => (track.enabled = isAudioEnabled));
+        const isVideoEnabled = selectIsCameraEnabled(state);
+        stream.getVideoTracks().forEach((track) => (track.enabled = isVideoEnabled));
+        return { replacedTracks };
+    }
+    catch (error) {
+        return rejectWithValue(error);
+    }
+}));
+const doUpdateDeviceList = createAppAsyncThunk("localMedia/doUpdateDeviceList", (_, { getState, dispatch, rejectWithValue }) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const state = getState();
+    let newDevices = [];
+    let oldDevices = [];
+    const stream = selectLocalMediaStream(state);
+    const busy = selectBusyDeviceIds(state);
+    try {
+        newDevices = yield navigator.mediaDevices.enumerateDevices();
+        oldDevices = selectLocalMediaDevices(state);
+        const shouldHandleDeviceUpdate = stream &&
+            !selectLocalMediaIsSwitchingStream(state) &&
+            newDevices &&
+            oldDevices &&
+            oldDevices.find((d) => d.deviceId);
+        if (!shouldHandleDeviceUpdate) {
+            return { devices: newDevices };
+        }
+        const { changedDevices } = getUpdatedDevices({
+            oldDevices,
+            newDevices,
+            currentAudioId: selectCurrentMicrophoneDeviceId(state),
+            currentVideoId: selectCurrentCameraDeviceId(state),
         });
-    }
-    _updateDeviceList() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const devices = yield navigator.mediaDevices.enumerateDevices();
-                this.dispatchEvent(new LocalMediaEvent("device_list_updated", {
-                    detail: {
-                        cameraDevices: devices.filter((d) => d.kind === "videoinput"),
-                        microphoneDevices: devices.filter((d) => d.kind === "audioinput"),
-                        speakerDevices: devices.filter((d) => d.kind === "audiooutput"),
-                    },
-                }));
-                this._devices = devices;
+        let autoSwitchAudioId = (_a = changedDevices.audioinput) === null || _a === void 0 ? void 0 : _a.deviceId;
+        let autoSwitchVideoId = (_b = changedDevices.videoinput) === null || _b === void 0 ? void 0 : _b.deviceId;
+        // eslint-disable-next-line no-inner-declarations
+        function nextId(devices, id) {
+            const curIdx = id ? devices.findIndex((d) => d.deviceId === id) : 0;
+            return (devices[(curIdx + 1) % devices.length] || {}).deviceId;
+        }
+        if (autoSwitchVideoId !== undefined) {
+            const videoDevices = selectLocalMediaDevices(state).filter((d) => d.kind === "videoinput");
+            const videoId = selectCurrentCameraDeviceId(state);
+            let nextVideoId = nextId(videoDevices.filter((d) => !busy.includes(d.deviceId)), videoId);
+            if (!nextVideoId || videoId === nextVideoId) {
+                nextVideoId = nextId(videoDevices, videoId);
             }
-            catch (error) {
-                this.dispatchEvent(new LocalMediaEvent("device_list_update_error", {
-                    detail: {
-                        error,
-                    },
-                }));
-                throw error;
+            if (videoId !== nextVideoId) {
+                autoSwitchVideoId = nextVideoId;
             }
-        });
-    }
-    start() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this._updateDeviceList();
-            if (this._options) {
-                yield getStream(Object.assign(Object.assign({}, this._getConstraintsOptions()), { audioId: this._options.audio, videoId: this._options.video }), { replaceStream: this.stream });
-                const cameraTrack = this.stream.getVideoTracks()[0];
-                if (cameraTrack) {
-                    this._cameraEnabled = cameraTrack.enabled;
-                    this._currentCameraDeviceId = cameraTrack.getSettings().deviceId;
-                }
-                const microphoneTrack = this.stream.getAudioTracks()[0];
-                if (microphoneTrack) {
-                    this._microphoneEnabled = microphoneTrack.enabled;
-                    this._currentMicrophoneDeviceId = microphoneTrack.getSettings().deviceId;
-                }
+        }
+        if (autoSwitchAudioId !== undefined) {
+            const audioDevices = selectLocalMediaDevices(state).filter((d) => d.kind === "audioinput");
+            const audioId = selectCurrentMicrophoneDeviceId(state);
+            let nextAudioId = nextId(audioDevices.filter((d) => !busy.includes(d.deviceId)), audioId);
+            if (!nextAudioId || audioId === nextAudioId) {
+                nextAudioId = nextId(audioDevices, audioId);
             }
-            this.dispatchEvent(new LocalMediaEvent("stream_updated", {
-                detail: { stream: this.stream },
-            }));
-            return this.stream;
-        });
+            if (audioId !== nextAudioId) {
+                autoSwitchAudioId = nextAudioId;
+            }
+        }
+        if (autoSwitchAudioId !== undefined || autoSwitchVideoId !== undefined) {
+            dispatch(doSwitchLocalStream({ audioId: autoSwitchAudioId, videoId: autoSwitchVideoId }));
+        }
+        return { devices: newDevices };
+    }
+    catch (error) {
+        return rejectWithValue(error);
+    }
+}));
+const doSwitchLocalStream = createAppAsyncThunk("localMedia/doSwitchLocalStream", ({ audioId, videoId }, { dispatch, getState, rejectWithValue }) => __awaiter(void 0, void 0, void 0, function* () {
+    const state = getState();
+    const replaceStream = selectLocalMediaStream(state);
+    const constraintsOptions = selectLocalMediaConstraintsOptions(state);
+    const onlySwitchingOne = !!(videoId && !audioId) || !!(!videoId && audioId);
+    if (!replaceStream) {
+        // Switching no stream makes no sense
+        return;
     }
-    stop() {
-        var _a;
-        if (this._options) {
-            (_a = this.stream) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((t) => {
-                t.stop();
-            });
+    try {
+        const { replacedTracks } = yield getStream(Object.assign(Object.assign({}, constraintsOptions), { audioId: audioId === undefined ? false : audioId, videoId: videoId === undefined ? false : videoId, type: "exact" }), { replaceStream });
+        const deviceId = audioId || videoId;
+        if (onlySwitchingOne && deviceId) {
+            dispatch(deviceBusy({
+                deviceId,
+            }));
+        }
+        return { replacedTracks };
+    }
+    catch (error) {
+        console.error(error);
+        const deviceId = audioId || videoId;
+        if (onlySwitchingOne && deviceId) {
+            dispatch(deviceBusy({
+                deviceId,
+            }));
         }
+        return rejectWithValue(error);
+    }
+}));
+const doStartLocalMedia = createAppAsyncThunk("localMedia/doStartLocalMedia", (payload, { getState, dispatch, rejectWithValue }) => __awaiter(void 0, void 0, void 0, function* () {
+    const onDeviceChange = debounce(() => {
+        dispatch(doUpdateDeviceList());
+    }, { delay: 500 });
+    if (global.navigator.mediaDevices) {
+        navigator.mediaDevices.addEventListener("devicechange", onDeviceChange);
+    }
+    // Resolve if existing stream is passed
+    if ("getTracks" in payload) {
+        return Promise.resolve({ stream: payload, onDeviceChange });
+    }
+    if (!(payload.audio || payload.video)) {
+        return { stream: new MediaStream(), onDeviceChange };
+    }
+    else {
+        dispatch(setLocalMediaOptions({ options: payload }));
+    }
+    try {
+        // then update devices
+        yield dispatch(doUpdateDeviceList());
+        // then get new state
+        const state = getState();
+        const constraintsOptions = selectLocalMediaConstraintsOptions(state);
+        const { stream } = yield getStream(Object.assign(Object.assign({}, constraintsOptions), { audioId: payload.audio, videoId: payload.video }));
+        return { stream, onDeviceChange };
+    }
+    catch (error) {
+        return rejectWithValue(error);
+    }
+}));
+const doStopLocalMedia = createAppThunk(() => (dispatch, getState) => {
+    const stream = selectLocalMediaStream(getState());
+    const onDeviceChange = selectLocalMediaRaw(getState()).onDeviceChange;
+    stream === null || stream === void 0 ? void 0 : stream.getTracks().forEach((track) => {
+        track.stop();
+    });
+    if (global.navigator.mediaDevices && onDeviceChange) {
+        navigator.mediaDevices.removeEventListener("devicechange", onDeviceChange);
     }
-}
+    dispatch(localMediaStopped());
+});
+/**
+ * Selectors
+ */
+const selectBusyDeviceIds = (state) => state.localMedia.busyDeviceIds;
+const selectCameraDeviceError = (state) => state.localMedia.cameraDeviceError;
+const selectCurrentCameraDeviceId = (state) => state.localMedia.currentCameraDeviceId;
+const selectCurrentMicrophoneDeviceId = (state) => state.localMedia.currentMicrophoneDeviceId;
+const selectIsCameraEnabled = (state) => state.localMedia.cameraEnabled;
+const selectIsMicrophoneEnabled = (state) => state.localMedia.microphoneEnabled;
+const selectIsSettingCameraDevice = (state) => state.localMedia.isSettingCameraDevice;
+const selectIsSettingMicrophoneDevice = (state) => state.localMedia.isSettingMicrophoneDevice;
+const selectIsToggleCamera = (state) => state.localMedia.isTogglingCamera;
+const selectLocalMediaDevices = (state) => state.localMedia.devices;
+const selectLocalMediaOptions = (state) => state.localMedia.options;
+const selectLocalMediaOwnsStream = createSelector(selectLocalMediaOptions, (options) => !!options);
+const selectLocalMediaRaw = (state) => state.localMedia;
+const selectLocalMediaStatus = (state) => state.localMedia.status;
+const selectLocalMediaStream = (state) => state.localMedia.stream;
+const selectMicrophoneDeviceError = (state) => state.localMedia.microphoneDeviceError;
+const selectLocalMediaStartError = (state) => state.localMedia.startError;
+const selectLocalMediaIsSwitchingStream = (state) => state.localMedia.isSwitchingStream;
+const selectLocalMediaConstraintsOptions = createSelector(selectLocalMediaDevices, (devices) => ({
+    devices,
+    options: {
+        disableAEC: false,
+        disableAGC: false,
+        hd: true,
+        lax: false,
+        lowDataMode: false,
+        simulcast: true,
+        widescreen: true,
+    },
+}));
+const selectIsLocalMediaStarting = createSelector(selectLocalMediaStatus, (status) => status === "starting");
+const selectCameraDevices = createSelector(selectLocalMediaDevices, selectBusyDeviceIds, (devices, busyDeviceIds) => devices.filter((d) => d.kind === "videoinput").filter((d) => !busyDeviceIds.includes(d.deviceId)));
+const selectMicrophoneDevices = createSelector(selectLocalMediaDevices, selectBusyDeviceIds, (devices, busyDeviceIds) => devices.filter((d) => d.kind === "audioinput").filter((d) => !busyDeviceIds.includes(d.deviceId)));
+const selectSpeakerDevices = createSelector(selectLocalMediaDevices, (devices) => devices.filter((d) => d.kind === "audiooutput"));
+/**
+ * Reactors
+ */
+// Start localMedia unless started when roomConnection is wanted
+const selectLocalMediaShouldStartWithOptions = createSelector(selectAppWantsToJoin, selectLocalMediaStatus, selectLocalMediaOptions, (appWantsToJoin, localMediaStatus, localMediaOptions) => {
+    if (appWantsToJoin && localMediaStatus === "" && localMediaOptions) {
+        return localMediaOptions;
+    }
+});
+createReactor([selectLocalMediaShouldStartWithOptions], ({ dispatch }, options) => {
+    if (options) {
+        dispatch(doStartLocalMedia(options));
+    }
+});
+// Stop localMedia when roomConnection is no longer wanted and media was started when joining
+const selectLocalMediaShouldStop = createSelector(selectAppWantsToJoin, selectLocalMediaStatus, selectLocalMediaOptions, (appWantsToJoin, localMediaStatus, localMediaOptions) => {
+    return !appWantsToJoin && localMediaStatus !== "" && !!localMediaOptions;
+});
+createReactor([selectLocalMediaShouldStop], ({ dispatch }, localMediaShouldStop) => {
+    if (localMediaShouldStop) {
+        dispatch(doStopLocalMedia());
+    }
+});
+startAppListening({
+    predicate: (_action, currentState, previousState) => {
+        const oldValue = selectIsMicrophoneEnabled(previousState);
+        const newValue = selectIsMicrophoneEnabled(currentState);
+        const isReady = selectLocalMediaStatus(previousState) === "started";
+        return isReady && oldValue !== newValue;
+    },
+    effect: (_, { dispatch }) => {
+        dispatch(doToggleMicrophone());
+    },
+});
+startAppListening({
+    predicate: (_action, currentState, previousState) => {
+        const isToggling = selectIsToggleCamera(currentState);
+        if (isToggling) {
+            return false;
+        }
+        const oldValue = selectIsCameraEnabled(previousState);
+        const newValue = selectIsCameraEnabled(currentState);
+        const isReady = selectLocalMediaStatus(previousState) === "started";
+        return isReady && oldValue !== newValue;
+    },
+    effect: (_action, { dispatch }) => {
+        dispatch(doToggleCamera());
+    },
+});
+startAppListening({
+    predicate: (_action, currentState, previousState) => {
+        const oldValue = selectCurrentCameraDeviceId(previousState);
+        const newValue = selectCurrentCameraDeviceId(currentState);
+        const isReady = selectLocalMediaStatus(previousState) === "started";
+        return isReady && oldValue !== newValue;
+    },
+    effect: (_action, { dispatch }) => {
+        dispatch(doSetDevice({ audio: false, video: true }));
+    },
+});
+startAppListening({
+    predicate: (_action, currentState, previousState) => {
+        const oldValue = selectCurrentMicrophoneDeviceId(previousState);
+        const newValue = selectCurrentMicrophoneDeviceId(currentState);
+        const isReady = selectLocalMediaStatus(previousState) === "started";
+        return isReady && oldValue !== newValue;
+    },
+    effect: (_action, { dispatch }) => {
+        dispatch(doSetDevice({ audio: true, video: false }));
+    },
+});
+startAppListening({
+    matcher: isAnyOf(doStartLocalMedia.fulfilled, doUpdateDeviceList.fulfilled, doSwitchLocalStream.fulfilled, doSwitchLocalStream.rejected),
+    effect: (_action, { dispatch, getState }) => {
+        const state = getState();
+        const stream = selectLocalMediaStream(state);
+        const devices = selectLocalMediaDevices(state);
+        if (!stream)
+            return;
+        const deviceData = getDeviceData({
+            audioTrack: stream.getAudioTracks()[0],
+            videoTrack: stream.getVideoTracks()[0],
+            devices,
+        });
+        dispatch(localStreamMetadataUpdated(deviceData));
+    },
+});
 
-const initialState$1 = {
-    cameraDeviceError: null,
-    cameraDevices: [],
-    isSettingCameraDevice: false,
-    isSettingMicrophoneDevice: false,
-    isStarting: false,
-    microphoneDeviceError: null,
-    microphoneDevices: [],
-    speakerDevices: [],
-    startError: null,
+const initialState$a = {
+    displayName: "",
+    id: "",
+    isAudioEnabled: true,
+    isVideoEnabled: true,
+    isLocalParticipant: true,
+    stream: undefined,
+    isScreenSharing: false,
+    roleName: "",
 };
-function reducer$1(state, action) {
-    switch (action.type) {
-        case "DEVICE_LIST_UPDATED":
+const doEnableAudio = createAppAsyncThunk("localParticipant/doEnableAudio", (payload, { getState }) => __awaiter(void 0, void 0, void 0, function* () {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    socket === null || socket === void 0 ? void 0 : socket.emit("enable_audio", { enabled: payload.enabled });
+    return payload.enabled;
+}));
+const doEnableVideo = createAppAsyncThunk("localParticipant/doEnableVideo", (payload, { getState }) => __awaiter(void 0, void 0, void 0, function* () {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    socket === null || socket === void 0 ? void 0 : socket.emit("enable_video", { enabled: payload.enabled });
+    return payload.enabled;
+}));
+const doSetDisplayName = createAppAsyncThunk("localParticipant/doSetDisplayName", (payload, { getState }) => __awaiter(void 0, void 0, void 0, function* () {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    socket === null || socket === void 0 ? void 0 : socket.emit("send_client_metadata", {
+        type: "UserData",
+        payload,
+    });
+    return payload.displayName;
+}));
+const localParticipantSlice = createSlice({
+    name: "localParticipant",
+    initialState: initialState$a,
+    reducers: {
+        doSetLocalParticipant: (state, action) => {
             return Object.assign(Object.assign({}, state), action.payload);
-        case "LOCAL_STREAM_UPDATED":
-            return Object.assign(Object.assign({}, state), { currentCameraDeviceId: action.payload.currentCameraDeviceId, currentMicrophoneDeviceId: action.payload.currentMicrophoneDeviceId, localStream: action.payload.stream });
-        case "SET_CAMERA_DEVICE":
-            return Object.assign(Object.assign({}, state), { cameraDeviceError: null, isSettingCameraDevice: true });
-        case "SET_CAMERA_DEVICE_COMPLETE":
-            return Object.assign(Object.assign({}, state), { isSettingCameraDevice: false });
-        case "SET_CAMERA_DEVICE_ERROR":
-            return Object.assign(Object.assign({}, state), { cameraDeviceError: action.payload, isSettingCameraDevice: false });
-        case "SET_MICROPHONE_DEVICE":
-            return Object.assign(Object.assign({}, state), { isSettingMicrophoneDevice: true, microphoneDeviceError: null });
-        case "SET_MICROPHONE_DEVICE_COMPLETE":
-            return Object.assign(Object.assign({}, state), { isSettingMicrophoneDevice: false });
-        case "SET_MICROPHONE_DEVICE_ERROR":
-            return Object.assign(Object.assign({}, state), { isSettingMicrophoneDevice: false, microphoneDeviceError: action.payload });
-        case "START":
-            return Object.assign(Object.assign({}, state), { isStarting: true, startError: null });
-        case "START_COMPLETE":
-            return Object.assign(Object.assign({}, state), { isStarting: false });
-        case "START_ERROR":
-            return Object.assign(Object.assign({}, state), { isStarting: false, startError: action.payload });
-        default:
-            return state;
-    }
-}
-function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
-    const [localMedia] = useState(() => new LocalMedia(optionsOrStream));
-    const [state, dispatch] = useReducer(reducer$1, initialState$1);
-    useEffect(() => {
-        localMedia.addEventListener("device_list_updated", (e) => {
-            const { cameraDevices, microphoneDevices, speakerDevices } = e.detail;
-            dispatch({ type: "DEVICE_LIST_UPDATED", payload: { cameraDevices, microphoneDevices, speakerDevices } });
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(doAppJoin, (state, action) => {
+            return Object.assign(Object.assign({}, state), { displayName: action.payload.displayName });
         });
-        localMedia.addEventListener("stream_updated", (e) => {
-            const { stream } = e.detail;
-            dispatch({
-                type: "LOCAL_STREAM_UPDATED",
-                payload: {
-                    stream,
-                    currentCameraDeviceId: localMedia.getCameraDeviceId(),
-                    currentMicrophoneDeviceId: localMedia.getMicrophoneDeviceId(),
-                },
-            });
+        builder.addCase(doEnableAudio.fulfilled, (state, action) => {
+            return Object.assign(Object.assign({}, state), { isAudioEnabled: action.payload });
         });
-        const start = () => __awaiter(this, void 0, void 0, function* () {
-            dispatch({ type: "START" });
-            try {
-                yield localMedia.start();
-                dispatch({ type: "START_COMPLETE" });
-            }
-            catch (error) {
-                dispatch({ type: "START_ERROR", payload: error });
-            }
+        builder.addCase(doEnableVideo.fulfilled, (state, action) => {
+            return Object.assign(Object.assign({}, state), { isVideoEnabled: action.payload });
         });
-        start();
-        // Perform cleanup on unmount
-        return () => {
-            localMedia.stop();
-        };
-    }, []);
-    return {
-        state,
-        actions: {
-            setCameraDevice: (...args) => __awaiter(this, void 0, void 0, function* () {
-                dispatch({ type: "SET_CAMERA_DEVICE" });
-                try {
-                    yield localMedia.setCameraDevice(...args);
-                    dispatch({ type: "SET_CAMERA_DEVICE_COMPLETE" });
-                }
-                catch (error) {
-                    dispatch({ type: "SET_CAMERA_DEVICE_ERROR", payload: error });
-                }
-            }),
-            setMicrophoneDevice: (...args) => __awaiter(this, void 0, void 0, function* () {
-                dispatch({ type: "SET_MICROPHONE_DEVICE" });
-                try {
-                    yield localMedia.setMicrophoneDevice(...args);
-                    dispatch({ type: "SET_MICROPHONE_DEVICE_COMPLETE" });
-                }
-                catch (error) {
-                    dispatch({ type: "SET_MICROPHONE_DEVICE_ERROR", payload: error });
-                }
-            }),
-            toggleCameraEnabled: (...args) => {
-                return localMedia.toggleCameraEnabled(...args);
-            },
-            toggleMicrophoneEnabled: (...args) => {
-                return localMedia.toggleMichrophoneEnabled(...args);
-            },
-        },
-        _ref: localMedia,
-    };
-}
-
-const EVENTS = {
-    CLIENT_CONNECTION_STATUS_CHANGED: "client_connection_status_changed",
-    STREAM_ADDED: "stream_added",
-    RTC_MANAGER_CREATED: "rtc_manager_created",
-    RTC_MANAGER_DESTROYED: "rtc_manager_destroyed",
-    LOCAL_STREAM_TRACK_ADDED: "local_stream_track_added",
-    LOCAL_STREAM_TRACK_REMOVED: "local_stream_track_removed",
-    REMOTE_STREAM_TRACK_ADDED: "remote_stream_track_added",
-    REMOTE_STREAM_TRACK_REMOVED: "remote_stream_track_removed",
-};
+        builder.addCase(doSetDisplayName.fulfilled, (state, action) => {
+            return Object.assign(Object.assign({}, state), { displayName: action.payload });
+        });
+        builder.addCase(signalEvents.roomJoined, (state, action) => {
+            var _a, _b;
+            const client = (_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.room) === null || _b === void 0 ? void 0 : _b.clients.find((c) => { var _a; return c.id === ((_a = action.payload) === null || _a === void 0 ? void 0 : _a.selfId); });
+            return Object.assign(Object.assign({}, state), { id: action.payload.selfId, roleName: (client === null || client === void 0 ? void 0 : client.role.roleName) || "" });
+        });
+    },
+});
+localParticipantSlice.actions;
+const selectLocalParticipantRaw = (state) => state.localParticipant;
+const selectSelfId = (state) => state.localParticipant.id;
+const selectLocalParticipantRole = (state) => state.localParticipant.roleName;
+startAppListening({
+    actionCreator: toggleCameraEnabled,
+    effect: ({ payload }, { dispatch, getState }) => {
+        const { enabled } = payload;
+        const { isVideoEnabled } = selectLocalParticipantRaw(getState());
+        dispatch(doEnableVideo({ enabled: enabled || !isVideoEnabled }));
+    },
+});
+startAppListening({
+    actionCreator: toggleMicrophoneEnabled,
+    effect: ({ payload }, { dispatch, getState }) => {
+        const { enabled } = payload;
+        const { isAudioEnabled } = selectLocalParticipantRaw(getState());
+        dispatch(doEnableAudio({ enabled: enabled || !isAudioEnabled }));
+    },
+});
 
-const TYPES = {
-    CONNECTING: "connecting",
-    CONNECTION_FAILED: "connection_failed",
-    CONNECTION_SUCCESSFUL: "connection_successful",
-    CONNECTION_DISCONNECTED: "connection_disconnected",
-};
+const initialState$9 = {
+    status: "",
+    stream: null,
+    error: null,
+};
+/**
+ * Reducer
+ */
+const localScreenshareSlice = createSlice({
+    name: "localScreenshare",
+    initialState: initialState$9,
+    reducers: {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        stopScreenshare(state, action) {
+            return Object.assign(Object.assign({}, state), { status: "", stream: null });
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(doStartScreenshare.pending, (state) => {
+            return Object.assign(Object.assign({}, state), { status: "starting" });
+        });
+        builder.addCase(doStartScreenshare.fulfilled, (state, { payload: { stream } }) => {
+            return Object.assign(Object.assign({}, state), { status: "active", stream });
+        });
+        builder.addCase(doStartScreenshare.rejected, (state, { payload }) => {
+            return Object.assign(Object.assign({}, state), { error: payload, status: "", stream: null });
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const { stopScreenshare } = localScreenshareSlice.actions;
+const doStartScreenshare = createAppAsyncThunk("localScreenshare/doStartScreenshare", (_, { dispatch, getState, rejectWithValue }) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    try {
+        const state = getState();
+        const screenshareStream = selectLocalScreenshareStream(state);
+        if (screenshareStream) {
+            return { stream: screenshareStream };
+        }
+        const stream = yield navigator.mediaDevices.getDisplayMedia();
+        const onEnded = () => {
+            dispatch(doStopScreenshare());
+        };
+        if ("oninactive" in stream) {
+            // Chrome
+            stream.addEventListener("inactive", onEnded);
+        }
+        else {
+            // Firefox
+            (_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.addEventListener("ended", onEnded);
+        }
+        return { stream };
+    }
+    catch (error) {
+        return rejectWithValue(error);
+    }
+}));
+const doStopScreenshare = createAppThunk(() => (dispatch, getState) => {
+    const state = getState();
+    const screenshareStream = selectLocalScreenshareStream(state);
+    if (!screenshareStream) {
+        return;
+    }
+    screenshareStream.getTracks().forEach((track) => track.stop());
+    dispatch(stopScreenshare({ stream: screenshareStream }));
+});
+const selectLocalScreenshareStream = (state) => state.localScreenshare.stream;
+/**
+ * Reactors
+ */
+startAppListening({
+    actionCreator: localMediaStopped,
+    effect: (_, { getState }) => {
+        const state = getState();
+        const screenshareStream = selectLocalScreenshareStream(state);
+        if (!screenshareStream) {
+            return;
+        }
+        screenshareStream === null || screenshareStream === void 0 ? void 0 : screenshareStream.getTracks().forEach((track) => {
+            track.stop();
+        });
+    },
+});
 
-// Protocol enum used for the CLIENT (Make sure to keep it in sync with its server counterpart)
+const initialState$8 = {
+    data: null,
+    isFetching: false,
+    error: null,
+};
+const organizationSlice = createSlice({
+    initialState: initialState$8,
+    name: "organization",
+    reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(doOrganizationFetch.pending, (state) => {
+            return Object.assign(Object.assign({}, state), { isFetching: true });
+        });
+        builder.addCase(doOrganizationFetch.fulfilled, (state, action) => {
+            if (!action.payload)
+                return Object.assign(Object.assign({}, state), { isFetching: true });
+            return Object.assign(Object.assign({}, state), { isFetching: false, data: action.payload });
+        });
+        builder.addCase(doOrganizationFetch.rejected, (state) => {
+            return Object.assign(Object.assign({}, state), { isFetching: false, error: true });
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const doOrganizationFetch = createAppAsyncThunk("organization/doOrganizationFetch", (_, { extra, getState }) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const roomUrl = selectAppRoomUrl(getState());
+        const organization = yield extra.services.fetchOrganizationFromRoomUrl(roomUrl || "");
+        if (!organization) {
+            throw new Error("Invalid room url");
+        }
+        return organization;
+    }
+    catch (error) {
+        console.error(error);
+    }
+}));
+/**
+ * Selectors
+ */
+const selectOrganizationRaw = (state) => state.organization;
+const selectOrganizationId = (state) => { var _a; return (_a = state.organization.data) === null || _a === void 0 ? void 0 : _a.organizationId; };
+/**
+ * Reducers
+ */
+const selectShouldFetchOrganization = createSelector(selectAppWantsToJoin, selectOrganizationRaw, selectDeviceCredentialsRaw, (wantsToJoin, organization, deviceCredentials) => {
+    if (wantsToJoin &&
+        !organization.data &&
+        !organization.isFetching &&
+        !organization.error &&
+        !deviceCredentials.isFetching) {
+        return true;
+    }
+    return false;
+});
+createReactor([selectShouldFetchOrganization], ({ dispatch }, shouldFetchOrganization) => {
+    if (shouldFetchOrganization) {
+        dispatch(doOrganizationFetch());
+    }
+});
 
-// Requests: messages from the client to the server
-const PROTOCOL_REQUESTS = {
-    BLOCK_CLIENT: "block_client",
-    CLAIM_ROOM: "claim_room",
-    CLEAR_CHAT_HISTORY: "clear_chat_history",
-    ENABLE_AUDIO: "enable_audio",
-    ENABLE_VIDEO: "enable_video",
-    END_STREAM: "end_stream",
-    FETCH_MEDIASERVER_CONFIG: "fetch_mediaserver_config",
-    HANDLE_KNOCK: "handle_knock",
-    IDENTIFY_DEVICE: "identify_device",
-    INVITE_CLIENT_AS_MEMBER: "invite_client_as_member",
-    JOIN_ROOM: "join_room",
-    KICK_CLIENT: "kick_client",
-    KNOCK_ROOM: "knock_room",
-    LEAVE_ROOM: "leave_room",
-    SEND_CLIENT_METADATA: "send_client_metadata",
-    SET_LOCK: "set_lock",
-    SHARE_MEDIA: "share_media",
-    START_NEW_STREAM: "start_new_stream",
-    START_SCREENSHARE: "start_screenshare",
-    STOP_SCREENSHARE: "stop_screenshare",
-    START_URL_EMBED: "start_url_embed",
-    STOP_URL_EMBED: "stop_url_embed",
-    START_RECORDING: "start_recording",
-    STOP_RECORDING: "stop_recording",
-    SFU_TOKEN: "sfu_token",
+function createRtcEventAction(name) {
+    return createAction(`rtcConnection/event/${name}`);
+}
+const rtcEvents = {
+    rtcManagerCreated: createRtcEventAction("rtcManagerCreated"),
+    rtcManagerDestroyed: createRtcEventAction("rtcManagerDestroyed"),
+    streamAdded: createRtcEventAction("streamAdded"),
+};
+
+const NON_PERSON_ROLES = ["recorder", "streamer"];
+/**
+ * State mapping utils
+ */
+function createParticipant(client, newJoiner = false) {
+    const { streams } = client, rest = __rest(client, ["streams"]);
+    return Object.assign(Object.assign({}, rest), { stream: null, streams: streams.map((streamId) => ({ id: streamId, state: newJoiner ? "new_accept" : "to_accept" })), isLocalParticipant: false, presentationStream: null, newJoiner });
+}
+function findParticipant(state, participantId) {
+    const index = state.remoteParticipants.findIndex((c) => c.id === participantId);
+    return { index, participant: state.remoteParticipants[index] };
+}
+function updateParticipant(state, participantId, updates) {
+    const { participant, index } = findParticipant(state, participantId);
+    if (!participant) {
+        console.error(`Did not find client for update ${participantId}`);
+        return state;
+    }
+    return Object.assign(Object.assign({}, state), { remoteParticipants: [
+            ...state.remoteParticipants.slice(0, index),
+            Object.assign(Object.assign({}, participant), updates),
+            ...state.remoteParticipants.slice(index + 1),
+        ] });
+}
+function addParticipant(state, participant) {
+    const { participant: foundParticipant } = findParticipant(state, participant.id);
+    if (foundParticipant) {
+        console.warn(`Client already existing ${participant.id}. Ignoring`);
+        return state;
+    }
+    return Object.assign(Object.assign({}, state), { remoteParticipants: [...state.remoteParticipants, participant] });
+}
+function updateStreamState(state, participantId, streamId, state_) {
+    const { participant } = findParticipant(state, participantId);
+    if (!participant) {
+        console.error(`No client ${participantId} found to update stream ${streamId} ${state_}`);
+        return state;
+    }
+    const idIdx = participant.streams.findIndex((s) => s.id === streamId);
+    const streams = [...participant.streams];
+    streams[idIdx] = Object.assign(Object.assign({}, streams[idIdx]), { state: state_ });
+    return updateParticipant(state, participantId, { streams });
+}
+function removeClient(state, participantId) {
+    return Object.assign(Object.assign({}, state), { remoteParticipants: state.remoteParticipants.filter((c) => c.id !== participantId) });
+}
+function addStreamId(state, participantId, streamId) {
+    const { participant } = findParticipant(state, participantId);
+    if (!participant || participant.streams.find((s) => s.id === streamId)) {
+        console.warn(`No participant ${participantId} or stream ${streamId} already exists`);
+        return state;
+    }
+    return updateParticipant(state, participantId, {
+        streams: [...participant.streams, { id: streamId, state: "to_accept" }],
+    });
+}
+function removeStreamId(state, participantId, streamId) {
+    var _a, _b;
+    const { participant } = findParticipant(state, participantId);
+    if (!participant) {
+        console.error(`No participant ${participantId} found to remove stream ${streamId}`);
+        return state;
+    }
+    const currentStreamId = participant.stream && participant.stream.id;
+    const presentationId = ((_a = participant.presentationStream) === null || _a === void 0 ? void 0 : _a.inboundId) || ((_b = participant.presentationStream) === null || _b === void 0 ? void 0 : _b.id);
+    const idIdx = participant.streams.findIndex((s) => s.id === streamId);
+    return updateParticipant(state, participantId, Object.assign(Object.assign({ streams: participant.streams.filter((_, i) => i !== idIdx) }, (currentStreamId === streamId && { stream: null })), (presentationId === streamId && { presentationStream: null })));
+}
+function addStream(state, payload) {
+    const { clientId, stream, streamType } = payload;
+    let { streamId } = payload;
+    const { participant } = findParticipant(state, clientId);
+    if (!participant) {
+        console.error(`Did not find client ${clientId} for adding stream`);
+        return state;
+    }
+    const remoteParticipants = state.remoteParticipants;
+    if (!streamId) {
+        streamId = stream.id;
+    }
+    const remoteParticipant = remoteParticipants.find((p) => p.id === clientId);
+    if (!remoteParticipant) {
+        return state;
+    }
+    const remoteParticipantStream = remoteParticipant.streams.find((s) => s.id === streamId);
+    if ((remoteParticipant.stream &&
+        (remoteParticipant.stream.id === streamId || remoteParticipant.stream.inboundId === streamId)) ||
+        (!remoteParticipant.stream && streamType === "webcam") ||
+        (!remoteParticipant.stream && !streamType && !remoteParticipantStream)) {
+        return updateParticipant(state, clientId, { stream });
+    }
+    // screen share
+    return updateParticipant(state, clientId, {
+        presentationStream: stream,
+    });
+}
+const initialState$7 = {
+    remoteParticipants: [],
+};
+const remoteParticipantsSlice = createSlice({
+    name: "remoteParticipants",
+    initialState: initialState$7,
+    reducers: {
+        streamStatusUpdated: (state, action) => {
+            let newState = state;
+            for (const { clientId, streamId, state } of action.payload) {
+                newState = updateStreamState(newState, clientId, streamId, state);
+            }
+            return newState;
+        },
+        participantStreamAdded: (state, action) => {
+            const { clientId, stream } = action.payload;
+            return updateParticipant(state, clientId, {
+                stream,
+            });
+        },
+        participantStreamIdAdded: (state, action) => {
+            const { clientId, streamId } = action.payload;
+            return addStreamId(state, clientId, streamId);
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(signalEvents.roomJoined, (state, action) => {
+            var _a;
+            if (!((_a = action.payload) === null || _a === void 0 ? void 0 : _a.room))
+                return state;
+            const selfId = action.payload.selfId;
+            const { clients } = action.payload.room;
+            return Object.assign(Object.assign({}, state), { remoteParticipants: clients
+                    .filter((c) => c.id !== selfId)
+                    .filter((c) => !NON_PERSON_ROLES.includes(c.role.roleName))
+                    .map((c) => createParticipant(c)) });
+        });
+        builder.addCase(rtcEvents.streamAdded, (state, action) => {
+            return addStream(state, action.payload);
+        });
+        builder.addCase(signalEvents.newClient, (state, action) => {
+            const { client } = action.payload;
+            if (NON_PERSON_ROLES.includes(client.role.roleName)) {
+                return state;
+            }
+            return addParticipant(state, createParticipant(client, true));
+        });
+        builder.addCase(signalEvents.clientLeft, (state, action) => {
+            const { clientId } = action.payload;
+            return removeClient(state, clientId);
+        });
+        builder.addCase(signalEvents.audioEnabled, (state, action) => {
+            const { clientId, isAudioEnabled } = action.payload;
+            return updateParticipant(state, clientId, {
+                isAudioEnabled,
+            });
+        });
+        builder.addCase(signalEvents.videoEnabled, (state, action) => {
+            const { clientId, isVideoEnabled } = action.payload;
+            return updateParticipant(state, clientId, {
+                isVideoEnabled,
+            });
+        });
+        builder.addCase(signalEvents.clientMetadataReceived, (state, action) => {
+            const { clientId, displayName } = action.payload.payload;
+            return updateParticipant(state, clientId, {
+                displayName,
+            });
+        });
+        builder.addCase(signalEvents.screenshareStarted, (state, action) => {
+            const { clientId, streamId } = action.payload;
+            return addStreamId(state, clientId, streamId);
+        });
+        builder.addCase(signalEvents.screenshareStopped, (state, action) => {
+            const { clientId, streamId } = action.payload;
+            return removeStreamId(state, clientId, streamId);
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const { participantStreamAdded, participantStreamIdAdded, streamStatusUpdated } = remoteParticipantsSlice.actions;
+const selectRemoteParticipants = (state) => state.remoteParticipants.remoteParticipants;
+const selectScreenshares = createSelector(selectLocalScreenshareStream, selectRemoteParticipants, (localScreenshareStream, remoteParticipants) => {
+    const screenshares = [];
+    if (localScreenshareStream) {
+        screenshares.push({
+            id: localScreenshareStream.id,
+            participantId: "local",
+            hasAudioTrack: localScreenshareStream.getAudioTracks().length > 0,
+            stream: localScreenshareStream,
+            isLocal: true,
+        });
+    }
+    for (const participant of remoteParticipants) {
+        if (participant.presentationStream) {
+            screenshares.push({
+                id: participant.presentationStream.id,
+                participantId: participant.id,
+                hasAudioTrack: participant.presentationStream.getAudioTracks().length > 0,
+                stream: participant.presentationStream,
+                isLocal: false,
+            });
+        }
+    }
+    return screenshares;
+});
+
+const initialState$6 = {
+    status: "initializing",
+    error: null,
+};
+const roomConnectionSlice = createSlice({
+    initialState: initialState$6,
+    name: "roomConnection",
+    reducers: {
+        connectionStatusChanged: (state, action) => {
+            return Object.assign(Object.assign({}, state), { status: action.payload });
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(signalEvents.roomJoined, (state, action) => {
+            //TODO: Handle error
+            const { error, isLocked } = action.payload;
+            if (error === "room_locked" && isLocked) {
+                return Object.assign(Object.assign({}, state), { status: "room_locked" });
+            }
+            return Object.assign(Object.assign({}, state), { status: "connected" });
+        });
+        builder.addCase(socketReconnecting, (state) => {
+            return Object.assign(Object.assign({}, state), { status: "reconnect" });
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const { connectionStatusChanged } = roomConnectionSlice.actions;
+const doKnockRoom = createAppThunk(() => (dispatch, getState) => {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    const roomName = selectAppRoomName(state);
+    const roomKey = selectAppRoomKey(state);
+    const displayName = selectAppDisplayName(state);
+    const sdkVersion = selectAppSdkVersion(state);
+    const externalId = selectAppExternalId(state);
+    const organizationId = selectOrganizationId(state);
+    socket === null || socket === void 0 ? void 0 : socket.emit("knock_room", {
+        avatarUrl: null,
+        config: {
+            isAudioEnabled: true,
+            isVideoEnabled: true,
+        },
+        deviceCapabilities: { canScreenshare: true },
+        displayName,
+        isCoLocated: false,
+        isDevicePermissionDenied: false,
+        kickFromOtherRooms: false,
+        organizationId,
+        roomKey,
+        roomName,
+        selfId: "",
+        userAgent: `browser-sdk:${sdkVersion || "unknown"}`,
+        externalId,
+    });
+    dispatch(connectionStatusChanged("knocking"));
+});
+const doConnectRoom = createAppThunk(() => (dispatch, getState) => {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    const roomName = selectAppRoomName(state);
+    const roomKey = selectAppRoomKey(state);
+    const displayName = selectAppDisplayName(state);
+    const sdkVersion = selectAppSdkVersion(state);
+    const externalId = selectAppExternalId(state);
+    const organizationId = selectOrganizationId(state);
+    const isCameraEnabled = selectIsCameraEnabled(getState());
+    const isMicrophoneEnabled = selectIsMicrophoneEnabled(getState());
+    const selfId = selectSelfId(getState());
+    socket === null || socket === void 0 ? void 0 : socket.emit("join_room", {
+        avatarUrl: null,
+        config: {
+            isAudioEnabled: isMicrophoneEnabled,
+            isVideoEnabled: isCameraEnabled,
+        },
+        deviceCapabilities: { canScreenshare: true },
+        displayName,
+        isCoLocated: false,
+        isDevicePermissionDenied: false,
+        kickFromOtherRooms: false,
+        organizationId,
+        roomKey,
+        roomName,
+        selfId,
+        userAgent: `browser-sdk:${sdkVersion || "unknown"}`,
+        externalId,
+    });
+    dispatch(connectionStatusChanged("connecting"));
+});
+const selectRoomConnectionStatus = (state) => state.roomConnection.status;
+/**
+ * Reactors
+ */
+const selectShouldConnectRoom = createSelector([selectOrganizationId, selectRoomConnectionStatus, selectSignalConnectionDeviceIdentified, selectLocalMediaStatus], (hasOrganizationIdFetched, roomConnectionStatus, signalConnectionDeviceIdentified, localMediaStatus) => {
+    if (localMediaStatus === "started" &&
+        signalConnectionDeviceIdentified &&
+        !!hasOrganizationIdFetched &&
+        ["initializing", "reconnect"].includes(roomConnectionStatus)) {
+        return true;
+    }
+    return false;
+});
+createReactor([selectShouldConnectRoom], ({ dispatch }, shouldConnectRoom) => {
+    if (shouldConnectRoom) {
+        dispatch(doConnectRoom());
+    }
+});
+startAppListening({
+    actionCreator: signalEvents.knockHandled,
+    effect: ({ payload }, { dispatch, getState }) => {
+        const { clientId, resolution } = payload;
+        const state = getState();
+        const selfId = selectSelfId(state);
+        if (clientId !== selfId) {
+            return;
+        }
+        if (resolution === "accepted") {
+            dispatch(setRoomKey(payload.metadata.roomKey));
+            dispatch(doConnectRoom());
+        }
+        else if (resolution === "rejected") {
+            dispatch(connectionStatusChanged("knock_rejected"));
+        }
+    },
+});
+
+const EVENTS = {
+    CLIENT_CONNECTION_STATUS_CHANGED: "client_connection_status_changed",
+    STREAM_ADDED: "stream_added",
+    RTC_MANAGER_CREATED: "rtc_manager_created",
+    RTC_MANAGER_DESTROYED: "rtc_manager_destroyed",
+    LOCAL_STREAM_TRACK_ADDED: "local_stream_track_added",
+    LOCAL_STREAM_TRACK_REMOVED: "local_stream_track_removed",
+    REMOTE_STREAM_TRACK_ADDED: "remote_stream_track_added",
+    REMOTE_STREAM_TRACK_REMOVED: "remote_stream_track_removed",
+};
+
+const TYPES = {
+    CONNECTING: "connecting",
+    CONNECTION_FAILED: "connection_failed",
+    CONNECTION_SUCCESSFUL: "connection_successful",
+    CONNECTION_DISCONNECTED: "connection_disconnected",
+};
+
+// Protocol enum used for the CLIENT (Make sure to keep it in sync with its server counterpart)
+
+// Requests: messages from the client to the server
+const PROTOCOL_REQUESTS = {
+    BLOCK_CLIENT: "block_client",
+    CLAIM_ROOM: "claim_room",
+    CLEAR_CHAT_HISTORY: "clear_chat_history",
+    ENABLE_AUDIO: "enable_audio",
+    ENABLE_VIDEO: "enable_video",
+    END_STREAM: "end_stream",
+    FETCH_MEDIASERVER_CONFIG: "fetch_mediaserver_config",
+    HANDLE_KNOCK: "handle_knock",
+    IDENTIFY_DEVICE: "identify_device",
+    INVITE_CLIENT_AS_MEMBER: "invite_client_as_member",
+    JOIN_ROOM: "join_room",
+    KICK_CLIENT: "kick_client",
+    KNOCK_ROOM: "knock_room",
+    LEAVE_ROOM: "leave_room",
+    SEND_CLIENT_METADATA: "send_client_metadata",
+    SET_LOCK: "set_lock",
+    SHARE_MEDIA: "share_media",
+    START_NEW_STREAM: "start_new_stream",
+    START_SCREENSHARE: "start_screenshare",
+    STOP_SCREENSHARE: "stop_screenshare",
+    START_URL_EMBED: "start_url_embed",
+    STOP_URL_EMBED: "stop_url_embed",
+    START_RECORDING: "start_recording",
+    STOP_RECORDING: "stop_recording",
+    SFU_TOKEN: "sfu_token",
 };
 
 // Responses: messages from the server to the client, in response to requests
@@ -1000,187 +2348,61 @@ class RtcStream {
     }
 }
 
-const DEFAULT_SOCKET_PATH = "/protocol/socket.io/v4";
-
 /**
- * Wrapper class that extends the Socket.IO client library.
+ * Detect mic issue which seems to happen on OSX when the computer is woken up and sleeping
+ * frequently. A browser restart fixes this.
+ *
+ * Should be called after the connection has been up for a while.
+ *
+ * @see Bug report {@link https://bugs.chromium.org/p/webrtc/issues/detail?id=4799}
  */
-class ServerSocket {
-    constructor(hostName, optionsOverrides) {
-        this._socket = io(hostName, {
-            path: DEFAULT_SOCKET_PATH,
-            randomizationFactor: 0.5,
-            reconnectionDelay: 250,
-            reconnectionDelayMax: 5000,
-            timeout: 5000,
-            transports: ["websocket"],
-            withCredentials: true,
-            ...optionsOverrides,
-        });
-        this._socket.io.on("reconnect", () => {
-            this._socket.sendBuffer = [];
-        });
-        this._socket.io.on("reconnect_attempt", () => {
-            if (this._wasConnectedUsingWebsocket) {
-                this._socket.io.opts.transports = ["websocket"];
-                // only fallback to polling if not safari
-                // safari doesn't support cross doamin cookies making load-balancer stickiness not work
-                // and if socket.io reconnects to another signal instance with polling it will fail
-                // remove if we move signal to a whereby.com subdomain
-                if (adapter.browserDetails.browser !== "safari") delete this._wasConnectedUsingWebsocket;
-            } else {
-                this._socket.io.opts.transports = ["websocket", "polling"];
-            }
-        });
-        this._socket.on("connect", () => {
-            const transport = this.getTransport();
-            if (transport === "websocket") {
-                this._wasConnectedUsingWebsocket = true;
-            }
-        });
-    }
-
-    connect() {
-        if (this.isConnected() || this.isConnecting()) {
-            return;
-        }
-        this._socket.open();
-    }
-
-    disconnect() {
-        this._socket.disconnect();
+function detectMicrophoneNotWorking(pc) {
+    if (
+        adapter.browserDetails.browser !== "chrome" ||
+        adapter.browserDetails.browser < 58 || // legacy getStats is no longer supported.
+        pc.signalingState === "closed"
+    ) {
+        return Promise.resolve(false);
     }
-
-    disconnectOnConnect() {
-        this._socket.once("connect", () => {
-            this._socket.disconnect();
+    const sendingAudio = pc.getSenders().some((sender) => sender.track && sender.track.kind === "audio");
+    const receivingAudio = pc.getReceivers().some((receiver) => receiver.track && receiver.track.kind === "audio");
+    return pc.getStats(null).then((result) => {
+        let microphoneFailed = false;
+        result.forEach((report) => {
+            if (
+                report.type === "outbound-rtp" &&
+                (report.kind === "audio" || report.mediaType === "audio") &&
+                sendingAudio
+            ) {
+                if (report.bytesSent === 0) {
+                    microphoneFailed = "outbound";
+                }
+            } else if (
+                report.type === "inbound-rtp" &&
+                (report.kind === "audio" || report.mediaType === "audio") &&
+                receivingAudio
+            ) {
+                if (report.bytesReceived === 0) {
+                    microphoneFailed = "inbound";
+                }
+            }
         });
-    }
-
-    emit() {
-        this._socket.emit.apply(this._socket, arguments);
-    }
-
-    emitIfConnected(eventName, data) {
-        if (!this.isConnected()) {
-            return;
-        }
-        this.emit(eventName, data);
-    }
+        return microphoneFailed;
+    });
+}
 
-    getTransport() {
-        return (
-            this._socket &&
-            this._socket.io &&
-            this._socket.io.engine &&
-            this._socket.io.engine.transport &&
-            this._socket.io.engine.transport.name
-        );
-    }
+var rtcManagerEvents = {
+    CAMERA_NOT_WORKING: "camera_not_working",
+    CONNECTION_BLOCKED_BY_NETWORK: "connection_blocked_by_network",
+    MICROPHONE_NOT_WORKING: "microphone_not_working",
+    MICROPHONE_STOPPED_WORKING: "microphone_stopped_working",
+    SFU_CONNECTION_CLOSED: "sfu_connection_closed",
+    COLOCATION_SPEAKER: "colocation_speaker",
+    DOMINANT_SPEAKER: "dominant_speaker",
+};
 
-    getManager() {
-        return this._socket.io;
-    }
-
-    isConnecting() {
-        return this._socket && this._socket.connecting;
-    }
-
-    isConnected() {
-        return this._socket && this._socket.connected;
-    }
-
-    /**
-     * Register a new event handler.
-     *
-     * @param {string} eventName - Name of the event to listen for.
-     * @param {function} handler - The callback function that should be called for the event.
-     * @returns {function} Function to deregister the listener.
-     */
-    on(eventName, handler) {
-        this._socket.on(eventName, handler);
-
-        return () => {
-            this._socket.off(eventName, handler);
-        };
-    }
-
-    /**
-     * Register a new event handler to be triggered only once.
-     *
-     * @param {string} eventName - Name of the event to listen for.
-     * @param {function} handler - The function that should be called for the event.
-     */
-    once(eventName, handler) {
-        this._socket.once(eventName, handler);
-    }
-
-    /**
-     * Deregister an event handler.
-     *
-     * @param {string} eventName - Name of the event the handler is registered for.
-     * @param {function} handler - The callback that will be deregistered.
-     */
-    off(eventName, handler) {
-        this._socket.off(eventName, handler);
-    }
-}
-
-/**
- * Detect mic issue which seems to happen on OSX when the computer is woken up and sleeping
- * frequently. A browser restart fixes this.
- *
- * Should be called after the connection has been up for a while.
- *
- * @see Bug report {@link https://bugs.chromium.org/p/webrtc/issues/detail?id=4799}
- */
-function detectMicrophoneNotWorking(pc) {
-    if (
-        adapter.browserDetails.browser !== "chrome" ||
-        adapter.browserDetails.browser < 58 || // legacy getStats is no longer supported.
-        pc.signalingState === "closed"
-    ) {
-        return Promise.resolve(false);
-    }
-    const sendingAudio = pc.getSenders().some((sender) => sender.track && sender.track.kind === "audio");
-    const receivingAudio = pc.getReceivers().some((receiver) => receiver.track && receiver.track.kind === "audio");
-    return pc.getStats(null).then((result) => {
-        let microphoneFailed = false;
-        result.forEach((report) => {
-            if (
-                report.type === "outbound-rtp" &&
-                (report.kind === "audio" || report.mediaType === "audio") &&
-                sendingAudio
-            ) {
-                if (report.bytesSent === 0) {
-                    microphoneFailed = "outbound";
-                }
-            } else if (
-                report.type === "inbound-rtp" &&
-                (report.kind === "audio" || report.mediaType === "audio") &&
-                receivingAudio
-            ) {
-                if (report.bytesReceived === 0) {
-                    microphoneFailed = "inbound";
-                }
-            }
-        });
-        return microphoneFailed;
-    });
-}
-
-var rtcManagerEvents = {
-    CAMERA_NOT_WORKING: "camera_not_working",
-    CONNECTION_BLOCKED_BY_NETWORK: "connection_blocked_by_network",
-    MICROPHONE_NOT_WORKING: "microphone_not_working",
-    MICROPHONE_STOPPED_WORKING: "microphone_stopped_working",
-    SFU_CONNECTION_CLOSED: "sfu_connection_closed",
-    COLOCATION_SPEAKER: "colocation_speaker",
-    DOMINANT_SPEAKER: "dominant_speaker",
-};
-
-const browserName$3 = adapter.browserDetails.browser;
-const browserVersion$1 = adapter.browserDetails.version;
+const browserName$3 = adapter.browserDetails.browser;
+const browserVersion$1 = adapter.browserDetails.version;
 
 function setCodecPreferenceSDP(sdp, vp9On, redOn) {
     try {
@@ -5803,6 +7025,580 @@ class RtcManagerDispatcher {
     }
 }
 
+const createWebRtcEmitter = (dispatch) => {
+    return {
+        emit: (eventName, data) => {
+            if (eventName === "rtc_manager_created") {
+                dispatch(doRtcManagerCreated(data));
+            }
+            else if (eventName === "stream_added") {
+                dispatch(rtcEvents.streamAdded(data));
+            }
+            else if (eventName === "rtc_manager_destroyed") {
+                dispatch(rtcManagerDestroyed());
+            }
+            else ;
+        },
+    };
+};
+const initialState$5 = {
+    dispatcherCreated: false,
+    error: null,
+    isCreatingDispatcher: false,
+    reportedStreamResolutions: {},
+    rtcManager: null,
+    rtcManagerDispatcher: null,
+    rtcManagerInitialized: false,
+    status: "",
+    isAcceptingStreams: false,
+};
+const rtcConnectionSlice = createSlice({
+    name: "rtcConnection",
+    initialState: initialState$5,
+    reducers: {
+        isAcceptingStreams: (state, action) => {
+            return Object.assign(Object.assign({}, state), { isAcceptingStreams: action.payload });
+        },
+        resolutionReported: (state, action) => {
+            const { streamId, width, height } = action.payload;
+            return Object.assign(Object.assign({}, state), { reportedStreamResolutions: Object.assign(Object.assign({}, state.reportedStreamResolutions), { [streamId]: { width, height } }) });
+        },
+        rtcDisconnected: () => {
+            return Object.assign({}, initialState$5);
+        },
+        rtcDispatcherCreated: (state, action) => {
+            return Object.assign(Object.assign({}, state), { dispatcherCreated: true, rtcManagerDispatcher: action.payload });
+        },
+        rtcManagerCreated: (state, action) => {
+            return Object.assign(Object.assign({}, state), { rtcManager: action.payload, status: "ready" });
+        },
+        rtcManagerDestroyed: (state) => {
+            return Object.assign(Object.assign({}, state), { rtcManager: null });
+        },
+        rtcManagerInitialized: (state) => {
+            return Object.assign(Object.assign({}, state), { rtcManagerInitialized: true });
+        },
+    },
+    extraReducers: (builder) => {
+        builder.addCase(socketReconnecting, (state) => {
+            return Object.assign(Object.assign({}, state), { status: "reconnect" });
+        });
+        builder.addCase(signalEvents.roomJoined, (state) => {
+            return Object.assign(Object.assign({}, state), { status: state.status === "reconnect" ? "ready" : state.status });
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const { resolutionReported, rtcDispatcherCreated, rtcDisconnected, rtcManagerCreated, rtcManagerDestroyed, rtcManagerInitialized, isAcceptingStreams, } = rtcConnectionSlice.actions;
+const doConnectRtc = createAppThunk(() => (dispatch, getState) => {
+    const state = getState();
+    const socket = selectSignalConnectionRaw(state).socket;
+    const dispatcher = selectRtcConnectionRaw(state).rtcManagerDispatcher;
+    const isCameraEnabled = selectIsCameraEnabled(state);
+    const isMicrophoneEnabled = selectIsMicrophoneEnabled(state);
+    if (dispatcher) {
+        return;
+    }
+    const webrtcProvider = {
+        getMediaConstraints: () => ({
+            audio: isMicrophoneEnabled,
+            video: isCameraEnabled,
+        }),
+        deferrable(clientId) {
+            return !clientId;
+        },
+    };
+    const rtcManagerDispatcher = new RtcManagerDispatcher({
+        emitter: createWebRtcEmitter(dispatch),
+        serverSocket: socket,
+        logger: console,
+        webrtcProvider,
+        features: {
+            lowDataModeEnabled: false,
+            sfuServerOverrideHost: undefined,
+            turnServerOverrideHost: undefined,
+            useOnlyTURN: undefined,
+            vp9On: false,
+            h264On: false,
+            simulcastScreenshareOn: false,
+        },
+    });
+    dispatch(rtcDispatcherCreated(rtcManagerDispatcher));
+});
+const doDisconnectRtc = createAppThunk(() => (dispatch, getState) => {
+    const { rtcManager } = selectRtcConnectionRaw(getState());
+    if (rtcManager) {
+        rtcManager.disconnectAll();
+    }
+    dispatch(rtcDisconnected());
+});
+const doHandleAcceptStreams = createAppThunk((payload) => (dispatch, getState) => {
+    var _a;
+    dispatch(isAcceptingStreams(true));
+    const state = getState();
+    const rtcManager = selectRtcConnectionRaw(state).rtcManager;
+    const remoteParticipants = selectRemoteParticipants(state);
+    if (!rtcManager) {
+        throw new Error("No rtc manager");
+    }
+    const activeBreakout = false;
+    const shouldAcceptNewClients = (_a = rtcManager.shouldAcceptStreamsFromBothSides) === null || _a === void 0 ? void 0 : _a.call(rtcManager);
+    const updates = [];
+    for (const { clientId, streamId, state } of payload) {
+        const participant = remoteParticipants.find((p) => p.id === clientId);
+        if (!participant)
+            continue;
+        if (state === "to_accept" ||
+            (state === "new_accept" && shouldAcceptNewClients) ||
+            (state === "old_accept" && !shouldAcceptNewClients) // these are done to enable broadcast in legacy/p2p
+        ) {
+            rtcManager.acceptNewStream({
+                streamId: streamId === "0" ? clientId : streamId,
+                clientId,
+                shouldAddLocalVideo: streamId === "0",
+                activeBreakout,
+            });
+        }
+        else if (state === "new_accept" || state === "old_accept") ;
+        else if (state === "to_unaccept") {
+            rtcManager === null || rtcManager === void 0 ? void 0 : rtcManager.disconnect(streamId === "0" ? clientId : streamId, activeBreakout);
+        }
+        else if (state !== "done_accept") {
+            continue;
+            // console.warn(`Stream state not handled: ${state} for ${clientId}-${streamId}`);
+        }
+        else ;
+        updates.push({ clientId, streamId, state: state.replace(/to_|new_|old_/, "done_") });
+    }
+    dispatch(streamStatusUpdated(updates));
+    dispatch(isAcceptingStreams(false));
+});
+const doRtcReportStreamResolution = createAppThunk(({ streamId, width, height }) => (dispatch, getState) => {
+    const { reportedStreamResolutions, rtcManager } = selectRtcConnectionRaw(getState());
+    const localStream = selectLocalMediaStream(getState());
+    if (!rtcManager || (localStream === null || localStream === void 0 ? void 0 : localStream.id) === streamId) {
+        return;
+    }
+    const old = reportedStreamResolutions[streamId];
+    if (!old || old.width !== width || old.height !== height) {
+        rtcManager.updateStreamResolution(streamId, null, { width: width || 1, height: height || 1 });
+    }
+    dispatch(resolutionReported({ streamId, width, height }));
+});
+const doRtcManagerCreated = createAppThunk((payload) => (dispatch) => {
+    const { rtcManager } = payload;
+    dispatch(rtcManagerCreated(rtcManager));
+});
+const doRtcManagerInitialize = createAppThunk(() => (dispatch, getState) => {
+    const localMediaStream = selectLocalMediaStream(getState());
+    const rtcManager = selectRtcConnectionRaw(getState()).rtcManager;
+    const isCameraEnabled = selectIsCameraEnabled(getState());
+    const isMicrophoneEnabled = selectIsMicrophoneEnabled(getState());
+    if (localMediaStream && rtcManager) {
+        rtcManager.addNewStream("0", localMediaStream, !isMicrophoneEnabled, !isCameraEnabled);
+    }
+    dispatch(rtcManagerInitialized());
+});
+/**
+ * Selectors
+ */
+const selectRtcConnectionRaw = (state) => state.rtcConnection;
+const selectRtcManagerInitialized = (state) => state.rtcConnection.rtcManagerInitialized;
+const selectRtcManager = (state) => state.rtcConnection.rtcManager;
+const selectRtcDispatcherCreated = (state) => state.rtcConnection.dispatcherCreated;
+const selectRtcIsCreatingDispatcher = (state) => state.rtcConnection.isCreatingDispatcher;
+const selectRtcStatus = (state) => state.rtcConnection.status;
+const selectIsAcceptingStreams = (state) => state.rtcConnection.isAcceptingStreams;
+/**
+ * Reactors
+ */
+startAppListening({
+    actionCreator: doSetDevice.fulfilled,
+    effect: ({ payload }, { getState }) => {
+        const { replacedTracks } = payload;
+        const { rtcManager } = selectRtcConnectionRaw(getState());
+        const stream = selectLocalMediaStream(getState());
+        const replace = (kind, oldTrack) => {
+            const track = stream === null || stream === void 0 ? void 0 : stream.getTracks().find((t) => t.kind === kind);
+            return track && (rtcManager === null || rtcManager === void 0 ? void 0 : rtcManager.replaceTrack(oldTrack, track));
+        };
+        replacedTracks === null || replacedTracks === void 0 ? void 0 : replacedTracks.forEach((t) => {
+            replace(t.kind, t);
+        });
+    },
+});
+startAppListening({
+    actionCreator: doStartScreenshare.fulfilled,
+    effect: ({ payload }, { getState }) => {
+        const { stream } = payload;
+        const { rtcManager } = selectRtcConnectionRaw(getState());
+        rtcManager === null || rtcManager === void 0 ? void 0 : rtcManager.addNewStream(stream.id, stream, false, true);
+    },
+});
+startAppListening({
+    actionCreator: stopScreenshare,
+    effect: ({ payload }, { getState }) => {
+        const { stream } = payload;
+        const { rtcManager } = selectRtcConnectionRaw(getState());
+        rtcManager === null || rtcManager === void 0 ? void 0 : rtcManager.removeStream(stream.id, stream, null);
+    },
+});
+const selectShouldConnectRtc = createSelector(selectRtcDispatcherCreated, selectRtcIsCreatingDispatcher, selectSignalConnectionSocket, (dispatcherCreated, isCreatingDispatcher, signalSocket) => {
+    if (!dispatcherCreated && !isCreatingDispatcher && signalSocket) {
+        return true;
+    }
+    return false;
+});
+createReactor([selectShouldConnectRtc], ({ dispatch }, shouldConnectRtc) => {
+    if (shouldConnectRtc) {
+        dispatch(doConnectRtc());
+    }
+});
+const selectShouldInitializeRtc = createSelector(selectRtcManager, selectRtcManagerInitialized, selectLocalMediaStatus, (rtcManager, rtcManagerInitialized, localMediaStatus) => {
+    if (localMediaStatus === "started" && rtcManager && !rtcManagerInitialized) {
+        return true;
+    }
+    return false;
+});
+createReactor([selectShouldInitializeRtc], ({ dispatch }, shouldInitializeRtc) => {
+    if (shouldInitializeRtc) {
+        dispatch(doRtcManagerInitialize());
+    }
+});
+// Disonnect and clean up
+const selectShouldDisconnectRtc = createSelector(selectRtcStatus, selectAppWantsToJoin, (status, wantsToJoin) => {
+    if (!wantsToJoin && !["", "disconnected"].includes(status)) {
+        return true;
+    }
+    return false;
+});
+createReactor([selectShouldDisconnectRtc], ({ dispatch }, shouldDisconnectRtc) => {
+    if (shouldDisconnectRtc) {
+        dispatch(doDisconnectRtc());
+    }
+});
+// react accept streams
+const selectStreamsToAccept = createSelector(selectRtcStatus, selectRemoteParticipants, (rtcStatus, remoteParticipants) => {
+    if (rtcStatus !== "ready") {
+        return [];
+    }
+    const upd = [];
+    // This should actually use remoteClientViews for its handling
+    for (const client of remoteParticipants) {
+        const { streams, id: clientId, newJoiner } = client;
+        for (let i = 0; i < streams.length; i++) {
+            const streamId = streams[i].id;
+            const state = streams[i].state;
+            {
+                // Already connected
+                if (state === "done_accept")
+                    continue;
+                upd.push({
+                    clientId,
+                    streamId,
+                    state: `${newJoiner && streamId === "0" ? "new" : "to"}_accept`,
+                });
+            }
+        }
+    }
+    return upd;
+});
+createReactor([selectStreamsToAccept, selectIsAcceptingStreams], ({ dispatch }, streamsToAccept, isAcceptingStreams) => {
+    if (0 < streamsToAccept.length && !isAcceptingStreams) {
+        dispatch(doHandleAcceptStreams(streamsToAccept));
+    }
+});
+
+const rtcAnalyticsCustomEvents = {
+    audioEnabled: {
+        action: doEnableAudio.fulfilled,
+        rtcEventName: "audioEnabled",
+        getValue: (state) => selectIsMicrophoneEnabled(state),
+        getOutput: (value) => ({ enabled: value }),
+    },
+    videoEnabled: {
+        action: doEnableVideo.fulfilled,
+        rtcEventName: "videoEnabled",
+        getValue: (state) => selectIsCameraEnabled(state),
+        getOutput: (value) => ({ enabled: value }),
+    },
+    localStream: {
+        action: doSetDevice.fulfilled,
+        rtcEventName: "localStream",
+        getValue: (state) => {
+            var _a;
+            return (_a = selectLocalMediaStream(state)) === null || _a === void 0 ? void 0 : _a.getTracks().map((track) => ({ id: track.id, kind: track.kind, label: track.label }));
+        },
+        getOutput: (value) => ({ stream: value }),
+    },
+    localScreenshareStream: {
+        action: doStartScreenshare.fulfilled,
+        rtcEventName: "localScreenshareStream",
+        getValue: (state) => {
+            var _a;
+            return (_a = selectLocalScreenshareStream(state)) === null || _a === void 0 ? void 0 : _a.getTracks().map((track) => ({ id: track.id, kind: track.kind, label: track.label }));
+        },
+        getOutput: (value) => ({ tracks: value }),
+    },
+    localScreenshareStreamStopped: {
+        action: stopScreenshare,
+        rtcEventName: "localScreenshareStream",
+        getValue: () => () => null,
+        getOutput: () => ({}),
+    },
+    displayName: {
+        action: doSetDisplayName.fulfilled,
+        rtcEventName: "displayName",
+        getValue: (state) => selectAppDisplayName(state),
+        getOutput: (value) => ({ displayName: value }),
+    },
+    clientId: {
+        action: null,
+        rtcEventName: "clientId",
+        getValue: (state) => selectSelfId(state),
+        getOutput: (value) => ({ clientId: value }),
+    },
+    deviceId: {
+        action: null,
+        rtcEventName: "deviceId",
+        getValue: (state) => selectDeviceId(state),
+        getOutput: (value) => ({ deviceId: value }),
+    },
+    externalId: {
+        action: null,
+        rtcEventName: "externalId",
+        getValue: (state) => selectAppExternalId(state),
+        getOutput: (value) => ({ externalId: value }),
+    },
+    organizationId: {
+        action: null,
+        rtcEventName: "organizationId",
+        getValue: (state) => selectOrganizationId(state),
+        getOutput: (value) => ({ organizationId: value }),
+    },
+    signalConnectionStatus: {
+        action: null,
+        rtcEventName: "signalConnectionStatus",
+        getValue: (state) => selectSignalStatus(state),
+        getOutput: (value) => ({ status: value }),
+    },
+    rtcConnectionStatus: {
+        action: null,
+        rtcEventName: "rtcConnectionStatus",
+        getValue: (state) => selectRtcStatus(state),
+        getOutput: (value) => ({ status: value }),
+    },
+    userRole: {
+        action: null,
+        rtcEventName: "userRole",
+        getValue: (state) => selectLocalParticipantRole(state),
+        getOutput: (value) => ({ userRole: value }),
+    },
+};
+const rtcCustomEventActions = Object.values(rtcAnalyticsCustomEvents)
+    .map(({ action }) => action)
+    .filter((action) => action !== null);
+const makeComparable = (value) => {
+    if (typeof value === "object")
+        return JSON.stringify(value);
+    return value;
+};
+const initialState$4 = {
+    reportedValues: {},
+};
+const rtcAnalyticsSlice = createSlice({
+    initialState: initialState$4,
+    name: "rtcAnalytics",
+    reducers: {
+        updateReportedValues(state, action) {
+            return Object.assign(Object.assign({}, state), { reportedValues: Object.assign(Object.assign({}, state.reportedValues), { [action.payload.rtcEventName]: action.payload.value }) });
+        },
+    },
+});
+const doRtcAnalyticsCustomEventsInitialize = createAppThunk(() => (dispatch, getState) => {
+    const state = getState();
+    const rtcManager = selectRtcConnectionRaw(state).rtcManager;
+    if (!rtcManager)
+        return;
+    Object.values(rtcAnalyticsCustomEvents).forEach(({ rtcEventName, getValue, getOutput }) => {
+        var _a;
+        const value = getValue(state);
+        const output = Object.assign(Object.assign({}, getOutput(value)), { _time: Date.now() });
+        const comparableValue = makeComparable(value);
+        if (((_a = state.rtcAnalytics.reportedValues) === null || _a === void 0 ? void 0 : _a[rtcEventName]) !== comparableValue) {
+            rtcManager.sendStatsCustomEvent(rtcEventName, output);
+            dispatch(updateReportedValues({ rtcEventName, value }));
+        }
+    });
+});
+/**
+ * Action creators
+ */
+const { updateReportedValues } = rtcAnalyticsSlice.actions;
+startAppListening({
+    matcher: isAnyOf(...rtcCustomEventActions),
+    effect: ({ type }, { getState, dispatch }) => {
+        var _a;
+        const state = getState();
+        const rtcManager = selectRtcConnectionRaw(state).rtcManager;
+        if (!rtcManager)
+            return;
+        const rtcCustomEvent = Object.values(rtcAnalyticsCustomEvents).find(({ action }) => (action === null || action === void 0 ? void 0 : action.type) === type);
+        if (!rtcCustomEvent)
+            return;
+        const { getValue, getOutput, rtcEventName } = rtcCustomEvent;
+        const value = getValue(state);
+        const comparableValue = makeComparable(value);
+        const output = Object.assign(Object.assign({}, getOutput(value)), { _time: Date.now() });
+        if (((_a = state.rtcAnalytics.reportedValues) === null || _a === void 0 ? void 0 : _a[rtcEventName]) !== comparableValue) {
+            rtcManager.sendStatsCustomEvent(rtcEventName, output);
+            dispatch(updateReportedValues({ rtcEventName, value }));
+        }
+    },
+});
+/**
+ * Reactors
+ */
+createReactor([selectRtcManagerInitialized], ({ dispatch }, selectRtcManagerInitialized) => {
+    if (selectRtcManagerInitialized) {
+        dispatch(doRtcAnalyticsCustomEventsInitialize());
+    }
+});
+
+const initialState$3 = {
+    isStreaming: false,
+    error: null,
+    startedAt: undefined,
+};
+const streamingSlice = createSlice({
+    name: "streaming",
+    initialState: initialState$3,
+    reducers: {
+        doHandleStreamingStarted: (state) => {
+            return Object.assign(Object.assign({}, state), { isStreaming: true, error: null, 
+                // We don't have the streaming start time stored on the
+                // server, so we use the current time instead. This gives
+                // an invalid timestamp for "Client B" if "Client A" has
+                // been streaming for a while before "Client B" joins.
+                startedAt: new Date().getTime() });
+        },
+        doHandleStreamingStopped: (state) => {
+            return Object.assign(Object.assign({}, state), { isStreaming: false });
+        },
+    },
+});
+/**
+ * Action creators
+ */
+streamingSlice.actions;
+/**
+ * Selectors
+ */
+const selectStreamingRaw = (state) => state.streaming;
+
+const initialState$2 = {
+    waitingParticipants: [],
+};
+const waitingParticipantsSlice = createSlice({
+    name: "waitingParticipants",
+    initialState: initialState$2,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(signalEvents.roomJoined, (state, { payload }) => {
+            var _a;
+            if ((_a = payload.room) === null || _a === void 0 ? void 0 : _a.knockers.length) {
+                return Object.assign(Object.assign({}, state), { waitingParticipants: payload.room.knockers.map((knocker) => ({
+                        id: knocker.clientId,
+                        displayName: knocker.displayName,
+                    })) });
+            }
+            else {
+                return state;
+            }
+        });
+        builder.addCase(signalEvents.roomKnocked, (state, action) => {
+            const { clientId, displayName } = action.payload;
+            return Object.assign(Object.assign({}, state), { waitingParticipants: [...state.waitingParticipants, { id: clientId, displayName }] });
+        });
+        builder.addCase(signalEvents.knockerLeft, (state, action) => {
+            const { clientId } = action.payload;
+            return Object.assign(Object.assign({}, state), { waitingParticipants: state.waitingParticipants.filter((p) => p.id !== clientId) });
+        });
+    },
+});
+/**
+ * Action creators
+ */
+const doAcceptWaitingParticipant = createAppThunk((payload) => (dispatch, getState) => {
+    const { participantId } = payload;
+    const state = getState();
+    const socket = selectSignalConnectionSocket(state);
+    socket === null || socket === void 0 ? void 0 : socket.emit("handle_knock", {
+        action: "accept",
+        clientId: participantId,
+        response: {},
+    });
+});
+const doRejectWaitingParticipant = createAppThunk((payload) => (dispatch, getState) => {
+    const { participantId } = payload;
+    const state = getState();
+    const socket = selectSignalConnectionSocket(state);
+    socket === null || socket === void 0 ? void 0 : socket.emit("handle_knock", {
+        action: "reject",
+        clientId: participantId,
+        response: {},
+    });
+});
+const selectWaitingParticipants = (state) => state.waitingParticipants.waitingParticipants;
+
+var _a;
+const IS_DEV = (_a = process.env.REACT_APP_IS_DEV === "true") !== null && _a !== void 0 ? _a : false;
+const rootReducer = combineReducers({
+    app: appSlice.reducer,
+    chat: chatSlice.reducer,
+    cloudRecording: cloudRecordingSlice.reducer,
+    deviceCredentials: deviceCredentialsSlice.reducer,
+    localMedia: localMediaSlice.reducer,
+    localParticipant: localParticipantSlice.reducer,
+    localScreenshare: localScreenshareSlice.reducer,
+    organization: organizationSlice.reducer,
+    remoteParticipants: remoteParticipantsSlice.reducer,
+    roomConnection: roomConnectionSlice.reducer,
+    rtcAnalytics: rtcAnalyticsSlice.reducer,
+    rtcConnection: rtcConnectionSlice.reducer,
+    signalConnection: signalConnectionSlice.reducer,
+    streaming: streamingSlice.reducer,
+    waitingParticipants: waitingParticipantsSlice.reducer,
+});
+const createStore = ({ preloadedState, injectServices, }) => {
+    return configureStore({
+        devTools: IS_DEV,
+        reducer: rootReducer,
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+            thunk: {
+                extraArgument: { services: injectServices },
+            },
+            serializableCheck: false,
+        }).prepend(listenerMiddleware.middleware),
+        preloadedState,
+    });
+};
+const observeStore = (store, select, onChange) => {
+    let currentState;
+    function handleChange() {
+        const nextState = select(store.getState());
+        if (nextState !== currentState) {
+            currentState = nextState;
+            onChange(currentState);
+        }
+    }
+    const unsubscribe = store.subscribe(handleChange);
+    handleChange();
+    return unsubscribe;
+};
+
 const defaultSubdomainPattern = /^(?:([^.]+)[.])?((:?[^.]+[.]){1,}[^.]+)$/;
 const localstackPattern = /^(?:([^.]+)-)?(ip-[^.]*[.](?:hereby[.]dev|rfc1918[.]disappear[.]at)(?::\d+|))$/;
 const localhostPattern = /^(?:([^.]+)[.])?(localhost:?\d*)/;
@@ -5910,17 +7706,6 @@ function assertInstanceOf(value, type, parameterName) {
     assert$1.ok(value instanceof type, `${resolvedParameterName}<${type.name}> is required`);
     return value;
 }
-/**
- * Asserts that the provided room name is a valid roomName.
- *
- * @param roomName - The roomName to check.
- * @param {string} [parameterName="roomName"] - The name of the parameter.
- */
-function assertRoomName(roomName, parameterName = "roomName") {
-    assertString(roomName, parameterName);
-    assert$1.ok(typeof roomName === "string" && roomName[0] === "/", `${parameterName} must begin with a '/'`);
-    return roomName;
-}
 /**
  * Asserts that the provided array is a valid array.
  *
@@ -5931,22 +7716,6 @@ function assertArray(array, parameterName) {
     assert$1.ok(Array.isArray(array), `${parameterName}<array> is required`);
     return array;
 }
-/**
- * Asserts that value is one of the values provided in an array
- *
- * @param value - The value to check.
- * @param allowedValues - An array of allowed values
- * @param {string} parameterName - The name of the parameter.
- */
-function assertOneOf(value, allowedValues, parameterName) {
-    assertTruthy(value, "value");
-    assertArray(allowedValues, "allowedValues");
-    const isAllowed = allowedValues.includes(value);
-    if (!isAllowed) {
-        throw new Error(`${parameterName}<string> must be one of the following: ${allowedValues.join(", ")}`);
-    }
-    return value;
-}
 /**
  * Asserts that the provided reference is a record.
  *
@@ -6190,22 +7959,6 @@ function extractString(data, propertyName) {
     return assertString(record[propertyName], propertyName);
 }
 const extractNullOrString = nullOrExtract(extractString);
-/**
- * Extract a Date from the given Json object.
- * If the value is not a valid Date, an error is thrown.
- *
- * @param data - the object to extract the value from
- * @param propertyName - the name of the parameter to extract
- * @returns the extracted value
- */
-function extractDate(data, propertyName) {
-    const dateString = extractString(data, propertyName);
-    const d = new Date(dateString);
-    if (isNaN(d.getTime())) {
-        throw new Error(`Invalid date for ${dateString}`);
-    }
-    return d;
-}
 /**
  * Extract an Array from the given Json object.
  * If the value is not a valid Array, an error is thrown.
@@ -6522,43 +8275,6 @@ class CredentialsService extends EventEmitter$1 {
     }
 }
 
-const noOrganization = () => Promise.resolve(undefined);
-/**
- * Class used for all Whereby organization API calls.
- */
-class OrganizationApiClient {
-    /**
-     * Create an OrganizationApiClient instance.
-     *
-     * @param {Object} options - The options for the OrganizationApiClient.
-     * @param {ApiClient} [options.apiClient] - The apiClient to use.
-     * @param {Function} [options.fetchOrganization] - function that returns a promise with the organization.
-     */
-    constructor({ apiClient, fetchOrganization = noOrganization, }) {
-        this._apiClient = apiClient;
-        this._fetchOrganization = fetchOrganization;
-        this._apiClient = apiClient;
-    }
-    _callRequestMethod(method, url, options) {
-        assertString(url, "url");
-        assert$1.ok(url[0] === "/", 'url<String> only accepts relative URLs beginning with "/".');
-        assert$1.ok(options, "options are required");
-        return this._fetchOrganization().then((organization) => {
-            if (!organization) {
-                return this._apiClient[method](url, options);
-            }
-            const { organizationId } = organization;
-            return this._apiClient[method](`/organizations/${encodeURIComponent(organizationId)}${url}`, options);
-        });
-    }
-    request(url, options) {
-        return this._callRequestMethod("request", url, options);
-    }
-    requestMultipart(url, options) {
-        return this._callRequestMethod("requestMultipart", url, options);
-    }
-}
-
 class EmbeddedFreeTierStatus {
     constructor({ isExhausted, renewsAt, totalMinutesLimit, totalMinutesUsed, }) {
         this.isExhausted = isExhausted;
@@ -6758,1279 +8474,192 @@ class OrganizationService {
             method: "GET",
         })
             .then(({ data }) => {
-            return Organization.fromJson(data);
-        })
-            .catch((res) => {
-            if (res instanceof Response) {
-                if (res.status === 404) {
-                    return null;
-                }
-                throw new Error(res.statusText);
-            }
-            throw res;
-        });
-    }
-    /**
-     * Retrieves the organizations that contain a user
-     * matching provided the email+code or phoneNumber+code
-     * combination.
-     */
-    getOrganizationsByContactPoint(options) {
-        const { code } = options;
-        const email = "email" in options ? options.email : null;
-        const phoneNumber = "phoneNumber" in options ? options.phoneNumber : null;
-        assert$1.ok((email || phoneNumber) && !(email && phoneNumber), "either email or phoneNumber is required");
-        assertString(code, "code");
-        const contactPoint = email ? { type: "email", value: email } : { type: "phoneNumber", value: phoneNumber };
-        return this._apiClient
-            .request("/organization-queries", {
-            method: "POST",
-            data: {
-                contactPoint,
-                code,
-            },
-        })
-            .then(({ data }) => {
-            return extractArray(data, "organizations", (organization) => Organization.fromJson(organization));
-        });
-    }
-    /**
-     * Retrieves the organizations that contain a user
-     * matching provided the idToken
-     */
-    getOrganizationsByIdToken({ idToken }) {
-        assertString(idToken, "idToken");
-        return this._apiClient
-            .request("/organization-queries", {
-            method: "POST",
-            data: {
-                idToken,
-            },
-        })
-            .then(({ data }) => {
-            return extractArray(data, "organizations", (organization) => {
-                return Organization.fromJson(Object.assign({ permissions: {}, limits: {} }, assertRecord(organization, "organization")));
-            });
-        });
-    }
-    /**
-     * Retrieves the organizations containing a user
-     * with either the email or phoneNumber matching the logged in user.
-     *
-     * This is useful for showing the possible organization that the current
-     * user could log in to.
-     */
-    getOrganizationsByLoggedInUser() {
-        return this._apiClient
-            .request("/user/organizations", {
-            method: "GET",
-        })
-            .then(({ data }) => {
-            return extractArray(data, "organizations", (o) => {
-                return Organization.fromJson(Object.assign({ permissions: {}, limits: {} }, assertRecord(o, "organization")));
-            });
-        });
-    }
-    /**
-     * Checks if a subdomain is available and verifies its format.
-     */
-    getSubdomainAvailability(subdomain) {
-        assertString(subdomain, "subdomain");
-        return this._apiClient
-            .request(`/organization-subdomains/${encodeURIComponent(subdomain)}/availability`, {
-            method: "GET",
-        })
-            .then(({ data }) => {
-            assertInstanceOf(data, Object, "data");
-            return {
-                status: extractString(data, "status"),
-            };
-        });
-    }
-    /**
-     * Updates preferences of the organization.
-     */
-    updatePreferences({ organizationId, preferences, }) {
-        assertTruthy(organizationId, "organizationId");
-        assertTruthy(preferences, "preferences");
-        return this._apiClient
-            .request(`/organizations/${encodeURIComponent(organizationId)}/preferences`, {
-            method: "PATCH",
-            data: preferences,
-        })
-            .then(() => undefined);
-    }
-    /**
-     * Delete organization
-     */
-    deleteOrganization({ organizationId }) {
-        assertTruthy(organizationId, "organizationId");
-        return this._apiClient
-            .request(`/organizations/${encodeURIComponent(organizationId)}`, {
-            method: "DELETE",
-        })
-            .then(() => undefined);
-    }
-}
-
-class OrganizationServiceCache {
-    constructor({ organizationService, subdomain }) {
-        this._organizationService = organizationService;
-        this._subdomain = subdomain;
-        this._organizationPromise = null;
-    }
-    initOrganization() {
-        return this.fetchOrganization().then(() => undefined);
-    }
-    fetchOrganization() {
-        if (!this._organizationPromise) {
-            this._organizationPromise = this._organizationService.getOrganizationBySubdomain(this._subdomain);
-        }
-        return this._organizationPromise;
-    }
-}
-
-// @ts-nocheck
-class Room {
-    constructor(properties = {}) {
-        assert$1.ok(properties instanceof Object, "properties<object> must be empty or an object");
-        this.isClaimed = false;
-        this.isBanned = false;
-        this.isLocked = false;
-        this.knockPage = {
-            backgroundImageUrl: null,
-            backgroundThumbnailUrl: null,
-        };
-        this.logoUrl = null;
-        this.backgroundImageUrl = null;
-        this.backgroundThumbnailUrl = null;
-        this.type = null;
-        this.legacyRoomType = null;
-        this.mode = null;
-        this.product = null;
-        this.roomName = null;
-        this.theme = null;
-        this.preferences = {};
-        this.protectedPreferences = {};
-        this.publicProfile = null;
-        // Only allow existing property names to be modified
-        const validProperties = {};
-        Object.getOwnPropertyNames(properties).forEach((prop) => {
-            if (Object.getOwnPropertyNames(this).indexOf(prop) !== -1) {
-                validProperties[prop] = properties[prop];
-            }
-        });
-        if (properties.ownerId !== undefined) {
-            this.ownerId = properties.ownerId;
-        }
-        if (properties.meeting !== undefined) {
-            this.meeting = properties.meeting;
-        }
-        Object.assign(this, validProperties);
-    }
-}
-
-class Meeting {
-    constructor({ meetingId, roomName, roomUrl, startDate, endDate, hostRoomUrl, viewerRoomUrl }) {
-        assertString(meetingId, "meetingId");
-        assertString(roomName, "roomName");
-        assertString(roomUrl, "roomUrl");
-        assertInstanceOf(startDate, Date, "startDate");
-        assertInstanceOf(endDate, Date, "endDate");
-        this.meetingId = meetingId;
-        this.roomName = roomName;
-        this.roomUrl = roomUrl;
-        this.startDate = startDate;
-        this.endDate = endDate;
-        this.hostRoomUrl = hostRoomUrl;
-        this.viewerRoomUrl = viewerRoomUrl;
-    }
-    static fromJson(data) {
-        return new Meeting({
-            meetingId: extractString(data, "meetingId"),
-            roomName: extractString(data, "roomName"),
-            roomUrl: extractString(data, "roomUrl"),
-            startDate: extractDate(data, "startDate"),
-            endDate: extractDate(data, "endDate"),
-            hostRoomUrl: extractNullOrString(data, "hostRoomUrl"),
-            viewerRoomUrl: extractNullOrString(data, "viewerRoomUrl"),
-        });
-    }
-}
-
-// @ts-nocheck
-function createRoomUrl(roomName, path = "") {
-    const encodedDisplayName = encodeURIComponent(roomName.substring(1));
-    return `/room/${encodedDisplayName}${path}`;
-}
-/**
- * Service for talking to the Room related APIs
- */
-class RoomService {
-    /**
-     * @param {object} organizationApiClient (required)
-     */
-    constructor({ organizationApiClient }) {
-        this._organizationApiClient = assertInstanceOf(organizationApiClient, OrganizationApiClient);
-    }
-    /**
-     * Gets the list of visited rooms
-     *
-     * @param {Object} args
-     * @param {Array<string>} [types=["team"]] - The type of rooms that should be fetched.
-     * @param {Array<string>} [fields=["meeting"]] - The fields of room that should be fetched.
-     * @returns {Promise<array>} - It will resolve with an array.
-     */
-    getRooms({ types, fields = [] } = {}) {
-        assertArray(types, "types");
-        assertArray(fields, "fields");
-        return this._organizationApiClient
-            .request("/room", {
-            method: "GET",
-            params: { types: types.join(","), fields: fields.join(","), includeOnlyLegacyRoomType: "false" },
-        })
-            .then(({ data }) => data.rooms.map((room) => new Room(room)));
-    }
-    /**
-     * Gets the specified room.
-     *
-     * Currently information is implicitly alluded to via the servers
-     * `/room/roomName` response. This method patches the data
-     * tempoarily, until the day it comes back from the server.
-     *
-     * @returns {Promise<Room>} - It will resolve with the Room.
-     */
-    getRoom({ roomName, fields }) {
-        assertRoomName(roomName);
-        const encodedDisplayName = encodeURIComponent(roomName.substring(1));
-        return this._organizationApiClient
-            .request(`/rooms/${encodedDisplayName}`, {
-            method: "GET",
-            params: Object.assign({ includeOnlyLegacyRoomType: "false" }, (fields && { fields: fields.join(",") })),
-        })
-            .then(({ data }) => new Room(Object.assign({}, data, Object.assign({ roomName }, (data.meeting && { meeting: Meeting.fromJson(data.meeting) })))))
-            .catch((response) => {
-            if (response.status === 404) {
-                return new Room({
-                    roomName,
-                    isClaimed: false,
-                    mode: "normal",
-                    product: {
-                        categoryName: "personal_free",
-                    },
-                    type: "personal",
-                    legacyRoomType: "free",
-                });
-            }
-            if (response.status === 400 && response.data.error === "Banned room") {
-                return new Room({ roomName, isBanned: true });
-            }
-            // Either server error or something else.
-            throw new Error(response.data ? response.data.error : "Could not fetch room information");
-        });
-    }
-    /**
-     * Claims the specified room.
-     *
-     * @param {Object} args
-     * @param {String} args.roomName - The roomName to claim
-     * @param {String} args.type - The type of room to claim
-     * @param {String} args.mode - The optional mode of room to claim
-     * @param {[Boolean]} args.isLocked - The optional lock status of room to claim
-     * @returns {Promise} - It will resolve with undefined.
-     */
-    claimRoom({ roomName, type, mode, isLocked }) {
-        assertRoomName(roomName);
-        assertString(type, "type");
-        return this._organizationApiClient
-            .request("/room/claim", {
-            method: "POST",
-            data: Object.assign(Object.assign({ roomName,
-                type }, (typeof mode === "string" && { mode })), (typeof isLocked === "boolean" && { isLocked })),
-        })
-            .then(() => undefined)
-            .catch((response) => {
-            throw new Error(response.data.error || "Failed to claim room");
-        });
-    }
-    /**
-     * Unclaims the specified room.
-     *
-     * @param {string} roomName - the room name to unclaim.
-     * @returns {Promise.<undefined>} - It will resolve with undefined.
-     */
-    unclaimRoom(roomName) {
-        assertRoomName(roomName);
-        const encodedDisplayName = encodeURIComponent(roomName.substring(1));
-        return this._organizationApiClient
-            .request(`/room/${encodedDisplayName}`, {
-            method: "DELETE",
-        })
-            .then(() => undefined);
-    }
-    /**
-     * Changes the name of the room
-     *
-     * @param {Object} args
-     * @param {string} args.roomName - The name of the room to rename
-     * @param {string} args.newRoomName - The new name
-     * @returns {Promise<undefined>} - It will resolve if the room was renamed, reject for all other cases
-     */
-    renameRoom({ roomName, newRoomName }) {
-        assertRoomName(roomName);
-        assertString(newRoomName, "newRoomName");
-        const encodedRoomName = encodeURIComponent(roomName.substring(1));
-        return this._organizationApiClient
-            .request(`/room/${encodedRoomName}/roomName`, {
-            method: "PUT",
-            data: { newRoomName },
-        })
-            .then(() => undefined);
-    }
-    /**
-     * Changes the room mode (experimental)
-     *
-     * @param {string} roomName - The name of the room to change mode of
-     * @param {string} mode - The name of mode to set, currently only "group" is supported
-     * @returns {Promise<undefined>} - It will resolve if mode was changed, rejects for all other cases
-     */
-    changeMode({ roomName, mode }) {
-        assertRoomName(roomName);
-        assertString(mode, "mode");
-        const encodedDisplayName = encodeURIComponent(roomName.substring(1));
-        return this._organizationApiClient
-            .request(`/room/${encodedDisplayName}/mode`, {
-            method: "PUT",
-            data: { mode },
-        })
-            .then(() => undefined);
-    }
-    /**
-     * Updates the room prefs
-     *
-     * @param {string} roomName - The name of the room to change mode of
-     * @param {object} preferences - The prefs you want to update and their values
-     * @returns {Promise<undefined>} - It will resolve if updated, rejects for all other cases
-     */
-    updatePreferences({ roomName, preferences }) {
-        assertRoomName(roomName);
-        assertInstanceOf(preferences, Object, "preferences");
-        const encodedDisplayName = encodeURIComponent(roomName.substring(1));
-        return this._organizationApiClient
-            .request(`/room/${encodedDisplayName}/preferences`, {
-            method: "PATCH",
-            data: preferences,
-        })
-            .then(() => undefined);
-    }
-    /**
-     * Updates the protected room prefs
-     *
-     * @param {string} roomName - The name of the room to change mode of
-     * @param {object} preferences - The protected prefs you want to update and their values
-     * @returns {Promise<undefined>} - It will resolve if updated, rejects for all other cases
-     */
-    updateProtectedPreferences({ roomName, preferences }) {
-        assertRoomName(roomName);
-        assertInstanceOf(preferences, Object, "preferences");
-        const encodedDisplayName = encodeURIComponent(roomName.substring(1));
-        return this._organizationApiClient
-            .request(`/room/${encodedDisplayName}/protected-preferences`, {
-            method: "PATCH",
-            data: preferences,
-        })
-            .then(() => undefined);
-    }
-    getRoomPermissions(roomName, { roomKey } = {}) {
-        assertRoomName(roomName);
-        return this._organizationApiClient
-            .request(createRoomUrl(roomName, "/permissions"), Object.assign({ method: "GET" }, (roomKey && { headers: { "X-Whereby-Room-Key": roomKey } })))
-            .then((response) => {
-            const { permissions, limits } = response.data;
-            return {
-                permissions,
-                limits,
-            };
-        });
-    }
-    /**
-     * Gets the specified room metrics
-     *
-     * @param {Object} args
-     * @param {string} args.roomName - The name of the room to get metrics from.
-     * @param {string} args.metrics - Comma-separated list of metrics to include.
-     * @param {string} args.from (optional) - Start time (inclusive) to count from in
-     * ISO format. Defaults to counting from the start of time.
-     * @param {string} args.to (optional) - End time (exclusive) to count up to in
-     * ISO format. Defaults to counting up to the current time.
-     * @returns {Promise<Object>} - It will resolve with the requested metrics.
-     */
-    getRoomMetrics({ roomName, metrics, from, to }) {
-        assertRoomName(roomName);
-        assertString(metrics, "metrics");
-        return this._organizationApiClient
-            .request(createRoomUrl(roomName, "/metrics"), {
-            method: "GET",
-            params: { metrics, from, to },
-        })
-            .then((response) => response.data);
-    }
-    /**
-     * Changes the room type
-     *
-     * @param {Object} args
-     * @param {string} args.roomName - The name of the room to change mode of
-     * @param {"personal" | "personal_xl"} args.type - Room type that should be set
-     * @returns {Promise<undefined>} - It will resolve if type was changed, rejects for all other cases
-     */
-    changeType({ roomName, type }) {
-        assertRoomName(roomName);
-        assertOneOf(type, ["personal", "personal_xl"], "type");
-        const encodedDisplayName = encodeURIComponent(roomName.substring(1));
-        return this._organizationApiClient
-            .request(`/room/${encodedDisplayName}/type`, {
-            method: "PUT",
-            data: { type },
-        })
-            .then(() => undefined);
-    }
-    /** Gets a Forest campaign social image
-     *
-     * @param {Object} args
-     * @param {string} args.roomName - The name of the room to get metrics from.
-     * @param {number} args.count - Number to be displayed in the image as tree count.
-     * @returns {Promise<string>} - It will resolve with the image url.
-     */
-    getForestSocialImage({ roomName, count }) {
-        assertRoomName(roomName);
-        assertNumber(count, "count");
-        return this._organizationApiClient
-            .request(createRoomUrl(roomName, `/forest-social-image/${count}`), {
-            method: "GET",
-        })
-            .then((response) => response.data.imageUrl);
-    }
-}
-
-class RoomParticipant {
-    constructor({ displayName, id, stream, isAudioEnabled, isVideoEnabled }) {
-        this.isLocalParticipant = false;
-        this.displayName = displayName;
-        this.id = id;
-        this.stream = stream;
-        this.isAudioEnabled = isAudioEnabled;
-        this.isVideoEnabled = isVideoEnabled;
-    }
-}
-class RemoteParticipant extends RoomParticipant {
-    constructor({ displayName, id, newJoiner, streams, isAudioEnabled, isVideoEnabled, }) {
-        super({ displayName, id, isAudioEnabled, isVideoEnabled });
-        this.newJoiner = newJoiner;
-        this.streams = streams.map((streamId) => ({ id: streamId, state: newJoiner ? "new_accept" : "to_accept" }));
-    }
-    addStream(streamId, state) {
-        this.streams.push({ id: streamId, state });
-    }
-    removeStream(streamId) {
-        const index = this.streams.findIndex((s) => s.id === streamId);
-        if (index !== -1) {
-            this.streams.splice(index, 1);
-        }
-    }
-    updateStreamState(streamId, state) {
-        const stream = this.streams.find((s) => s.id === streamId);
-        if (stream) {
-            stream.state = state;
-        }
-    }
-}
-class LocalParticipant extends RoomParticipant {
-    constructor({ displayName, id, stream, isAudioEnabled, isVideoEnabled }) {
-        super({ displayName, id, stream, isAudioEnabled, isVideoEnabled });
-        this.isLocalParticipant = true;
-    }
-}
-
-const sdkVersion = "2.0.0-beta3";
-
-class RoomConnectionEvent extends CustomEvent {
-    constructor(eventType, eventInitDict) {
-        super(eventType, eventInitDict);
-    }
-}
-const API_BASE_URL = "https://api.whereby.dev" ;
-const SIGNAL_BASE_URL = "wss://signal.appearin.net" ;
-const NON_PERSON_ROLES = ["recorder", "streamer"];
-// cache last reported stream resolutions
-const reportedStreamResolutions = new Map();
-function createSocket() {
-    const parsedUrl = new URL(SIGNAL_BASE_URL);
-    const socketHost = parsedUrl.origin;
-    const socketOverrides = {
-        autoConnect: false,
-    };
-    return new ServerSocket(socketHost, socketOverrides);
-}
-function handleStreamAdded(remoteParticipants, { clientId, stream, streamId, streamType }) {
-    if (!streamId) {
-        streamId = stream.id;
-    }
-    const remoteParticipant = remoteParticipants.find((p) => p.id === clientId);
-    if (!remoteParticipant) {
-        return;
-    }
-    const remoteParticipantStream = remoteParticipant.streams.find((s) => s.id === streamId) || remoteParticipant.streams[0];
-    if ((remoteParticipant.stream && remoteParticipant.stream.id === streamId) ||
-        (!remoteParticipant.stream && streamType === "webcam") ||
-        (!remoteParticipant.stream && !streamType && remoteParticipant.streams.indexOf(remoteParticipantStream) < 1)) {
-        return new RoomConnectionEvent("participant_stream_added", {
-            detail: { participantId: clientId, stream, streamId },
-        });
-    }
-    // screenshare
-    return new RoomConnectionEvent("screenshare_started", {
-        detail: {
-            participantId: clientId,
-            stream,
-            id: streamId,
-            isLocal: false,
-            hasAudioTrack: stream.getAudioTracks().length > 0,
-        },
-    });
-}
-const noop = () => {
-    return;
-};
-const TypedEventTarget = EventTarget;
-class RoomConnection extends TypedEventTarget {
-    constructor(roomUrl, { displayName, localMedia, localMediaOptions: localMediaConstraints, logger, roomKey, externalId, }) {
-        super();
-        this.remoteParticipants = [];
-        this.screenshares = [];
-        this._deviceCredentials = null;
-        this._ownsLocalMedia = false;
-        this.organizationId = "";
-        this.connectionStatus = "initializing";
-        this.selfId = null;
-        this.roomUrl = new URL(roomUrl); // Throw if invalid Whereby room url
-        const searchParams = new URLSearchParams(this.roomUrl.search);
-        this._roomKey = roomKey || searchParams.get("roomKey");
-        this.roomName = this.roomUrl.pathname;
-        this.logger = logger || {
-            debug: noop,
-            error: noop,
-            info: noop,
-            log: noop,
-            warn: noop,
-        };
-        this.displayName = displayName;
-        this.externalId = externalId;
-        this.localMediaConstraints = localMediaConstraints;
-        const urls = fromLocation({ host: this.roomUrl.host });
-        // Set up local media
-        if (localMedia) {
-            this.localMedia = localMedia;
-        }
-        else if (localMediaConstraints) {
-            this.localMedia = new LocalMedia(localMediaConstraints);
-            this._ownsLocalMedia = true;
-        }
-        else {
-            throw new Error("Missing constraints");
-        }
-        // Set up services
-        this.credentialsService = CredentialsService.create({ baseUrl: API_BASE_URL });
-        this.apiClient = new ApiClient({
-            fetchDeviceCredentials: this.credentialsService.getCredentials.bind(this.credentialsService),
-            baseUrl: API_BASE_URL,
-        });
-        this.organizationService = new OrganizationService({ apiClient: this.apiClient });
-        this.organizationServiceCache = new OrganizationServiceCache({
-            organizationService: this.organizationService,
-            subdomain: urls.subdomain,
-        });
-        this.organizationApiClient = new OrganizationApiClient({
-            apiClient: this.apiClient,
-            fetchOrganization: () => __awaiter(this, void 0, void 0, function* () {
-                const organization = yield this.organizationServiceCache.fetchOrganization();
-                return organization || undefined;
-            }),
-        });
-        this.roomService = new RoomService({ organizationApiClient: this.organizationApiClient });
-        // Create signal socket and set up event listeners
-        this.signalSocket = createSocket();
-        this.signalSocket.on("new_client", this._handleNewClient.bind(this));
-        this.signalSocket.on("chat_message", this._handleNewChatMessage.bind(this));
-        this.signalSocket.on("client_left", this._handleClientLeft.bind(this));
-        this.signalSocket.on("audio_enabled", this._handleClientAudioEnabled.bind(this));
-        this.signalSocket.on("video_enabled", this._handleClientVideoEnabled.bind(this));
-        this.signalSocket.on("client_metadata_received", this._handleClientMetadataReceived.bind(this));
-        this.signalSocket.on("knock_handled", this._handleKnockHandled.bind(this));
-        this.signalSocket.on("knocker_left", this._handleKnockerLeft.bind(this));
-        this.signalSocket.on("room_joined", this._handleRoomJoined.bind(this));
-        this.signalSocket.on("room_knocked", this._handleRoomKnocked.bind(this));
-        this.signalSocket.on("cloud_recording_started", this._handleCloudRecordingStarted.bind(this));
-        this.signalSocket.on("cloud_recording_stopped", this._handleCloudRecordingStopped.bind(this));
-        this.signalSocket.on("screenshare_started", this._handleScreenshareStarted.bind(this));
-        this.signalSocket.on("screenshare_stopped", this._handleScreenshareStopped.bind(this));
-        this.signalSocket.on("streaming_stopped", this._handleStreamingStopped.bind(this));
-        this.signalSocket.on("disconnect", this._handleDisconnect.bind(this));
-        this.signalSocket.on("connect_error", this._handleDisconnect.bind(this));
-        this.signalSocketManager = this.signalSocket.getManager();
-        this.signalSocketManager.on("reconnect", this._handleReconnect.bind(this));
-        // Set up local media listeners
-        this.localMedia.addEventListener("camera_enabled", (e) => {
-            const { enabled } = e.detail;
-            this.signalSocket.emit("enable_video", { enabled });
-            this.dispatchEvent(new RoomConnectionEvent("local_camera_enabled", { detail: { enabled } }));
-        });
-        this.localMedia.addEventListener("microphone_enabled", (e) => {
-            const { enabled } = e.detail;
-            this.signalSocket.emit("enable_audio", { enabled });
-            this.dispatchEvent(new RoomConnectionEvent("local_microphone_enabled", { detail: { enabled } }));
-        });
-        const webrtcProvider = {
-            getMediaConstraints: () => ({
-                audio: this.localMedia.isMicrophoneEnabled(),
-                video: this.localMedia.isCameraEnabled(),
-            }),
-            deferrable(clientId) {
-                return !clientId;
-            },
-        };
-        this.rtcManagerDispatcher = new RtcManagerDispatcher({
-            emitter: {
-                emit: this._handleRtcEvent.bind(this),
-            },
-            serverSocket: this.signalSocket,
-            webrtcProvider,
-            features: {
-                lowDataModeEnabled: false,
-                sfuServerOverrideHost: undefined,
-                turnServerOverrideHost: undefined,
-                useOnlyTURN: undefined,
-                vp9On: false,
-                h264On: false,
-                simulcastScreenshareOn: false,
-            },
-            logger: this.logger,
-        });
-    }
-    get roomKey() {
-        return this._roomKey;
-    }
-    _handleNewChatMessage(message) {
-        this.dispatchEvent(new RoomConnectionEvent("chat_message", { detail: message }));
-    }
-    _handleCloudRecordingStarted(event) {
-        // Only handle the start failure event here. The recording is
-        // considered started when the recorder client joins.
-        if (event.error) {
-            this.dispatchEvent(new RoomConnectionEvent("cloud_recording_started_error", {
-                detail: { error: event.error, status: "error" },
-            }));
-        }
-    }
-    _handleRecorderClientJoined({ client }) {
-        this.dispatchEvent(new RoomConnectionEvent("cloud_recording_started", {
-            detail: {
-                status: "recording",
-                startedAt: client.startedCloudRecordingAt
-                    ? new Date(client.startedCloudRecordingAt).getTime()
-                    : new Date().getTime(),
-            },
-        }));
-    }
-    _handleStreamingStarted() {
-        this.dispatchEvent(new RoomConnectionEvent("streaming_started", {
-            detail: {
-                status: "streaming",
-                // We don't have the streaming start time stored on the
-                // server, so we use the current time instead. This gives
-                // an invalid timestamp for "Client B" if "Client A" has
-                // been streaming for a while before "Client B" joins.
-                startedAt: new Date().getTime(),
-            },
-        }));
-    }
-    _handleNewClient({ client }) {
-        if (client.role.roleName === "recorder") {
-            this._handleRecorderClientJoined({ client });
-        }
-        if (client.role.roleName === "streamer") {
-            this._handleStreamingStarted();
-        }
-        if (NON_PERSON_ROLES.includes(client.role.roleName)) {
-            return;
-        }
-        const remoteParticipant = new RemoteParticipant(Object.assign(Object.assign({}, client), { newJoiner: true }));
-        this.remoteParticipants = [...this.remoteParticipants, remoteParticipant];
-        this._handleAcceptStreams([remoteParticipant]);
-        this.dispatchEvent(new RoomConnectionEvent("participant_joined", {
-            detail: { remoteParticipant },
-        }));
-    }
-    _handleClientLeft({ clientId }) {
-        const remoteParticipant = this.remoteParticipants.find((p) => p.id === clientId);
-        this.remoteParticipants = this.remoteParticipants.filter((p) => p.id !== clientId);
-        if (!remoteParticipant) {
-            return;
-        }
-        this.dispatchEvent(new RoomConnectionEvent("participant_left", { detail: { participantId: remoteParticipant.id } }));
-    }
-    _handleClientAudioEnabled({ clientId, isAudioEnabled }) {
-        const remoteParticipant = this.remoteParticipants.find((p) => p.id === clientId);
-        if (!remoteParticipant) {
-            return;
-        }
-        this.dispatchEvent(new RoomConnectionEvent("participant_audio_enabled", {
-            detail: { participantId: remoteParticipant.id, isAudioEnabled },
-        }));
-    }
-    _handleClientVideoEnabled({ clientId, isVideoEnabled }) {
-        const remoteParticipant = this.remoteParticipants.find((p) => p.id === clientId);
-        if (!remoteParticipant) {
-            return;
-        }
-        this.dispatchEvent(new RoomConnectionEvent("participant_video_enabled", {
-            detail: { participantId: remoteParticipant.id, isVideoEnabled },
-        }));
-    }
-    _handleClientMetadataReceived({ payload: { clientId, displayName } }) {
-        const remoteParticipant = this.remoteParticipants.find((p) => p.id === clientId);
-        if (!remoteParticipant) {
-            return;
-        }
-        this.dispatchEvent(new RoomConnectionEvent("participant_metadata_changed", {
-            detail: { participantId: remoteParticipant.id, displayName },
-        }));
-    }
-    _handleKnockHandled(payload) {
-        const { clientId, resolution } = payload;
-        // If the knocker is not the local participant, ignore the event
-        if (clientId !== this.selfId) {
-            return;
-        }
-        if (resolution === "accepted") {
-            this._roomKey = payload.metadata.roomKey;
-            this._joinRoom();
-        }
-        else if (resolution === "rejected") {
-            this.connectionStatus = "knock_rejected";
-            this.dispatchEvent(new RoomConnectionEvent("connection_status_changed", {
-                detail: {
-                    connectionStatus: this.connectionStatus,
-                },
-            }));
-        }
-    }
-    _handleKnockerLeft(payload) {
-        const { clientId } = payload;
-        this.dispatchEvent(new RoomConnectionEvent("waiting_participant_left", {
-            detail: { participantId: clientId },
-        }));
-    }
-    _handleRoomJoined(event) {
-        const { error, isLocked, room, selfId } = event;
-        this.selfId = selfId;
-        if (error === "room_locked" && isLocked) {
-            this.connectionStatus = "room_locked";
-            this.dispatchEvent(new RoomConnectionEvent("connection_status_changed", {
-                detail: {
-                    connectionStatus: this.connectionStatus,
-                },
-            }));
-            return;
-        }
-        // Check if we have an error
-        // Check if it is a room joined error
-        // Set state to connect_failed_locked
-        // Set state to connect_failed_no_host
-        if (room) {
-            const { clients, knockers } = room;
-            const localClient = clients.find((c) => c.id === selfId);
-            if (!localClient)
-                throw new Error("Missing local client");
-            this.localParticipant = new LocalParticipant(Object.assign(Object.assign({}, localClient), { stream: this.localMedia.stream || undefined }));
-            const recorderClient = clients.find((c) => c.role.roleName === "recorder");
-            if (recorderClient) {
-                this._handleRecorderClientJoined({ client: recorderClient });
-            }
-            const streamerClient = clients.find((c) => c.role.roleName === "streamer");
-            if (streamerClient) {
-                this._handleStreamingStarted();
-            }
-            this.remoteParticipants = clients
-                .filter((c) => c.id !== selfId)
-                .filter((c) => !NON_PERSON_ROLES.includes(c.role.roleName))
-                .map((c) => new RemoteParticipant(Object.assign(Object.assign({}, c), { newJoiner: false })));
-            this.connectionStatus = "connected";
-            this.dispatchEvent(new RoomConnectionEvent("room_joined", {
-                detail: {
-                    localParticipant: this.localParticipant,
-                    remoteParticipants: this.remoteParticipants,
-                    waitingParticipants: knockers.map((knocker) => {
-                        return { id: knocker.clientId, displayName: knocker.displayName };
-                    }),
-                },
-            }));
-        }
-    }
-    _handleRoomKnocked(event) {
-        const { clientId, displayName } = event;
-        this.dispatchEvent(new RoomConnectionEvent("waiting_participant_joined", {
-            detail: { participantId: clientId, displayName },
-        }));
-    }
-    _handleReconnect() {
-        this.logger.log("Reconnected to signal socket");
-        this.signalSocket.emit("identify_device", { deviceCredentials: this._deviceCredentials });
-        this.signalSocket.once("device_identified", () => {
-            this._joinRoom();
-        });
-    }
-    _handleDisconnect() {
-        this.connectionStatus = "disconnected";
-        this.dispatchEvent(new RoomConnectionEvent("connection_status_changed", {
-            detail: {
-                connectionStatus: this.connectionStatus,
-            },
-        }));
-    }
-    _handleCloudRecordingStopped() {
-        this.dispatchEvent(new RoomConnectionEvent("cloud_recording_stopped"));
-    }
-    _handleStreamingStopped() {
-        this.dispatchEvent(new RoomConnectionEvent("streaming_stopped"));
-    }
-    _handleScreenshareStarted(screenshare) {
-        const { clientId: participantId, streamId: id, hasAudioTrack } = screenshare;
-        const remoteParticipant = this.remoteParticipants.find((p) => p.id === participantId);
-        if (!remoteParticipant) {
-            this.logger.log("WARN: Could not find participant for screenshare");
-            return;
-        }
-        const foundScreenshare = this.screenshares.find((s) => s.id === id);
-        if (foundScreenshare) {
-            this.logger.log("WARN: Screenshare already exists");
-            return;
-        }
-        remoteParticipant.addStream(id, "to_accept");
-        this._handleAcceptStreams([remoteParticipant]);
-        this.screenshares = [
-            ...this.screenshares,
-            { participantId, id, hasAudioTrack, stream: undefined, isLocal: false },
-        ];
-    }
-    _handleScreenshareStopped(screenshare) {
-        const { clientId: participantId, streamId: id } = screenshare;
-        const remoteParticipant = this.remoteParticipants.find((p) => p.id === participantId);
-        if (!remoteParticipant) {
-            this.logger.log("WARN: Could not find participant for screenshare");
-            return;
-        }
-        remoteParticipant.removeStream(id);
-        this.screenshares = this.screenshares.filter((s) => !(s.participantId === participantId && s.id === id));
-        this.dispatchEvent(new RoomConnectionEvent("screenshare_stopped", { detail: { participantId, id } }));
-    }
-    _handleRtcEvent(eventName, data) {
-        if (eventName === "rtc_manager_created") {
-            return this._handleRtcManagerCreated(data);
-        }
-        else if (eventName === "stream_added") {
-            return this._handleStreamAdded(data);
-        }
-        else if (eventName === "rtc_manager_destroyed") {
-            return this._handleRtcManagerDestroyed();
-        }
-        else {
-            this.logger.log(`Unhandled RTC event ${eventName}`);
-        }
-    }
-    _handleRtcManagerCreated({ rtcManager }) {
-        var _a;
-        this.rtcManager = rtcManager;
-        this.localMedia.addRtcManager(rtcManager);
-        if (this.localMedia.stream) {
-            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.addNewStream("0", this.localMedia.stream, !this.localMedia.isMicrophoneEnabled(), !this.localMedia.isCameraEnabled());
-        }
-        if (this.remoteParticipants.length) {
-            this._handleAcceptStreams(this.remoteParticipants);
-        }
-    }
-    _handleRtcManagerDestroyed() {
-        this.rtcManager = undefined;
-    }
-    _handleAcceptStreams(remoteParticipants) {
-        var _a, _b;
-        if (!this.rtcManager) {
-            this.logger.log("Unable to accept streams, no rtc manager");
-            return;
-        }
-        const shouldAcceptNewClients = (_b = (_a = this.rtcManager).shouldAcceptStreamsFromBothSides) === null || _b === void 0 ? void 0 : _b.call(_a);
-        const activeBreakout = false; // TODO: Remove this once breakout is implemented
-        remoteParticipants.forEach((participant) => {
-            const { id: participantId, streams, newJoiner } = participant;
-            streams.forEach((stream) => {
-                var _a, _b;
-                const { id: streamId, state: streamState } = stream;
-                let newState = undefined;
-                {
-                    if (streamState !== "done_accept") {
-                        newState = `${newJoiner && streamId === "0" ? "new" : "to"}_accept`;
-                    }
-                }
-                if (!newState) {
-                    return;
-                }
-                if (newState === "to_accept" ||
-                    (newState === "new_accept" && shouldAcceptNewClients) ||
-                    (newState === "old_accept" && !shouldAcceptNewClients)) {
-                    this.logger.log(`Accepting stream ${streamId} from ${participantId}`);
-                    (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.acceptNewStream({
-                        streamId: streamId === "0" ? participantId : streamId,
-                        clientId: participantId,
-                        shouldAddLocalVideo: streamId === "0",
-                        activeBreakout,
-                    });
-                }
-                else if (newState === "new_accept" || newState === "old_accept") ;
-                else if (newState === "to_unaccept") {
-                    this.logger.log(`Disconnecting stream ${streamId} from ${participantId}`);
-                    (_b = this.rtcManager) === null || _b === void 0 ? void 0 : _b.disconnect(streamId === "0" ? participantId : streamId, activeBreakout);
-                }
-                else if (newState !== "done_accept") {
-                    this.logger.warn(`Stream state not handled: ${newState} for ${participantId}-${streamId}`);
-                    return;
+            return Organization.fromJson(data);
+        })
+            .catch((res) => {
+            if (res instanceof Response) {
+                if (res.status === 404) {
+                    return null;
                 }
-                else ;
-                // Update stream state
-                participant.updateStreamState(streamId, streamState.replace(/to_|new_|old_/, "done_"));
-            });
+                throw new Error(res.statusText);
+            }
+            throw res;
         });
     }
-    _handleStreamAdded(args) {
-        const streamAddedEvent = handleStreamAdded(this.remoteParticipants, args);
-        if (streamAddedEvent) {
-            this.dispatchEvent(streamAddedEvent);
-        }
-    }
-    _joinRoom() {
-        this.signalSocket.emit("join_room", {
-            avatarUrl: null,
-            config: {
-                isAudioEnabled: this.localMedia.isMicrophoneEnabled(),
-                isVideoEnabled: this.localMedia.isCameraEnabled(),
+    /**
+     * Retrieves the organizations that contain a user
+     * matching provided the email+code or phoneNumber+code
+     * combination.
+     */
+    getOrganizationsByContactPoint(options) {
+        const { code } = options;
+        const email = "email" in options ? options.email : null;
+        const phoneNumber = "phoneNumber" in options ? options.phoneNumber : null;
+        assert$1.ok((email || phoneNumber) && !(email && phoneNumber), "either email or phoneNumber is required");
+        assertString(code, "code");
+        const contactPoint = email ? { type: "email", value: email } : { type: "phoneNumber", value: phoneNumber };
+        return this._apiClient
+            .request("/organization-queries", {
+            method: "POST",
+            data: {
+                contactPoint,
+                code,
             },
-            deviceCapabilities: { canScreenshare: true },
-            displayName: this.displayName,
-            isCoLocated: false,
-            isDevicePermissionDenied: false,
-            kickFromOtherRooms: false,
-            organizationId: this.organizationId,
-            roomKey: this.roomKey,
-            roomName: this.roomName,
-            selfId: "",
-            userAgent: `browser-sdk:${sdkVersion }`,
-            externalId: this.externalId,
-        });
-    }
-    join() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (["connected", "connecting"].includes(this.connectionStatus)) {
-                console.warn(`Trying to join when room state is already ${this.connectionStatus}`);
-                return;
-            }
-            this.signalSocket.connect();
-            this.connectionStatus = "connecting";
-            this.dispatchEvent(new RoomConnectionEvent("connection_status_changed", {
-                detail: {
-                    connectionStatus: this.connectionStatus,
-                },
-            }));
-            const organization = yield this.organizationServiceCache.fetchOrganization();
-            if (!organization) {
-                throw new Error("Invalid room url");
-            }
-            this.organizationId = organization.organizationId;
-            if (this._ownsLocalMedia) {
-                yield this.localMedia.start();
-            }
-            // Identify device on signal connection
-            this._deviceCredentials = yield this.credentialsService.getCredentials();
-            this.logger.log("Connected to signal socket");
-            this.signalSocket.emit("identify_device", { deviceCredentials: this._deviceCredentials });
-            this.signalSocket.once("device_identified", () => {
-                this._joinRoom();
-            });
+        })
+            .then(({ data }) => {
+            return extractArray(data, "organizations", (organization) => Organization.fromJson(organization));
         });
     }
-    knock() {
-        this.connectionStatus = "knocking";
-        this.dispatchEvent(new RoomConnectionEvent("connection_status_changed", {
-            detail: {
-                connectionStatus: this.connectionStatus,
+    /**
+     * Retrieves the organizations that contain a user
+     * matching provided the idToken
+     */
+    getOrganizationsByIdToken({ idToken }) {
+        assertString(idToken, "idToken");
+        return this._apiClient
+            .request("/organization-queries", {
+            method: "POST",
+            data: {
+                idToken,
             },
-        }));
-        this.signalSocket.emit("knock_room", {
-            displayName: this.displayName,
-            imageUrl: null,
-            kickFromOtherRooms: true,
-            liveVideo: false,
-            organizationId: this.organizationId,
-            roomKey: this._roomKey,
-            roomName: this.roomName,
-            externalId: this.externalId,
+        })
+            .then(({ data }) => {
+            return extractArray(data, "organizations", (organization) => {
+                return Organization.fromJson(Object.assign({ permissions: {}, limits: {} }, assertRecord(organization, "organization")));
+            });
         });
     }
-    leave() {
-        this.connectionStatus = "disconnecting";
-        if (this._ownsLocalMedia) {
-            this.localMedia.stop();
-        }
-        if (this.rtcManager) {
-            this.localMedia.removeRtcManager(this.rtcManager);
-            this.rtcManager.disconnectAll();
-            this.rtcManager = undefined;
-        }
-        if (!this.signalSocket) {
-            return;
-        }
-        this.signalSocket.emit("leave_room");
-        this.signalSocket.disconnect();
-        this.connectionStatus = "disconnected";
-    }
-    sendChatMessage(text) {
-        this.signalSocket.emit("chat_message", {
-            text,
+    /**
+     * Retrieves the organizations containing a user
+     * with either the email or phoneNumber matching the logged in user.
+     *
+     * This is useful for showing the possible organization that the current
+     * user could log in to.
+     */
+    getOrganizationsByLoggedInUser() {
+        return this._apiClient
+            .request("/user/organizations", {
+            method: "GET",
+        })
+            .then(({ data }) => {
+            return extractArray(data, "organizations", (o) => {
+                return Organization.fromJson(Object.assign({ permissions: {}, limits: {} }, assertRecord(o, "organization")));
+            });
         });
     }
-    setDisplayName(displayName) {
-        this.signalSocket.emit("send_client_metadata", {
-            type: "UserData",
-            payload: {
-                displayName,
-            },
+    /**
+     * Checks if a subdomain is available and verifies its format.
+     */
+    getSubdomainAvailability(subdomain) {
+        assertString(subdomain, "subdomain");
+        return this._apiClient
+            .request(`/organization-subdomains/${encodeURIComponent(subdomain)}/availability`, {
+            method: "GET",
+        })
+            .then(({ data }) => {
+            assertInstanceOf(data, Object, "data");
+            return {
+                status: extractString(data, "status"),
+            };
         });
     }
-    acceptWaitingParticipant(participantId) {
-        this.signalSocket.emit("handle_knock", {
-            action: "accept",
-            clientId: participantId,
-            response: {},
-        });
+    /**
+     * Updates preferences of the organization.
+     */
+    updatePreferences({ organizationId, preferences, }) {
+        assertTruthy(organizationId, "organizationId");
+        assertTruthy(preferences, "preferences");
+        return this._apiClient
+            .request(`/organizations/${encodeURIComponent(organizationId)}/preferences`, {
+            method: "PATCH",
+            data: preferences,
+        })
+            .then(() => undefined);
     }
-    rejectWaitingParticipant(participantId) {
-        this.signalSocket.emit("handle_knock", {
-            action: "reject",
-            clientId: participantId,
-            response: {},
-        });
+    /**
+     * Delete organization
+     */
+    deleteOrganization({ organizationId }) {
+        assertTruthy(organizationId, "organizationId");
+        return this._apiClient
+            .request(`/organizations/${encodeURIComponent(organizationId)}`, {
+            method: "DELETE",
+        })
+            .then(() => undefined);
     }
-    updateStreamResolution({ streamId, width, height }) {
-        var _a, _b;
-        if (!streamId || !this.rtcManager) {
-            return;
-        }
-        // no need to report resolution for local participant
-        if (((_b = (_a = this.localParticipant) === null || _a === void 0 ? void 0 : _a.stream) === null || _b === void 0 ? void 0 : _b.id) === streamId) {
-            return;
-        }
-        const old = reportedStreamResolutions.get(streamId);
-        if (!old || old.width !== width || old.height !== height) {
-            this.rtcManager.updateStreamResolution(streamId, null, { width: width || 1, height: height || 1 });
-        }
-        reportedStreamResolutions.set(streamId, { width, height });
+}
+
+class OrganizationServiceCache {
+    constructor({ organizationService, subdomain }) {
+        this._organizationService = organizationService;
+        this._subdomain = subdomain;
+        this._organizationPromise = null;
     }
-    startScreenshare() {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            const screenshareStream = this.localMedia.screenshareStream || (yield this.localMedia.startScreenshare());
-            const onEnded = () => {
-                this.stopScreenshare();
-            };
-            if ("oninactive" in screenshareStream) {
-                // Chrome
-                screenshareStream.addEventListener("inactive", onEnded);
-            }
-            else {
-                // FF
-                (_a = screenshareStream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.addEventListener("ended", onEnded);
-            }
-            (_b = this.rtcManager) === null || _b === void 0 ? void 0 : _b.addNewStream(screenshareStream.id, screenshareStream, false, true);
-            this.screenshares = [
-                ...this.screenshares,
-                {
-                    participantId: this.selfId || "",
-                    id: screenshareStream.id,
-                    hasAudioTrack: false,
-                    stream: screenshareStream,
-                    isLocal: true,
-                },
-            ];
-            this.dispatchEvent(new RoomConnectionEvent("screenshare_started", {
-                detail: {
-                    participantId: this.selfId || "",
-                    id: screenshareStream.id,
-                    hasAudioTrack: false,
-                    stream: screenshareStream,
-                    isLocal: true,
-                },
-            }));
-        });
+    initOrganization() {
+        return this.fetchOrganization().then(() => undefined);
     }
-    stopScreenshare() {
-        var _a;
-        if (this.localMedia.screenshareStream) {
-            const { id } = this.localMedia.screenshareStream;
-            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.removeStream(id, this.localMedia.screenshareStream, null);
-            this.screenshares = this.screenshares.filter((s) => s.id !== id);
-            this.dispatchEvent(new RoomConnectionEvent("screenshare_stopped", { detail: { participantId: this.selfId || "", id } }));
-            this.localMedia.stopScreenshare();
+    fetchOrganization() {
+        if (!this._organizationPromise) {
+            this._organizationPromise = this._organizationService.getOrganizationBySubdomain(this._subdomain);
         }
+        return this._organizationPromise;
     }
-    startCloudRecording() {
-        this.signalSocket.emit("start_recording", {
-            recording: "cloud",
+}
+
+const API_BASE_URL = "https://api.whereby.dev" ;
+function createServices() {
+    const credentialsService = CredentialsService.create({ baseUrl: API_BASE_URL });
+    const apiClient = new ApiClient({
+        fetchDeviceCredentials: credentialsService.getCredentials.bind(credentialsService),
+        baseUrl: API_BASE_URL,
+    });
+    const organizationService = new OrganizationService({ apiClient });
+    const fetchOrganizationFromRoomUrl = (roomUrl) => {
+        const roomUrlObj = new URL(roomUrl);
+        const urls = fromLocation({ host: roomUrlObj.host });
+        const organizationServiceCache = new OrganizationServiceCache({
+            organizationService,
+            subdomain: urls.subdomain,
         });
-        this.dispatchEvent(new RoomConnectionEvent("cloud_recording_request_started"));
-    }
-    stopCloudRecording() {
-        this.signalSocket.emit("stop_recording");
-    }
+        return organizationServiceCache.fetchOrganization();
+    };
+    return {
+        credentialsService,
+        apiClient,
+        organizationService,
+        fetchOrganizationFromRoomUrl,
+    };
 }
 
-const initialState = {
+const selectRoomConnectionState = createSelector(selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, (chatMessages, cloudRecording, localParticipant, localMediaStream, remoteParticipants, screenshares, connectionStatus, streaming, waitingParticipants) => {
+    const state = {
+        chatMessages,
+        cloudRecording: cloudRecording.isRecording ? { status: "recording" } : undefined,
+        localScreenshareStatus: localParticipant.isScreenSharing ? "active" : undefined,
+        localParticipant: Object.assign(Object.assign({}, localParticipant), { stream: localMediaStream }),
+        remoteParticipants,
+        screenshares,
+        connectionStatus,
+        liveStream: streaming.isStreaming
+            ? {
+                status: "streaming",
+                startedAt: streaming.startedAt,
+            }
+            : undefined,
+        waitingParticipants,
+    };
+    return state;
+});
+
+const sdkVersion = "2.0.0-beta4";
+
+const initialState$1 = {
     chatMessages: [],
     remoteParticipants: [],
     connectionStatus: "initializing",
     screenshares: [],
     waitingParticipants: [],
 };
-function updateParticipant(remoteParticipants, participantId, updates) {
-    const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
-    if (!existingParticipant) {
-        return remoteParticipants;
-    }
-    const index = remoteParticipants.indexOf(existingParticipant);
-    return [
-        ...remoteParticipants.slice(0, index),
-        Object.assign(Object.assign({}, existingParticipant), updates),
-        ...remoteParticipants.slice(index + 1),
-    ];
-}
-// omit the internal props
-function convertRemoteParticipantToRemoteParticipantState(p) {
-    return {
-        displayName: p.displayName,
-        id: p.id,
-        isAudioEnabled: p.isAudioEnabled,
-        isLocalParticipant: p.isLocalParticipant,
-        isVideoEnabled: p.isVideoEnabled,
-        stream: p.stream,
-    };
-}
-function addScreenshare(screenshares, screenshare) {
-    const existingScreenshare = screenshares.find((ss) => ss.id === screenshare.id);
-    if (existingScreenshare) {
-        return screenshares;
-    }
-    return [...screenshares, screenshare];
-}
-function reducer(state, action) {
-    switch (action.type) {
-        case "CHAT_MESSAGE":
-            return Object.assign(Object.assign({}, state), { chatMessages: [...state.chatMessages, action.payload] });
-        case "CLOUD_RECORDING_REQUEST_STARTED":
-            return Object.assign(Object.assign({}, state), { cloudRecording: {
-                    status: "requested",
-                } });
-        case "CLOUD_RECORDING_STARTED":
-            return Object.assign(Object.assign({}, state), { cloudRecording: {
-                    status: action.payload.status,
-                    startedAt: action.payload.startedAt,
-                } });
-        case "CLOUD_RECORDING_STARTED_ERROR":
-            return Object.assign(Object.assign({}, state), { cloudRecording: {
-                    status: action.payload.status,
-                    error: action.payload.error,
-                } });
-        case "CLOUD_RECORDING_STOPPED":
-            delete state.cloudRecording;
-            return Object.assign({}, state);
-        case "ROOM_JOINED":
-            return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, waitingParticipants: action.payload.waitingParticipants, connectionStatus: "connected" });
-        case "CONNECTION_STATUS_CHANGED":
-            return Object.assign(Object.assign({}, state), { connectionStatus: action.payload.connectionStatus });
-        case "PARTICIPANT_AUDIO_ENABLED":
-            return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
-                    isAudioEnabled: action.payload.isAudioEnabled,
-                }) });
-        case "PARTICIPANT_JOINED":
-            return Object.assign(Object.assign({}, state), { remoteParticipants: [...state.remoteParticipants, action.payload.paritipant] });
-        case "PARTICIPANT_LEFT":
-            return Object.assign(Object.assign({}, state), { remoteParticipants: [...state.remoteParticipants.filter((p) => p.id !== action.payload.participantId)] });
-        case "PARTICIPANT_STREAM_ADDED":
-            return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
-                    stream: action.payload.stream,
-                }) });
-        case "PARTICIPANT_VIDEO_ENABLED":
-            return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
-                    isVideoEnabled: action.payload.isVideoEnabled,
-                }) });
-        case "PARTICIPANT_METADATA_CHANGED":
-            return Object.assign(Object.assign({}, state), { remoteParticipants: [
-                    ...state.remoteParticipants.map((p) => p.id === action.payload.participantId ? Object.assign(Object.assign({}, p), { displayName: action.payload.displayName }) : p),
-                ] });
-        case "LOCAL_CLIENT_DISPLAY_NAME_CHANGED":
-            if (!state.localParticipant)
-                return state;
-            return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { displayName: action.payload.displayName }) });
-        case "SCREENSHARE_STARTED":
-            return Object.assign(Object.assign({}, state), { screenshares: addScreenshare(state.screenshares, {
-                    participantId: action.payload.participantId,
-                    id: action.payload.id,
-                    hasAudioTrack: action.payload.hasAudioTrack,
-                    stream: action.payload.stream,
-                    isLocal: action.payload.isLocal,
-                }) });
-        case "SCREENSHARE_STOPPED":
-            return Object.assign(Object.assign({}, state), { screenshares: state.screenshares.filter((ss) => ss.id !== action.payload.id) });
-        case "LOCAL_SCREENSHARE_START_ERROR":
-            return Object.assign(Object.assign({}, state), { localScreenshareStatus: undefined });
-        case "LOCAL_SCREENSHARE_STARTING":
-            return Object.assign(Object.assign({}, state), { localScreenshareStatus: "starting" });
-        case "LOCAL_SCREENSHARE_STARTED":
-            return Object.assign(Object.assign({}, state), { localScreenshareStatus: "active" });
-        case "LOCAL_SCREENSHARE_STOPPED":
-            return Object.assign(Object.assign({}, state), { localScreenshareStatus: undefined, screenshares: state.screenshares.filter((ss) => !ss.isLocal) });
-        case "LOCAL_CAMERA_ENABLED":
-            if (!state.localParticipant)
-                return state;
-            return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { isVideoEnabled: action.payload }) });
-        case "LOCAL_MICROPHONE_ENABLED":
-            if (!state.localParticipant)
-                return state;
-            return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { isAudioEnabled: action.payload }) });
-        case "STREAMING_STARTED":
-            return Object.assign(Object.assign({}, state), { liveStream: {
-                    status: action.payload.status,
-                    startedAt: action.payload.startedAt,
-                } });
-        case "STREAMING_STOPPED":
-            delete state.liveStream;
-            return Object.assign({}, state);
-        case "WAITING_PARTICIPANT_JOINED":
-            return Object.assign(Object.assign({}, state), { waitingParticipants: [
-                    ...state.waitingParticipants,
-                    { id: action.payload.participantId, displayName: action.payload.displayName },
-                ] });
-        case "WAITING_PARTICIPANT_LEFT":
-            return Object.assign(Object.assign({}, state), { waitingParticipants: state.waitingParticipants.filter((wp) => wp.id !== action.payload.participantId) });
-        default:
-            throw state;
-    }
-}
 const defaultRoomConnectionOptions = {
     localMediaOptions: {
         audio: true,
@@ -8038,207 +8667,139 @@ const defaultRoomConnectionOptions = {
     },
 };
 function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectionOptions) {
-    const [roomConnection] = useState(() => {
-        var _a;
-        return new RoomConnection(roomUrl, Object.assign(Object.assign({}, roomConnectionOptions), { localMedia: ((_a = roomConnectionOptions === null || roomConnectionOptions === void 0 ? void 0 : roomConnectionOptions.localMedia) === null || _a === void 0 ? void 0 : _a._ref) || undefined }));
+    const [store] = React.useState(() => {
+        if (roomConnectionOptions.localMedia) {
+            return roomConnectionOptions.localMedia.store;
+        }
+        const services = createServices();
+        return createStore({ injectServices: services });
     });
-    const [state, dispatch] = useReducer(reducer, initialState);
-    function createEventListener(eventName, listener, options) {
-        return {
-            eventName,
-            listener,
-            options,
+    const [boundVideoView, setBoundVideoView] = React.useState();
+    const [roomConnectionState, setRoomConnectionState] = React.useState(initialState$1);
+    React.useEffect(() => {
+        const unsubscribe = observeStore(store, selectRoomConnectionState, setRoomConnectionState);
+        const url = new URL(roomUrl); // Throw if invalid Whereby room url
+        const searchParams = new URLSearchParams(url.search);
+        const roomKey = searchParams.get("roomKey");
+        store.dispatch(doAppJoin({
+            displayName: roomConnectionOptions.displayName || "Guest",
+            localMediaOptions: roomConnectionOptions.localMedia
+                ? undefined
+                : roomConnectionOptions.localMediaOptions,
+            roomKey,
+            roomUrl,
+            sdkVersion: sdkVersion,
+            externalId: roomConnectionOptions.externalId || null,
+        }));
+        return () => {
+            unsubscribe();
+            store.dispatch(appLeft());
         };
-    }
-    const eventListeners = React.useMemo(() => [
-        createEventListener("chat_message", (e) => {
-            dispatch({ type: "CHAT_MESSAGE", payload: e.detail });
-        }),
-        createEventListener("cloud_recording_request_started", () => {
-            dispatch({ type: "CLOUD_RECORDING_REQUEST_STARTED" });
-        }),
-        createEventListener("cloud_recording_started", (e) => {
-            const { status, startedAt } = e.detail;
-            dispatch({ type: "CLOUD_RECORDING_STARTED", payload: { status, startedAt } });
-        }),
-        createEventListener("cloud_recording_started_error", (e) => {
-            dispatch({ type: "CLOUD_RECORDING_STARTED_ERROR", payload: e.detail });
-        }),
-        createEventListener("cloud_recording_stopped", () => {
-            dispatch({ type: "CLOUD_RECORDING_STOPPED" });
-        }),
-        createEventListener("local_camera_enabled", (e) => {
-            const { enabled } = e.detail;
-            dispatch({ type: "LOCAL_CAMERA_ENABLED", payload: enabled });
-        }),
-        createEventListener("local_microphone_enabled", (e) => {
-            const { enabled } = e.detail;
-            dispatch({ type: "LOCAL_MICROPHONE_ENABLED", payload: enabled });
-        }),
-        createEventListener("participant_audio_enabled", (e) => {
-            const { participantId, isAudioEnabled } = e.detail;
-            dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
-        }),
-        createEventListener("participant_joined", (e) => {
-            const { remoteParticipant } = e.detail;
-            dispatch({
-                type: "PARTICIPANT_JOINED",
-                payload: {
-                    paritipant: convertRemoteParticipantToRemoteParticipantState(remoteParticipant),
-                },
-            });
-        }),
-        createEventListener("participant_left", (e) => {
-            const { participantId } = e.detail;
-            dispatch({ type: "PARTICIPANT_LEFT", payload: { participantId } });
-        }),
-        createEventListener("participant_metadata_changed", (e) => {
-            const { participantId, displayName } = e.detail;
-            dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
-        }),
-        createEventListener("participant_stream_added", (e) => {
-            const { participantId, stream } = e.detail;
-            dispatch({ type: "PARTICIPANT_STREAM_ADDED", payload: { participantId, stream } });
-        }),
-        createEventListener("participant_video_enabled", (e) => {
-            const { participantId, isVideoEnabled } = e.detail;
-            dispatch({ type: "PARTICIPANT_VIDEO_ENABLED", payload: { participantId, isVideoEnabled } });
-        }),
-        createEventListener("connection_status_changed", (e) => {
-            const { connectionStatus } = e.detail;
-            dispatch({
-                type: "CONNECTION_STATUS_CHANGED",
-                payload: { connectionStatus },
-            });
-        }),
-        createEventListener("room_joined", (e) => {
-            const { localParticipant, remoteParticipants, waitingParticipants } = e.detail;
-            dispatch({
-                type: "ROOM_JOINED",
-                payload: {
-                    localParticipant,
-                    remoteParticipants: remoteParticipants.map(convertRemoteParticipantToRemoteParticipantState),
-                    waitingParticipants,
-                },
-            });
-        }),
-        createEventListener("screenshare_started", (e) => {
-            const { participantId, stream, id, hasAudioTrack, isLocal } = e.detail;
-            dispatch({
-                type: "SCREENSHARE_STARTED",
-                payload: { participantId, stream, id, hasAudioTrack, isLocal },
-            });
-        }),
-        createEventListener("screenshare_stopped", (e) => {
-            var _a;
-            const { participantId, id } = e.detail;
-            dispatch({
-                type: "SCREENSHARE_STOPPED",
-                payload: { participantId, id },
-            });
-            // dispach LOCAL_SCREENSHARE_STOPPED here because the exposed
-            // stopScreenshare method is not called when the screenshare is
-            // stopped by the browser's native stop screenshare button
-            if (participantId === ((_a = state.localParticipant) === null || _a === void 0 ? void 0 : _a.id)) {
-                dispatch({ type: "LOCAL_SCREENSHARE_STOPPED" });
-            }
-        }),
-        createEventListener("streaming_started", (e) => {
-            const { status, startedAt } = e.detail;
-            dispatch({ type: "STREAMING_STARTED", payload: { status, startedAt } });
-        }),
-        createEventListener("streaming_stopped", () => {
-            dispatch({ type: "STREAMING_STOPPED" });
-        }),
-        createEventListener("waiting_participant_joined", (e) => {
-            const { participantId, displayName } = e.detail;
-            dispatch({
-                type: "WAITING_PARTICIPANT_JOINED",
-                payload: { participantId, displayName },
-            });
-        }),
-        createEventListener("waiting_participant_left", (e) => {
-            const { participantId } = e.detail;
-            dispatch({
-                type: "WAITING_PARTICIPANT_LEFT",
-                payload: { participantId },
+    }, []);
+    React.useEffect(() => {
+        if (store && !boundVideoView) {
+            setBoundVideoView(() => (props) => {
+                return React.createElement(VideoView, Object.assign({}, props, {
+                    onResize: ({ stream, width, height, }) => {
+                        store.dispatch(doRtcReportStreamResolution({
+                            streamId: stream.id,
+                            width,
+                            height,
+                        }));
+                    },
+                }));
             });
-        }),
-    ], []);
+        }
+    }, [store, boundVideoView]);
+    const sendChatMessage = React.useCallback((text) => store.dispatch(doSendChatMessage({ text })), [store]);
+    const knock = React.useCallback(() => store.dispatch(doKnockRoom()), [store]);
+    const setDisplayName = React.useCallback((displayName) => store.dispatch(doSetDisplayName({ displayName })), [store]);
+    const toggleCamera = React.useCallback((enabled) => store.dispatch(toggleCameraEnabled({ enabled })), [store]);
+    const toggleMicrophone = React.useCallback((enabled) => store.dispatch(toggleMicrophoneEnabled({ enabled })), [store]);
+    const acceptWaitingParticipant = React.useCallback((participantId) => store.dispatch(doAcceptWaitingParticipant({ participantId })), [store]);
+    const rejectWaitingParticipant = React.useCallback((participantId) => store.dispatch(doRejectWaitingParticipant({ participantId })), [store]);
+    const startCloudRecording = React.useCallback(() => store.dispatch(doStartCloudRecording()), [store]);
+    const startScreenshare = React.useCallback(() => store.dispatch(doStartScreenshare()), [store]);
+    const stopCloudRecording = React.useCallback(() => store.dispatch(doStopCloudRecording()), [store]);
+    const stopScreenshare = React.useCallback(() => store.dispatch(doStopScreenshare()), [store]);
+    return {
+        state: roomConnectionState,
+        actions: {
+            sendChatMessage,
+            knock,
+            setDisplayName,
+            toggleCamera,
+            toggleMicrophone,
+            acceptWaitingParticipant,
+            rejectWaitingParticipant,
+            startCloudRecording,
+            startScreenshare,
+            stopCloudRecording,
+            stopScreenshare,
+        },
+        components: {
+            VideoView: boundVideoView || VideoView,
+        },
+        _ref: store,
+    };
+}
+
+const selectLocalMediaState = createSelector(selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectLocalMediaStream, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, (cameraDeviceError, cameraDevices, currentCameraDeviceId, currentMicrophoneDeviceId, isSettingCameraDevice, isSettingMicrophoneDevice, isStarting, localStream, microphoneDeviceError, microphoneDevices, speakerDevices, startError) => {
+    const state = {
+        cameraDeviceError,
+        cameraDevices,
+        currentCameraDeviceId,
+        currentMicrophoneDeviceId,
+        isSettingCameraDevice,
+        isSettingMicrophoneDevice,
+        isStarting,
+        localStream,
+        microphoneDeviceError,
+        microphoneDevices,
+        speakerDevices,
+        startError,
+    };
+    return state;
+});
+
+const initialState = {
+    cameraDeviceError: null,
+    cameraDevices: [],
+    isSettingCameraDevice: false,
+    isSettingMicrophoneDevice: false,
+    isStarting: false,
+    microphoneDeviceError: null,
+    microphoneDevices: [],
+    speakerDevices: [],
+    startError: null,
+};
+function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
+    const [store] = useState(() => {
+        const services = createServices();
+        return createStore({ injectServices: services });
+    });
+    const [localMediaState, setLocalMediaState] = useState(initialState);
     useEffect(() => {
-        eventListeners.forEach(({ eventName, listener }) => {
-            roomConnection.addEventListener(eventName, listener);
-        });
-        roomConnection.join();
+        const unsubscribe = observeStore(store, selectLocalMediaState, setLocalMediaState);
+        store.dispatch(doStartLocalMedia(optionsOrStream));
         return () => {
-            eventListeners.forEach(({ eventName, listener }) => {
-                roomConnection.removeEventListener(eventName, listener);
-            });
-            roomConnection.leave();
+            unsubscribe();
+            store.dispatch(doStopLocalMedia());
         };
     }, []);
+    const setCameraDevice = useCallback((deviceId) => store.dispatch(setCurrentCameraDeviceId({ deviceId })), [store]);
+    const setMicrophoneDevice = useCallback((deviceId) => store.dispatch(setCurrentMicrophoneDeviceId({ deviceId })), [store]);
+    const toggleCamera = useCallback((enabled) => store.dispatch(toggleCameraEnabled({ enabled })), [store]);
+    const toggleMicrophone = useCallback((enabled) => store.dispatch(toggleMicrophoneEnabled({ enabled })), [store]);
     return {
-        state,
+        state: localMediaState,
         actions: {
-            knock: () => {
-                roomConnection.knock();
-            },
-            sendChatMessage: (text) => {
-                roomConnection.sendChatMessage(text);
-            },
-            setDisplayName: (displayName) => {
-                roomConnection.setDisplayName(displayName);
-                dispatch({ type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED", payload: { displayName } });
-            },
-            toggleCamera: (enabled) => {
-                roomConnection.localMedia.toggleCameraEnabled(enabled);
-            },
-            toggleMicrophone: (enabled) => {
-                roomConnection.localMedia.toggleMichrophoneEnabled(enabled);
-            },
-            acceptWaitingParticipant: (participantId) => {
-                roomConnection.acceptWaitingParticipant(participantId);
-            },
-            rejectWaitingParticipant: (participantId) => {
-                roomConnection.rejectWaitingParticipant(participantId);
-            },
-            startCloudRecording: () => {
-                var _a;
-                // don't start recording if it's already started or requested
-                if (state.cloudRecording && ["recording", "requested"].includes((_a = state.cloudRecording) === null || _a === void 0 ? void 0 : _a.status)) {
-                    return;
-                }
-                roomConnection.startCloudRecording();
-            },
-            stopCloudRecording: () => {
-                roomConnection.stopCloudRecording();
-            },
-            startScreenshare: () => __awaiter(this, void 0, void 0, function* () {
-                dispatch({ type: "LOCAL_SCREENSHARE_STARTING" });
-                try {
-                    yield roomConnection.startScreenshare();
-                    dispatch({ type: "LOCAL_SCREENSHARE_STARTED" });
-                }
-                catch (error) {
-                    dispatch({ type: "LOCAL_SCREENSHARE_START_ERROR", payload: error });
-                }
-            }),
-            stopScreenshare: () => {
-                roomConnection.stopScreenshare();
-            },
-        },
-        components: {
-            VideoView: (props) => React.createElement(VideoView, Object.assign({}, props, {
-                onResize: ({ stream, width, height, }) => {
-                    roomConnection.updateStreamResolution({
-                        streamId: stream.id,
-                        width,
-                        height,
-                    });
-                },
-            })),
+            setCameraDevice,
+            setMicrophoneDevice,
+            toggleCameraEnabled: toggleCamera,
+            toggleMicrophoneEnabled: toggleMicrophone,
         },
-        _ref: roomConnection,
+        store,
     };
 }