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

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

@@ -0,0 +1,42 @@
+import { Peer } from '../../types/rtk-client';
+import { IconPack } from '../../lib/icons';
+import { Size } from '../../types/props';
+import { RtkI18n } from '../../lib/lang';
+export type AudioVisualizerVariant = 'bars';
+/**
+ * An audio visualizer component which visualizes a participants audio.
+ *
+ * Commonly used inside `rtk-name-tag`.
+ */
+export declare class RtkAudioVisualizer {
+    private visualizer;
+    private hark;
+    private audioUpdateListener;
+    private screenShareUpdateListener;
+    /** Variant */
+    variant: AudioVisualizerVariant;
+    /** Participant object */
+    participant: Peer;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Hide when there is no audio / audio is muted */
+    hideMuted: boolean;
+    /** Audio visualizer for screensharing, it will use screenShareTracks.audio instead of audioTrack */
+    isScreenShare: boolean;
+    audioEnabled: boolean;
+    volume: number;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    participantChanged(participant: Peer): void;
+    /**
+     * Determines the volume from a given MediaStream and updates the components state
+     * @param stream A MediaStream with AudioTrack(s) added
+     */
+    private calcVolume;
+    render(): any;
+}

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

@@ -0,0 +1,26 @@
+import { IconPack } from '../../lib/icons';
+import { Size } from '../../types/props';
+import { Peer, WaitlistedParticipant } from '../../types/rtk-client';
+import { RtkI18n } from '../../lib/lang';
+export type AvatarVariant = 'circular' | 'square' | 'hexagon';
+/**
+ * Avatar component which renders a participant's image or their initials.
+ */
+export declare class RtkAvatar {
+    /** Participant object */
+    participant: Peer | WaitlistedParticipant | {
+        name: string;
+        picture: string;
+    };
+    /** Avatar type */
+    variant: AvatarVariant;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    imageState: 'loading' | 'loaded' | 'errored';
+    private getAvatar;
+    render(): any;
+}

package/dist/types/components/rtk-breakout-room-manager/rtk-breakout-room-manager.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n } from '../../lib/lang';
+import { IconPack } from '../../lib/icons';
+import { States } from '../../types/props';
+import { Meeting } from '../../types/rtk-client';
+import { DraftMeeting } from '../../utils/breakout-rooms-manager';
+export declare class RtkBreakoutRoomManager {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Enable updating participants */
+    assigningParticipants: boolean;
+    /** Mode in which selector is used */
+    mode: 'edit' | 'create';
+    /** States object */
+    states: States;
+    /** allow room delete */
+    allowDelete: boolean;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Drag mode */
+    isDragMode: boolean;
+    /** Connected Room Config Object */
+    room: DraftMeeting;
+    /** display expanded card by default */
+    defaultExpanded: boolean;
+    editingTitleRoomId: string;
+    newTitle: string;
+    showExpandedCard: boolean;
+    glowingCard: boolean;
+    /** Event for adding a participant */
+    onParticipantsAdd: EventEmitter<null>;
+    /** On Delete event emitter */
+    onParticipantDelete: EventEmitter<{
+        customParticipantId: string;
+    }>;
+    /** Event for joining a room */
+    onRoomJoin: EventEmitter<null>;
+    /** Event for deleting room */
+    deleteRoom: EventEmitter<string>;
+    /** Event for updating room details */
+    updateRoom: EventEmitter<{
+        title: string | undefined;
+        id: string;
+    }>;
+    private allParticipants;
+    private permissions;
+    private roomTitle;
+    private canEditMeetingTitle;
+    private inputTextEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private permissionsUpdateListener;
+    private reset;
+    private onEditClick;
+    private onDrop;
+    private onDragOver;
+    private onDragLeave;
+    private getAssignmentHint;
+    private toggleCardDisplay;
+    private glowCard;
+    private onAssign;
+    private onJoin;
+    private onTitleChanged;
+    private renderPeer;
+    private renderExpandedCardMaybe;
+    private renderParticipantsMaybe;
+    render(): any;
+}

package/dist/types/components/rtk-breakout-room-participants/rtk-breakout-room-participants.d.ts

@@ -0,0 +1,46 @@
+import { IconPack } from '../../lib/icons';
+import { Meeting } from '../../types/rtk-client';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n } from '../../lib/lang';
+import type { RTKConnectedMeetings } from '@cloudflare/realtimekit';
+type ConnectedPeer = RTKConnectedMeetings['parentMeeting']['participants'][number];
+/**
+ * A component which lists all participants, with ability to
+ * run privileged actions on each participant according to your permissions.
+ */
+export declare class RtkBreakoutRoomParticipants {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Participant ids */
+    participantIds: string[];
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    search: string;
+    participantsToShow: ConnectedPeer[];
+    /** Emits an event when selected participants are updated */
+    onSelectedParticipantsUpdate: EventEmitter<string[]>;
+    /** Emits an event when all participants are selected or deselected */
+    onAllToggled: EventEmitter<string[]>;
+    /** Emits an event when participants are dragged */
+    onParticipantsDragging: EventEmitter<boolean>;
+    /** selected participants */
+    selectedParticipantIds: string[];
+    isDragging: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateSelectedParticipants;
+    meetingChanged(meeting: Meeting): void;
+    participantsChanged(): void;
+    searchChanged(search: string): void;
+    private getParticipants;
+    private onSearchInput;
+    private onDragStart;
+    private onDragEnd;
+    private onClick;
+    private onToggleAll;
+    private renderPeer;
+    render(): any;
+}
+export {};

package/dist/types/components/rtk-breakout-room-toggle/rtk-breakout-rooms-toggle.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting } from '../../types/rtk-client';
+import { PartialStateEvent, Size, States } from '../../types/props';
+import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+/**
+ * A button which toggles visibility of breakout rooms.
+ *
+ * You need to pass the `meeting` object to it.
+ */
+export declare class RtkBreakoutRoomsToggle {
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<PartialStateEvent>;
+    canToggle: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private permissionsUpdateListener;
+    private breakoutRoomToggle;
+    render(): any;
+}

package/dist/types/components/rtk-breakout-rooms-manager/rtk-breakout-rooms-manager.d.ts

@@ -0,0 +1,82 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n } from '../../lib/lang';
+import { IconPack } from '../../lib/icons';
+import { PartialStateEvent, States } from '../../types/props';
+import { Meeting } from '../../types/rtk-client';
+import { DraftMeeting } from '../../utils/breakout-rooms-manager';
+export type BreakoutManagerState = 'room-config' | 'participants-config';
+export type BreakoutRoomConfig = {
+    rooms: number;
+    step: BreakoutManagerState;
+    mode: 'edit' | 'create';
+    applyingChanges: boolean;
+};
+export declare class RtkBreakoutRoomsManager {
+    private selectorRef;
+    private permissions;
+    /** Flag to indicate busy state */
+    loading: boolean;
+    /** Breakout room config object */
+    roomConfig: BreakoutRoomConfig;
+    private stateManager;
+    /** draft state */
+    draftState: {
+        parentMeeting: DraftMeeting;
+        meetings: DraftMeeting[];
+    };
+    /** List of assigned participants */
+    /** Flag that tells if participants are being assigned or not */
+    assigningParticipants: boolean;
+    /** List of selected peers */
+    selectedParticipants: string[];
+    /** update about room changes */
+    ephemeralStatusText: string;
+    /** Flag that tells if participants are being dragged */
+    isDragMode: boolean;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<PartialStateEvent>;
+    onSelectedParticipantsChanged(participants: any): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private permissionsUpdateListener;
+    private fetchRoomState;
+    private updateLocalState;
+    private setEphemeralStatus;
+    private onCreateRooms;
+    private onAddNewRoom;
+    private onRoomUpdate;
+    private onRoomDelete;
+    onParticipantDelete(event: CustomEvent): void;
+    toggleDragMode(e: CustomEvent): void;
+    private assignParticipantsRandomly;
+    private unassignParticipant;
+    private onUnassignAll;
+    private assignParticipantsToRoom;
+    private joinRoom;
+    private closeBreakout;
+    private handleClose;
+    private enableConfirmationModal;
+    private close;
+    private applyChanges;
+    updateSelectedParticipants(e: CustomEvent): void;
+    updateAllParticipants(e: CustomEvent): void;
+    private getStatusText;
+    private getApproxDistribution;
+    private deselectAll;
+    private discardChanges;
+    private shouldShowOnlyRoomSwitcher;
+    private getPermittedRooms;
+    private renderMainRoomMaybe;
+    private renderRoomSwitcher;
+    private renderLoading;
+    private renderRoomConfig;
+    render(): any;
+}

package/dist/types/components/rtk-broadcast-message-modal/rtk-broadcast-message-modal.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { States } from '../../exports';
+import { Meeting } from '../../types/rtk-client';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+export declare class RtkBroadcastMessageModal {
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    /** Broadcast message state */
+    messagePayload: {
+        to: string;
+        message: string;
+    };
+    successMessage: boolean;
+    private close;
+    private sendMessage;
+    render(): any;
+}

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

@@ -0,0 +1,25 @@
+import { Size } from '../../types/props';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+export type ButtonKind = 'button' | 'icon' | 'wide';
+/**
+ * A button that follows RTK Design System.
+ *
+ * @slot - Default slot
+ * @slot start - Content placed to the start of the button, i.e; left.
+ * @slot end - Content placed to the end of the button, i.e; right.
+ */
+export declare class RtkButton {
+    /** Size */
+    size: Size;
+    /** Button variant */
+    variant: ButtonVariant;
+    /** Button type */
+    kind: ButtonKind;
+    /** Whether to reverse order of children */
+    reverse: boolean;
+    /** Where the button is disabled or not */
+    disabled: boolean;
+    /** Button type */
+    type: HTMLButtonElement['type'];
+    render(): any;
+}

package/dist/types/components/rtk-camera-selector/rtk-camera-selector.d.ts

@@ -0,0 +1,40 @@
+import { Meeting } from '../../types/rtk-client';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Size } from '../../types/props';
+/**
+ * A component which lets to manage your audio devices and audio preferences.
+ *
+ * Emits `rtkStateUpdate` event with data for muting notification sounds:
+ * ```ts
+ * {
+ *  prefs: {
+ *    muteNotificationSounds: boolean
+ *  }
+ * }
+ * ```
+ */
+export declare class RtkCameraSelector {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** variant */
+    variant: 'full' | 'inline';
+    /** Language */
+    t: RtkI18n;
+    videoDevices: MediaDeviceInfo[];
+    currentDevice: MediaDeviceInfo;
+    canProduceVideo: boolean;
+    meetingChanged(meeting: Meeting): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private stageStateListener;
+    private deviceListUpdateListener;
+    private deviceUpdateListener;
+    private mediaPermissionUpdateListener;
+    private setDevice;
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting, MediaPermission } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+import { StageStatus } from '@cloudflare/realtimekit';
+/**
+ * A button which toggles your camera.
+ */
+export declare class RtkCameraToggle {
+    private videoUpdateListener;
+    private stageStatusListener;
+    private mediaPermissionUpdateListener;
+    private meetingPermissionsUpdateListener;
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    videoEnabled: boolean;
+    canProduceVideo: boolean;
+    cameraPermission: MediaPermission;
+    stageStatus: StageStatus;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private hasPermissionError;
+    private toggleCamera;
+    private getState;
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack, Size, States, UIConfig } from '../../exports';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting } from '../../types/rtk-client';
+import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+export declare class RtkCaptionToggle {
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Config */
+    config: UIConfig;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Size */
+    size: Size;
+    /** Language */
+    t: RtkI18n;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    captionEnabled: boolean;
+    connectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    disconnectedCallback(): void;
+    private permissionsUpdateListener;
+    private toggleCaptions;
+    render(): any;
+}

package/dist/types/components/rtk-channel-creator/rtk-channel-creator.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n, IconPack, States } from '../../exports';
+import { Meeting } from '../../types/rtk-client';
+export declare class RtkChannelCreator {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Language */
+    t: RtkI18n;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    /** Emits event to switch channel */
+    switchChannel: EventEmitter<string>;
+    channelName: string;
+    searchQuery: string;
+    step: number;
+    loading: boolean;
+    selectedMemberIds: Set<string>;
+    focusedMemberIndex: number;
+    showAllMembersList: boolean;
+    $el: HTMLRtkChannelCreatorElement;
+    private allMembers;
+    private inputTextRef;
+    private searchInputTextRef?;
+    componentDidLoad(): void;
+    private focusOnSearch;
+    private onClickHandler;
+    private createChannel;
+    private onMemberAdd;
+    private keyDownHandler;
+    private renderMemberSelector;
+    render(): any;
+}

package/dist/types/components/rtk-channel-details/rtk-channel-details.d.ts

@@ -0,0 +1,15 @@
+import { RtkI18n, IconPack } from '../../exports';
+import { ChatChannel } from '../../types/props';
+import { RTKBasicParticipant } from '@cloudflare/realtimekit';
+export declare class RtkChannelDetails {
+    /** Channel object */
+    channel: ChatChannel;
+    /** Language */
+    t: RtkI18n;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** List of channel members */
+    members: RTKBasicParticipant[];
+    private renderMembers;
+    render(): any;
+}

package/dist/types/components/rtk-channel-header/rtk-channel-header.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Meeting } from '../../types/rtk-client';
+import { ChatChannel } from '../../types/props';
+import { RtkI18n, IconPack } from '../../exports';
+import { RTKBasicParticipant } from '@cloudflare/realtimekit';
+export declare class RtkChannelHeader {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Channel object */
+    channel: ChatChannel;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** event triggered for search */
+    search: EventEmitter<string>;
+    /** event triggered for search */
+    searchDismissed: EventEmitter;
+    showChannelDetailsDialog: boolean;
+    showSearchBar: boolean;
+    members: RTKBasicParticipant[];
+    /** Show back button */
+    showBackButton: boolean;
+    /** Event emitted when back button is clicked */
+    back: EventEmitter<void>;
+    onChannelChanged(): void;
+    connectedCallback(): void;
+    private $searchInput;
+    private renderChannelDetails;
+    render(): any;
+}

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n, IconPack } from '../../exports';
+import { ChatChannel } from '../../types/props';
+export declare class RtkChannelSelectorUi {
+    /** Channels */
+    channels: ChatChannel[];
+    /** On channel changed */
+    channelChanged: EventEmitter<string>;
+    /** Selected channel id */
+    selectedChannelId: string;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** show recent message in channel */
+    showRecentMessage: boolean;
+    isHidden: boolean;
+    searchQuery: string;
+    private $el;
+    private matchMedia;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    private handleResize;
+    private channelSelected;
+    private getTimeLabel;
+    private onSearchInput;
+    private onRevealClicked;
+    private renderChannelDisplayPic;
+    private renderRecentMessage;
+    render(): any;
+}

package/dist/types/components/rtk-channel-selector-view/rtk-channel-selector-view.d.ts

@@ -0,0 +1,62 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n, IconPack } from '../../exports';
+export interface ChannelItem {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    icon?: keyof IconPack;
+    latestMessage?: string;
+    latestMessageTime?: Date;
+    unreadCount?: number;
+}
+export declare class RtkChannelSelectorView {
+    /** Channels */
+    channels: {
+        id: string;
+        name: string;
+        avatarUrl?: string;
+        icon?: keyof IconPack;
+        latestMessage?: string;
+        latestMessageTime?: Date;
+        unreadCount?: number;
+    }[];
+    /** Selected channel id */
+    selectedChannelId: string;
+    /** Disables search bar (default = false) */
+    disableSearch: boolean;
+    /** Hides avatar (default = false) */
+    hideAvatar: boolean;
+    /** Icon Pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Render as dropdown or list (default = list) */
+    viewAs: 'dropdown' | 'list';
+    /** Event emitted when selected channel changes */
+    channelChange: EventEmitter<{
+        id: string;
+        name: string;
+        avatarUrl?: string;
+        icon?: keyof IconPack;
+        latestMessage?: string;
+        latestMessageTime?: Date;
+        unreadCount?: number;
+    }>;
+    searchQuery: string;
+    showDropdown: boolean;
+    $el: HTMLRtkChannelSelectorViewElement;
+    private $searchEl;
+    private $listEl;
+    private resizeObserver;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private calculateListHeight;
+    private getFilteredChannels;
+    private getTimeLabel;
+    private toggleDropdown;
+    private getChannelById;
+    private getTotalUnreads;
+    private onChannelClickHandler;
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+interface Props {
+    name: string;
+    time: Date;
+    now: Date;
+}
+export declare const ChatHead: FunctionalComponent<Props>;
+export {};