@whereby.com/browser-sdk 2.0.0-beta4 → 2.1.0-beta1

package/dist/embed/index.d.ts

@@ -1,4 +1,6 @@
-interface WherebyEmbedAttributes {
+import { ReactHTMLElement } from 'react';
+
+interface WherebyEmbedElementAttributes extends ReactHTMLElement<HTMLElement> {
     audio: string;
     avatarUrl: string;
     background: string;
@@ -35,10 +37,68 @@ interface WherebyEmbedAttributes {
     video: string;
     virtualBackgroundUrl: string;
 }
+interface WherebyEmbedElementEventMap {
+    ready: CustomEvent;
+    knock: CustomEvent;
+    participantupdate: CustomEvent<{
+        count: number;
+    }>;
+    join: CustomEvent;
+    leave: CustomEvent<{
+        removed: boolean;
+    }>;
+    participant_join: CustomEvent<{
+        participant: {
+            metadata: string;
+        };
+    }>;
+    participant_leave: CustomEvent<{
+        participant: {
+            metadata: string;
+        };
+    }>;
+    microphone_toggle: CustomEvent<{
+        enabled: boolean;
+    }>;
+    camera_toggle: CustomEvent<{
+        enabled: boolean;
+    }>;
+    chat_toggle: CustomEvent<{
+        open: boolean;
+    }>;
+    pip_toggle: CustomEvent<{
+        open: boolean;
+    }>;
+    deny_device_permission: CustomEvent<{
+        denied: boolean;
+    }>;
+    screenshare_toggle: CustomEvent<{
+        enabled: boolean;
+    }>;
+    streaming_status_change: CustomEvent<{
+        status: string;
+    }>;
+    connection_status_change: CustomEvent<{
+        status: "stable" | "unstable";
+    }>;
+}
+interface WherebyEmbedElementCommands {
+    startRecording: () => void;
+    stopRecording: () => void;
+    startStreaming: () => void;
+    stopStreaming: () => void;
+    toggleCamera: (enabled?: boolean) => void;
+    toggleMicrophone: (enabled?: boolean) => void;
+    toggleScreenshare: (enabled?: boolean) => void;
+    toogleChat: (enabled?: boolean) => void;
+}
+interface WherebyEmbedElement extends HTMLIFrameElement, WherebyEmbedElementCommands {
+    addEventListener<K extends keyof (WherebyEmbedElementEventMap & HTMLElementEventMap)>(type: K, listener: (this: HTMLIFrameElement, ev: (WherebyEmbedElementEventMap & HTMLElementEventMap)[K]) => void, options?: boolean | AddEventListenerOptions | undefined): void;
+}
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            ["whereby-embed"]: Partial<WherebyEmbedAttributes>;
+            ["whereby-embed"]: Partial<WherebyEmbedElementAttributes>;
         }
     }
 }
@@ -46,4 +106,4 @@ declare const _default: {
     sdkVersion: string;
 };
 
-export { _default as default };
+export { type WherebyEmbedElement, _default as default };

package/dist/embed/index.esm.js

@@ -20,7 +20,7 @@ function parseRoomUrlAndSubdomain(roomAttribute, subdomainAttribute) {
     };
 }
 
-const sdkVersion = "2.0.0-beta4";
+const sdkVersion = "2.1.0-beta1";
 
 const boolAttrs = [
     "audio",
@@ -119,7 +119,7 @@ define("WherebyEmbed", {
     toggleChat(enabled) {
         this._postCommand("toggle_chat", [enabled]);
     },
-    onmessage({ origin, data }) {
+    onmessage({ origin, data, }) {
         if (!this.roomUrl || origin !== this.roomUrl.origin)
             return;
         const { type, payload: detail } = data;
@@ -147,7 +147,7 @@ define("WherebyEmbed", {
         title=${title || "Video calling component"}
         ref=${this.iframe}
         src=${this.roomUrl}
-        allow="autoplay; camera; microphone; fullscreen; speaker; display-capture" />
+        allow="autoplay; camera; microphone; fullscreen; speaker; display-capture; media-capture" />
       `;
     },
 });

package/dist/react/index.d.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import React__default from 'react';
+import * as React$1 from 'react';
 import _whereby_jslib_media_src_utils_ServerSocket, { ChatMessage as ChatMessage$2 } from '@whereby/jslib-media/src/utils/ServerSocket';
 import * as redux_thunk from 'redux-thunk';
 import { AxiosRequestConfig } from 'axios';
@@ -13,15 +12,18 @@ interface VideoViewSelfProps {
     stream: MediaStream;
     muted?: boolean;
     mirror?: boolean;
-    style?: React__default.CSSProperties;
+    style?: React$1.CSSProperties;
     onResize?: ({ width, height, stream }: {
         width: number;
         height: number;
         stream: MediaStream;
     }) => void;
+    onSetAspectRatio?: ({ aspectRatio }: {
+        aspectRatio: number;
+    }) => void;
 }
-type VideoViewProps = VideoViewSelfProps & React__default.DetailedHTMLProps<React__default.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
-declare const _default: ({ muted, mirror, stream, onResize, ...rest }: VideoViewProps) => React__default.JSX.Element;
+type VideoViewProps = VideoViewSelfProps & React$1.DetailedHTMLProps<React$1.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
+declare const _default: ({ muted, mirror, stream, onResize, onSetAspectRatio, ...rest }: VideoViewProps) => React$1.JSX.Element;
 
 interface RoomParticipantData {
     displayName: string;
@@ -584,6 +586,10 @@ type ConnectionStatus$1 = "initializing" | "connecting" | "connected" | "reconne
  * Reducer
  */
 interface RoomConnectionState$1 {
+    session: {
+        createdAt: string;
+        id: string;
+    } | null;
     status: ConnectionStatus$1;
     error: unknown;
 }
@@ -809,7 +815,6 @@ interface RoomConnectionActions {
     stopCloudRecording(): void;
     stopScreenshare(): void;
 }
-
 type VideoViewComponentProps = Omit<React.ComponentProps<typeof _default>, "onResize">;
 interface RoomConnectionComponents {
     VideoView: (props: VideoViewComponentProps) => ReturnType<typeof _default>;
@@ -820,6 +825,7 @@ type RoomConnectionRef = {
     components: RoomConnectionComponents;
     _ref: Store;
 };
+
 declare function useRoomConnection(roomUrl: string, roomConnectionOptions?: UseRoomConnectionOptions): RoomConnectionRef;
 
 declare function useLocalMedia(optionsOrStream?: UseLocalMediaOptions | MediaStream): UseLocalMediaResult;

package/dist/react/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useRef, useEffect, useState, useCallback } from 'react';
+import { useState, useEffect, 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';
@@ -85,19 +85,26 @@ function debounce(fn, { delay = 500, edges } = {}) {
 }
 
 var VideoView = (_a) => {
-    var { muted, mirror = false, stream, onResize } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onResize"]);
-    const videoEl = useRef(null);
-    useEffect(() => {
-        if (!videoEl.current || !onResize) {
+    var { muted, mirror = false, stream, onResize, onSetAspectRatio } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onResize", "onSetAspectRatio"]);
+    const videoEl = React.useRef(null);
+    React.useEffect(() => {
+        if (!videoEl.current) {
             return;
         }
         const resizeObserver = new ResizeObserver(debounce(() => {
             if (videoEl.current && (stream === null || stream === void 0 ? void 0 : stream.id)) {
-                onResize({
-                    width: videoEl.current.clientWidth,
-                    height: videoEl.current.clientHeight,
-                    stream,
-                });
+                if (onResize) {
+                    onResize({
+                        width: videoEl.current.clientWidth,
+                        height: videoEl.current.clientHeight,
+                        stream,
+                    });
+                }
+                const h = videoEl.current.videoHeight;
+                const w = videoEl.current.videoWidth;
+                if (w && h && w + h > 20 && onSetAspectRatio) {
+                    onSetAspectRatio({ aspectRatio: w / h });
+                }
             }
         }, { delay: 1000, edges: true }));
         resizeObserver.observe(videoEl.current);
@@ -105,7 +112,7 @@ var VideoView = (_a) => {
             resizeObserver.disconnect();
         };
     }, [stream]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (!videoEl.current) {
             return;
         }
@@ -118,7 +125,7 @@ var VideoView = (_a) => {
             videoEl.current.muted = Boolean(muted);
         }
     }, [muted, stream, videoEl]);
-    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) })));
+    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) })));
 };
 
 const listenerMiddleware = createListenerMiddleware();
@@ -218,6 +225,7 @@ const signalEvents = {
     newClient: createSignalEventAction("newClient"),
     roomJoined: createSignalEventAction("roomJoined"),
     roomKnocked: createSignalEventAction("roomKnocked"),
+    roomSessionEnded: createSignalEventAction("roomSessionEnded"),
     screenshareStarted: createSignalEventAction("screenshareStarted"),
     screenshareStopped: createSignalEventAction("screenshareStopped"),
     streamingStopped: createSignalEventAction("streamingStopped"),
@@ -413,6 +421,7 @@ function forwardSocketEvents(socket, dispatch) {
     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("room_session_ended", (payload) => dispatch(signalEvents.roomSessionEnded(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)));
@@ -1432,7 +1441,7 @@ const doStartLocalMedia = createAppAsyncThunk("localMedia/doStartLocalMedia", (p
     const onDeviceChange = debounce(() => {
         dispatch(doUpdateDeviceList());
     }, { delay: 500 });
-    if (global.navigator.mediaDevices) {
+    if (navigator.mediaDevices) {
         navigator.mediaDevices.addEventListener("devicechange", onDeviceChange);
     }
     // Resolve if existing stream is passed
@@ -1464,7 +1473,7 @@ const doStopLocalMedia = createAppThunk(() => (dispatch, getState) => {
     stream === null || stream === void 0 ? void 0 : stream.getTracks().forEach((track) => {
         track.stop();
     });
-    if (global.navigator.mediaDevices && onDeviceChange) {
+    if (navigator.mediaDevices && onDeviceChange) {
         navigator.mediaDevices.removeEventListener("devicechange", onDeviceChange);
     }
     dispatch(localMediaStopped());
@@ -2038,6 +2047,7 @@ const selectScreenshares = createSelector(selectLocalScreenshareStream, selectRe
 });
 
 const initialState$6 = {
+    session: null,
     status: "initializing",
     error: null,
 };
@@ -2051,12 +2061,24 @@ const roomConnectionSlice = createSlice({
     },
     extraReducers: (builder) => {
         builder.addCase(signalEvents.roomJoined, (state, action) => {
+            var _a, _b;
             //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" });
+            return Object.assign(Object.assign({}, state), { status: "connected", session: (_b = (_a = action.payload.room) === null || _a === void 0 ? void 0 : _a.session) !== null && _b !== void 0 ? _b : null });
+        });
+        builder.addCase(signalEvents.newClient, (state, action) => {
+            var _a, _b;
+            return Object.assign(Object.assign({}, state), { session: (_b = (_a = action.payload.room) === null || _a === void 0 ? void 0 : _a.session) !== null && _b !== void 0 ? _b : null });
+        });
+        builder.addCase(signalEvents.roomSessionEnded, (state, action) => {
+            var _a;
+            if (((_a = state.session) === null || _a === void 0 ? void 0 : _a.id) !== action.payload.roomSessionId) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { session: null });
         });
         builder.addCase(socketReconnecting, (state) => {
             return Object.assign(Object.assign({}, state), { status: "reconnect" });
@@ -2128,6 +2150,7 @@ const doConnectRoom = createAppThunk(() => (dispatch, getState) => {
     });
     dispatch(connectionStatusChanged("connecting"));
 });
+const selectRoomConnectionSessionId = (state) => { var _a; return (_a = state.roomConnection.session) === null || _a === void 0 ? void 0 : _a.id; };
 const selectRoomConnectionStatus = (state) => state.roomConnection.status;
 /**
  * Reactors
@@ -7384,6 +7407,12 @@ const rtcAnalyticsCustomEvents = {
         getValue: (state) => selectSignalStatus(state),
         getOutput: (value) => ({ status: value }),
     },
+    roomSessionId: {
+        action: null,
+        rtcEventName: "roomSessionId",
+        getValue: (state) => selectRoomConnectionSessionId(state),
+        getOutput: (value) => ({ roomSessionId: value }),
+    },
     rtcConnectionStatus: {
         action: null,
         rtcEventName: "rtcConnectionStatus",
@@ -7422,6 +7451,16 @@ const doRtcAnalyticsCustomEventsInitialize = createAppThunk(() => (dispatch, get
     const rtcManager = selectRtcConnectionRaw(state).rtcManager;
     if (!rtcManager)
         return;
+    // RTC stats require a `insightsStats` event to be sent to set the timestamp.
+    // This is a temporary workaround, we just send one dummy event on initialization.
+    rtcManager.sendStatsCustomEvent("insightsStats", {
+        _time: Date.now(),
+        ls: 0,
+        lr: 0,
+        bs: 0,
+        br: 0,
+        cpu: 0,
+    });
     Object.values(rtcAnalyticsCustomEvents).forEach(({ rtcEventName, getValue, getOutput }) => {
         var _a;
         const value = getValue(state);
@@ -7554,7 +7593,7 @@ const doRejectWaitingParticipant = createAppThunk((payload) => (dispatch, getSta
 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 IS_DEV = (_a = undefined === "true") !== null && _a !== void 0 ? _a : false;
 const rootReducer = combineReducers({
     app: appSlice.reducer,
     chat: chatSlice.reducer,
@@ -8651,7 +8690,7 @@ const selectRoomConnectionState = createSelector(selectChatMessages, selectCloud
     return state;
 });
 
-const sdkVersion = "2.0.0-beta4";
+const sdkVersion = "2.1.0-beta1";
 
 const initialState$1 = {
     chatMessages: [],

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@whereby.com/browser-sdk",
-    "version": "2.0.0-beta4",
+    "version": "2.1.0-beta1",
     "description": "Modules for integration Whereby video in web apps",
     "author": "Whereby AS",
     "license": "MIT",
@@ -96,6 +96,7 @@
         "rimraf": "^3.0.2",
         "rollup": "^4.3.0",
         "rollup-plugin-dts": "^6.1.0",
+        "rollup-plugin-polyfill-node": "^0.13.0",
         "rollup-plugin-terser": "^7.0.2",
         "rollup-plugin-typescript2": "^0.36.0",
         "storybook": "^7.5.2",