@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

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

@@ -0,0 +1,48 @@
+import { IconPack } from '../../lib/icons';
+import { Meeting } from '../../types/rtk-client';
+import { Size, States } from '../../types/props';
+import { UIConfig } from '../../types/ui-config';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RtkI18n } from '../../lib/lang';
+export type ParticipantsViewMode = 'sidebar';
+export type ParticipantsTabId = 'requests' | 'stage-list' | 'viewer-list';
+export type Tab = {
+    id: ParticipantsTabId;
+    name: string | HTMLElement;
+};
+/**
+ * A component which lists all participants, with ability to
+ * run privileged actions on each participant according to your permissions.
+ */
+export declare class RtkParticipants {
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Config */
+    config: UIConfig;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Default section */
+    defaultParticipantsTabId: ParticipantsTabId;
+    /** Language */
+    t: RtkI18n;
+    currentParticipantsTabId: ParticipantsTabId;
+    tabs: Tab[];
+    hasRequests: boolean;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    search: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    currentParticipantsTabIdChanged(): void;
+    private updateParticipantCountsInTabs;
+    private onSearchInput;
+    private shouldShowViewersTab;
+    private shouldShowRequestsTab;
+    private viewSection;
+    render(): any;
+}

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

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Meeting } from '../../types/rtk-client';
+import { RtkI18n } from '../../lib/lang';
+import { IconPack } from '../../lib/icons';
+/**
+ * A component which plays all the audio from participants and screenshares.
+ */
+export declare class RtkParticipantsAudio {
+    private audio;
+    private audioUpdateListener;
+    private participantLeftListener;
+    private screenShareUpdateListener;
+    private deviceUpdateListener;
+    private stageStatusUpdateListener;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Pass existing audio element */
+    preloadedAudioElem: HTMLAudioElement;
+    /** Callback to execute when the dialog is closed */
+    dialogClose: EventEmitter<void>;
+    showPlayDialog: boolean;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setupAudio;
+    private handleAutoPlayError;
+    private handleEvents;
+    meetingChanged(meeting: Meeting): Promise<void>;
+    private onRtkDialogClose;
+    render(): any;
+}

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

@@ -0,0 +1,42 @@
+import { IconPack } from '../../lib/icons';
+import { Meeting, Peer } from '../../types/rtk-client';
+import { Size } from '../../types/props';
+import { UIConfig } from '../../types/ui-config';
+import { RtkI18n } from '../../lib/lang';
+import { ParticipantsViewMode } from '../rtk-participants/rtk-participants';
+import { States } from '../../exports';
+/**
+ * A component which lists all participants, with ability to
+ * run privileged actions on each participant according to your permissions.
+ */
+export declare class RtkParticipants {
+    private participantJoinedListener;
+    private participantLeftListener;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Meeting object */
+    states: States;
+    /** Config */
+    config: UIConfig;
+    /** Size */
+    size: Size;
+    /** Hide Stage Participants Count Header */
+    hideHeader: boolean;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** View mode for participants list */
+    view: ParticipantsViewMode;
+    /** Language */
+    t: RtkI18n;
+    /** Search */
+    search: string;
+    participants: Peer[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    searchChanged(search: string): void;
+    private createParticipantNode;
+    private getParticipants;
+    private updateStageList;
+    render(): any;
+}

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

@@ -0,0 +1,29 @@
+import { UIConfig, Size, IconPack, RtkI18n } from '../../exports';
+import { Meeting, Peer } from '../../types/rtk-client';
+import { ParticipantsViewMode } from '../rtk-participants/rtk-participants';
+export declare class RtkParticipantsStaged {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Config */
+    config: UIConfig;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** View mode for participants list */
+    view: ParticipantsViewMode;
+    /** Language */
+    t: RtkI18n;
+    stageRequestedParticipants: Peer[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private updateStageRequestedParticipants;
+    private acceptStageRequest;
+    private rejectStageRequest;
+    private acceptAllStageRequest;
+    private denyAllStageRequest;
+    private shouldShowStageRequests;
+    private updateRequestList;
+    render(): any;
+}

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting, Peer, WaitlistedParticipant } 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 participants.
+ *
+ * When clicked it emits a `rtkStateUpdate` event with the data:
+ *
+ * ```ts
+ * { activeSidebar: boolean; sidebar: 'participants' }
+ * ```
+ */
+export declare class RtkParticipantsToggle {
+    private waitlistedParticipantJoinedListener;
+    private waitlistedParticipantLeftListener;
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    participantsActive: boolean;
+    waitlistedParticipants: WaitlistedParticipant[];
+    stageRequestedParticipants: Peer[];
+    badgeCount: number;
+    canViewParticipants: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateStageRequests;
+    private updateBadgeCount;
+    meetingChanged(meeting: Meeting): void;
+    statesChanged(states?: States): void;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    private toggleParticipantsTab;
+    private updateCanView;
+    handleParticipantsActiveChange(): void;
+    private buttonEl;
+    render(): any;
+}

package/dist/types/components/rtk-participants-viewer-list/rtk-participants-viewer-list.d.ts

@@ -0,0 +1,33 @@
+import { UIConfig, Size, IconPack, RtkI18n } from '../../exports';
+import { Meeting, Peer } from '../../types/rtk-client';
+import { ParticipantsViewMode } from '../rtk-participants/rtk-participants';
+export declare class RtkParticipantsViewers {
+    private participantJoinedListener;
+    private participantLeftListener;
+    private updateStageViewers;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Config */
+    config: UIConfig;
+    /** Size */
+    size: Size;
+    /** Hide Viewer Count Header */
+    hideHeader: boolean;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** View mode for participants list */
+    view: ParticipantsViewMode;
+    /** Search */
+    search: string;
+    /** Language */
+    t: RtkI18n;
+    stageViewers: Peer[];
+    connectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    searchChanged(search: string): void;
+    disconnectedCallback(): void;
+    private getViewers;
+    private createParticipantNode;
+    private shouldShowViewers;
+    render(): any;
+}

package/dist/types/components/rtk-participants-waiting-list/rtk-participants-waiting-list.d.ts

@@ -0,0 +1,29 @@
+import { UIConfig, Size, IconPack, RtkI18n } from '../../exports';
+import { Meeting, WaitlistedParticipant } from '../../types/rtk-client';
+import { ParticipantsViewMode } from '../rtk-participants/rtk-participants';
+export declare class RtkParticipantsWaitlisted {
+    private waitlistedParticipantJoinedListener;
+    private waitlistedParticipantLeftListener;
+    private waitlistedParticipantsClearedListener;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Config */
+    config: UIConfig;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** View mode for participants list */
+    view: ParticipantsViewMode;
+    /** Language */
+    t: RtkI18n;
+    private acceptWaitingRoomRequest;
+    waitlistedParticipants: WaitlistedParticipant[];
+    private acceptAllWaitingRoomRequests;
+    private rejectWaitingRoomRequest;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private shouldShowWaitlist;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { DeviceConfig } from '@cloudflare/realtimekit';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting } from '../../types/rtk-client';
+import { States } from '../../types/props';
+/**
+ * A component which shows permission related troubleshooting
+ * information.
+ */
+export declare class RtkPermissionsMessage {
+    /** Meeting object */
+    meeting: Meeting;
+    /** Language */
+    t: RtkI18n;
+    /** Icon Pack */
+    iconPack: IconPack;
+    /** States object */
+    states: States;
+    device: DeviceConfig;
+    currentStep: number;
+    svgSteps: string[];
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private getLink;
+    private continue;
+    private reload;
+    private isDeniedBySystem;
+    private getTitle;
+    private get mediaType();
+    private getMessage;
+    private getImage;
+    private nextStep;
+    private openMacSystemSettings;
+    private stepsTimer;
+    render(): any;
+}

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

@@ -0,0 +1,28 @@
+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 RtkPipToggle {
+    /** 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>;
+    pipSupported: boolean;
+    connectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private togglePip;
+    render(): any;
+}

package/dist/types/components/rtk-plugin-main/rtk-plugin-main.d.ts

@@ -0,0 +1,28 @@
+import { IconPack } from '../../lib/icons';
+import { RTKPlugin } from '@cloudflare/realtimekit';
+import { Meeting } from '../../types/rtk-client';
+import { RtkI18n } from '../../lib/lang';
+/**
+ * A component which loads a plugin.
+ */
+export declare class RtkPluginMain {
+    private iframeEl;
+    private toggleViewModeListener;
+    /** Meeting */
+    meeting: Meeting;
+    /** Plugin */
+    plugin: RTKPlugin;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    canClosePlugin: boolean;
+    viewModeEnabled: boolean;
+    componentDidLoad(): void;
+    private onIframeRef;
+    meetingChanged(meeting: Meeting): void;
+    pluginChanged(plugin: RTKPlugin): void;
+    disconnectedCallback(): void;
+    private canInteractWithPlugin;
+    render(): any;
+}

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

@@ -0,0 +1,35 @@
+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 { RTKPlugin } from '@cloudflare/realtimekit';
+import { RtkI18n } from '../../lib/lang';
+/**
+ * A component which lists all available plugins from their preset,
+ * and ability to enable or disable plugins.
+ */
+export declare class RtkPlugins {
+    private updateActivePlugins;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Config */
+    config: UIConfig;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    plugins: RTKPlugin[];
+    canStartPlugins: boolean;
+    canClosePlugins: boolean;
+    activatedPluginsId: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private close;
+    render(): any;
+}

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

@@ -0,0 +1,42 @@
+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 plugins.
+ *
+ * When clicked it emits a `rtkStateUpdate` event with the data:
+ *
+ * ```ts
+ * { activeSidebar: boolean; sidebar: 'plugins' }
+ * ```
+ */
+export declare class RtkPluginsToggle {
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    pluginsActive: boolean;
+    canViewPlugins: boolean;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    statesChanged(states?: States): void;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    private togglePlugins;
+    private updateCanView;
+    handlePluginsActiveChange(): void;
+    private buttonEl;
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+import { RTKPermissionsPreset } from '@cloudflare/realtimekit';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Poll } from '../../types/props';
+/**
+ * A poll component.
+ *
+ * Shows a poll where a user can vote.
+ */
+export declare class RtkPolls {
+    /** Poll */
+    poll: Poll;
+    /** Self ID */
+    self: string;
+    /** Permissions Object */
+    permissions: RTKPermissionsPreset;
+    /** Event which is emitted when a poll is voted on */
+    onVote: EventEmitter<{
+        id: string;
+        index: number;
+    }>;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    private MAX_VOTES_RENDER;
+    private vote;
+    render(): any;
+}

package/dist/types/components/rtk-poll-form/rtk-poll-form.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { PollObject } from '../../types/props';
+/**
+ * A component that lets you create a poll.
+ */
+export declare class RtkPoll {
+    private question;
+    /** Event which is emitted when a poll is created */
+    onCreate: EventEmitter<PollObject>;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Options */
+    options: string[];
+    anonymous: boolean;
+    hideVotes: boolean;
+    /** Error Text */
+    error: {
+        code: number;
+        message: string;
+    };
+    private removeOption;
+    private addOption;
+    private updateOption;
+    private handleSubmit;
+    render(): any;
+}

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

@@ -0,0 +1,38 @@
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting } from '../../types/rtk-client';
+import { Size, Poll } from '../../types/props';
+import { UIConfig } from '../../types/ui-config';
+import { RTKPermissionsPreset } from '@cloudflare/realtimekit';
+/**
+ * A component which lists all available plugins a user can access with
+ * the ability to enable or disable them as per their permissions.
+ */
+export declare class RtkPolls {
+    private onCreate;
+    private onVote;
+    private pollEl;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Config */
+    config: UIConfig;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    /** Create State */
+    create: boolean;
+    /** Polls */
+    polls: Poll[];
+    permissions: RTKPermissionsPreset;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private toggleCreateState;
+    private onPollsUpdate;
+    private onUpdatePermissions;
+    componentDidRender(): void;
+    render(): any;
+}

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

@@ -0,0 +1,46 @@
+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 polls.
+ *
+ * You need to pass the `meeting` object to it to see the unread polls count badge.
+ *
+ * When clicked it emits a `rtkStateUpdate` event with the data:
+ *
+ * ```ts
+ * { activeSidebar: boolean; sidebar: 'polls' }
+ * ```
+ */
+export declare class RtkPollsToggle {
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** States object */
+    states: States;
+    /** Size */
+    size: Size;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Language */
+    t: RtkI18n;
+    pollsActive: boolean;
+    unreadPollsCount: number;
+    canViewPolls: boolean;
+    private onPollsUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    statesChanged(states?: States): void;
+    /** Emits updated state data */
+    stateUpdate: EventEmitter<States>;
+    private togglePollsTab;
+    private updateCanView;
+    handlePollsActiveChange(): void;
+    private buttonEl;
+    render(): any;
+}

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

@@ -0,0 +1,26 @@
+import { IconPack } from '../../lib/icons';
+import { RtkI18n } from '../../lib/lang';
+import { Meeting } from '../../types/rtk-client';
+import { Size } from '../../types/props';
+/**
+ * A component which indicates the recording status of a meeting.
+ *
+ * It will not render anything if no recording is taking place.
+ */
+export declare class RtkRecordingIndicator {
+    private updateRecordingStatus;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Size */
+    size: Size;
+    /** Language */
+    t: RtkI18n;
+    /** Icon pack */
+    iconPack: IconPack;
+    isRecording: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private setIsRecording;
+    render(): any;
+}

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

@@ -0,0 +1,47 @@
+import type { RecordingState } 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 { Size } from '../../types/props';
+import { ControlBarVariant } from '../rtk-controlbar-button/rtk-controlbar-button';
+/**
+ * A button which toggles recording state of a meeting.
+ *
+ * Only a privileged user can perform this action,
+ * thus the button will not be visible for participants
+ * who don't have the permission to record a meeting.
+ */
+export declare class RtkRecordingToggle {
+    private recordingStateUpdateListener;
+    /** Variant */
+    variant: ControlBarVariant;
+    /** Meeting object */
+    meeting: Meeting;
+    /** Language */
+    t: RtkI18n;
+    /** Icon pack */
+    iconPack: IconPack;
+    /** Size */
+    size: Size;
+    /** Disable the button */
+    disabled: boolean;
+    recordingState: RecordingState;
+    canRecord: boolean;
+    /**
+     * Emit api error events
+     */
+    apiError: EventEmitter<{
+        trace: string;
+        message: string;
+    }>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    meetingChanged(meeting: Meeting): void;
+    private permissionsUpdateListener;
+    private toggleRecording;
+    private getLabel;
+    private getIcon;
+    private isLoading;
+    render(): any;
+}