@whereby.com/browser-sdk 2.1.0-beta3 → 2.1.0

package/dist/embed/index.esm.js

@@ -1,83 +1,83 @@
 import { define, ref } from 'heresy';
 
-function parseRoomUrlAndSubdomain(roomAttribute, subdomainAttribute) {
-    if (!roomAttribute) {
-        throw new Error("Missing room attribute");
-    }
-    // Get subdomain from room URL, or use it specified
-    const m = /https:\/\/([^.]+)(\.whereby\.com|-ip-\d+-\d+-\d+-\d+.hereby.dev:4443)\/.+/.exec(roomAttribute);
-    const subdomain = (m && m[1]) || subdomainAttribute;
-    if (!subdomain) {
-        throw new Error("Missing subdomain attribute");
-    }
-    if (!m) {
-        throw new Error("Could not parse room URL");
-    }
-    const roomUrl = new URL(roomAttribute);
-    return {
-        subdomain,
-        roomUrl,
-    };
+function parseRoomUrlAndSubdomain(roomAttribute, subdomainAttribute) {
+    if (!roomAttribute) {
+        throw new Error("Missing room attribute");
+    }
+    // Get subdomain from room URL, or use it specified
+    const m = /https:\/\/([^.]+)(\.whereby\.com|-ip-\d+-\d+-\d+-\d+.hereby.dev:4443)\/.+/.exec(roomAttribute);
+    const subdomain = (m && m[1]) || subdomainAttribute;
+    if (!subdomain) {
+        throw new Error("Missing subdomain attribute");
+    }
+    if (!m) {
+        throw new Error("Could not parse room URL");
+    }
+    const roomUrl = new URL(roomAttribute);
+    return {
+        subdomain,
+        roomUrl,
+    };
 }
 
-const sdkVersion = "2.1.0-beta3";
+const sdkVersion = "2.1.0";
 
-const boolAttrs = [
-    "audio",
-    "background",
-    "cameraAccess",
-    "chat",
-    "people",
-    "embed",
-    "emptyRoomInvitation",
-    "help",
-    "leaveButton",
-    "precallReview",
-    "screenshare",
-    "video",
-    "floatSelf",
-    "recording",
-    "logo",
-    "locking",
-    "participantCount",
-    "settingsButton",
-    "pipButton",
-    "moreButton",
-    "personality",
-    "subgridLabels",
-    "lowData",
-    "breakout",
-];
-define("WherebyEmbed", {
-    oninit() {
-        this.iframe = ref();
-    },
-    onconnected() {
-        window.addEventListener("message", this.onmessage.bind(this));
-    },
-    ondisconnected() {
-        window.removeEventListener("message", this.onmessage.bind(this));
-    },
-    observedAttributes: [
-        "displayName",
-        "minimal",
-        "room",
-        "subdomain",
-        "lang",
-        "metadata",
-        "groups",
-        "virtualBackgroundUrl",
-        "avatarUrl",
-        "externalId",
-        "title",
-        ...boolAttrs,
-    ].map((a) => a.toLowerCase()),
-    onattributechanged({ attributeName, oldValue }) {
-        if (["room", "subdomain"].includes(attributeName) && oldValue == null)
-            return;
-        this.render();
-    },
-    style(self) {
+const boolAttrs = [
+    "audio",
+    "background",
+    "cameraAccess",
+    "chat",
+    "people",
+    "embed",
+    "emptyRoomInvitation",
+    "help",
+    "leaveButton",
+    "precallReview",
+    "screenshare",
+    "video",
+    "floatSelf",
+    "recording",
+    "logo",
+    "locking",
+    "participantCount",
+    "settingsButton",
+    "pipButton",
+    "moreButton",
+    "personality",
+    "subgridLabels",
+    "lowData",
+    "breakout",
+];
+define("WherebyEmbed", {
+    oninit() {
+        this.iframe = ref();
+    },
+    onconnected() {
+        window.addEventListener("message", this.onmessage.bind(this));
+    },
+    ondisconnected() {
+        window.removeEventListener("message", this.onmessage.bind(this));
+    },
+    observedAttributes: [
+        "displayName",
+        "minimal",
+        "room",
+        "subdomain",
+        "lang",
+        "metadata",
+        "groups",
+        "virtualBackgroundUrl",
+        "avatarUrl",
+        "externalId",
+        "title",
+        ...boolAttrs,
+    ].map((a) => a.toLowerCase()),
+    onattributechanged({ attributeName, oldValue }) {
+        if (["room", "subdomain"].includes(attributeName) && oldValue == null)
+            return;
+        this.render();
+    },
+    style(self) {
         return `
     ${self} {
       display: block;
@@ -87,70 +87,70 @@ define("WherebyEmbed", {
       height: 100%;
       width: 100%;
     }
-    `;
-    },
-    // Commands
-    _postCommand(command, args = []) {
-        if (this.iframe.current) {
-            this.iframe.current.contentWindow.postMessage({ command, args }, this.roomUrl.origin);
-        }
-    },
-    startRecording() {
-        this._postCommand("start_recording");
-    },
-    stopRecording() {
-        this._postCommand("stop_recording");
-    },
-    startStreaming() {
-        this._postCommand("start_streaming");
-    },
-    stopStreaming() {
-        this._postCommand("stop_streaming");
-    },
-    toggleCamera(enabled) {
-        this._postCommand("toggle_camera", [enabled]);
-    },
-    toggleMicrophone(enabled) {
-        this._postCommand("toggle_microphone", [enabled]);
-    },
-    toggleScreenshare(enabled) {
-        this._postCommand("toggle_screenshare", [enabled]);
-    },
-    toggleChat(enabled) {
-        this._postCommand("toggle_chat", [enabled]);
-    },
-    onmessage({ origin, data, }) {
-        if (!this.roomUrl || origin !== this.roomUrl.origin)
-            return;
-        const { type, payload: detail } = data;
-        this.dispatchEvent(new CustomEvent(type, { detail }));
-    },
-    render() {
-        const { avatarurl: avatarUrl, displayname: displayName, lang, metadata, externalid: externalId, minimal, room, groups, virtualbackgroundurl: virtualBackgroundUrl, title, } = this;
-        let roomUrl, subdomain;
-        try {
-            ({ roomUrl, subdomain } = parseRoomUrlAndSubdomain(room, this.subdomain));
-        }
-        catch (error) {
-            return this.html `Whereby: ${error instanceof Error ? error.message : "unknown error"}`;
-        }
-        this.roomUrl = roomUrl;
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: sdkVersion, iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang: lang })), (metadata && { metadata: metadata })), (externalId && { externalId })), (groups && { groups: groups })), (virtualBackgroundUrl && { virtualBackgroundUrl: virtualBackgroundUrl })), (avatarUrl && { 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.roomUrl.searchParams.has(k)) {
-                this.roomUrl.searchParams.set(k, v);
-            }
-        });
+    `;
+    },
+    // Commands
+    _postCommand(command, args = []) {
+        if (this.iframe.current) {
+            this.iframe.current.contentWindow.postMessage({ command, args }, this.roomUrl.origin);
+        }
+    },
+    startRecording() {
+        this._postCommand("start_recording");
+    },
+    stopRecording() {
+        this._postCommand("stop_recording");
+    },
+    startStreaming() {
+        this._postCommand("start_streaming");
+    },
+    stopStreaming() {
+        this._postCommand("stop_streaming");
+    },
+    toggleCamera(enabled) {
+        this._postCommand("toggle_camera", [enabled]);
+    },
+    toggleMicrophone(enabled) {
+        this._postCommand("toggle_microphone", [enabled]);
+    },
+    toggleScreenshare(enabled) {
+        this._postCommand("toggle_screenshare", [enabled]);
+    },
+    toggleChat(enabled) {
+        this._postCommand("toggle_chat", [enabled]);
+    },
+    onmessage({ origin, data, }) {
+        if (!this.roomUrl || origin !== this.roomUrl.origin)
+            return;
+        const { type, payload: detail } = data;
+        this.dispatchEvent(new CustomEvent(type, { detail }));
+    },
+    render() {
+        const { avatarurl: avatarUrl, displayname: displayName, lang, metadata, externalid: externalId, minimal, room, groups, virtualbackgroundurl: virtualBackgroundUrl, title, } = this;
+        let roomUrl, subdomain;
+        try {
+            ({ roomUrl, subdomain } = parseRoomUrlAndSubdomain(room, this.subdomain));
+        }
+        catch (error) {
+            return this.html `Whereby: ${error instanceof Error ? error.message : "unknown error"}`;
+        }
+        this.roomUrl = roomUrl;
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: sdkVersion, iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang: lang })), (metadata && { metadata: metadata })), (externalId && { externalId })), (groups && { groups: groups })), (virtualBackgroundUrl && { virtualBackgroundUrl: virtualBackgroundUrl })), (avatarUrl && { 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.roomUrl.searchParams.has(k)) {
+                this.roomUrl.searchParams.set(k, v);
+            }
+        });
         this.html `
       <iframe
         title=${title || "Video calling component"}
         ref=${this.iframe}
         src=${this.roomUrl}
         allow="autoplay; camera; microphone; fullscreen; speaker; display-capture; media-capture" />
-      `;
-    },
-});
+      `;
+    },
+});
 var index = { sdkVersion: sdkVersion };
 
 export { index as default };

package/dist/react/index.d.ts

@@ -1,4 +1,5 @@
-import * as React$1 from 'react';
+import * as React from 'react';
+import React__default 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';
@@ -12,18 +13,15 @@ interface VideoViewSelfProps {
     stream: MediaStream;
     muted?: boolean;
     mirror?: boolean;
-    style?: React$1.CSSProperties;
+    style?: React__default.CSSProperties;
     onResize?: ({ width, height, stream }: {
         width: number;
         height: number;
         stream: MediaStream;
     }) => void;
-    onSetAspectRatio?: ({ aspectRatio }: {
-        aspectRatio: number;
-    }) => void;
 }
-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;
+type VideoViewProps = VideoViewSelfProps & React__default.DetailedHTMLProps<React__default.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
+declare const _default: ({ muted, mirror, stream, onResize, ...rest }: VideoViewProps) => React__default.JSX.Element;
 
 interface RoomParticipantData {
     displayName: string;
@@ -555,7 +553,6 @@ interface AppState {
     displayName: string | null;
     sdkVersion: string | null;
     externalId: string | null;
-    isNodeSdk: boolean;
 }
 
 /**
@@ -694,7 +691,7 @@ declare const createStore: ({ preloadedState, injectServices, }: {
             fetchOrganizationFromRoomUrl: (roomUrl: string) => Promise<Organization | null>;
         };
     }, redux.UnknownAction>;
-}, {}>, redux.StoreEnhancer<{}, {}>]>>;
+}>, redux.StoreEnhancer]>>;
 type Store = ReturnType<typeof createStore>;
 
 /**
@@ -705,7 +702,6 @@ interface WaitingParticipantsState {
 }
 
 type LocalMediaOptions = {
-    disabled?: boolean;
     audio: boolean;
     video: boolean;
 };
@@ -817,6 +813,7 @@ interface RoomConnectionActions {
     stopCloudRecording(): void;
     stopScreenshare(): void;
 }
+
 type VideoViewComponentProps = Omit<React.ComponentProps<typeof _default>, "onResize">;
 interface RoomConnectionComponents {
     VideoView: (props: VideoViewComponentProps) => ReturnType<typeof _default>;
@@ -827,34 +824,10 @@ type RoomConnectionRef = {
     components: RoomConnectionComponents;
     _ref: Store;
 };
-
 declare function useRoomConnection(roomUrl: string, roomConnectionOptions?: UseRoomConnectionOptions): RoomConnectionRef;
 
 declare function useLocalMedia(optionsOrStream?: UseLocalMediaOptions | MediaStream): UseLocalMediaResult;
 
-type Origin = {
-    top: number;
-    left: number;
-};
-type Bounds = {
-    width: number;
-    height: number;
-};
-
-interface GridProps {
-    roomConnection: RoomConnectionRef;
-    renderParticipant?: ({ cell, participant, }: {
-        cell: {
-            clientId: string;
-            bounds: Bounds;
-            origin: Origin;
-        };
-        participant: RemoteParticipantState | LocalParticipantState;
-    }) => React$1.ReactNode;
-    videoGridGap?: number;
-}
-declare function Grid({ roomConnection, renderParticipant, videoGridGap }: GridProps): React$1.JSX.Element;
-
 declare const sdkVersion = "__SDK_VERSION__";
 
-export { type ChatMessageState as ChatMessage, type LocalParticipantState as LocalParticipant, type RemoteParticipantState as RemoteParticipant, type RoomConnectionState as RoomConnection, type ScreenshareState as Screenshare, type UseLocalMediaResult, Grid as VideoGrid, _default as VideoView, type WaitingParticipantState as WaitingParticipant, sdkVersion, useLocalMedia, useRoomConnection };
+export { type ChatMessageState as ChatMessage, type LocalParticipantState as LocalParticipant, type RemoteParticipantState as RemoteParticipant, type RoomConnectionState as RoomConnection, type ScreenshareState as Screenshare, type UseLocalMediaResult, _default as VideoView, type WaitingParticipantState as WaitingParticipant, sdkVersion, useLocalMedia, useRoomConnection };