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

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

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

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

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

@@ -1,30 +0,0 @@
-{
-    "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"]
-  }