@whereby.com/browser-sdk 2.0.0-beta2 → 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
@@ -102,20 +98,6 @@ function MyCallUX( { roomUrl, localStream }) {
 
 ```
 
-#### Usage with Vite development environment
-
-There is a [known Vite issue](https://github.com/vitejs/vite/issues/1973) where modules trying to access `process.env` throw `Uncaught ReferenceError: process is not defined`.
-This can be solved in `vite.config.js` with the following line:
-
-``` javascript
-export default defineConfig({
-    ...rest,
-    define: {
-        'process.env': {}
-    },
-});
-```
-
 #### Usage with Next.js
 
 If you are integrating these React hooks with Next.js, you need to ensure your

package/dist/embed/index.d.ts

@@ -1,27 +1,39 @@
-export { sdkVersion } from "../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 {
@@ -30,3 +42,8 @@ declare global {
         }
     }
 }
+declare const _default: {
+    sdkVersion: string;
+};
+
+export { _default as default };

package/dist/embed/index.esm.js

@@ -0,0 +1,156 @@
+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,
+    };
+}
+
+const sdkVersion = "2.0.0-beta4";
+
+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;
+    }
+    ${self} iframe {
+      border: none;
+      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);
+            }
+        });
+        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 { index as default };