@whereby.com/browser-sdk 2.0.0-alpha7 → 2.0.0-alpha9

package/dist/lib.cjs.js

@@ -130,7 +130,7 @@ heresy.define("WherebyEmbed", {
         if (!subdomain)
             return this.html `Whereby: Missing subdomain attr.`;
         const url = new URL(room, `https://${subdomain}.whereby.com`);
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha7", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha9", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
         // add to URL if set in any way
         (o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
             if (!url.searchParams.has(k) && typeof v === "string") {
@@ -5277,7 +5277,7 @@ class LocalParticipant extends RoomParticipant {
     }
 }
 
-const API_BASE_URL = "https://api.appearin.net";
+const API_BASE_URL = "https://api.whereby.dev";
 const SIGNAL_BASE_URL = "wss://signal.appearin.net";
 const NON_PERSON_ROLES = ["recorder", "streamer"];
 function createSocket() {
@@ -5290,6 +5290,7 @@ function createSocket() {
         reconnectionDelay: 5000,
         reconnectionDelayMax: 30000,
         timeout: 10000,
+        withCredentials: true,
     };
     return new ServerSocket(SOCKET_HOST, socketConf);
 }
@@ -5298,13 +5299,17 @@ const noop = () => {
 };
 const TypedEventTarget = EventTarget;
 class RoomConnection extends TypedEventTarget {
-    constructor(roomUrl, { displayName, localMediaConstraints, logger, localMedia }) {
+    constructor(roomUrl, { displayName, localMedia, localMediaConstraints, logger, roomKey }) {
         super();
         this.localParticipant = null;
         this.remoteParticipants = [];
-        this.roomConnectionState = "";
         this._ownsLocalMedia = false;
+        this.organizationId = "";
+        this.roomConnectionStatus = "";
         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,
@@ -5325,6 +5330,7 @@ class RoomConnection extends TypedEventTarget {
         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),
@@ -5346,10 +5352,15 @@ class RoomConnection extends TypedEventTarget {
         // 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));
         // Set up local media listeners
         this.localMedia.addEventListener("camera_enabled", (e) => {
             const { enabled } = e.detail;
@@ -5360,6 +5371,12 @@ class RoomConnection extends TypedEventTarget {
             this.signalSocket.emit("enable_audio", { enabled });
         });
     }
+    get roomKey() {
+        return this._roomKey;
+    }
+    _handleNewChatMessage(message) {
+        this.dispatchEvent(new CustomEvent("chat_message", { detail: message }));
+    }
     _handleNewClient({ client }) {
         if (NON_PERSON_ROLES.includes(client.role.roleName)) {
             return;
@@ -5404,6 +5421,70 @@ class RoomConnection extends TypedEventTarget {
             detail: { participantId: remoteParticipant.id, displayName },
         }));
     }
+    _handleKnockHandled(payload) {
+        const { resolution } = payload;
+        if (resolution === "accepted") {
+            this.roomConnectionStatus = "accepted";
+            this._roomKey = payload.metadata.roomKey;
+            this._joinRoom();
+        }
+        else if (resolution === "rejected") {
+            this.roomConnectionStatus = "rejected";
+            this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+                detail: {
+                    roomConnectionStatus: this.roomConnectionStatus,
+                },
+            }));
+        }
+    }
+    _handleKnockerLeft(payload) {
+        const { clientId } = payload;
+        this.dispatchEvent(new CustomEvent("waiting_participant_left", {
+            detail: { participantId: clientId },
+        }));
+    }
+    _handleRoomJoined(event) {
+        const { error, isLocked, room, selfId } = event;
+        if (error === "room_locked" && isLocked) {
+            this.roomConnectionStatus = "room_locked";
+            this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+                detail: {
+                    roomConnectionStatus: this.roomConnectionStatus,
+                },
+            }));
+            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 }));
+            this.remoteParticipants = clients
+                .filter((c) => c.id !== selfId)
+                .map((c) => new RemoteParticipant(Object.assign(Object.assign({}, c), { newJoiner: false })));
+            this.roomConnectionStatus = "connected";
+            this.dispatchEvent(new CustomEvent("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 CustomEvent("waiting_participant_joined", {
+            detail: { participantId: clientId, displayName },
+        }));
+    }
     _handleRtcEvent(eventName, data) {
         if (eventName === "rtc_manager_created") {
             return this._handleRtcManagerCreated(data);
@@ -5422,6 +5503,9 @@ class RoomConnection extends TypedEventTarget {
         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);
+        }
     }
     _handleAcceptStreams(remoteParticipants) {
         var _a, _b;
@@ -5479,14 +5563,43 @@ class RoomConnection extends TypedEventTarget {
         }
         this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
     }
+    _joinRoom() {
+        this.signalSocket.emit("join_room", {
+            avatarUrl: null,
+            config: {
+                isAudioEnabled: this.localMedia.isMicrophoneEnabled(),
+                isVideoEnabled: this.localMedia.isCameraEnabled(),
+            },
+            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 }`,
+        });
+    }
     join() {
         return tslib.__awaiter(this, void 0, void 0, function* () {
-            if (["connected", "connecting"].includes(this.roomConnectionState)) {
-                console.warn(`Trying to join room state is ${this.roomConnectionState}`);
+            if (["connected", "connecting"].includes(this.roomConnectionStatus)) {
+                console.warn(`Trying to join when room state is already ${this.roomConnectionStatus}`);
                 return;
             }
             this.logger.log("Joining room");
-            this.roomConnectionState = "connecting";
+            this.roomConnectionStatus = "connecting";
+            this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+                detail: {
+                    roomConnectionStatus: this.roomConnectionStatus,
+                },
+            }));
+            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();
             }
@@ -5515,60 +5628,32 @@ class RoomConnection extends TypedEventTarget {
                     simulcastScreenshareOn: false,
                 },
             });
-            const organization = yield this.organizationServiceCache.fetchOrganization();
-            if (!organization) {
-                throw new Error("Invalid room url");
-            }
             // Identify device on signal connection
             const deviceCredentials = yield this.credentialsService.getCredentials();
-            this.signalSocket.connect();
-            // TODO: Handle connection and failed connection properly
-            this.signalSocket.on("connect", () => {
-                this.logger.log("Connected to signal socket");
-                this.signalSocket.emit("identify_device", { deviceCredentials });
-            });
+            this.logger.log("Connected to signal socket");
+            this.signalSocket.emit("identify_device", { deviceCredentials });
             this.signalSocket.once("device_identified", () => {
-                this.signalSocket.emit("join_room", {
-                    avatarUrl: null,
-                    config: {
-                        isAudioEnabled: this.localMedia.isMicrophoneEnabled(),
-                        isVideoEnabled: this.localMedia.isCameraEnabled(),
-                    },
-                    deviceCapabilities: { canScreenshare: true },
-                    displayName: this.displayName,
-                    isCoLocated: false,
-                    isDevicePermissionDenied: false,
-                    kickFromOtherRooms: false,
-                    organizationId: organization.organizationId,
-                    roomKey: null,
-                    roomName: this.roomUrl.pathname,
-                    selfId: "",
-                    userAgent: `browser-sdk:${sdkVersion }`,
-                });
-            });
-            this.signalSocket.once("room_joined", (res) => {
-                const { selfId, room: { clients }, } = res;
-                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 }));
-                this.remoteParticipants = clients
-                    .filter((c) => c.id !== selfId)
-                    .map((c) => new RemoteParticipant(Object.assign(Object.assign({}, c), { newJoiner: false })));
-                // Accept remote streams if RTC manager has been initialized
-                if (this.rtcManager) {
-                    this._handleAcceptStreams(this.remoteParticipants);
-                }
-                this.roomConnectionState = "connected";
-                this.dispatchEvent(new CustomEvent("room_joined", {
-                    detail: {
-                        localParticipant: this.localParticipant,
-                        remoteParticipants: this.remoteParticipants,
-                    },
-                }));
+                this._joinRoom();
             });
         });
     }
+    knock() {
+        this.roomConnectionStatus = "knocking";
+        this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+            detail: {
+                roomConnectionStatus: this.roomConnectionStatus,
+            },
+        }));
+        this.signalSocket.emit("knock_room", {
+            displayName: this.displayName,
+            imageUrl: null,
+            kickFromOtherRooms: true,
+            liveVideo: false,
+            organizationId: this.organizationId,
+            roomKey: this._roomKey,
+            roomName: this.roomName,
+        });
+    }
     leave() {
         return new Promise((resolve) => {
             if (this._ownsLocalMedia) {
@@ -5593,6 +5678,11 @@ class RoomConnection extends TypedEventTarget {
             });
         });
     }
+    sendChatMessage(text) {
+        this.signalSocket.emit("chat_message", {
+            text,
+        });
+    }
     setDisplayName(displayName) {
         this.signalSocket.emit("send_client_metadata", {
             type: "UserData",
@@ -5601,12 +5691,30 @@ class RoomConnection extends TypedEventTarget {
             },
         });
     }
+    acceptWaitingParticipant(participantId) {
+        this.signalSocket.emit("handle_knock", {
+            action: "accept",
+            clientId: participantId,
+            response: {},
+        });
+    }
+    rejectWaitingParticipant(participantId) {
+        this.signalSocket.emit("handle_knock", {
+            action: "reject",
+            clientId: participantId,
+            response: {},
+        });
+    }
 }
 
 const initialState = {
+    chatMessages: [],
+    roomConnectionStatus: "",
     isJoining: false,
     joinError: null,
+    mostRecentChatMessage: null,
     remoteParticipants: [],
+    waitingParticipants: [],
 };
 function updateParticipant(remoteParticipants, participantId, updates) {
     const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
@@ -5622,8 +5730,12 @@ function updateParticipant(remoteParticipants, participantId, updates) {
 }
 function reducer(state, action) {
     switch (action.type) {
+        case "CHAT_MESSAGE":
+            return Object.assign(Object.assign({}, state), { chatMessages: [...state.chatMessages, action.payload], mostRecentChatMessage: action.payload });
         case "ROOM_JOINED":
-            return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, roomConnectionStatus: "connected" });
+            return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, waitingParticipants: action.payload.waitingParticipants, roomConnectionStatus: "connected" });
+        case "ROOM_CONNECTION_STATUS_CHANGED":
+            return Object.assign(Object.assign({}, state), { roomConnectionStatus: action.payload.roomConnectionStatus });
         case "PARTICIPANT_AUDIO_ENABLED":
             return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
                     isAudioEnabled: action.payload.isAudioEnabled,
@@ -5648,6 +5760,13 @@ function reducer(state, action) {
             if (!state.localParticipant)
                 return state;
             return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { displayName: action.payload.displayName }) });
+        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;
     }
@@ -5659,6 +5778,10 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     });
     const [state, dispatch] = React.useReducer(reducer, initialState);
     React.useEffect(() => {
+        roomConnection.addEventListener("chat_message", (e) => {
+            const chatMessage = e.detail;
+            dispatch({ type: "CHAT_MESSAGE", payload: chatMessage });
+        });
         roomConnection.addEventListener("participant_audio_enabled", (e) => {
             const { participantId, isAudioEnabled } = e.detail;
             dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
@@ -5675,9 +5798,13 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             const { participantId, stream } = e.detail;
             dispatch({ type: "PARTICIPANT_STREAM_ADDED", payload: { participantId, stream } });
         });
+        roomConnection.addEventListener("room_connection_status_changed", (e) => {
+            const { roomConnectionStatus } = e.detail;
+            dispatch({ type: "ROOM_CONNECTION_STATUS_CHANGED", payload: { roomConnectionStatus } });
+        });
         roomConnection.addEventListener("room_joined", (e) => {
-            const { localParticipant, remoteParticipants } = e.detail;
-            dispatch({ type: "ROOM_JOINED", payload: { localParticipant, remoteParticipants } });
+            const { localParticipant, remoteParticipants, waitingParticipants } = e.detail;
+            dispatch({ type: "ROOM_JOINED", payload: { localParticipant, remoteParticipants, waitingParticipants } });
         });
         roomConnection.addEventListener("participant_video_enabled", (e) => {
             const { participantId, isVideoEnabled } = e.detail;
@@ -5687,6 +5814,14 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             const { participantId, displayName } = e.detail;
             dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
         });
+        roomConnection.addEventListener("waiting_participant_joined", (e) => {
+            const { participantId, displayName } = e.detail;
+            dispatch({ type: "WAITING_PARTICIPANT_JOINED", payload: { participantId, displayName } });
+        });
+        roomConnection.addEventListener("waiting_participant_left", (e) => {
+            const { participantId } = e.detail;
+            dispatch({ type: "WAITING_PARTICIPANT_LEFT", payload: { participantId } });
+        });
         roomConnection.join();
         return () => {
             roomConnection.leave();
@@ -5695,16 +5830,28 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     return {
         state,
         actions: {
-            toggleCamera: (enabled) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.localMedia.toggleCameraEnabled(enabled);
+            knock: () => {
+                roomConnection.knock();
             },
-            toggleMicrophone: (enabled) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.localMedia.toggleMichrophoneEnabled(enabled);
+            sendChatMessage: (text) => {
+                roomConnection.sendChatMessage(text);
             },
             setDisplayName: (displayName) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.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);
+            },
         },
         components: {
             VideoView,
@@ -5713,7 +5860,7 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     };
 }
 
-const sdkVersion = "2.0.0-alpha7";
+const sdkVersion = "2.0.0-alpha9";
 
 exports.VideoView = VideoView;
 exports.sdkVersion = sdkVersion;