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

package/dist/types/components/rtk-screen-share-toggle/rtk-screen-share-toggle.d.ts

@@ -0,0 +1,67 @@
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting, MediaPermission } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+import { StageStatus } from '@cloudflare/realtimekit';
+interface ScreenShareState {
+    tooltipLabel: string;
+    label: string;
+    icon: string;
+    classList: {
+        [key: string]: boolean;
+    };
+    showWarning: boolean;
+    disable: boolean;
+}
+/**
+ * A button which toggles your screenshare.
+ */
+export declare class RtkScreenShareToggle {
+    /** States object */
+    states: States;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /**
+     * Maximum screen share count (value from preset)
+     * -1 denotes there is no limit on maximum
+     */
+    maxScreenShareCount: number;
+    screenShareCount: number;
+    screenShareEnabled: boolean;
+    canScreenShare: boolean;
+    shareScreenPermission: MediaPermission;
+    screenShareState: ScreenShareState;
+    stageStatus: StageStatus;
+    /**
+     * Emit api error events
+     */
+    apiError: EventEmitter<{
+        trace: string;
+        message: string;
+    }>;
+    private screenShareListener;
+    private participantLeftListener;
+    private stageStatusListener;
+    private mediaPermissionUpdateListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private hasPermissionError;
+    private reachedMaxScreenShares;
+    private toggleScreenShare;
+    private getState;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting, Peer } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+/**
+ * A component which plays a participant's screenshared video.
+ *
+ * It also allows for placement of other components similar to `rtk-participant-tile`.
+ *
+ * This component will not render anything if the participant hasn't start screensharing.
+ */
+export declare class RtkScreenshareView {
+    private videoEl;
+    private screenShareListener;
+    private fullScreenListener;
+    private participantScreenshareUpdate;
+    host: HTMLRtkScreenshareViewElement;
+    /** Hide full screen button */
+    hideFullScreenButton: boolean;
+    /** Position of name tag */
+    nameTagPosition: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center';
+    /** Participant object */
+    participant: Peer;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Variant */
+    variant: 'solid' | 'gradient';
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    videoExpanded: boolean;
+    screenShareEnabled: boolean;
+    isFullScreen: boolean;
+    remoteControlInfo: string;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    /** Emits when video playback happens successfully */
+    play: EventEmitter<{
+        participant: Peer;
+        screenshareParticipant: Peer;
+    }>;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    participantChanged(participant: Peer): void;
+    private toggleFullScreen;
+    render(): any;
+}

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

@@ -0,0 +1,38 @@
+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';
+type SettingsTab = 'audio' | 'video' | 'connection';
+/**
+ * A settings component to see and change your audio/video devices
+ * as well as see your connection quality.
+ */
+export declare class RtkSettings {
+    private poorConnectionListener;
+    private keyPressListener;
+    private stageStatusListener;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    activeTab: SettingsTab;
+    isMobileMainVisible: boolean;
+    networkStatus: 'good' | 'poor' | 'poorest';
+    canProduceVideo: boolean;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private changeTab;
+    private close;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,32 @@
+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';
+/**
+ * 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 RtkSettingsAudio {
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Event updated state */
+    stateUpdate: EventEmitter<States>;
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+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';
+/**
+ * A button which toggles visibility of settings module.
+ *
+ * When clicked it emits a `rtkStateUpdate` event with the data:
+ *
+ * ```ts
+ * { activeSettings: boolean; }
+ * ```
+ */
+export declare class RtkSettingsToggle {
+    /** Variant */
+    variant: ControlBarVariant;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    private toggleSettings;
+    render(): any;
+}

package/dist/types/components/rtk-settings-video/rtk-settings-video.d.ts

@@ -0,0 +1,37 @@
+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';
+/**
+ * A component which lets to manage your camera devices and your video preferences.
+ *
+ * Emits `rtkStateUpdate` event with data for toggling mirroring of self video:
+ * ```ts
+ * {
+ *  prefs: {
+ *    mirrorVideo: boolean
+ *  }
+ * }
+ * ```
+ */
+export declare class RtkSettingsVideo {
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    videoEnabled: boolean;
+    /** Emits updated state */
+    stateUpdate: EventEmitter<States>;
+    componentDidLoad(): void;
+    meetingChanged(meeting: Meeting): void;
+    disconnectedCallback(): void;
+    private onVideoUpdate;
+    render(): any;
+}

package/dist/types/components/rtk-setup-screen/rtk-setup-screen.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Meeting } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+import { UIConfig } from '../../types/ui-config';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { SocketConnectionState } from '@cloudflare/realtimekit';
+/**
+ * A screen shown before joining the meeting, where you can edit your display name,
+ * and media settings.
+ */
+export declare class RtkSetupScreen {
+    private inputEl;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Config object */
+    config: UIConfig;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    displayName: string;
+    isJoining: boolean;
+    canEditName: boolean;
+    canProduceAudio: boolean;
+    connectionState: SocketConnectionState['state'];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    meetingChanged(meeting: Meeting): void;
+    private socketStateUpdate;
+    private join;
+    render(): any;
+}

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Meeting } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+import { UIConfig } from '../../types/ui-config';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { RtkSidebarTab, RtkSidebarView } from '../rtk-sidebar-ui/rtk-sidebar-ui';
+export type RtkSidebarSection = 'chat' | 'polls' | 'participants' | 'plugins';
+/**
+ * A component which handles the sidebar and
+ * you can customize which sections you want, and which section you want as the default.
+ */
+export declare class RtkSidebar {
+    private onStageStatusUpdate;
+    /** Enabled sections in sidebar */
+    enabledSections: RtkSidebarTab[];
+    /** Default section */
+    defaultSection: RtkSidebarSection;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Config */
+    config: UIConfig;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Size */
+    size: Size;
+    /** View type */
+    view: RtkSidebarView;
+    currentTab: RtkSidebarSection;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    isFloating: boolean;
+    enablePinning: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    statesChanged(s?: States): void;
+    viewChanged(view: RtkSidebarView): void;
+    private getTabs;
+    private viewSection;
+    private close;
+    private updateEnabledSections;
+    private toggleFloating;
+    render(): any;
+}

package/dist/types/components/rtk-sidebar-ui/rtk-sidebar-ui.d.ts

@@ -0,0 +1,120 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n } from '../../exports';
+export interface RtkSidebarTab {
+    id: string;
+    name: string | HTMLElement;
+}
+export type RtkSidebarView = 'sidebar' | 'full-screen';
+export declare class RtkSidebarUi {
+    /** View */
+    view: RtkSidebarView;
+    /** Tabs */
+    tabs: RtkSidebarTab[];
+    /** Hide Main Header */
+    hideHeader: boolean;
+    /** Hide Close Action */
+    hideCloseAction: boolean;
+    /** Default tab to open */
+    currentTab: string;
+    /** Icon Pack */
+    iconPack: {
+        people: string;
+        people_checked: string;
+        chat: string;
+        poll: string;
+        participants: string;
+        rocket: string;
+        call_end: string;
+        share: string;
+        mic_on: string;
+        mic_off: string;
+        video_on: string;
+        video_off: string;
+        share_screen_start: string;
+        share_screen_stop: string;
+        share_screen_person: string;
+        clock: string;
+        dismiss: string;
+        send: string;
+        search: string;
+        more_vertical: string;
+        chevron_down: string;
+        chevron_up: string;
+        chevron_left: string;
+        chevron_right: string;
+        settings: string;
+        wifi: string;
+        speaker: string;
+        speaker_off: string;
+        download: string;
+        full_screen_maximize: string;
+        full_screen_minimize: string;
+        copy: string;
+        attach: string;
+        image: string;
+        emoji_multiple: string;
+        image_off: string;
+        disconnected: string;
+        wand: string;
+        recording: string;
+        subtract: string;
+        stop_recording: string;
+        warning: string;
+        pin: string;
+        pin_off: string;
+        spinner: string;
+        breakout_rooms: string;
+        add: string;
+        shuffle: string;
+        edit: string;
+        delete: string;
+        back: string;
+        save: string;
+        web: string;
+        checkmark: string;
+        spotlight: string;
+        join_stage: string;
+        leave_stage: string;
+        pip_off: string;
+        pip_on: string;
+        signal_1: string;
+        signal_2: string;
+        signal_3: string;
+        signal_4: string;
+        signal_5: string;
+        start_livestream: string;
+        stop_livestream: string;
+        viewers: string;
+        debug: string;
+        info: string;
+        devices: string;
+        horizontal_dots: string;
+        ai_sparkle: string;
+        meeting_ai: string;
+        create_channel: string;
+        create_channel_illustration: string;
+        captionsOn: string;
+        captionsOff: string;
+        play: string;
+        pause: string;
+        fastForward: string;
+        minimize: string;
+        maximize: string;
+    };
+    /** Option to focus close button when opened */
+    focusCloseButton: boolean;
+    /** Language */
+    t: RtkI18n;
+    /** Tab change event */
+    tabChange: EventEmitter<string>;
+    /** Tab change event */
+    sidebarClose: EventEmitter<void>;
+    private onClose;
+    private keydownListener;
+    private hostEl;
+    private closeButton;
+    componentDidLoad(): void;
+    handleFocusCloseButton(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/rtk-simple-grid/rtk-simple-grid.d.ts

@@ -0,0 +1,43 @@
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting, Peer } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+import { UIConfig } from '../../types/ui-config';
+import { Dimensions } from '../../lib/grid';
+import { MediaConnectionState } from '@cloudflare/realtimekit';
+/**
+ * A grid component which renders only the participants in a simple grid.
+ */
+export declare class RtkSimpleGrid {
+    private resizeObserver;
+    /** Participants */
+    participants: Peer[];
+    /**
+     * Aspect Ratio of participant tile
+     *
+     * Format: `width:height`
+     */
+    aspectRatio: string;
+    /** Gap between participant tiles */
+    gap: number;
+    /** Size */
+    size: Size;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** UI Config */
+    config: UIConfig;
+    /** Icon Pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    dimensions: Dimensions;
+    mediaConnection: MediaConnectionState;
+    host: HTMLRtkSimpleGridElement;
+    private setHostDimensions;
+    connectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -0,0 +1,44 @@
+import { Meeting } from '../../types/rtk-client';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Size, States } 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 RtkSpeakerSelector {
+    private testAudioEl;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** variant */
+    variant: 'full' | 'inline';
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    speakerDevices: MediaDeviceInfo[];
+    currentDevices: {
+        speaker: MediaDeviceInfo;
+    };
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private deviceListUpdateListener;
+    private deviceUpdateListener;
+    private mediaPermissionUpdate;
+    meetingChanged(meeting: Meeting): void;
+    private testAudio;
+    private setDevice;
+    render(): any;
+}

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

@@ -0,0 +1,12 @@
+import { Size } from '../../exports';
+import { IconPack } from '../../lib/icons';
+/**
+ * A component which shows an animating spinner.
+ */
+export declare class RtkSpinner {
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Size */
+    size: Size;
+    render(): any;
+}

package/dist/types/components/rtk-spotlight-grid/rtk-spotlight-grid.d.ts

@@ -0,0 +1,47 @@
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting, Peer } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+import { UIConfig } from '../../types/ui-config';
+import { GridLayout, GridSize } from '../rtk-grid/rtk-grid';
+/**
+ * A grid component that renders two lists of participants: `pinnedParticipants` and `participants`.
+ *
+ * You can customize the layout to a `column` view, by default is is `row`.
+ *
+ * - Participants from `pinnedParticipants[]` are rendered inside a larger grid.
+ * - Participants from `participants[]` array are rendered in a smaller grid.
+ */
+export declare class RtkSpotlightGrid {
+    /** Grid Layout */
+    layout: GridLayout;
+    /** Participants */
+    participants: Peer[];
+    /** Pinned Participants */
+    pinnedParticipants: Peer[];
+    /**
+     * Aspect Ratio of participant tile
+     *
+     * Format: `width:height`
+     */
+    aspectRatio: string;
+    /** Gap between participant tiles */
+    gap: number;
+    /** Size */
+    size: Size;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** UI Config */
+    config: UIConfig;
+    /** Icon Pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Grid size */
+    gridSize: GridSize;
+    host: HTMLRtkSpotlightGridElement;
+    private getAdaptiveSize;
+    render(): any;
+}

package/dist/types/components/rtk-spotlight-indicator/rtk-spotlight-indicator.d.ts

@@ -0,0 +1,22 @@
+import { Meeting } from '../../types/rtk-client';
+import { RtkI18n } from '../../lib/lang';
+import { IconPack } from '../../lib/icons';
+import { Size } from '../../exports';
+export declare class RtkSpotlightIndicator {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Size */
+    size: Size;
+    canSpotlight: boolean;
+    isSpotlighted: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private permissionsUpdateListener;
+    private updateSpotlightState;
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { States } from '../../types/props';
+/**
+ * A component used as a stage that commonly houses
+ * the `grid` and `sidebar` components.
+ *
+ *  @slot - Default slot
+ */
+export declare class RtkStage {
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    render(): any;
+}