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

package/README.md

@@ -89,6 +89,26 @@ function MyCallUX( { roomUrl, localStream }) {
 
 ```
 
+##### Usage with Next.js
+If you are integrating these React hooks with Next.js, you need to ensure your custom video experience components are
+reneded client side, as the underlying APIs we use are only available in the browser context. Simply add `"use client";`
+to the top of component, like in the following example:
+
+```js
+"use client";
+
+import { VideoView, useLocalMedia } from "@whereby.com/browser-sdk";
+
+export default function MyNextVideoExperience() {
+  const { state, actions } = useLocalMedia({ audio: false, video: true });
+
+  return (
+    <p>{ state.localStream && <VideoView muted stream={state.localStream} /> }</p>
+  );
+}
+
+```
+
 ### Web component for embedding
 
 Use the `<whereby-embed />` web component to make use of Whereby's pre-built responsive UI. Refer to our [documentation](https://docs.whereby.com/embedding-rooms/in-a-web-page/using-the-whereby-embed-element) to learn which attributes are supported.

package/dist/lib.cjs

@@ -150,7 +150,7 @@ heresy.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") {
@@ -6825,6 +6825,7 @@ class VegaRtcManager {
                 clientId,
                 stream: webcamStream,
                 streamId: camStreamId,
+                streamType: "webcam",
             });
 
             clientState.hasEmittedWebcamStream = true;
@@ -6836,6 +6837,7 @@ class VegaRtcManager {
                 clientId,
                 stream: screenStream,
                 streamId: screenShareStreamId,
+                streamType: "screenshare",
             });
 
             clientState.hasEmittedScreenStream = true;
@@ -8338,6 +8340,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) {
@@ -8379,6 +8390,8 @@ class RoomConnection extends TypedEventTarget {
         super();
         this.localParticipant = null;
         this.remoteParticipants = [];
+        this.screenshares = [];
+        this._deviceCredentials = null;
         this._ownsLocalMedia = false;
         this.organizationId = "";
         this.roomConnectionStatus = "";
@@ -8438,6 +8451,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;
@@ -8479,7 +8500,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;
         }
@@ -8571,8 +8620,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", {
@@ -8592,6 +8650,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);
@@ -8599,6 +8705,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}`);
         }
@@ -8614,6 +8723,9 @@ class RoomConnection extends TypedEventTarget {
             this._handleAcceptStreams(this.remoteParticipants);
         }
     }
+    _handleRtcManagerDestroyed() {
+        this.rtcManager = undefined;
+    }
     _handleAcceptStreams(remoteParticipants) {
         var _a, _b;
         if (!this.rtcManager) {
@@ -8662,13 +8774,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", {
@@ -8712,9 +8835,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();
             });
@@ -8785,11 +8908,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) {
@@ -8804,10 +8936,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":
@@ -8836,6 +8985,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,
@@ -8858,6 +9026,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 } });
@@ -8890,6 +9065,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 } });
@@ -8936,7 +9126,7 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     };
 }
 
-const sdkVersion = "2.0.0-alpha14";
+const sdkVersion = "2.0.0-alpha16";
 
 exports.VideoView = VideoView;
 exports.sdkVersion = sdkVersion;