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

package/dist/types/components/rtk-chat-composer-view/rtk-chat-composer-view.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n, IconPack } from '../../exports';
+export type NewMessageEvent = {
+    type: 'text';
+    message: string;
+} | {
+    type: 'file';
+    file: File;
+} | {
+    type: 'image';
+    image: File;
+};
+/**
+ * A component which renders a chat composer
+ */
+export declare class RtkChatComposerView {
+    /** Whether user can send text messages */
+    canSendTextMessage: boolean;
+    /** Whether user can send file messages */
+    canSendFiles: boolean;
+    /** Message to be pre-populated */
+    message: string;
+    /** Quote message to be displayed */
+    quotedMessage: string;
+    /** Key for storing message in localStorage */
+    storageKey: string;
+    /** Placeholder for text input */
+    inputTextPlaceholder: string;
+    /** Sets composer to edit mode */
+    isEditing: boolean;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Max length for text input */
+    maxLength: number;
+    /** Whether to show emoji picker */
+    disableEmojiPicker?: boolean;
+    /** Rate limits */
+    rateLimits: {
+        period: number;
+        maxInvocations: number;
+    };
+    fileToUpload: any;
+    isEmojiPickerOpen: boolean;
+    disableSendButton: boolean;
+    rateLimitsBreached: boolean;
+    /** Event emitted when new message is submitted */
+    onNewMessage: EventEmitter<NewMessageEvent>;
+    /** Event emitted when message is edited */
+    onEditMessage: EventEmitter<string>;
+    /** Event emitted when message editing is cancelled */
+    onEditCancel: EventEmitter<void>;
+    /** Event emitted when quoted message is dismissed */
+    onQuotedMessageDismiss: EventEmitter<void>;
+    private textMessage;
+    private $textComposer;
+    constructor();
+    connectedCallback(): void;
+    componentWillUpdate(): void;
+    componentDidLoad(): void;
+    private sendFile;
+    private handleSendMessage;
+    private checkRateLimitBreached;
+    private handleEditMessage;
+    private handleEditCancel;
+    private onTextChangeHandler;
+    private onKeyDownHandler;
+    private onFileUploadHandler;
+    private onQuotedMessageDismissHandler;
+    private cleanup;
+    render(): any;
+}

package/dist/types/components/rtk-chat-message/rtk-chat-message.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n, IconPack } from '../../exports';
+import { Size } from '../../types/props';
+import type { Message } from '@cloudflare/realtimekit';
+export declare class RtkChatMessage {
+    $el: HTMLRtkChatMessageElement;
+    /**
+     * message item
+     */
+    message: Message;
+    /**
+     * is continued
+     */
+    isContinued: boolean;
+    /**
+     * Child
+     */
+    child: HTMLElement;
+    /**
+     * is unread
+     */
+    isUnread: boolean;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** if sender is self */
+    isSelf: boolean;
+    /** can edit message */
+    canEdit: boolean;
+    /** can delete message */
+    canDelete: boolean;
+    /** can quote reply this message */
+    canReply: boolean;
+    /** can pin this message */
+    canPin: boolean;
+    /** disables controls */
+    disableControls: boolean;
+    /** aligns message to right */
+    alignRight: boolean;
+    /** sender display picture url */
+    senderDisplayPicture: string;
+    /** hides avatar */
+    hideAvatar: boolean;
+    now: Date;
+    /** Event for when edit is clicked on a message */
+    edit: EventEmitter<Message>;
+    /** Event for when reply is clicked on a message */
+    reply: EventEmitter<Message>;
+    /** Event for when pin is clicked on a message */
+    pin: EventEmitter<Message>;
+    /** Event for when edit is clicked on a message */
+    delete: EventEmitter<Message>;
+    /** Whether to left align the chat bubbles */
+    leftAlign: boolean;
+    private renderMessage;
+    private onReply;
+    private onPinned;
+    private onDelete;
+    private onEdit;
+    private isTouchDevice;
+    private renderControls;
+    private renderAvatar;
+    render(): any;
+}

package/dist/types/components/rtk-chat-messages-ui/rtk-chat-messages-ui.d.ts

@@ -0,0 +1,46 @@
+import type { Message } from '@cloudflare/realtimekit';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack, Size } from '../../exports';
+import { RtkI18n } from '../../lib/lang';
+import { Chat, ChatMessage, States } from '../../types/props';
+export declare class RtkChatMessagesUi {
+    private $chat;
+    private intersectionObserver;
+    private lastReadTimestamp;
+    private observingEl;
+    private request;
+    private timeout;
+    private autoScrollEnabled;
+    /** Selected group key */
+    selectedGroup: string;
+    /** Chat Messages */
+    messages: Chat[];
+    /** User ID of self user */
+    selfUserId: string;
+    /** Can current user pin/unpin messages */
+    canPinMessages: boolean;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Event emitted when a message is pinned or unpinned */
+    onPinMessage: EventEmitter<Message>;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    now: Date;
+    showLatestMessageButton: boolean;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    chatChanged(messages: ChatMessage[]): void;
+    selectedBucketChanged(): void;
+    disconnectedCallback(): void;
+    private onScroll;
+    private scrollToBottom;
+    private observeMessage;
+    private getMessageActions;
+    private onMessageActionHandler;
+    render(): any;
+}

package/dist/types/components/rtk-chat-messages-ui-paginated/rtk-chat-messages-ui-paginated.d.ts

@@ -0,0 +1,61 @@
+import type { Message, TextMessage } from '@cloudflare/realtimekit';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting } from '../../types/rtk-client';
+import { ChatChannel, Size, States } from '../../types/props';
+export declare class RtkChatMessagesUiPaginated {
+    private $paginatedListRef;
+    host: HTMLRtkChatMessagesUiPaginatedElement;
+    /** Meeting object */
+    meeting: Meeting;
+    /**
+     * Selected channel
+     */
+    selectedChannel?: ChatChannel;
+    /**
+     * Selected channel id
+     */
+    selectedChannelId?: string;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Event for editing a message */
+    editMessageInit: EventEmitter<{
+        payload: TextMessage;
+        flags: {
+            isReply?: boolean;
+            isEdit?: boolean;
+        };
+    }>;
+    /** Event emitted when a message is pinned or unpinned */
+    onPinMessage: EventEmitter<Message>;
+    /** Event emitted when a message is deleted */
+    onDeleteMessage: EventEmitter<Message>;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    children: HTMLElement;
+    /** Whether to align chat bubbles to the left */
+    leftAlign: boolean;
+    permissionsChanged: boolean;
+    private pageSize;
+    private lastReadMessageIndex;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting, oldMeeting?: Meeting): void;
+    channelChanged(): void;
+    private permissionsUpdateListener;
+    private maybeMarkChannelAsRead;
+    private getChatMessages;
+    private createChatNodes;
+    private disconnectMeeting;
+    private getMessageActions;
+    private onMessageActionHandler;
+    private createChatNode;
+    private chatUpdateListener;
+    render(): any;
+}

package/dist/types/components/rtk-chat-search-results/rtk-chat-search-results.d.ts

@@ -0,0 +1,18 @@
+import { RtkI18n, IconPack } from '../../exports';
+import { Meeting } from '../../types/rtk-client';
+export declare class RtkChatSearchResults {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Search query */
+    query: string;
+    /** Channel id */
+    channelId: string;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    private pageSize;
+    private searchMessages;
+    private nodeRenderer;
+    render(): any;
+}

package/dist/types/components/rtk-chat-selector-ui/rtk-chat-selector-ui.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../exports';
+import { RtkI18n } from '../../lib/lang';
+import { Peer } from '../../types/rtk-client';
+export type ChatGroup = Pick<Peer, 'userId' | 'name'>;
+export type ChatGroupChangedType = ChatGroup | string;
+export declare class RtkChatSelectorUi {
+    /** Self User ID */
+    selfUserId: string;
+    /** Selected participant */
+    selectedGroupId: string;
+    /** Unread counts */
+    unreadCounts: Record<string, number>;
+    /** Participants */
+    groups: ChatGroup[];
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    showParticipantsPanel: boolean;
+    query: string;
+    /** Event emitted when chat scope is changed */
+    groupChanged: EventEmitter<ChatGroupChangedType>;
+    private toggleParticipants;
+    private onScopeClick;
+    private getGroups;
+    private getName;
+    render(): any;
+}

package/dist/types/components/rtk-chat-toggle/rtk-chat-toggle.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+/**
+ * A button which toggles visibility of chat.
+ *
+ * You need to pass the `meeting` object to it to see the unread messages count badge.
+ *
+ * When clicked it emits a `rtkStateUpdate` event with the data:
+ *
+ * ```ts
+ * { activeSidebar: boolean; sidebar: 'chat' }
+ * ```
+ */
+export declare class RtkChatToggle {
+    unreadMessageCount: number;
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    chatActive: boolean;
+    canViewChat: boolean;
+    /**
+     * Only used when paginated chat is enabled
+     */
+    hasNewMessages: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    statesChanged(states: States): void;
+    private onChatUpdate;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    private toggleChat;
+    private updateCanView;
+    render(): any;
+}

package/dist/types/components/rtk-clock/rtk-clock.d.ts

@@ -0,0 +1,23 @@
+import { IconPack } from '../../lib/icons';
+import { Meeting } from '../../types/rtk-client';
+/**
+ * Shows the time elapsed in a meeting.
+ */
+export declare class RtkClock {
+    private timeout;
+    private request;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Icon pack */
+    iconPack: IconPack;
+    startedTime: string;
+    timeDiff: number;
+    connectedCallback(): void;
+    private disconnectMeeting;
+    private startedTimeUpdateListener;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    startedTimeChanged(startedTime: string): void;
+    private getFormattedTime;
+    render(): any;
+}

package/dist/types/components/rtk-confirmation-modal/rtk-confirmation-modal.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Meeting } from '../../types/rtk-client';
+import { States } from '../../types/props';
+import { RtkI18n } from '../../lib/lang';
+import { IconPack } from '../../lib/icons';
+/**
+ * A confirmation modal.
+ */
+export declare class RtkConfirmationModal {
+    private keyPressListener;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private close;
+    private onConfirmation;
+    render(): any;
+}

package/dist/types/components/rtk-controlbar/rtk-controlbar.d.ts

@@ -0,0 +1,28 @@
+import { IconPack, UIConfig } from '../../exports';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+/**
+ * Controlbar component provides you with various designs as variants.
+ *
+ * @slot - Default slot
+ */
+export declare class RtkControlbar {
+    /** Variant */
+    variant: 'solid' | 'boxed';
+    /** Whether to render the default UI */
+    disableRender: boolean;
+    /** Meeting */
+    meeting: Meeting;
+    /** Config */
+    config: UIConfig;
+    /** States */
+    states: States;
+    /** Icon Pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Size */
+    size: Size;
+    render(): any;
+}

package/dist/types/components/rtk-controlbar-button/rtk-controlbar-button.d.ts

@@ -0,0 +1,30 @@
+import { IconPack } from '../../lib/icons';
+import { Size } from '../../types/props';
+export type ControlBarVariant = 'button' | 'horizontal';
+/**
+ * A skeleton component used for composing custom controlbar buttons.
+ */
+export declare class RtkControlbarButton {
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Whether to show warning icon */
+    showWarning: boolean;
+    /** Size */
+    size: Size;
+    /** Label of button */
+    label: string;
+    /** Icon */
+    icon: string;
+    /**
+     * Loading state
+     * Ignores current icon and shows a spinner if true
+     */
+    isLoading: boolean;
+    /** Whether button is disabled */
+    disabled: boolean;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Whether icon requires brand color */
+    brandIcon: boolean;
+    render(): any;
+}

package/dist/types/components/rtk-counter/rtk-counter.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Size, IconPack } from '../../exports';
+import { RtkI18n } from '../../lib/lang';
+/**
+ * A number picker with increment and decrement buttons.
+ */
+export declare class RtkCounter {
+    /** Input */
+    input: string;
+    /** Size */
+    size: Size;
+    /** Initial value */
+    value: number;
+    /** Minimum value */
+    minValue: number;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** On change event emitter */
+    onChange: EventEmitter<string>;
+    connectedCallback(): void;
+    watchStateHandler(input: string): void;
+    private increment;
+    private decrement;
+    render(): any;
+}

package/dist/types/components/rtk-debugger/rtk-debugger.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Meeting } from '../../types/rtk-client';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Size, States } from '../../types/props';
+export type DebuggerTab = 'audio' | 'video' | 'screenshare' | 'system';
+/**
+ * A troubleshooting component to identify and fix any issues in the meeting.
+ */
+export declare class RtkDebugger {
+    private keyPressListener;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    activeTab: DebuggerTab;
+    isMobileMainVisible: boolean;
+    progress: number;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    progressUpdate(event: CustomEvent<number>): void;
+    private changeTab;
+    private close;
+    private getActiveTab;
+    render(): any;
+}

package/dist/types/components/rtk-debugger-audio/rtk-debugger-audio.d.ts

@@ -0,0 +1,36 @@
+import { States, Size, IconPack, RtkI18n } from '../../exports';
+import { Meeting } from '../../types/rtk-client';
+import { AudioProducerScoreStats } from '@cloudflare/realtimekit';
+import { FormattedStatsObj, StatsHealth } from '../../utils/debugger-utils';
+export declare class RtkDebuggerAudio {
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Is Network section expanded */
+    isNetworkOpen: boolean;
+    /** Is Devices section expanded */
+    isDevicesOpen: boolean;
+    /** Stats as formatted array to display */
+    audioProducerFormattedStats: FormattedStatsObj[];
+    /** Last raw audio score stats obj */
+    audioProducerScoreStats: AudioProducerScoreStats;
+    /** Summarised health of network stats */
+    networkBasedMediaHealth: StatsHealth;
+    /** Summarised health of devices */
+    devicesHealth: StatsHealth;
+    private mediaScoreUpdateListener;
+    private deviceListUpdateListener;
+    private audioUpdateListener;
+    audioProducerScoreStatsChanged(newAudioProducerScoreStats: AudioProducerScoreStats): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): Promise<void>;
+    render(): any;
+}

package/dist/types/components/rtk-debugger-screenshare/rtk-debugger-screenshare.d.ts

@@ -0,0 +1,38 @@
+import { States, Size, IconPack, RtkI18n } from '../../exports';
+import { Meeting } from '../../types/rtk-client';
+import { VideoProducerScoreStats, AudioProducerScoreStats } from '@cloudflare/realtimekit';
+import { FormattedStatsObj, StatsHealth } from '../../utils/debugger-utils';
+export declare class RtkDebuggerScreenShare {
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Is Network section expanded */
+    isNetworkOpen: boolean;
+    /** Is Devices section expanded */
+    isDevicesOpen: boolean;
+    /** Stats as formatted array to display */
+    videoProducerFormattedStats: FormattedStatsObj[];
+    /** Last raw video score stats obj */
+    videoProducerScoreStats: VideoProducerScoreStats;
+    /** Stats as formatted array to display */
+    audioProducerFormattedStats: FormattedStatsObj[];
+    /** Last raw video score stats obj */
+    audioProducerScoreStats: AudioProducerScoreStats;
+    /** Summarised health of network stats */
+    networkBasedMediaHealth: StatsHealth;
+    private mediaScoreUpdateListener;
+    private screenShareUpdateListener;
+    videoProducerScoreStatsChanged(newVideoProducerScoreStats: VideoProducerScoreStats): Promise<void>;
+    audioProducerScoreStatsChanged(newAudioProducerScoreStats: AudioProducerScoreStats): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): Promise<void>;
+    render(): any;
+}

package/dist/types/components/rtk-debugger-system/rtk-debugger-system.d.ts

@@ -0,0 +1,40 @@
+import { States, Size, IconPack, RtkI18n } from '../../exports';
+import { Meeting } from '../../types/rtk-client';
+import { FormattedStatsObj, StatsHealth } from '../../utils/debugger-utils';
+interface BatteryManager extends EventTarget {
+    charging: boolean;
+    chargingTime: number;
+    dischargingTime: number;
+    level: number;
+    onchargingchange: ((this: BatteryManager, event: Event) => any) | null;
+    onchargingtimechange: ((this: BatteryManager, event: Event) => any) | null;
+    ondischargingtimechange: ((this: BatteryManager, event: Event) => any) | null;
+    onlevelchange: ((this: BatteryManager, event: Event) => any) | null;
+}
+export declare class RtkDebuggerSystem {
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Is Network section expanded */
+    isBatterySectionOpen: boolean;
+    /** Summarised health of network stats */
+    batterySectionHealth: StatsHealth;
+    /** Battery manager */
+    battery: BatteryManager;
+    /** Stats as formatted array to display */
+    batteryFormattedStats: FormattedStatsObj[];
+    private toggleSection;
+    private batteryUpdateListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): Promise<void>;
+    render(): any;
+}
+export {};

package/dist/types/components/rtk-debugger-toggle/rtk-debugger-toggle.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Size, States } from '../../types/props';
+import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+import { Meeting } from '../../types/rtk-client';
+export declare class RtkDebuggerToggle {
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Language */
+    t: RtkI18n;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    /** Size */
+    size: Size;
+    private toggleDebugger;
+    render(): any;
+}