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

package/src/lib/embed.ts

@@ -1,172 +0,0 @@
-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",
-    "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",
-        ...boolAttrs,
-    ].map((a) => a.toLowerCase()),
-    onattributechanged({ attributeName, oldValue }: { attributeName: string; oldValue: string | boolean }) {
-        if (["room", "subdomain"].includes(attributeName) && oldValue == null) return;
-        this.render();
-    },
-    style(self: string) {
-        return `
-    ${self} {
-      display: block;
-    }
-    ${self} iframe {
-      border: none;
-      height: 100%;
-      width: 100%;
-    }
-    `;
-    },
-
-    // Commands
-    _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);
-        }
-    },
-    startRecording() {
-        this._postCommand("start_recording");
-    },
-    stopRecording() {
-        this._postCommand("stop_recording");
-    },
-    toggleCamera(enabled: boolean) {
-        this._postCommand("toggle_camera", [enabled]);
-    },
-    toggleMicrophone(enabled: boolean) {
-        this._postCommand("toggle_microphone", [enabled]);
-    },
-    toggleScreenshare(enabled: boolean) {
-        this._postCommand("toggle_screenshare", [enabled]);
-    },
-    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;
-        this.dispatchEvent(new CustomEvent(type, { detail }));
-    },
-    render() {
-        const {
-            avatarurl: avatarUrl,
-            displayname: displayName,
-            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\/.+/.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`);
-        Object.entries({
-            jsApi: true,
-            we: "__SDK_VERSION__",
-            iframeSource: subdomain,
-            ...(displayName && { displayName }),
-            ...(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(
-                // add to URL if set in any way
-                (o, v) => (this[v.toLowerCase()] != null ? { ...o, [v]: this[v.toLowerCase()] } : o),
-                {}
-            ),
-        }).forEach(([k, v]) => {
-            if (!url.searchParams.has(k) && typeof v === "string") {
-                url.searchParams.set(k, v);
-            }
-        });
-        return this.html`
-        <iframe
-            ref=${this.iframe}
-            src=${url}
-            allow="autoplay; camera; microphone; fullscreen; speaker; display-capture" />
-        `;
-    },
-});

package/src/lib/index.ts

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

package/src/lib/react/VideoElement.tsx

@@ -1,16 +0,0 @@
-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

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

package/src/lib/react/useLocalMedia.ts

@@ -1,25 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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>
-    );
-};