@whereby.com/browser-sdk 1.8.0 → 2.0.0-alpha

package/src/lib/{index.js → embed.ts}

@@ -1,9 +1,38 @@
 import { define, ref } from "heresy";
 
+interface WherebyEmbedAttributes {
+    audio: string;
+    avatarUrl: string;
+    background: string;
+    cameraAccess: string;
+    chat: string;
+    displayName: string;
+    emptyRoomInvitation: string;
+    floatSelf: string;
+    help: string;
+    leaveButton: string;
+    logo: string;
+    people: string;
+    precallReview: string;
+    recording: string;
+    screenshare: string;
+    video: string;
+    virtualBackgroundUrl: string;
+    room: string;
+    style: { [key: string]: string };
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            ["whereby-embed"]: Partial<WherebyEmbedAttributes>;
+        }
+    }
+}
+
 const boolAttrs = [
     "audio",
     "background",
-    "cameraAccess",
+    "cameraaccess",
     "chat",
     "people",
     "embed",
@@ -32,10 +61,10 @@ define("WherebyEmbed", {
         this.iframe = ref();
     },
     onconnected() {
-        window.addEventListener("message", this);
+        window.addEventListener("message", this.onmessage);
     },
     ondisconnected() {
-        window.removeEventListener("message", this);
+        window.removeEventListener("message", this.onmessage);
     },
     observedAttributes: [
         "displayName",
@@ -49,11 +78,11 @@ define("WherebyEmbed", {
         "avatarUrl",
         ...boolAttrs,
     ].map((a) => a.toLowerCase()),
-    onattributechanged({ attributeName, oldValue }) {
+    onattributechanged({ attributeName, oldValue }: { attributeName: string; oldValue: string | boolean }) {
         if (["room", "subdomain"].includes(attributeName) && oldValue == null) return;
         this.render();
     },
-    style(self) {
+    style(self: string) {
         return `
     ${self} {
       display: block;
@@ -67,7 +96,7 @@ define("WherebyEmbed", {
     },
 
     // Commands
-    _postCommand(command, args = []) {
+    _postCommand(command: string, args = []) {
         if (this.iframe.current) {
             const url = new URL(this.room, `https://${this.subdomain}.whereby.com`);
             this.iframe.current.contentWindow.postMessage({ command, args }, url.origin);
@@ -79,17 +108,16 @@ define("WherebyEmbed", {
     stopRecording() {
         this._postCommand("stop_recording");
     },
-    toggleCamera(enabled) {
+    toggleCamera(enabled: boolean) {
         this._postCommand("toggle_camera", [enabled]);
     },
-    toggleMicrophone(enabled) {
+    toggleMicrophone(enabled: boolean) {
         this._postCommand("toggle_microphone", [enabled]);
     },
-    toggleScreenshare(enabled) {
+    toggleScreenshare(enabled: boolean) {
         this._postCommand("toggle_screenshare", [enabled]);
     },
-
-    onmessage({ origin, data }) {
+    onmessage({ origin, data }: { origin: string; data: { type: string; payload: string } }) {
         const url = new URL(this.room, `https://${this.subdomain}.whereby.com`);
         if (origin !== url.origin) return;
         const { type, payload: detail } = data;
@@ -106,9 +134,9 @@ define("WherebyEmbed", {
             groups,
             virtualbackgroundurl: virtualBackgroundUrl,
         } = this;
-        if (!room) return this.html`Whereby: Missing room attr.`;
+        if (!room) return this.html`Whereby: Missing room attribute.`;
         // Get subdomain from room URL, or use it specified
-        let m = /https:\/\/([^.]+)\.whereby.com\/.+/.exec(room);
+        const m = /https:\/\/([^.]+)\.whereby.com\/.+/.exec(room);
         const subdomain = (m && m[1]) || this.subdomain;
         if (!subdomain) return this.html`Whereby: Missing subdomain attr.`;
         const url = new URL(room, `https://${subdomain}.whereby.com`);
@@ -117,11 +145,11 @@ define("WherebyEmbed", {
             we: "__SDK_VERSION__",
             iframeSource: subdomain,
             ...(displayName && { displayName }),
-            ...(lang && { lang: lang }),
-            ...(metadata && { metadata: metadata }),
-            ...(groups && { groups: groups }),
-            ...(virtualBackgroundUrl && { virtualBackgroundUrl: virtualBackgroundUrl }),
-            ...(avatarUrl && { avatarUrl: avatarUrl }),
+            ...(lang && { lang }),
+            ...(metadata && { metadata }),
+            ...(groups && { groups }),
+            ...(virtualBackgroundUrl && { virtualBackgroundUrl }),
+            ...(avatarUrl && { avatarUrl }),
             // the original ?embed name was confusing, so we give minimal
             ...(minimal != null && { embed: minimal }),
             ...boolAttrs.reduce(
@@ -130,17 +158,15 @@ define("WherebyEmbed", {
                 {}
             ),
         }).forEach(([k, v]) => {
-            if (!url.searchParams.has(k)) {
+            if (!url.searchParams.has(k) && typeof v === "string") {
                 url.searchParams.set(k, v);
             }
         });
-        this.html`
-      <iframe
-        ref=${this.iframe}
-        src=${url}
-        allow="autoplay; camera; microphone; fullscreen; speaker; display-capture" />
-      `;
+        return this.html`
+        <iframe
+            ref=${this.iframe}
+            src=${url}
+            allow="autoplay; camera; microphone; fullscreen; speaker; display-capture" />
+        `;
     },
 });
-
-export default { sdkVersion: "__SDK_VERSION__" };

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+import "./embed";
+export { useRoomConnection } from "./react";
+export const sdkVersion = "__SDK_VERSION__";

package/src/lib/react/VideoElement.tsx

@@ -0,0 +1,16 @@
+import React, { useCallback } from "react";
+
+interface VideoElProps {
+    stream: MediaStream;
+    style?: React.CSSProperties;
+}
+
+export default ({ stream, style }: VideoElProps) => {
+    const videoEl = useCallback<(node: HTMLVideoElement) => void>((node) => {
+        if (node !== null && node.srcObject !== stream) {
+            node.srcObject = stream;
+        }
+    }, []);
+
+    return <video ref={videoEl} autoPlay playsInline style={style} />;
+};

package/src/lib/react/index.ts

@@ -0,0 +1,3 @@
+export { default as VideoElement } from "./VideoElement";
+export { default as useLocalMedia } from "./useLocalMedia";
+export { default as useRoomConnection } from "./useRoomConnection";

package/src/lib/react/useLocalMedia.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+export default function useLocalMedia() {
+    const [localStream, setLocalStream] = useState<MediaStream | undefined>(undefined);
+
+    useEffect(() => {
+        const getLocalStream = async () => {
+            if (!localStream) {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+                setLocalStream(stream);
+            }
+        };
+
+        getLocalStream();
+
+        // Stop tracks on unmount
+        return () => {
+            localStream?.getTracks().forEach((t) => {
+                t.stop();
+            });
+        };
+    }, [localStream]);
+
+    return [localStream];
+}

package/src/lib/react/useRoomConnection.ts

@@ -0,0 +1,92 @@
+import { useEffect, useReducer, useState } from "react";
+import RoomConnection, { RoomConnectionOptions } from "../RoomConnection";
+import reducer, { RoomState } from "../reducer";
+import VideoElement from "./VideoElement";
+
+interface RoomConnectionActions {
+    toggleCamera(enabled?: boolean): void;
+    toggleMicrophone(enabled?: boolean): void;
+    setDisplayName(displayName: string): void;
+}
+
+interface RoomConnectionComponents {
+    VideoView: typeof VideoElement;
+}
+
+export default function useRoomConnection(
+    roomUrl: string,
+    roomConnectionOptions: RoomConnectionOptions
+): [state: RoomState, actions: RoomConnectionActions, components: RoomConnectionComponents] {
+    const [roomConnection, setRoomConnection] = useState<RoomConnection | null>(null);
+    const [state, dispatch] = useReducer(reducer, { remoteParticipants: [] });
+
+    useEffect(() => {
+        setRoomConnection(new RoomConnection(roomUrl, roomConnectionOptions));
+    }, [roomUrl]);
+
+    useEffect(() => {
+        if (!roomConnection) {
+            return;
+        }
+
+        roomConnection.addEventListener("participant_audio_enabled", (e) => {
+            const { participantId, isAudioEnabled } = e.detail;
+            dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
+        });
+
+        roomConnection.addEventListener("participant_joined", (e) => {
+            const { remoteParticipant } = e.detail;
+            dispatch({ type: "PARTICIPANT_JOINED", payload: { paritipant: remoteParticipant } });
+        });
+
+        roomConnection.addEventListener("participant_left", (e) => {
+            const { participantId } = e.detail;
+            dispatch({ type: "PARTICIPANT_LEFT", payload: { participantId } });
+        });
+
+        roomConnection.addEventListener("participant_stream_added", (e) => {
+            const { participantId, stream } = e.detail;
+            dispatch({ type: "PARTICIPANT_STREAM_ADDED", payload: { participantId, stream } });
+        });
+
+        roomConnection.addEventListener("room_joined", (e) => {
+            const { localParticipant, remoteParticipants } = e.detail;
+            dispatch({ type: "ROOM_JOINED", payload: { localParticipant, remoteParticipants } });
+        });
+
+        roomConnection.addEventListener("participant_video_enabled", (e) => {
+            const { participantId, isVideoEnabled } = e.detail;
+            dispatch({ type: "PARTICIPANT_VIDEO_ENABLED", payload: { participantId, isVideoEnabled } });
+        });
+
+        roomConnection.addEventListener("participant_metadata_changed", (e) => {
+            const { participantId, displayName } = e.detail;
+            dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
+        });
+
+        roomConnection.join();
+
+        return () => {
+            roomConnection.leave();
+        };
+    }, [roomConnection]);
+
+    return [
+        state,
+        {
+            toggleCamera: (enabled) => {
+                roomConnection?.toggleCamera(enabled);
+            },
+            toggleMicrophone: (enabled) => {
+                roomConnection?.toggleMicrophone(enabled);
+            },
+            setDisplayName: (displayName) => {
+                roomConnection?.setDisplayName(displayName);
+                dispatch({ type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED", payload: { displayName } });
+            },
+        },
+        {
+            VideoView: VideoElement,
+        },
+    ];
+}

package/src/lib/reducer.ts

@@ -0,0 +1,142 @@
+import { LocalParticipant, RemoteParticipant } from "./RoomParticipant";
+
+type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState">;
+
+export interface RoomState {
+    localParticipant?: LocalParticipant;
+    roomConnectionStatus?: "connecting" | "connected" | "disconnected";
+    remoteParticipants: RemoteParticipantState[];
+}
+
+type Action =
+    | {
+          type: "ROOM_JOINED";
+          payload: {
+              localParticipant: LocalParticipant;
+              remoteParticipants: RemoteParticipantState[];
+          };
+      }
+    | {
+          type: "PARTICIPANT_AUDIO_ENABLED";
+          payload: {
+              participantId: string;
+              isAudioEnabled: boolean;
+          };
+      }
+    | {
+          type: "PARTICIPANT_JOINED";
+          payload: {
+              paritipant: RemoteParticipantState;
+          };
+      }
+    | {
+          type: "PARTICIPANT_LEFT";
+          payload: {
+              participantId: string;
+          };
+      }
+    | {
+          type: "PARTICIPANT_STREAM_ADDED";
+          payload: {
+              participantId: string;
+              stream: MediaStream;
+          };
+      }
+    | {
+          type: "PARTICIPANT_VIDEO_ENABLED";
+          payload: {
+              participantId: string;
+              isVideoEnabled: boolean;
+          };
+      }
+    | {
+          type: "PARTICIPANT_METADATA_CHANGED";
+          payload: {
+              participantId: string;
+              displayName: string;
+          };
+      }
+    | {
+          type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED";
+          payload: {
+              displayName: string;
+          };
+      };
+
+function updateParticipant(
+    remoteParticipants: RemoteParticipantState[],
+    participantId: string,
+    updates: Partial<RemoteParticipantState>
+): RemoteParticipantState[] {
+    const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
+    if (!existingParticipant) {
+        return remoteParticipants;
+    }
+    const index = remoteParticipants.indexOf(existingParticipant);
+
+    return [
+        ...remoteParticipants.slice(0, index),
+        { ...existingParticipant, ...updates },
+        ...remoteParticipants.slice(index + 1),
+    ];
+}
+
+export default function reducer(state: RoomState, action: Action): RoomState {
+    switch (action.type) {
+        case "ROOM_JOINED":
+            return {
+                ...state,
+                localParticipant: action.payload.localParticipant,
+                remoteParticipants: action.payload.remoteParticipants,
+                roomConnectionStatus: "connected",
+            };
+        case "PARTICIPANT_AUDIO_ENABLED":
+            return {
+                ...state,
+                remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
+                    isAudioEnabled: action.payload.isAudioEnabled,
+                }),
+            };
+        case "PARTICIPANT_JOINED":
+            return {
+                ...state,
+                remoteParticipants: [...state.remoteParticipants, action.payload.paritipant],
+            };
+        case "PARTICIPANT_LEFT":
+            return {
+                ...state,
+                remoteParticipants: [...state.remoteParticipants.filter((p) => p.id !== action.payload.participantId)],
+            };
+        case "PARTICIPANT_STREAM_ADDED":
+            return {
+                ...state,
+                remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
+                    stream: action.payload.stream,
+                }),
+            };
+        case "PARTICIPANT_VIDEO_ENABLED":
+            return {
+                ...state,
+                remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
+                    isVideoEnabled: action.payload.isVideoEnabled,
+                }),
+            };
+        case "PARTICIPANT_METADATA_CHANGED":
+            return {
+                ...state,
+                remoteParticipants: [
+                    ...state.remoteParticipants.map((p) =>
+                        p.id === action.payload.participantId ? { ...p, displayName: action.payload.displayName } : p
+                    ),
+                ],
+            };
+        case "LOCAL_CLIENT_DISPLAY_NAME_CHANGED":
+            if (!state.localParticipant) return state;
+            return {
+                ...state,
+                localParticipant: { ...state.localParticipant, displayName: action.payload.displayName },
+            };
+        default:
+            throw state;
+    }
+}

package/src/stories/custom-ui.stories.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { useLocalMedia, useRoomConnection, VideoElement } from "../lib/react";
+import "./styles.css";
+
+export default {
+    title: "Examples/Custom UI",
+    argTypes: {
+        displayName: { control: "text", defaultValue: "SDK" },
+        roomUrl: { control: "text", defaultValue: process.env.STORYBOOK_ROOM, type: { required: true } },
+    },
+};
+
+const DisplayNameForm = ({
+    initialDisplayName,
+    onSetDisplayName,
+}: {
+    initialDisplayName?: string;
+    onSetDisplayName: (displayName: string) => void;
+}) => {
+    const [displayName, setDisplayName] = useState(initialDisplayName || "");
+
+    return (
+        <div>
+            <label htmlFor="displayName">Display name: </label>
+            <input
+                type="text"
+                name="displayName"
+                id="displayName"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+            />
+            <button onClick={() => onSetDisplayName(displayName || "")}>Save</button>
+        </div>
+    );
+};
+
+const VideoExperience = ({
+    displayName,
+    roomName,
+    localStream,
+}: {
+    displayName?: string;
+    roomName: string;
+    localStream?: MediaStream;
+}) => {
+    const [state, actions, components] = useRoomConnection(roomName, {
+        displayName,
+        localMediaConstraints: {
+            audio: true,
+            video: true,
+        },
+        localStream,
+        logger: console,
+    });
+
+    const { localParticipant, remoteParticipants } = state;
+    const { setDisplayName, toggleCamera, toggleMicrophone } = actions;
+    const { VideoView } = components;
+
+    return (
+        <div>
+            <div className="container">
+                {[localParticipant, ...remoteParticipants].map((participant, i) => (
+                    <div className="participantWrapper" key={participant?.id || i}>
+                        {participant ? (
+                            <>
+                                <div
+                                    className="bouncingball"
+                                    style={{
+                                        animationDelay: `${Math.random() * 1000}ms`,
+                                        ...(participant.isAudioEnabled
+                                            ? {
+                                                  border: "2px solid grey",
+                                              }
+                                            : null),
+                                        ...(!participant.isVideoEnabled
+                                            ? {
+                                                  backgroundColor: "green",
+                                              }
+                                            : null),
+                                    }}
+                                >
+                                    {participant.stream && participant.isVideoEnabled && (
+                                        <VideoView
+                                            stream={participant.stream}
+                                            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                                        />
+                                    )}
+                                </div>
+                                <div className="displayName">{participant.displayName || "Guest"}</div>
+                            </>
+                        ) : null}
+                    </div>
+                ))}
+            </div>
+            <div className="controls">
+                <button onClick={() => toggleCamera()}>Toggle camera</button>
+                <button onClick={() => toggleMicrophone()}>Toggle microphone</button>
+                <DisplayNameForm initialDisplayName={displayName} onSetDisplayName={setDisplayName} />
+            </div>
+        </div>
+    );
+};
+
+const roomRegEx = new RegExp(/^https:\/\/.*\/.*/);
+
+export const Simplistic = ({ roomUrl, displayName }: { roomUrl: string; displayName?: string }) => {
+    if (!roomUrl || !roomUrl.match(roomRegEx)) {
+        return <p>Set room url on the Controls panel</p>;
+    }
+
+    return <VideoExperience displayName={displayName} roomName={roomUrl} />;
+};
+
+export const WithPreCall = ({ roomUrl, displayName }: { roomUrl: string; displayName?: string }) => {
+    const [localStream] = useLocalMedia();
+    const [shouldJoin, setShouldJoin] = useState(false);
+
+    if (!roomUrl || !roomUrl.match(roomRegEx)) {
+        return <p>Set room url on the Controls panel</p>;
+    }
+
+    return (
+        <div>
+            {shouldJoin ? (
+                <VideoExperience displayName={displayName} roomName={roomUrl} localStream={localStream} />
+            ) : (
+                <div>{localStream && <VideoElement stream={localStream} />}</div>
+            )}
+            <button onClick={() => setShouldJoin(!shouldJoin)}>{shouldJoin ? "Leave room" : "Join room"}</button>
+        </div>
+    );
+};