@whereby.com/browser-sdk 2.0.0 → 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";
+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;
@@ -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,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();
@@ -1434,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
@@ -1466,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());
@@ -7586,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,
@@ -8683,7 +8690,7 @@ const selectRoomConnectionState = createSelector(selectChatMessages, selectCloud
     return state;
 });
 
-const sdkVersion = "2.0.0";
+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",
+    "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",