@whereby.com/browser-sdk 2.0.0 → 2.1.0-beta.2

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

@@ -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.0.0";
+const sdkVersion = "2.1.0-beta.2";
 
-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" />
-      `;
-    },
-});
+        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,11 +1,10 @@
-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 React$1 from 'react';
 import * as redux_thunk from 'redux-thunk';
 import { AxiosRequestConfig } from 'axios';
 import EventEmitter from 'events';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import * as redux from 'redux';
+import _whereby_jslib_media_src_utils_ServerSocket, { ChatMessage as ChatMessage$2 } from '@whereby/jslib-media/src/utils/ServerSocket';
 import RtcManagerDispatcher from '@whereby/jslib-media/src/webrtc/RtcManagerDispatcher';
 import RtcManager from '@whereby/jslib-media/src/webrtc/RtcManager';
 
@@ -13,67 +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;
-
-interface RoomParticipantData {
-    displayName: string;
-    id: string;
-    stream?: MediaStream;
-    isAudioEnabled: boolean;
-    isVideoEnabled: boolean;
-}
-declare class RoomParticipant {
-    readonly displayName: string;
-    readonly id: string;
-    readonly stream?: MediaStream;
-    readonly isAudioEnabled: boolean;
-    readonly isLocalParticipant: boolean;
-    readonly isVideoEnabled: boolean;
-    constructor({ displayName, id, stream, isAudioEnabled, isVideoEnabled }: RoomParticipantData);
-}
-type StreamState = "new_accept" | "to_accept" | "old_accept" | "done_accept" | "to_unaccept" | "done_unaccept" | "auto";
-interface Stream {
-    id: string;
-    state: StreamState;
-}
-interface RemoteParticipant {
-    id: string;
-    displayName: string;
-    isAudioEnabled: boolean;
-    isVideoEnabled: boolean;
-    isLocalParticipant: boolean;
-    stream: (MediaStream & {
-        inboundId?: string;
-    }) | null;
-    streams: Stream[];
-    newJoiner: boolean;
-    presentationStream: (MediaStream & {
-        inboundId?: string;
-    }) | null;
-}
-declare class LocalParticipant extends RoomParticipant {
-    readonly isLocalParticipant = true;
-    constructor({ displayName, id, stream, isAudioEnabled, isVideoEnabled }: RoomParticipantData);
-}
-interface WaitingParticipant {
-    id: string;
-    displayName: string | null;
-}
-interface Screenshare {
-    participantId: string;
-    id: string;
-    hasAudioTrack: boolean;
-    stream?: MediaStream;
-    isLocal: boolean;
-}
+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 Json = string | number | boolean | null | Array<Json> | {
     [key: string]: Json;
@@ -495,6 +445,65 @@ declare class OrganizationService {
     }): Promise<undefined>;
 }
 
+interface RoomParticipantData {
+    displayName: string;
+    id: string;
+    stream?: MediaStream;
+    isAudioEnabled: boolean;
+    isVideoEnabled: boolean;
+}
+declare class RoomParticipant {
+    readonly displayName: string;
+    readonly id: string;
+    readonly stream?: MediaStream;
+    readonly isAudioEnabled: boolean;
+    readonly isLocalParticipant: boolean;
+    readonly isVideoEnabled: boolean;
+    constructor({ displayName, id, stream, isAudioEnabled, isVideoEnabled }: RoomParticipantData);
+}
+type StreamState = "new_accept" | "to_accept" | "old_accept" | "done_accept" | "to_unaccept" | "done_unaccept" | "auto";
+interface Stream {
+    id: string;
+    state: StreamState;
+}
+interface RemoteParticipant {
+    id: string;
+    displayName: string;
+    isAudioEnabled: boolean;
+    isVideoEnabled: boolean;
+    isLocalParticipant: boolean;
+    stream: (MediaStream & {
+        inboundId?: string;
+    }) | null;
+    streams: Stream[];
+    newJoiner: boolean;
+    presentationStream: (MediaStream & {
+        inboundId?: string;
+    }) | null;
+}
+declare class LocalParticipant extends RoomParticipant {
+    readonly isLocalParticipant = true;
+    constructor({ displayName, id, stream, isAudioEnabled, isVideoEnabled }: RoomParticipantData);
+}
+interface WaitingParticipant {
+    id: string;
+    displayName: string | null;
+}
+interface Screenshare {
+    participantId: string;
+    id: string;
+    hasAudioTrack: boolean;
+    stream?: MediaStream;
+    isLocal: boolean;
+}
+
+/**
+ * Reducer
+ */
+interface WaitingParticipantsState {
+    waitingParticipants: WaitingParticipant[];
+}
+
 /**
  * Reducer
  */
@@ -553,6 +562,7 @@ interface AppState {
     displayName: string | null;
     sdkVersion: string | null;
     externalId: string | null;
+    isNodeSdk: boolean;
 }
 
 /**
@@ -563,6 +573,34 @@ interface DeviceCredentialsState {
     data?: Credentials | null;
 }
 
+type LocalMediaOptions = {
+    disabled?: boolean;
+    audio: boolean;
+    video: boolean;
+};
+/**
+ * Reducer
+ */
+interface LocalMediaState$1 {
+    busyDeviceIds: string[];
+    cameraDeviceError?: unknown;
+    cameraEnabled: boolean;
+    currentCameraDeviceId?: string;
+    currentMicrophoneDeviceId?: string;
+    devices: MediaDeviceInfo[];
+    isSettingCameraDevice: boolean;
+    isSettingMicrophoneDevice: boolean;
+    isTogglingCamera: boolean;
+    microphoneDeviceError?: unknown;
+    microphoneEnabled: boolean;
+    options?: LocalMediaOptions;
+    status: "" | "stopped" | "starting" | "started" | "error";
+    startError?: unknown;
+    stream?: MediaStream;
+    isSwitchingStream: boolean;
+    onDeviceChange?: () => void;
+}
+
 /**
  * Reducer
  */
@@ -691,42 +729,10 @@ declare const createStore: ({ preloadedState, injectServices, }: {
             fetchOrganizationFromRoomUrl: (roomUrl: string) => Promise<Organization | null>;
         };
     }, redux.UnknownAction>;
-}, {}>, redux.StoreEnhancer<{}, {}>]>>;
+}>, redux.StoreEnhancer]>>;
 type Store = ReturnType<typeof createStore>;
 
-/**
- * Reducer
- */
-interface WaitingParticipantsState {
-    waitingParticipants: WaitingParticipant[];
-}
-
-type LocalMediaOptions = {
-    audio: boolean;
-    video: boolean;
-};
-/**
- * Reducer
- */
-interface LocalMediaState$1 {
-    busyDeviceIds: string[];
-    cameraDeviceError?: unknown;
-    cameraEnabled: boolean;
-    currentCameraDeviceId?: string;
-    currentMicrophoneDeviceId?: string;
-    devices: MediaDeviceInfo[];
-    isSettingCameraDevice: boolean;
-    isSettingMicrophoneDevice: boolean;
-    isTogglingCamera: boolean;
-    microphoneDeviceError?: unknown;
-    microphoneEnabled: boolean;
-    options?: LocalMediaOptions;
-    status: "" | "stopped" | "starting" | "started" | "error";
-    startError?: unknown;
-    stream?: MediaStream;
-    isSwitchingStream: boolean;
-    onDeviceChange?: () => void;
-}
+declare const sdkVersion = "__SDK_VERSION__";
 
 interface LocalMediaState {
     currentCameraDeviceId?: string;
@@ -813,7 +819,6 @@ interface RoomConnectionActions {
     stopCloudRecording(): void;
     stopScreenshare(): void;
 }
-
 type VideoViewComponentProps = Omit<React.ComponentProps<typeof _default>, "onResize">;
 interface RoomConnectionComponents {
     VideoView: (props: VideoViewComponentProps) => ReturnType<typeof _default>;
@@ -824,10 +829,32 @@ type RoomConnectionRef = {
     components: RoomConnectionComponents;
     _ref: Store;
 };
+
 declare function useRoomConnection(roomUrl: string, roomConnectionOptions?: UseRoomConnectionOptions): RoomConnectionRef;
 
 declare function useLocalMedia(optionsOrStream?: UseLocalMediaOptions | MediaStream): UseLocalMediaResult;
 
-declare const sdkVersion = "__SDK_VERSION__";
+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;
 
-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 };
+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 };