@whereby.com/browser-sdk 2.1.0-beta.1 → 2.1.0-beta.2

package/dist/embed/index.d.ts

@@ -0,0 +1,109 @@
+import { ReactHTMLElement } from 'react';
+
+interface WherebyEmbedElementAttributes extends ReactHTMLElement<HTMLElement> {
+    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;
+    room: string;
+    settingsButton: string;
+    screenshare: string;
+    style: {
+        [key: string]: string;
+    };
+    subgridLabels: string;
+    title: string;
+    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<WherebyEmbedElementAttributes>;
+        }
+    }
+}
+declare const _default: {
+    sdkVersion: string;
+};
+
+export { type WherebyEmbedElement, _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.1.0-beta.2";
+
+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; media-capture" />
+      `;
+    },
+});
+var index = { sdkVersion: sdkVersion };
+
+export { index as default };