@whereby.com/browser-sdk 2.0.0-alpha14 → 2.0.0-alpha16

package/dist/lib.esm.js

@@ -128,7 +128,7 @@ define("WherebyEmbed", {
         if (roomUrl.searchParams.get("roomKey")) {
             this.url.searchParams.append("roomKey", roomUrl.searchParams.get("roomKey"));
         }
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha14", 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-alpha16", 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 (!this.url.searchParams.has(k) && typeof v === "string") {
@@ -6803,6 +6803,7 @@ class VegaRtcManager {
                 clientId,
                 stream: webcamStream,
                 streamId: camStreamId,
+                streamType: "webcam",
             });
 
             clientState.hasEmittedWebcamStream = true;
@@ -6814,6 +6815,7 @@ class VegaRtcManager {
                 clientId,
                 stream: screenStream,
                 streamId: screenShareStreamId,
+                streamType: "screenshare",
             });
 
             clientState.hasEmittedScreenStream = true;
@@ -8316,6 +8318,15 @@ class RemoteParticipant extends RoomParticipant {
         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) {
@@ -8357,6 +8368,8 @@ class RoomConnection extends TypedEventTarget {
         super();
         this.localParticipant = null;
         this.remoteParticipants = [];
+        this.screenshares = [];
+        this._deviceCredentials = null;
         this._ownsLocalMedia = false;
         this.organizationId = "";
         this.roomConnectionStatus = "";
@@ -8416,6 +8429,14 @@ class RoomConnection extends TypedEventTarget {
         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_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;
@@ -8457,7 +8478,35 @@ class RoomConnection extends TypedEventTarget {
     _handleNewChatMessage(message) {
         this.dispatchEvent(new CustomEvent("chat_message", { detail: message }));
     }
+    _handleCloudRecordingStarted({ client }) {
+        this.dispatchEvent(new CustomEvent("cloud_recording_started", {
+            detail: {
+                status: "recording",
+                startedAt: client.startedCloudRecordingAt
+                    ? new Date(client.startedCloudRecordingAt).getTime()
+                    : new Date().getTime(),
+            },
+        }));
+    }
+    _handleStreamingStarted() {
+        this.dispatchEvent(new CustomEvent("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._handleCloudRecordingStarted({ client });
+        }
+        if (client.role.roleName === "streamer") {
+            this._handleStreamingStarted();
+        }
         if (NON_PERSON_ROLES.includes(client.role.roleName)) {
             return;
         }
@@ -8549,8 +8598,17 @@ class RoomConnection extends TypedEventTarget {
             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._handleCloudRecordingStarted({ 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.roomConnectionStatus = "connected";
             this.dispatchEvent(new CustomEvent("room_joined", {
@@ -8570,6 +8628,54 @@ class RoomConnection extends TypedEventTarget {
             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.roomConnectionStatus = "disconnected";
+        this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+            detail: {
+                roomConnectionStatus: this.roomConnectionStatus,
+            },
+        }));
+    }
+    _handleCloudRecordingStopped() {
+        this.dispatchEvent(new CustomEvent("cloud_recording_stopped"));
+    }
+    _handleStreamingStopped() {
+        this.dispatchEvent(new CustomEvent("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 }];
+    }
+    _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 CustomEvent("screenshare_stopped", { detail: { participantId, id } }));
+    }
     _handleRtcEvent(eventName, data) {
         if (eventName === "rtc_manager_created") {
             return this._handleRtcManagerCreated(data);
@@ -8577,6 +8683,9 @@ class RoomConnection extends TypedEventTarget {
         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}`);
         }
@@ -8592,6 +8701,9 @@ class RoomConnection extends TypedEventTarget {
             this._handleAcceptStreams(this.remoteParticipants);
         }
     }
+    _handleRtcManagerDestroyed() {
+        this.rtcManager = undefined;
+    }
     _handleAcceptStreams(remoteParticipants) {
         var _a, _b;
         if (!this.rtcManager) {
@@ -8640,13 +8752,24 @@ class RoomConnection extends TypedEventTarget {
             });
         });
     }
-    _handleStreamAdded({ clientId, stream, streamId }) {
+    _handleStreamAdded({ clientId, stream, streamId, streamType }) {
         const remoteParticipant = this.remoteParticipants.find((p) => p.id === clientId);
         if (!remoteParticipant) {
             this.logger.log("WARN: Could not find participant for incoming stream");
             return;
         }
-        this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
+        const remoteParticipantStream = remoteParticipant.streams.find((s) => s.id === streamId);
+        if ((remoteParticipant.stream && remoteParticipant.stream.id === streamId) ||
+            (!remoteParticipant.stream && streamType === "webcam") ||
+            (!remoteParticipant.stream &&
+                !streamType &&
+                remoteParticipantStream &&
+                remoteParticipant.streams.indexOf(remoteParticipantStream) < 1)) {
+            this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
+            return;
+        }
+        // screenshare
+        this.dispatchEvent(new CustomEvent("screenshare_started", { detail: { participantId: clientId, stream, id: streamId } }));
     }
     _joinRoom() {
         this.signalSocket.emit("join_room", {
@@ -8690,9 +8813,9 @@ class RoomConnection extends TypedEventTarget {
                 yield this.localMedia.start();
             }
             // Identify device on signal connection
-            const deviceCredentials = yield this.credentialsService.getCredentials();
+            this._deviceCredentials = yield this.credentialsService.getCredentials();
             this.logger.log("Connected to signal socket");
-            this.signalSocket.emit("identify_device", { deviceCredentials });
+            this.signalSocket.emit("identify_device", { deviceCredentials: this._deviceCredentials });
             this.signalSocket.once("device_identified", () => {
                 this._joinRoom();
             });
@@ -8763,11 +8886,20 @@ class RoomConnection extends TypedEventTarget {
 
 const initialState = {
     chatMessages: [],
-    roomConnectionStatus: "",
+    cloudRecording: {
+        status: "",
+        startedAt: null,
+    },
     isJoining: false,
     joinError: null,
     mostRecentChatMessage: null,
     remoteParticipants: [],
+    roomConnectionStatus: "",
+    screenshares: [],
+    streaming: {
+        status: "",
+        startedAt: null,
+    },
     waitingParticipants: [],
 };
 function updateParticipant(remoteParticipants, participantId, updates) {
@@ -8782,10 +8914,27 @@ function updateParticipant(remoteParticipants, participantId, updates) {
         ...remoteParticipants.slice(index + 1),
     ];
 }
+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], mostRecentChatMessage: action.payload });
+        case "CLOUD_RECORDING_STARTED":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: action.payload.status,
+                    startedAt: action.payload.startedAt,
+                } });
+        case "CLOUD_RECORDING_STOPPED":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: "",
+                    startedAt: null,
+                } });
         case "ROOM_JOINED":
             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":
@@ -8814,6 +8963,25 @@ 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 "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,
+                }) });
+        case "SCREENSHARE_STOPPED":
+            return Object.assign(Object.assign({}, state), { screenshares: state.screenshares.filter((ss) => ss.participantId !== action.payload.participantId || ss.id !== action.payload.id) });
+        case "STREAMING_STARTED":
+            return Object.assign(Object.assign({}, state), { streaming: {
+                    status: action.payload.status,
+                    startedAt: action.payload.startedAt,
+                } });
+        case "STREAMING_STOPPED":
+            return Object.assign(Object.assign({}, state), { streaming: {
+                    status: "",
+                    startedAt: null,
+                } });
         case "WAITING_PARTICIPANT_JOINED":
             return Object.assign(Object.assign({}, state), { waitingParticipants: [
                     ...state.waitingParticipants,
@@ -8836,6 +9004,13 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             const chatMessage = e.detail;
             dispatch({ type: "CHAT_MESSAGE", payload: chatMessage });
         });
+        roomConnection.addEventListener("cloud_recording_started", (e) => {
+            const { status, startedAt } = e.detail;
+            dispatch({ type: "CLOUD_RECORDING_STARTED", payload: { status, startedAt } });
+        });
+        roomConnection.addEventListener("cloud_recording_stopped", () => {
+            dispatch({ type: "CLOUD_RECORDING_STOPPED" });
+        });
         roomConnection.addEventListener("participant_audio_enabled", (e) => {
             const { participantId, isAudioEnabled } = e.detail;
             dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
@@ -8868,6 +9043,21 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             const { participantId, displayName } = e.detail;
             dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
         });
+        roomConnection.addEventListener("screenshare_started", (e) => {
+            const { participantId, id, hasAudioTrack, stream } = e.detail;
+            dispatch({ type: "SCREENSHARE_STARTED", payload: { participantId, id, hasAudioTrack, stream } });
+        });
+        roomConnection.addEventListener("screenshare_stopped", (e) => {
+            const { participantId, id } = e.detail;
+            dispatch({ type: "SCREENSHARE_STOPPED", payload: { participantId, id } });
+        });
+        roomConnection.addEventListener("streaming_started", (e) => {
+            const { status, startedAt } = e.detail;
+            dispatch({ type: "STREAMING_STARTED", payload: { status, startedAt } });
+        });
+        roomConnection.addEventListener("streaming_stopped", () => {
+            dispatch({ type: "STREAMING_STOPPED" });
+        });
         roomConnection.addEventListener("waiting_participant_joined", (e) => {
             const { participantId, displayName } = e.detail;
             dispatch({ type: "WAITING_PARTICIPANT_JOINED", payload: { participantId, displayName } });
@@ -8914,6 +9104,6 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     };
 }
 
-const sdkVersion = "2.0.0-alpha14";
+const sdkVersion = "2.0.0-alpha16";
 
 export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };

package/dist/types.d.ts

@@ -145,6 +145,8 @@ declare class RemoteParticipant extends RoomParticipant {
     readonly newJoiner: boolean;
     readonly streams: Stream[];
     constructor({ displayName, id, newJoiner, streams, isAudioEnabled, isVideoEnabled, }: RoomParticipantData & RemoteParticipantData);
+    addStream(streamId: string, state: StreamState): void;
+    removeStream(streamId: string): void;
     updateStreamState(streamId: string, state: StreamState): void;
 }
 declare class LocalParticipant extends RoomParticipant {
@@ -154,6 +156,13 @@ declare class LocalParticipant extends RoomParticipant {
 interface WaitingParticipant {
     id: string;
     displayName: string | null;
+}
+declare class Screenshare {
+    readonly participantId: string;
+    readonly id: string;
+    readonly hasAudioTrack: boolean;
+    readonly stream?: MediaStream;
+    constructor({ participantId, id, hasAudioTrack, stream }: Screenshare);
 }
 
 type Logger = Pick<Console, "debug" | "error" | "log" | "warn">;
@@ -166,6 +175,14 @@ interface RoomConnectionOptions {
 }
 type ChatMessage = Pick<ChatMessage$1, "senderId" | "timestamp" | "text">;
 type RoomConnectionStatus = "" | "connecting" | "connected" | "room_locked" | "knocking" | "disconnecting" | "disconnected" | "accepted" | "rejected";
+type CloudRecordingState = {
+    status: "" | "recording";
+    startedAt: number | null;
+};
+type StreamingState = {
+    status: "" | "streaming";
+    startedAt: number | null;
+};
 type RoomJoinedEvent = {
     localParticipant: LocalParticipant;
     remoteParticipants: RemoteParticipant[];
@@ -196,6 +213,16 @@ type ParticipantMetadataChangedEvent = {
     participantId: string;
     displayName: string;
 };
+type ScreenshareStartedEvent = {
+    participantId: string;
+    id: string;
+    hasAudioTrack: boolean;
+    stream: MediaStream;
+};
+type ScreenshareStoppedEvent = {
+    participantId: string;
+    id: string;
+};
 type WaitingParticipantJoinedEvent = {
     participantId: string;
     displayName: string | null;
@@ -205,6 +232,7 @@ type WaitingParticipantLeftEvent = {
 };
 interface RoomEventsMap {
     chat_message: CustomEvent<ChatMessage>;
+    cloud_recording_started: CustomEvent<CloudRecordingState>;
     participant_audio_enabled: CustomEvent<ParticipantAudioEnabledEvent>;
     participant_joined: CustomEvent<ParticipantJoinedEvent>;
     participant_left: CustomEvent<ParticipantLeftEvent>;
@@ -213,6 +241,9 @@ interface RoomEventsMap {
     participant_video_enabled: CustomEvent<ParticipantVideoEnabledEvent>;
     room_connection_status_changed: CustomEvent<RoomConnectionStatusChangedEvent>;
     room_joined: CustomEvent<RoomJoinedEvent>;
+    screenshare_started: CustomEvent<ScreenshareStartedEvent>;
+    screenshare_stopped: CustomEvent<ScreenshareStoppedEvent>;
+    streaming_started: CustomEvent<StreamingState>;
     waiting_participant_joined: CustomEvent<WaitingParticipantJoinedEvent>;
     waiting_participant_left: CustomEvent<WaitingParticipantLeftEvent>;
 }
@@ -226,6 +257,7 @@ declare class RoomConnection extends TypedEventTarget {
     localParticipant: LocalParticipant | null;
     roomUrl: URL;
     remoteParticipants: RemoteParticipant[];
+    screenshares: Screenshare[];
     readonly localMediaConstraints?: MediaStreamConstraints;
     readonly roomName: string;
     private organizationId;
@@ -235,7 +267,9 @@ declare class RoomConnection extends TypedEventTarget {
     private organizationServiceCache;
     private organizationApiClient;
     private roomService;
+    private _deviceCredentials;
     private signalSocket;
+    private signalSocketManager;
     private rtcManagerDispatcher?;
     private rtcManager?;
     private roomConnectionStatus;
@@ -247,6 +281,8 @@ declare class RoomConnection extends TypedEventTarget {
     constructor(roomUrl: string, { displayName, localMedia, localMediaConstraints, logger, roomKey }: RoomConnectionOptions);
     get roomKey(): string | null;
     private _handleNewChatMessage;
+    private _handleCloudRecordingStarted;
+    private _handleStreamingStarted;
     private _handleNewClient;
     private _handleClientLeft;
     private _handleClientAudioEnabled;
@@ -256,8 +292,15 @@ declare class RoomConnection extends TypedEventTarget {
     private _handleKnockerLeft;
     private _handleRoomJoined;
     private _handleRoomKnocked;
+    private _handleReconnect;
+    private _handleDisconnect;
+    private _handleCloudRecordingStopped;
+    private _handleStreamingStopped;
+    private _handleScreenshareStarted;
+    private _handleScreenshareStopped;
     private _handleRtcEvent;
     private _handleRtcManagerCreated;
+    private _handleRtcManagerDestroyed;
     private _handleAcceptStreams;
     private _handleStreamAdded;
     private _joinRoom;
@@ -273,12 +316,15 @@ declare class RoomConnection extends TypedEventTarget {
 type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState">;
 interface RoomConnectionState {
     chatMessages: ChatMessage[];
+    cloudRecording: CloudRecordingState;
     isJoining: boolean;
     joinError: unknown;
     localParticipant?: LocalParticipant;
     mostRecentChatMessage: ChatMessage | null;
-    roomConnectionStatus: RoomConnectionStatus;
     remoteParticipants: RemoteParticipantState[];
+    screenshares: Screenshare[];
+    roomConnectionStatus: RoomConnectionStatus;
+    streaming: StreamingState;
     waitingParticipants: WaitingParticipant[];
 }
 interface UseRoomConnectionOptions extends Omit<RoomConnectionOptions, "localMedia"> {
@@ -304,6 +350,6 @@ type RoomConnectionRef = {
 };
 declare function useRoomConnection(roomUrl: string, roomConnectionOptions: UseRoomConnectionOptions): RoomConnectionRef;
 
-declare const sdkVersion = "2.0.0-alpha14";
+declare const sdkVersion = "2.0.0-alpha16";
 
 export { _default as VideoView, sdkVersion, useLocalMedia, useRoomConnection };