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

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

@@ -0,0 +1,131 @@
+import { Story } from "@storybook/react";
+import React from "react";
+import "../lib/embed";
+
+interface WherebyEmbedAttributes {
+    audio: boolean;
+    avatarUrl: string;
+    background: boolean;
+    cameraAccess: boolean;
+    chat: boolean;
+    displayName: string;
+    emptyRoomInvitation: string;
+    floatSelf: boolean;
+    help: boolean;
+    leaveButton: boolean;
+    logo: boolean;
+    people: boolean;
+    precallReview: boolean;
+    recording: boolean;
+    room: string;
+    screenshare: boolean;
+    video: boolean;
+    virtualBackgroundUrl: string;
+}
+
+export default {
+    title: "Examples/Pre-built UI",
+    argTypes: {
+        audio: { control: "boolean" },
+        avatarUrl: { control: "text", description: "Image url to use for avatar" },
+        background: { control: "boolean" },
+        cameraAccess: { control: "boolean" },
+        chat: { control: "boolean" },
+        displayName: { control: "text", description: "The name to use for the local participant" },
+        embed: { control: "boolean" },
+        emptyRoomInvitation: { control: "boolean" },
+        floatSelf: { control: "boolean" },
+        help: { control: "boolean" },
+        leaveButton: { control: "boolean" },
+        locking: { control: "boolean" },
+        logo: { control: "boolean" },
+        people: { control: "boolean" },
+        precallReview: { control: "boolean" },
+        recording: { control: "boolean" },
+        room: { control: "text" },
+        screenshare: { control: "boolean" },
+        topToolbar: { control: "boolean" },
+        video: { control: "boolean" },
+        virtualBackgroundUrl: { control: "text", description: "Image url to use for virtual background" },
+    },
+};
+
+const offOn = (arg: boolean | string | undefined) => (arg ? "on" : "off");
+
+const WherebyEmbed = ({
+    audio,
+    avatarUrl,
+    background,
+    cameraAccess,
+    chat,
+    displayName,
+    emptyRoomInvitation,
+    floatSelf,
+    help,
+    leaveButton,
+    logo,
+    people,
+    precallReview,
+    recording,
+    room,
+    screenshare,
+    video,
+    virtualBackgroundUrl,
+}: Partial<WherebyEmbedAttributes>) => {
+    return (
+        <p>
+            <whereby-embed
+                audio={offOn(audio)}
+                avatarUrl={avatarUrl}
+                background={offOn(background)}
+                cameraAccess={offOn(cameraAccess)}
+                chat={offOn(chat)}
+                displayName={displayName}
+                emptyRoomInvitation={emptyRoomInvitation}
+                floatSelf={offOn(floatSelf)}
+                help={offOn(help)}
+                leaveButton={offOn(leaveButton)}
+                logo={offOn(logo)}
+                people={offOn(people)}
+                precallReview={offOn(precallReview)}
+                recording={offOn(recording)}
+                screenshare={offOn(screenshare)}
+                video={offOn(video)}
+                virtualBackgroundUrl={virtualBackgroundUrl}
+                room={room}
+                style={{ height: "100vh", width: "100%" }}
+            />
+        </p>
+    );
+};
+
+const Template: Story<Partial<WherebyEmbedAttributes>> = (args) => WherebyEmbed(args);
+export const WherebyEmbedElement = Template.bind({});
+
+WherebyEmbedElement.args = {
+    audio: true,
+    avatarUrl: "",
+    background: true,
+    cameraAccess: true,
+    chat: true,
+    displayName: "Your name",
+    emptyRoomInvitation: "true",
+    floatSelf: false,
+    help: true,
+    leaveButton: true,
+    logo: true,
+    people: true,
+    precallReview: true,
+    room: process.env.STORYBOOK_ROOM,
+    screenshare: true,
+    video: true,
+    virtualBackgroundUrl: "",
+};
+
+WherebyEmbedElement.parameters = {
+    docs: {
+        transformSource: (src: string) => {
+            return (src || "").replace(/><iframe(.+)$/, " />");
+        },
+    },
+};

package/src/stories/styles.css

@@ -0,0 +1,74 @@
+.container {
+    display: flex;
+    min-height: 290px;
+    background-color: pink;
+    gap: 10px;
+    padding: 10px;
+}
+
+.participantWrapper {
+    position: relative;
+    flex-direction: column;
+    display: flex;
+    width: 140px;
+}
+
+.bouncingball {
+    width: 140px;
+    height: 140px;
+    border-radius: 100%;
+    background: #ccc;
+    animation: bounce 1s;
+    transform: translateY(0px);
+    animation-iteration-count: infinite;
+    position: absolute;
+    top: 25px;
+    overflow: hidden;
+}
+
+.displayName {
+    text-align: center;
+    color: #ffffff;
+    padding: 2px 4px;
+    border-radius: 3px;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.controls {
+    display: flex;
+    gap: 10px;
+    margin-top: 12px;
+}
+
+@keyframes bounce {
+    0% {
+        top: 25px;
+        -webkit-animation-timing-function: ease-in;
+    }
+    40% {
+    }
+    50% {
+        top: 140px;
+        height: 140px;
+        -webkit-animation-timing-function: ease-out;
+    }
+    55% {
+        top: 160px;
+        height: 120px;
+        -webkit-animation-timing-function: ease-in;
+    }
+    65% {
+        top: 120px;
+        height: 140px;
+        -webkit-animation-timing-function: ease-out;
+    }
+    95% {
+        top: 25px;
+        -webkit-animation-timing-function: ease-in;
+    }
+    100% {
+        top: 25px;
+        -webkit-animation-timing-function: ease-in;
+    }
+}
+

package/src/types.d.ts

@@ -0,0 +1,175 @@
+declare module "heresy" {
+    interface AttrChanged {
+        attributeName: string;
+        oldValue: string | boolean;
+    }
+
+    interface element {
+        observedAttributes?: string[];
+        onattributechanged?: (attrChanged: AttrChanged) => void;
+        onconnected?: () => void;
+        ondisconnected?: () => void;
+        oninit?: () => void;
+        render: () => void;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        [x: string]: any;
+    }
+
+    export function define(elementName: string, element: element): void;
+    export function ref(): boolean;
+}
+
+declare module "@whereby/jslib-media/src/webrtc/RtcManagerDispatcher" {
+    enum RtcEventNames {
+        rtc_manager_created = "rtc_manager_created",
+        stream_added = "stream_added",
+    }
+
+    interface RtcManagerCreatedPayload {
+        rtcManager: RtcManager;
+    }
+
+    interface RtcStreamAddedPayload {
+        clientId: string;
+        stream: MediaStream;
+        streamId: string;
+    }
+
+    type RtcEvents = {
+        rtc_manager_created: RtcManagerCreatedPayload;
+        stream_added: RtcStreamAddedPayload;
+    };
+
+    interface ConstructorArgs {
+        emitter: { emit: <K extends keyof RtcEvents>(eventName: K, args: RtcEvents[K]) => void };
+        serverSocket: ServerSocket;
+        webrtcProvider: {
+            getMediaConstraints: () => { audio: boolean; video: boolean };
+            deferrable: (clientId: string) => boolean;
+        };
+        features: {
+            lowDataModeEnabled: boolean;
+            sfuServerOverrideHost: undefined;
+            turnServerOverrideHost: undefined;
+            useOnlyTURN: undefined;
+            vp9On: boolean;
+            h264On: boolean;
+            simulcastScreenshareOn: boolean;
+        };
+    }
+    export default class RtcManagerDispatcher {
+        constructor(args: ConstructorArgs);
+    }
+}
+
+declare module "@whereby/jslib-media/src/webrtc/RtcManager" {
+    export default interface RtcManager {
+        acceptNewStream: ({
+            activeBreakout: boolean,
+            clientId: string,
+            shouldAddLocalVideo: boolean,
+            streamId: string,
+        }) => void;
+        addNewStream: (streamId: string, stream: MediaStream, isAudioEnabled: boolean, isVideoEnabled: boolean) => void;
+        disconnect(streamId: string, activeBreakout: boolean): void;
+        shouldAcceptStreamsFromBothSides?: () => boolean;
+    }
+}
+
+declare module "@whereby/jslib-media/src/utils/urls" {
+    export function fromLocation({ host }: { host: string }): { subdomain: string };
+}
+
+declare module "@whereby/jslib-media/src/utils/ServerSocket" {
+    interface SocketConf {
+        host?: string;
+        path?: string;
+        reconnectionDelay?: number;
+        reconnectoinDelayMax?: number;
+        timeout?: number;
+    }
+
+    interface ClientRole {
+        roleName: string;
+    }
+
+    interface SignalClient {
+        displayName: string;
+        id: string;
+        streams: string[];
+        isAudioEnabled: boolean;
+        isVideoEnabled: boolean;
+        role: ClientRole;
+    }
+
+    interface AudioEnabledEvent {
+        clientId: string;
+        isAudioEnabled: boolean;
+    }
+
+    interface ClientLeftEvent {
+        clientId: string;
+    }
+    interface NewClientEvent {
+        client: SignalClient;
+    }
+
+    interface RoomJoinedEvent {
+        room: {
+            clients: SignalClient[];
+        };
+        selfId: string;
+    }
+
+    interface VideoEnabledEvent {
+        clientId: string;
+        isVideoEnabled: boolean;
+    }
+
+    interface ClientMetadataReceivedEvent {
+        type: string;
+        payload: { clientId: string; displayName: string };
+    }
+
+    interface SignalEvents {
+        audio_enabled: AudioEnabledEvent;
+        client_left: ClientLeftEvent;
+        client_metadata_received: ClientMetadataReceivedEvent;
+        connect: void;
+        device_identified: void;
+        new_client: NewClientEvent;
+        room_joined: RoomJoinedEvent;
+        room_left: void;
+        video_enabled: VideoEnabledEvent;
+    }
+
+    interface IdentifyDeviceRequest {
+        deviceCredentials: Credentials;
+    }
+
+    interface JoinRoomRequest {
+        config: { isAudioEnabled: boolean; isVideoEnabled: boolean };
+        organizationId: string;
+        roomName: string;
+        displayName?: string;
+    }
+
+    interface SignalRequests {
+        enable_audio: { enabled: boolean };
+        enable_video: { enabled: boolean };
+        identify_device: IdentifyDeviceRequest;
+        join_room: JoinRoomRequest;
+        leave_room: void;
+        send_client_metadata: { type: string; payload: { displayName?: string } };
+    }
+
+    export default class ServerSocket {
+        constructor(host: string, conf?: SocketConf);
+
+        connect(): void;
+        disconnect(): void;
+        emit<K extends keyof SignalRequests>(eventName: K, payload?: SignalRequests[k]);
+        on<K extends keyof SignalEvents>(eventName: K, callback: (args: SignalEvents[K]) => void);
+        once<K extends keyof SignalEvents>(eventName: K, callback: (args: SignalEvents[K]) => void);
+    }
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "compilerOptions": {
+      "target": "es6",
+      "downlevelIteration": true,
+      "importHelpers": true,
+      "lib": ["dom", "dom.iterable", "esnext", "es2015.collection", "es2015.iterable"],
+      "allowJs": true,
+      "checkJs": false,
+      "skipLibCheck": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "noFallthroughCasesInSwitch": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": true,
+      "declaration": true,
+      "jsx": "react",
+      "baseUrl": "./",
+      "paths": {
+        "~/*": ["src/*"],
+        "@tests/*": ["tests/*"],
+        "@types": ["src/__types__/index.ts"]
+      }
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"]
+  }

package/src/index.stories.js

@@ -1,105 +0,0 @@
-import { html } from "lit-html";
-import "./lib";
-
-export default {
-    title: "Examples/<whereby-embed>",
-    argTypes: {
-        audio: { control: "boolean" },
-        avatarUrl: { control: "text", description: "Image url to use for avatar" },
-        background: { control: "boolean" },
-        cameraAccess: { control: "boolean" },
-        chat: { control: "boolean" },
-        displayName: { control: "text", description: "The name to use for the local participant" },
-        embed: { control: "boolean" },
-        emptyRoomInvitation: { control: "boolean" },
-        floatSelf: { control: "boolean" },
-        help: { control: "boolean" },
-        leaveButton: { control: "boolean" },
-        locking: { control: "boolean" },
-        logo: { control: "boolean" },
-        people: { control: "boolean" },
-        precallReview: { control: "boolean" },
-        recording: { control: "boolean" },
-        room: { control: "text" },
-        screenshare: { control: "boolean" },
-        topToolbar: { control: "boolean" },
-        video: { control: "boolean" },
-        virtualBackgroundUrl: { control: "text", description: "Image url to use for virtual background" },
-    },
-};
-
-const offOn = (arg) => (arg ? "on" : "off");
-
-const WherebyEmbed = ({
-    audio,
-    avatarUrl,
-    background,
-    cameraAccess,
-    chat,
-    displayName,
-    emptyRoomInvitation,
-    floatSelf,
-    help,
-    leaveButton,
-    logo,
-    people,
-    precallReview,
-    recording,
-    room,
-    screenshare,
-    video,
-    virtualBackgroundUrl,
-}) => {
-    return html`<whereby-embed
-        audio=${offOn(audio)}
-        avatarUrl=${avatarUrl}
-        background=${offOn(background)}
-        cameraAccess=${offOn(cameraAccess)}
-        chat=${offOn(chat)}
-        displayName=${displayName}
-        emptyRoomInvitation=${emptyRoomInvitation}
-        floatSelf=${offOn(floatSelf)}
-        help=${offOn(help)}
-        leaveButton=${offOn(leaveButton)}
-        logo=${offOn(logo)}
-        people=${offOn(people)}
-        precallReview=${offOn(precallReview)}
-        recording=${offOn(recording)}
-        screenshare=${offOn(screenshare)}
-        video=${offOn(video)}
-        virtualBackgroundUrl=${virtualBackgroundUrl}
-        room="${room}"
-        style="height: 100vh"
-    />`;
-};
-
-const Template = (args) => WherebyEmbed(args);
-export const Primary = Template.bind({});
-
-Primary.args = {
-    audio: true,
-    avatarUrl: "",
-    background: true,
-    cameraAccess: true,
-    chat: true,
-    displayName: "Your name",
-    emptyRoomInvitation: true,
-    floatSelf: false,
-    help: true,
-    leaveButton: true,
-    logo: true,
-    people: true,
-    precallReview: true,
-    room: process.env.STORYBOOK_ROOM,
-    screenshare: true,
-    video: true,
-    virtualBackgroundUrl: "",
-};
-
-Primary.parameters = {
-    docs: {
-        transformSource: (src) => {
-            return (src || "").replace(/><iframe(.+)$/, " />");
-        },
-    },
-};