@whereby.com/browser-sdk 2.0.0 → 2.1.0-beta2

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";
+const sdkVersion = "2.1.0-beta2";
 
 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;
@@ -813,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>;
@@ -824,10 +825,34 @@ 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, _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 };