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

package/dist/lib.esm.js

@@ -115,7 +115,7 @@ 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-alpha8", 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") {
@@ -5262,7 +5262,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() {
@@ -5288,11 +5288,13 @@ class RoomConnection extends TypedEventTarget {
         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,
@@ -5313,6 +5315,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),
@@ -5339,6 +5342,10 @@ class RoomConnection extends TypedEventTarget {
         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;
@@ -5399,6 +5406,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);
@@ -5417,6 +5488,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;
@@ -5474,14 +5548,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 __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();
             }
@@ -5510,57 +5613,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.logger.log("Connecting to signal socket");
+            this.logger.log("Connected to signal socket");
             this.signalSocket.emit("identify_device", { deviceCredentials });
             this.signalSocket.once("device_identified", () => {
-                this.logger.log("Connected to signal socket");
-                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: this.roomKey,
-                    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) {
@@ -5598,14 +5676,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);
@@ -5624,7 +5718,9 @@ function reducer(state, action) {
         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,
@@ -5649,6 +5745,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;
     }
@@ -5680,9 +5783,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;
@@ -5692,6 +5799,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();
@@ -5700,18 +5815,27 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     return {
         state,
         actions: {
+            knock: () => {
+                roomConnection.knock();
+            },
             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 === null || roomConnection === void 0 ? void 0 : roomConnection.localMedia.toggleCameraEnabled(enabled);
+                roomConnection.localMedia.toggleCameraEnabled(enabled);
             },
             toggleMicrophone: (enabled) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.localMedia.toggleMichrophoneEnabled(enabled);
+                roomConnection.localMedia.toggleMichrophoneEnabled(enabled);
+            },
+            acceptWaitingParticipant: (participantId) => {
+                roomConnection.acceptWaitingParticipant(participantId);
+            },
+            rejectWaitingParticipant: (participantId) => {
+                roomConnection.rejectWaitingParticipant(participantId);
             },
         },
         components: {
@@ -5721,6 +5845,6 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     };
 }
 
-const sdkVersion = "2.0.0-alpha8";
+const sdkVersion = "2.0.0-alpha9";
 
 export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };

package/dist/types.d.ts

@@ -150,6 +150,10 @@ declare class RemoteParticipant extends RoomParticipant {
 declare class LocalParticipant extends RoomParticipant {
     readonly isLocalParticipant = true;
     constructor({ displayName, id, stream, isAudioEnabled, isVideoEnabled }: RoomParticipantData);
+}
+interface WaitingParticipant {
+    id: string;
+    displayName: string | null;
 }
 
 type Logger = Pick<Console, "debug" | "error" | "log" | "warn">;
@@ -161,9 +165,14 @@ interface RoomConnectionOptions {
     localMedia?: LocalMedia;
 }
 type ChatMessage = Pick<ChatMessage$1, "senderId" | "timestamp" | "text">;
+type RoomConnectionStatus = "" | "connecting" | "connected" | "room_locked" | "knocking" | "disconnected" | "accepted" | "rejected";
 type RoomJoinedEvent = {
     localParticipant: LocalParticipant;
     remoteParticipants: RemoteParticipant[];
+    waitingParticipants: WaitingParticipant[];
+};
+type RoomConnectionStatusChangedEvent = {
+    roomConnectionStatus: RoomConnectionStatus;
 };
 type ParticipantJoinedEvent = {
     remoteParticipant: RemoteParticipant;
@@ -187,6 +196,13 @@ type ParticipantMetadataChangedEvent = {
     participantId: string;
     displayName: string;
 };
+type WaitingParticipantJoinedEvent = {
+    participantId: string;
+    displayName: string | null;
+};
+type WaitingParticipantLeftEvent = {
+    participantId: string;
+};
 interface RoomEventsMap {
     chat_message: CustomEvent<ChatMessage>;
     participant_audio_enabled: CustomEvent<ParticipantAudioEnabledEvent>;
@@ -195,7 +211,10 @@ interface RoomEventsMap {
     participant_metadata_changed: CustomEvent<ParticipantMetadataChangedEvent>;
     participant_stream_added: CustomEvent<ParticipantStreamAddedEvent>;
     participant_video_enabled: CustomEvent<ParticipantVideoEnabledEvent>;
+    room_connection_status_changed: CustomEvent<RoomConnectionStatusChangedEvent>;
     room_joined: CustomEvent<RoomJoinedEvent>;
+    waiting_participant_joined: CustomEvent<WaitingParticipantJoinedEvent>;
+    waiting_participant_left: CustomEvent<WaitingParticipantLeftEvent>;
 }
 interface RoomEventTarget extends EventTarget {
     addEventListener<K extends keyof RoomEventsMap>(type: K, listener: (ev: RoomEventsMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
@@ -208,6 +227,8 @@ declare class RoomConnection extends TypedEventTarget {
     roomUrl: URL;
     remoteParticipants: RemoteParticipant[];
     readonly localMediaConstraints?: MediaStreamConstraints;
+    readonly roomName: string;
+    private organizationId;
     private credentialsService;
     private apiClient;
     private organizationService;
@@ -217,7 +238,7 @@ declare class RoomConnection extends TypedEventTarget {
     private signalSocket;
     private rtcManagerDispatcher?;
     private rtcManager?;
-    private roomConnectionState;
+    private roomConnectionStatus;
     private logger;
     private _ownsLocalMedia;
     private displayName?;
@@ -230,14 +251,22 @@ declare class RoomConnection extends TypedEventTarget {
     private _handleClientAudioEnabled;
     private _handleClientVideoEnabled;
     private _handleClientMetadataReceived;
+    private _handleKnockHandled;
+    private _handleKnockerLeft;
+    private _handleRoomJoined;
+    private _handleRoomKnocked;
     private _handleRtcEvent;
     private _handleRtcManagerCreated;
     private _handleAcceptStreams;
     private _handleStreamAdded;
+    private _joinRoom;
     join(): Promise<void>;
+    knock(): void;
     leave(): Promise<void>;
     sendChatMessage(text: string): void;
     setDisplayName(displayName: string): void;
+    acceptWaitingParticipant(participantId: string): void;
+    rejectWaitingParticipant(participantId: string): void;
 }
 
 type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState">;
@@ -247,17 +276,21 @@ interface RoomConnectionState {
     joinError: unknown;
     localParticipant?: LocalParticipant;
     mostRecentChatMessage: ChatMessage | null;
-    roomConnectionStatus?: "connecting" | "connected" | "disconnected";
+    roomConnectionStatus: RoomConnectionStatus;
     remoteParticipants: RemoteParticipantState[];
+    waitingParticipants: WaitingParticipant[];
 }
 interface UseRoomConnectionOptions extends Omit<RoomConnectionOptions, "localMedia"> {
     localMedia?: LocalMediaRef;
 }
 interface RoomConnectionActions {
     sendChatMessage(text: string): void;
+    knock(): void;
     setDisplayName(displayName: string): void;
     toggleCamera(enabled?: boolean): void;
     toggleMicrophone(enabled?: boolean): void;
+    acceptWaitingParticipant(participantId: string): void;
+    rejectWaitingParticipant(participantId: string): void;
 }
 interface RoomConnectionComponents {
     VideoView: typeof _default;
@@ -270,6 +303,6 @@ type RoomConnectionRef = {
 };
 declare function useRoomConnection(roomUrl: string, roomConnectionOptions: UseRoomConnectionOptions): RoomConnectionRef;
 
-declare const sdkVersion = "2.0.0-alpha8";
+declare const sdkVersion = "2.0.0-alpha9";
 
 export { _default as VideoView, sdkVersion, useLocalMedia, useRoomConnection };