@whereby.com/browser-sdk 2.0.0-beta3 → 2.0.0-beta4

package/README.md

@@ -1,10 +1,5 @@
 # `@whereby.com/browser-sdk`
 
-> [!WARNING]
-> This is a pre-release of the v2 version of this library, adding support for
-> more custom integration using React hooks and plain JavaScript classes in
-> addition to the web component for embedding.
-
 Whereby browser SDK is a library for seamless integration of Whereby
 (https://whereby.com) video calls into your web application.
 
@@ -23,6 +18,7 @@ yarn add @whereby.com/browser-sdk
 ```
 
 ## Usage
+
 > [!IMPORTANT]
 > In order to make use of this functionality, you must have a Whereby account
 > from which you can create room urls, either [manually or through our

package/dist/embed/index.d.ts

@@ -1,28 +1,39 @@
-declare const sdkVersion = "__SDK_VERSION__";
-
 interface WherebyEmbedAttributes {
     audio: string;
     avatarUrl: string;
     background: string;
+    breakout: string;
     cameraAccess: string;
     chat: string;
     displayName: string;
     emptyRoomInvitation: string;
     externalId: string;
     floatSelf: string;
+    groups: string;
     help: string;
+    lang: string;
     leaveButton: string;
+    locking: string;
     logo: string;
+    lowData: string;
+    metadata: string;
+    minimal: string;
+    moreButton: string;
+    participantCount: string;
     people: string;
+    pipButton: string;
     precallReview: string;
     recording: string;
-    screenshare: string;
-    video: string;
-    virtualBackgroundUrl: string;
     room: string;
+    settingsButton: string;
+    screenshare: string;
     style: {
         [key: string]: string;
     };
+    subgridLabels: string;
+    title: string;
+    video: string;
+    virtualBackgroundUrl: string;
 }
 declare global {
     namespace JSX {
@@ -31,5 +42,8 @@ declare global {
         }
     }
 }
+declare const _default: {
+    sdkVersion: string;
+};
 
-export { sdkVersion };
+export { _default as default };

package/dist/embed/index.esm.js

@@ -1,11 +1,31 @@
 import { define, ref } from 'heresy';
 
-const sdkVersion = "2.0.0-beta3";
+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-beta4";
 
 const boolAttrs = [
     "audio",
     "background",
-    "cameraaccess",
+    "cameraAccess",
     "chat",
     "people",
     "embed",
@@ -49,6 +69,7 @@ define("WherebyEmbed", {
         "virtualBackgroundUrl",
         "avatarUrl",
         "externalId",
+        "title",
         ...boolAttrs,
     ].map((a) => a.toLowerCase()),
     onattributechanged({ attributeName, oldValue }) {
@@ -71,7 +92,7 @@ define("WherebyEmbed", {
     // Commands
     _postCommand(command, args = []) {
         if (this.iframe.current) {
-            this.iframe.current.contentWindow.postMessage({ command, args }, this.url.origin);
+            this.iframe.current.contentWindow.postMessage({ command, args }, this.roomUrl.origin);
         }
     },
     startRecording() {
@@ -80,6 +101,12 @@ define("WherebyEmbed", {
     stopRecording() {
         this._postCommand("stop_recording");
     },
+    startStreaming() {
+        this._postCommand("start_streaming");
+    },
+    stopStreaming() {
+        this._postCommand("stop_streaming");
+    },
     toggleCamera(enabled) {
         this._postCommand("toggle_camera", [enabled]);
     },
@@ -89,44 +116,41 @@ define("WherebyEmbed", {
     toggleScreenshare(enabled) {
         this._postCommand("toggle_screenshare", [enabled]);
     },
+    toggleChat(enabled) {
+        this._postCommand("toggle_chat", [enabled]);
+    },
     onmessage({ origin, data }) {
-        if (origin !== this.url.origin)
+        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, externalId: externalId, lang, metadata, minimal, room, groups, virtualbackgroundurl: virtualBackgroundUrl, } = this;
-        if (!room)
-            return this.html `Whereby: 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(room);
-        const subdomain = (m && m[1]) || this.subdomain;
-        if (!subdomain)
-            return this.html `Whereby: Missing subdomain attr.`;
-        if (!m) {
-            return this.html `could not parse URL.`;
+        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));
         }
-        const baseURL = m[2] || `.whereby.com`;
-        this.url = new URL(room, `https://${subdomain}${baseURL}`);
-        const roomUrl = new URL(room);
-        if (roomUrl.searchParams.get("roomKey")) {
-            this.url.searchParams.append("roomKey", roomUrl.searchParams.get("roomKey"));
+        catch (error) {
+            return this.html `Whereby: ${error instanceof Error ? error.message : "unknown error"}`;
         }
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-beta3", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (externalId && { externalId })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
+        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.url.searchParams.has(k) && typeof v === "string") {
-                this.url.searchParams.set(k, v);
+            if (!this.roomUrl.searchParams.has(k)) {
+                this.roomUrl.searchParams.set(k, v);
             }
         });
-        return this.html `
-        <iframe
-            ref=${this.iframe}
-            src=${this.url}
-            allow="autoplay; camera; microphone; fullscreen; speaker; display-capture" />
-        `;
-    },
-});
+        this.html `
+      <iframe
+        title=${title || "Video calling component"}
+        ref=${this.iframe}
+        src=${this.roomUrl}
+        allow="autoplay; camera; microphone; fullscreen; speaker; display-capture" />
+      `;
+    },
+});
+var index = { sdkVersion: sdkVersion };
 
-export { sdkVersion };
+export { index as default };