@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.3

package/dist/types/theme/presets/border.d.ts

@@ -0,0 +1,13 @@
+import { BorderRadius, BorderWidth } from '../../types/ui-config/design-tokens';
+export declare const BORDER_WIDTHS: Record<BorderWidth, {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+}>;
+export declare const BORDER_RADII: Record<BorderRadius, {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+}>;

package/dist/types/theme/presets/themes.d.ts

@@ -0,0 +1,2 @@
+import { Theme, UIColors } from '../../types/ui-config/design-tokens';
+export declare const THEMES: Record<Theme, UIColors>;

package/dist/types/types/floating-ui.d.ts

@@ -0,0 +1 @@
+export type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';

package/dist/types/types/props.d.ts

@@ -0,0 +1,175 @@
+import type { ImageMessage, Message } from '@cloudflare/realtimekit';
+import { ButtonVariant } from '../components/rtk-button/rtk-button';
+import { RoomLeftState } from './rtk-client';
+import { LangDict } from '../exports';
+import type { ChatChannel as ChatChannelWebCore } from '@cloudflare/realtimekit';
+import { RtkSidebarSection } from '../components/rtk-sidebar/rtk-sidebar';
+import { IconVariant } from '../components/rtk-icon/rtk-icon';
+import { ParticipantsTabId } from '../components/rtk-participants/rtk-participants';
+/**
+ * Screen breakpoints
+ */
+export type Size = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * User preferences object type which are
+ * shared within the global States object.
+ */
+export interface UserPreferences {
+    mirrorVideo?: boolean;
+    muteNotificationSounds?: boolean;
+}
+export interface EmojiMetaData {
+    name: string;
+    emoji: string;
+}
+export interface PermissionSettings {
+    enabled: boolean;
+    kind?: 'audio' | 'video' | 'screenshare';
+}
+/**
+ * Global States object which are shared among components
+ */
+export interface States {
+    meeting?: 'idle' | 'setup' | 'joined' | 'ended' | 'waiting';
+    viewType?: string;
+    page?: number;
+    maxPeers?: number;
+    activeAI?: boolean;
+    activeCaptions?: boolean;
+    activeMoreMenu?: boolean;
+    activeMuteAllConfirmation?: boolean;
+    activePermissionsMessage?: PermissionSettings;
+    activePlugin?: boolean;
+    activeScreenShare?: boolean;
+    activeSpotlight?: boolean;
+    activeRemoteAccessManager?: boolean;
+    activeSettings?: boolean;
+    activeDebugger?: boolean;
+    activeSidebar?: boolean;
+    activeLeaveConfirmation?: boolean;
+    activeBroadcastMessageModal?: boolean;
+    activeOverlayModal?: {
+        active: boolean;
+        icon?: string;
+        title?: string;
+        description?: string;
+        timeout?: number;
+    };
+    activeConfirmationModal?: {
+        header?: keyof LangDict;
+        active: boolean;
+        content?: keyof LangDict;
+        variant?: ButtonVariant;
+        cancelText?: keyof LangDict;
+        ctaText?: keyof LangDict;
+        case?: string;
+        data?: any;
+        onClick?: (...args: any) => void;
+        onClose?: (...args: any) => void;
+    };
+    activeBreakoutRoomsManager?: {
+        active: boolean;
+        mode?: 'create' | 'edit' | 'view';
+        destinationMeetingId?: string;
+    };
+    activeJoinStage?: boolean;
+    activeChannelCreator?: boolean;
+    image?: ImageMessage;
+    prefs?: UserPreferences;
+    sidebar?: RtkSidebarSection;
+    roomLeftState?: RoomLeftState | 'unauthorized';
+    sidebarFloating?: boolean;
+    participantsTabId?: ParticipantsTabId;
+    [state: string]: any;
+}
+export type PartialStateEvent = Partial<States>;
+/**
+ * Notification object type, which is used in `<rtk-notification />`.
+ */
+export interface Notification {
+    id: string;
+    message: string;
+    image?: string;
+    /** Duration in milliseconds, don't pass this if you want a stagnant notification */
+    duration?: number;
+    icon?: string;
+    iconVariant?: IconVariant;
+    button?: {
+        text: string;
+        variant?: ButtonVariant;
+        onClick: () => void;
+    };
+}
+export interface Transcript {
+    id: string;
+    name: string;
+    peerId: string;
+    userId: string;
+    customParticipantId: string;
+    transcript: string;
+    date: Date;
+}
+export type NetworkError = 'disconnected' | 'poorConnection' | 'connected';
+export type SocketEvents = 'connected' | 'disconnected' | 'reconnecting' | 'reconnectAttempt' | 'reconnectFailure' | 'reconnected' | 'failed';
+export interface PollObject {
+    question: string;
+    options: string[];
+    anonymous: boolean;
+    hideVotes: boolean;
+}
+export interface PollOption {
+    text: string;
+    votes: {
+        id: string;
+        name: string;
+    }[];
+    count: number;
+}
+export interface Poll {
+    id: string;
+    question: string;
+    options: PollOption[];
+    anonymous: boolean;
+    hideVotes: boolean;
+    createdBy: string;
+    createdByUserId: string;
+    voted: string[];
+}
+export type ChatMessage = {
+    type: 'chat';
+    message: Message;
+};
+export type PluginMessage = {
+    type: 'plugin';
+    data: {};
+};
+export type Chat = ChatMessage | PluginMessage;
+export type ConnectedMeeting = {
+    id: string;
+    title: string;
+    participants: string[];
+    isMainRoom?: boolean;
+};
+export interface ConnectedMeetingParticipant {
+    id: string;
+    customParticipantId: string;
+    presetId?: string;
+    displayName?: string;
+    displayPictureUrl?: string;
+}
+export type ConnectedMeetingState = {
+    parentMeeting: {
+        id: string;
+        title: string;
+        participants: ConnectedMeetingParticipant[];
+    };
+    meetings: {
+        id: string;
+        title: string;
+        participants: ConnectedMeetingParticipant[];
+    }[];
+};
+export type ChatChannel = ChatChannelWebCore;
+export interface Middlewares {
+    speech?: any;
+}

package/dist/types/types/rtk-ai.d.ts

@@ -0,0 +1,9 @@
+export type AIMessage = {
+    id?: string;
+    action: string;
+    participantName?: string;
+    prompt?: string;
+    createdAt?: Date;
+    response?: string;
+    loading?: boolean;
+};

package/dist/types/types/rtk-client.d.ts

@@ -0,0 +1,16 @@
+import type RealtimeKitClient from '@cloudflare/realtimekit';
+import type { RTKSelf as Self, RTKParticipant as Participant, leaveRoomState } from '@cloudflare/realtimekit';
+type WaitlistedParticipant = Readonly<Omit<Participant, 'audioTrack' | 'videoTrack' | 'screenShareTracks'>>;
+type Peer = Self | Participant;
+type Meeting = RealtimeKitClient;
+export type { Meeting, RealtimeKitClient, Peer, Self, Participant, WaitlistedParticipant };
+export type RoomLeftState = leaveRoomState;
+export type MediaPermission = 'NOT_REQUESTED' | 'ACCEPTED' | 'DENIED' | 'SYSTEM_DENIED' | 'COULD_NOT_START' | 'CANCELED' | 'NO_DEVICES_AVAILABLE';
+export declare enum RemoteUpdateType {
+    REQUEST_RECEIVED = "REQUEST_RECEIVED",
+    REQUEST_SENT = "REQUEST_SENT",
+    INCOMING_REQUEST_ACCEPTED = "INCOMING_REQUEST_ACCEPTED",
+    OUTGOING_REQUEST_ACCEPTED = "OUTGOING_REQUEST_ACCEPTED",
+    INCOMING_REQUEST_ENDED = "INCOMING_REQUEST_ENDED",
+    OUTGOING_REQUEST_ENDED = "OUTGOING_REQUEST_ENDED"
+}

package/dist/types/types/ui-config/config.d.ts

@@ -0,0 +1,25 @@
+type NotificationTypeKey = 'chat' | 'participant_joined' | 'participant_left' | 'polls' | 'participant_joined_waitlist' | 'webinar' | 'recording_started' | 'recording_stopped' | 'tab_sync';
+type NotificationSoundsTypeKey = 'chat' | 'participant_joined' | 'participant_left' | 'polls' | 'webinar' | 'participant_joined_waitlist';
+export type NotificationType = Record<NotificationTypeKey, boolean>;
+export type NotificationSoundsType = Record<NotificationSoundsTypeKey, boolean>;
+export type NotificationDuration = Record<NotificationTypeKey, number>;
+export interface NotificationConfig {
+    notifications: Partial<NotificationType>;
+    notification_sounds: Partial<NotificationSoundsType>;
+    notification_duration: Partial<NotificationDuration>;
+    /**
+     * NOTE(callmetarush): This represents the limit of participants
+     * that would send a **joined** sound notification, If limit is crossed no
+     * new sound notifications will be played for participants joining until the
+     * number of participants comes down below the limit.
+     */
+    participant_joined_sound_notification_limit: number;
+    participant_chat_message_sound_notification_limit: number;
+}
+export type VideoFit = 'cover' | 'contain';
+export type Config = Partial<NotificationConfig> & {
+    videoFit?: VideoFit;
+};
+export declare const DEFAULT_NOTIFICATION_DURATION = 2000;
+export declare const DEFAULT_NOTIFICATION_CONFIG: Readonly<NotificationConfig>;
+export {};

package/dist/types/types/ui-config/design-tokens.d.ts

@@ -0,0 +1,41 @@
+export type BorderWidth = 'none' | 'thin' | 'fat';
+export type BorderRadius = 'sharp' | 'rounded' | 'extra-rounded' | 'circular';
+export type Theme = 'darkest' | 'dark' | 'light';
+/**
+ * UI Colors
+ *
+ * Accepts hex color codes.
+ */
+export interface UIColors {
+    brand?: {
+        300?: string;
+        400?: string;
+        500?: string;
+        600?: string;
+        700?: string;
+    };
+    background?: {
+        1000?: string;
+        900?: string;
+        800?: string;
+        700?: string;
+        600?: string;
+    };
+    text?: string;
+    'text-on-brand'?: string;
+    'video-bg'?: string;
+    danger?: string;
+    success?: string;
+    warning?: string;
+}
+export interface DesignTokens {
+    spacingBase?: number;
+    fontFamily?: string;
+    googleFont?: string;
+    borderWidth?: BorderWidth;
+    borderRadius?: BorderRadius;
+    colors?: UIColors;
+    logo?: string;
+    theme?: Theme;
+    tokenPrefix?: string;
+}

package/dist/types/types/ui-config/index.d.ts

@@ -0,0 +1,15 @@
+import { DesignTokens } from './design-tokens';
+import { StyleProps, UIRoot } from './root';
+import { Config } from './config';
+export interface UIStyles {
+    [selector: string]: StyleProps;
+}
+/**
+ * A UI Config object defines the UI of the meeting
+ */
+export interface UIConfig {
+    designTokens?: DesignTokens;
+    styles?: UIStyles;
+    root?: UIRoot;
+    config?: Config;
+}

package/dist/types/types/ui-config/root.d.ts

@@ -0,0 +1,23 @@
+type Children = Element | string;
+export type Element = string | [string, ElementProps?, ...Children[]];
+export interface ElementProps {
+    [key: string]: any;
+}
+export interface StyleProps {
+    [key: string]: string;
+}
+export interface UIRoot {
+    [element: string]: Element[] | {
+        state?: string;
+        states?: string[];
+        props?: {
+            [key: string]: any;
+        };
+        children?: Element[];
+        add?: Element[];
+        prepend?: Element[];
+        remove?: string[];
+        addBefore?: Record<string, Element[]>;
+    };
+}
+export {};

package/dist/types/types/web-core.d.ts

@@ -0,0 +1,9 @@
+type MediaKind = 'audio' | 'video';
+
+export interface MediaScoreUpdateParams {
+  kind: MediaKind;
+  isScreenshare: boolean;
+  score: number;
+  /** The peerId */
+  participantId?: string;
+}

package/dist/types/utils/assets.d.ts

@@ -0,0 +1,6 @@
+import { EmojiMetaData } from '../types/props';
+/**
+ * fetches the latest emoji list from CDN
+ * @returns list of emojis
+ */
+export declare const fetchEmojis: () => Promise<Record<string, EmojiMetaData>>;

package/dist/types/utils/breakout-rooms-manager.d.ts

@@ -0,0 +1,100 @@
+import { Meeting } from '../types/rtk-client';
+import { ConnectedMeetingParticipant } from '../types/props';
+import { ConnectedMeetingState } from '../types/props';
+export type DraftMeeting = {
+    id: string;
+    title: string;
+    participants: ConnectedMeetingParticipant[];
+    isParent: boolean;
+};
+export default class BreakoutRoomsManager {
+    #private;
+    get hasLocalChanges(): boolean;
+    get currentState(): {
+        parentMeeting: DraftMeeting;
+        meetings: DraftMeeting[];
+    };
+    get allConnectedMeetings(): DraftMeeting[];
+    get allParticipants(): ConnectedMeetingParticipant[];
+    get unassignedParticipants(): ConnectedMeetingParticipant[];
+    /**
+     * get participants of a meeting
+     */
+    getParticipantsForMeeting(meetingId: string): ConnectedMeetingParticipant[];
+    /**
+     * add a new connected meeting
+     */
+    addNewMeeting(): {
+        id: string;
+        title: string;
+    };
+    /**
+     * add multiple new connected meetings
+     */
+    addNewMeetings(count: number): {
+        id: string;
+        title: string;
+    }[];
+    /**
+     * update a meeting's title
+     */
+    updateMeetingTitle(meetingId: string, newTitle: string): void;
+    /**
+     * deleteMeeting
+     */
+    deleteMeeting(meetingId: string): void;
+    /**
+     * assign participants to a meeting
+     */
+    assignParticipantsToMeeting(customParticipantIds: string[], destinationMeetingId: string): {
+        parentMeeting: DraftMeeting;
+        meetings: DraftMeeting[];
+    };
+    /**
+     * assign participants randomly
+     */
+    assignParticipantsRandomly(): {
+        parentMeeting: DraftMeeting;
+        meetings: DraftMeeting[];
+    };
+    /**
+     * unassign participants
+     */
+    unassignParticipants(customParticipantIds: string[]): {
+        parentMeeting: DraftMeeting;
+        meetings: DraftMeeting[];
+    };
+    /**
+     * unassign all participants
+     */
+    unassignAllParticipants(): {
+        parentMeeting: DraftMeeting;
+        meetings: DraftMeeting[];
+    };
+    /**
+     * update current state
+     */
+    updateCurrentState(state: ConnectedMeetingState): void;
+    get meetingsToCreate(): {
+        id: string;
+        title: string;
+    }[];
+    get meetingsToUpdate(): {
+        id: string;
+        title: string;
+    }[];
+    get meetingsToDelete(): string[];
+    get participantsToMove(): {
+        sourceMeetingId: string;
+        destinationMeetingId: string;
+        participantIds: string[];
+    }[];
+    applyChanges(meeting: Meeting): Promise<void>;
+    /**
+     * discard local changes
+     */
+    discardChanges(): {
+        parentMeeting: DraftMeeting;
+        meetings: DraftMeeting[];
+    };
+}

package/dist/types/utils/breakout-rooms.d.ts

@@ -0,0 +1,24 @@
+import { Meeting } from '../types/rtk-client';
+export declare function getNextRoomNumber(): number;
+export declare function resetRoomCount(): void;
+export declare const TEMP_ROOM_PREFIX = "temp-";
+export declare function createDraftRoom(): {
+    id: string;
+    title: string;
+    participants: any[];
+};
+export declare function createDraftRooms(numberOfRooms: number): {
+    id: string;
+    title: string;
+    participants: any[];
+}[];
+export declare function isDraftRoom(roomId: string): boolean;
+export declare function splitCollection<T>(collection: T[], parts: number): T[][];
+export declare function participantIdentifier(participant: any): any;
+export declare function getAllConnectedParticipants(meeting: Meeting): {
+    id: string;
+    customParticipantId: any;
+    displayName: string;
+    displayPictureUrl: string;
+}[];
+export declare const canToggleBreakout: (meeting: Meeting) => boolean;

package/dist/types/utils/chat.d.ts

@@ -0,0 +1,49 @@
+import type { Message } from '@cloudflare/realtimekit';
+import { Peer } from '../types/rtk-client';
+import { ChatChannel, ChatMessage } from '../types/props';
+export declare const parseMessageForTarget: (message: any) => Message;
+export declare function alphabeticalSorter(a: string, b: string): number;
+/**
+ * Generate a unique chat group key used in `<rtk-chat-messages-ui />`
+ * @param ids An array of user ids
+ * @returns A unique key from the user ids
+ */
+export declare function generateChatGroupKey(ids: string[]): string;
+export declare function handleFilesDataTransfer(items: DataTransferItemList, callback: (type: 'image' | 'file', file: File) => void): boolean;
+interface GetChatGroupsOptions {
+    messages: Message[];
+    participants: Pick<Peer, 'name' | 'userId'>[];
+    selfUserId: string;
+}
+export declare function getChatGroups({ messages, participants, selfUserId }: GetChatGroupsOptions): Record<string, ChatMessage[]>;
+export type GetUnreadChatCountsOptions = {
+    messages: Message[];
+    selfUserId: string;
+    selectedGroupId: string;
+    participants: Pick<Peer, 'name' | 'userId'>[];
+};
+export declare function getUnreadChatCounts({ messages, selfUserId, selectedGroupId, participants, }: GetUnreadChatCountsOptions): Record<string, number>;
+export declare function getParticipantUserId({ groupId, selfUserId, }: {
+    groupId: string;
+    selfUserId: string;
+}): string;
+export declare const TEMPORARY_CHANNEL_PREFIX = "dm__";
+export declare function isDirectMessageChannel(channel: ChatChannel): boolean;
+export declare function getDMComparator(memberIds: string[]): string;
+export declare function reverse(str: string): string;
+export declare const emailPattern: RegExp;
+export declare const boldPattern: RegExp;
+export declare const italicsPattern: RegExp;
+export declare const strikethroughPattern: RegExp;
+export declare const linkPattern: RegExp;
+export declare const replyBlockPattern: RegExp;
+export declare function extractReplyBlock(message: string, excludeTags?: boolean): string;
+export declare function stripOutReplyBlock(message: string): string;
+export declare const MAX_TEXT_LENGTH = 2000;
+export interface Token {
+    type: string;
+    content: Token[] | string;
+}
+export declare function parseRichText(text: string): Token[];
+export declare function tokenizeRichText(text: string, endTag?: string): [Token[], number];
+export {};

package/dist/types/utils/clone.d.ts

@@ -0,0 +1 @@
+export default function clone(obj: any): any;

package/dist/types/utils/color.d.ts

@@ -0,0 +1,69 @@
+export declare const BRAND_SHADE_REDUCER: number[];
+export declare const BACKGROUND_SHADE_REDUCER: number[];
+type RGB = [number, number, number];
+type HSL = [number, number, number];
+export declare function hexToRGB(h: string): RGB;
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   {number}  h       The hue
+ * @param   {number}  s       The saturation
+ * @param   {number}  l       The lightness
+ * @returns {Array}           The RGB representation
+ */
+export declare const hslToRgb: (h: number, s: number, l: number) => RGB;
+/**
+ * Converts an RGB color value to HSL. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and l in the set [0, 1].
+ *
+ * @param   {number}  r       The red color value
+ * @param   {number}  g       The green color value
+ * @param   {number}  b       The blue color value
+ * @returns {Array}           The HSL representation
+ */
+export declare const rgbToHsl: (r: number, g: number, b: number) => HSL;
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+/**
+ * Generate shades from a single base hex color code.
+ *
+ * `weight` is contained in the set [0, 1].
+ *
+ * @param   {string} baseHexCode The base hex code to use to generate the other shades
+ * @param   {number} weight The weight applied when calculating each shade.
+ * @param   {number[]} reducer The reducer array which tells how to calculate the shades
+ * @returns {string[]} The generated hex shades
+ */
+export declare const generateShades: (baseHexCode: string, reducer?: number[], weight?: number) => string[];
+export declare const isValidHexColor: (color: string) => boolean;
+export declare const getBrandColors: (shade: string) => {
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+};
+/**
+ * Generates new background colors which are compatible with older preset color values
+ * @param shade The hex color code
+ * @returns Background color tokens
+ */
+export declare const getBackgroundColorsOld: (shade: string) => {
+    1000: string;
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+};
+export declare const getBackgroundColors: (shade: string) => {
+    1000?: string;
+    900?: string;
+    800?: string;
+    700?: string;
+    600?: string;
+};
+export {};

package/dist/types/utils/config.d.ts

@@ -0,0 +1,28 @@
+import type { RTKThemePreset } from '@cloudflare/realtimekit';
+import { UIConfig } from '../types/ui-config';
+import { Meeting } from '../types/rtk-client';
+/**
+ * Extend the default UI Config with your own
+ * @param config Your extended UI Config
+ * @returns New extended UI Config object
+ */
+export declare const extendConfig: (config: UIConfig, baseConfig?: UIConfig) => UIConfig;
+type ConfigData = {
+    showSetupScreen: boolean;
+};
+type ConfigOptions = {
+    grid_pagination?: boolean;
+    settings_toggle?: boolean;
+};
+/**
+ * Generates a config with older theme value.
+ * @param oldConfig Theme object
+ * @param toExtend UI Config object to extend the generated config
+ * @param options Options for toggling components
+ * @returns
+ */
+export declare const generateConfig: (oldConfig: Partial<RTKThemePreset>, meeting: Meeting, toExtend?: UIConfig, options?: ConfigOptions) => {
+    config: UIConfig;
+    data: ConfigData;
+};
+export {};

package/dist/types/utils/date.d.ts

@@ -0,0 +1,3 @@
+export declare const differenceInMinutes: (oldDate: Date, newDate: Date) => number;
+export declare const elapsedDuration: (oldDate: Date, newDate: Date) => string;
+export declare const formatDateTime: (date: Date) => string;

package/dist/types/utils/debugger-utils.d.ts

@@ -0,0 +1,40 @@
+import { MediaKind } from '@cloudflare/realtimekit';
+export type StatsHealth = 'Good' | 'Average' | 'Poor';
+export interface FormattedStatsObj {
+    name: string;
+    value: string;
+    description: string;
+    verdict: StatsHealth;
+}
+/** Method to return media health based on the media & network stats */
+export declare function getNetworkBasedMediaHealth({ stats, }: {
+    kind: MediaKind;
+    isScreenshare: boolean;
+    stats: FormattedStatsObj[];
+}): StatsHealth;
+/** Gives verdict based on the packet loss */
+export declare function getPacketLossVerdict({ packetLossPercentage, }: {
+    packetLossPercentage: number;
+}): StatsHealth;
+/** Gives verdict based on the jitter */
+export declare function getJitterVerdict({ jitterInMS }: {
+    jitterInMS: number;
+}): StatsHealth;
+/** Gives verdict based on the jitter */
+export declare function getBitrateVerdict({ bitrate, }: {
+    kind: MediaKind;
+    isScreenshare: boolean;
+    bitrate: number;
+}): StatsHealth;
+export declare function getOverallBatteryVerdict({ stats }: {
+    stats: FormattedStatsObj[];
+}): StatsHealth;
+export declare function getBatteryLevelVerdict({ batteryLevelPercentage, }: {
+    batteryLevelPercentage: number;
+}): StatsHealth;
+export declare function getBatteryChargingVerdict({ charging, dischargingTimeInSeconds, batteryLevelPercentage, }: {
+    charging: boolean;
+    chargingTimeInSeconds: number;
+    dischargingTimeInSeconds: number;
+    batteryLevelPercentage: number;
+}): StatsHealth;