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

package/README.md

@@ -1,5 +1,6 @@
 # `@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.
@@ -7,6 +8,8 @@
 Whereby browser SDK is a library for seamless integration of Whereby
 (https://whereby.com) video calls into your web application.
 
+**For a more detailed set of instructions, including the building of a [simple telehealth app](https://docs.whereby.com/whereby-101/create-your-video-experience/in-a-web-page/using-whereby-react-hooks-build-a-telehealth-app), please see our [documentation](https://docs.whereby.com/reference/react-hooks-reference).**
+
 ## Installation
 
 ```shell
@@ -20,7 +23,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
 > API](https://docs.whereby.com/creating-and-deleting-rooms).
@@ -36,7 +39,7 @@ their device selection up-front. This hook works seamlessly with the
 `useRoomConnection` hook described below.
 
 ```js
-import { useLocalMedia, VideoView } from "@whereby.com/browser-sdk";
+import { useLocalMedia, VideoView } from "@whereby.com/browser-sdk/react";
 
 function MyPreCallUX() {
     const localMedia = useLocalMedia({ audio: false, video: true });
@@ -71,7 +74,7 @@ room, subscribe to state updates, and perform actions on the connection, like
 toggling camera or microphone.
 
 ```js
-import { useRoomConnection } from "@whereby.com/browser-sdk";
+import { useRoomConnection } from "@whereby.com/browser-sdk/react";
 
 function MyCallUX( { roomUrl, localStream }) {
     const { state, actions, components } = useRoomConnection(
@@ -99,20 +102,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
@@ -123,7 +112,7 @@ client";` to the top of component, like in the following example:
 ```js
 "use client";
 
-import { VideoView, useLocalMedia } from "@whereby.com/browser-sdk";
+import { VideoView, useLocalMedia } from "@whereby.com/browser-sdk/react";
 
 export default function MyNextVideoExperience() {
   const { state, actions } = useLocalMedia({ audio: false, video: true });
@@ -145,7 +134,7 @@ to learn which attributes are supported.
 #### React
 
 ```js
-import "@whereby.com/browser-sdk";
+import "@whereby.com/browser-sdk/embed";
 
 const MyComponent = ({ roomUrl }) => {
     return <whereby-embed chat="off" room={roomUrl} />;
@@ -169,8 +158,7 @@ export default MyComponent;
 </html>
 ```
 
-**Note**
-
-Although we have just higlighted two combinations of how to load and use the
-web component, it should be possible to use this library with all the major
-frontend frameworks.
+> [!NOTE]
+> Although we have just higlighted two combinations of how to load and use the
+> web component, it should be possible to use this library with all the major
+> frontend frameworks.

package/dist/embed/index.d.ts

@@ -1,4 +1,5 @@
-export { sdkVersion } from "../version";
+declare const sdkVersion = "__SDK_VERSION__";
+
 interface WherebyEmbedAttributes {
     audio: string;
     avatarUrl: string;
@@ -30,3 +31,5 @@ declare global {
         }
     }
 }
+
+export { sdkVersion };

package/dist/embed/{index.js → index.esm.js}

@@ -1,60 +1,62 @@
-import { define, ref } from "heresy";
-export { sdkVersion } from "../version";
-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);
-    },
-    ondisconnected() {
-        window.removeEventListener("message", this.onmessage);
-    },
-    observedAttributes: [
-        "displayName",
-        "minimal",
-        "room",
-        "subdomain",
-        "lang",
-        "metadata",
-        "groups",
-        "virtualBackgroundUrl",
-        "avatarUrl",
-        "externalId",
-        ...boolAttrs,
-    ].map((a) => a.toLowerCase()),
-    onattributechanged({ attributeName, oldValue }) {
-        if (["room", "subdomain"].includes(attributeName) && oldValue == null)
-            return;
-        this.render();
-    },
-    style(self) {
+import { define, ref } from 'heresy';
+
+const sdkVersion = "2.0.0-beta3";
+
+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",
+        ...boolAttrs,
+    ].map((a) => a.toLowerCase()),
+    onattributechanged({ attributeName, oldValue }) {
+        if (["room", "subdomain"].includes(attributeName) && oldValue == null)
+            return;
+        this.render();
+    },
+    style(self) {
         return `
     ${self} {
       display: block;
@@ -64,62 +66,67 @@ define("WherebyEmbed", {
       height: 100%;
       width: 100%;
     }
-    `;
-    },
-    _postCommand(command, args = []) {
-        if (this.iframe.current) {
-            this.iframe.current.contentWindow.postMessage({ command, args }, this.url.origin);
-        }
-    },
-    startRecording() {
-        this._postCommand("start_recording");
-    },
-    stopRecording() {
-        this._postCommand("stop_recording");
-    },
-    toggleCamera(enabled) {
-        this._postCommand("toggle_camera", [enabled]);
-    },
-    toggleMicrophone(enabled) {
-        this._postCommand("toggle_microphone", [enabled]);
-    },
-    toggleScreenshare(enabled) {
-        this._postCommand("toggle_screenshare", [enabled]);
-    },
-    onmessage({ origin, data }) {
-        var _a;
-        if (origin !== ((_a = this.url) === null || _a === void 0 ? void 0 : _a.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.`;
-        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 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"));
-        }
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "__SDK_VERSION__", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (externalId && { externalId })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce((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);
-            }
-        });
+    `;
+    },
+    // Commands
+    _postCommand(command, args = []) {
+        if (this.iframe.current) {
+            this.iframe.current.contentWindow.postMessage({ command, args }, this.url.origin);
+        }
+    },
+    startRecording() {
+        this._postCommand("start_recording");
+    },
+    stopRecording() {
+        this._postCommand("stop_recording");
+    },
+    toggleCamera(enabled) {
+        this._postCommand("toggle_camera", [enabled]);
+    },
+    toggleMicrophone(enabled) {
+        this._postCommand("toggle_microphone", [enabled]);
+    },
+    toggleScreenshare(enabled) {
+        this._postCommand("toggle_screenshare", [enabled]);
+    },
+    onmessage({ origin, data }) {
+        if (origin !== this.url.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 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"));
+        }
+        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(
+        // 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);
+            }
+        });
         return this.html `
         <iframe
             ref=${this.iframe}
             src=${this.url}
             allow="autoplay; camera; microphone; fullscreen; speaker; display-capture" />
-        `;
-    },
+        `;
+    },
 });
+
+export { sdkVersion };