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

package/dist/collection/components/rtk-viewer-count/rtk-viewer-count.js

@@ -0,0 +1,191 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Host, h } from "@stencil/core";
+import { defaultIconPack } from "../../lib/icons";
+import { useLanguage } from "../../lib/lang";
+import { SyncWithStore } from "../../utils/sync-with-store";
+import { showLivestream } from "../../utils/livestream";
+/**
+ * A component which shows count of total joined participants in a meeting.
+ */
+export class RtkViewerCount {
+    constructor() {
+        /** Viewer count variant */
+        this.variant = 'primary';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.viewerCount = 0;
+        this.disconnectMeeting = (meeting) => {
+            var _a;
+            if (meeting != null && this.countListener != null) {
+                (_a = meeting.livestream) === null || _a === void 0 ? void 0 : _a.removeListener('viewerCountUpdate', this.countListener);
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        this.disconnectMeeting(this.meeting);
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a;
+        this.disconnectMeeting(oldMeeting);
+        if (meeting != null) {
+            this.countListener = () => {
+                var _a;
+                this.viewerCount = (_a = meeting.livestream) === null || _a === void 0 ? void 0 : _a.viewerCount;
+            };
+            this.countListener();
+            (_a = meeting.livestream) === null || _a === void 0 ? void 0 : _a.addListener('viewerCountUpdate', this.countListener);
+        }
+    }
+    render() {
+        if (!showLivestream(this.meeting))
+            return null;
+        return (h(Host, { tabIndex: 0, role: "log", "aria-label": `${this.viewerCount} ${this.t('viewers')}` }, h("rtk-icon", { icon: this.iconPack.viewers, tabIndex: -1, "aria-hidden": true, part: "icon" }), this.viewerCount, " ", this.t('viewers')));
+    }
+    static get is() { return "rtk-viewer-count"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rtk-viewer-count.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rtk-viewer-count.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "meeting": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Meeting",
+                    "resolved": "RealtimeKitClient",
+                    "references": {
+                        "Meeting": {
+                            "location": "import",
+                            "path": "../../types/rtk-client",
+                            "id": "src/types/rtk-client.ts::Meeting"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Meeting object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ViewerCountVariant",
+                    "resolved": "\"embedded\" | \"primary\"",
+                    "references": {
+                        "ViewerCountVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/realtimekit-ui/realtimekit-ui/packages/core/src/components/rtk-viewer-count/rtk-viewer-count.tsx",
+                            "id": "src/components/rtk-viewer-count/rtk-viewer-count.tsx::ViewerCountVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Viewer count variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'primary'"
+            },
+            "iconPack": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconPack",
+                    "resolved": "{ 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; }",
+                    "references": {
+                        "IconPack": {
+                            "location": "import",
+                            "path": "../../lib/icons",
+                            "id": "src/lib/icons/index.ts::IconPack"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon pack"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultIconPack"
+            },
+            "t": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RtkI18n",
+                    "resolved": "(key: \"pin\" | \"unpin\" | \"kick\" | \"ended\" | \"disconnected\" | \"failed\" | \"(you)\" | \"everyone\" | (string & {}) | \"about_call\" | \"screen\" | \"camera\" | \"leave\" | \"dismiss\" | \"logo\" | \"page\" | \"more\" | \"page.prev\" | \"page.next\" | \"layout\" | \"layout.auto\" | \"settings\" | \"file\" | \"image\" | \"connection\" | \"leave_confirmation\" | \"cancel\" | \"yes\" | \"you\" | \"to\" | \"mute\" | \"pinned\" | \"accept\" | \"pip_on\" | \"pip_off\" | \"viewers\" | \"join\" | \"joined\" | \"create\" | \"close\" | \"ask\" | \"type\" | \"activate\" | \"requests\" | \"mic_off\" | \"disable_mic\" | \"mic_on\" | \"enable_mic\" | \"audio\" | \"test\" | \"minimize\" | \"maximize\" | \"mute_all\" | \"mute_all.description\" | \"mute_all.header\" | \"mute_all.allow_unmute\" | \"video_off\" | \"disable_video\" | \"video_on\" | \"enable_video\" | \"video\" | \"offline\" | \"offline.description\" | \"failed.description\" | \"disconnected.description\" | \"participants\" | \"participants.errors.empty_results\" | \"participants.empty_list\" | \"participants.no_pending_requests\" | \"participants.turn_off_video\" | \"polls\" | \"polls.by\" | \"polls.question\" | \"polls.question.placeholder\" | \"polls.answers\" | \"polls.option\" | \"polls.option.placeholder\" | \"polls.results.anon\" | \"polls.results.hide\" | \"polls.create\" | \"polls.cancel\" | \"polls.empty\" | \"polls.errors.question_required\" | \"polls.errors.empty_option\" | \"screenshare\" | \"screenshare.min_preview\" | \"screenshare.max_preview\" | \"screenshare.shared\" | \"screenshare.start\" | \"screenshare.stop\" | \"screenshare.error.unknown\" | \"screenshare.error.max_count\" | \"plugins\" | \"perm_denied\" | \"perm_denied.audio\" | \"perm_denied.video\" | \"perm_denied.screenshare\" | \"perm_denied.audio.chrome.message\" | \"perm_denied.video.chrome.message\" | \"perm_denied.screenshare.chrome.message\" | \"perm_denied.audio.safari.message\" | \"perm_denied.video.safari.message\" | \"perm_denied.screenshare.safari.message\" | \"perm_denied.audio.edge.message\" | \"perm_denied.video.edge.message\" | \"perm_denied.screenshare.edge.message\" | \"perm_denied.audio.microsoft edge.message\" | \"perm_denied.video.microsoft edge.message\" | \"perm_denied.screenshare.microsoft edge.message\" | \"perm_denied.audio.firefox.message\" | \"perm_denied.video.firefox.message\" | \"perm_denied.screenshare.firefox.message\" | \"perm_denied.audio.others.message\" | \"perm_denied.video.others.message\" | \"perm_denied.screenshare.others.message\" | \"perm_sys_denied\" | \"perm_sys_denied.audio\" | \"perm_sys_denied.video\" | \"perm_sys_denied.screenshare\" | \"perm_sys_denied.audio.macos.message\" | \"perm_sys_denied.video.macos.message\" | \"perm_sys_denied.screenshare.macos.message\" | \"perm_sys_denied.audio.ios.message\" | \"perm_sys_denied.video.ios.message\" | \"perm_sys_denied.screenshare.ios.message\" | \"perm_sys_denied.audio.windows.message\" | \"perm_sys_denied.video.windows.message\" | \"perm_sys_denied.screenshare.windows.message\" | \"perm_sys_denied.audio.android.message\" | \"perm_sys_denied.video.android.message\" | \"perm_sys_denied.screenshare.android.message\" | \"perm_sys_denied.audio.others.message\" | \"perm_sys_denied.video.others.message\" | \"perm_sys_denied.screenshare.others.message\" | \"perm_could_not_start\" | \"perm_could_not_start.audio\" | \"perm_could_not_start.video\" | \"perm_could_not_start.screenshare\" | \"perm_could_not_start.audio.message\" | \"perm_could_not_start.video.message\" | \"perm_could_not_start.screenshare.message\" | \"full_screen\" | \"full_screen.exit\" | \"waitlist.header_title\" | \"waitlist.body_text\" | \"waitlist.deny_request\" | \"waitlist.accept_request\" | \"waitlist.accept_all\" | \"stage_request.header_title\" | \"stage_request.deny_request\" | \"stage_request.accept_request\" | \"stage_request.accept_all\" | \"stage_request.deny_all\" | \"stage_request.approval_pending\" | \"stage_request.denied\" | \"stage_request.request\" | \"stage_request.requested\" | \"stage_request.cancel_request\" | \"stage_request.leave_stage\" | \"stage_request.request_tip\" | \"stage_request.leave_tip\" | \"stage_request.pending_tip\" | \"stage_request.denied_tip\" | \"stage.empty_host\" | \"stage.empty_host_summary\" | \"stage.empty_viewer\" | \"stage.remove_from_stage\" | \"stage.invited_notification\" | \"stage.add_to_stage\" | \"stage.join_title\" | \"stage.join_summary\" | \"stage.join_cancel\" | \"stage.join_confirm\" | \"setup_screen.join_in_as\" | \"setup_screen.joining_as\" | \"setup_screen.your_name\" | \"stage.reconnecting\" | \"recording.label\" | \"recording.indicator\" | \"recording.started\" | \"recording.stopped\" | \"recording.paused\" | \"recording.error.start\" | \"recording.error.stop\" | \"recording.error.resume\" | \"recording.start\" | \"recording.stop\" | \"recording.resume\" | \"recording.starting\" | \"recording.stopping\" | \"recording.loading\" | \"recording.idle\" | \"audio_playback\" | \"audio_playback.title\" | \"audio_playback.description\" | \"breakout_rooms\" | \"breakout_rooms.room_config_header\" | \"breakout_rooms.join_breakout_header\" | \"breakout_rooms.empty\" | \"breakout_rooms.delete\" | \"breakout_rooms.switch\" | \"breakout_rooms.main_room\" | \"breakout_rooms.shuffle_participants\" | \"breakout_rooms.deselect\" | \"breakout_rooms.selected\" | \"breakout_rooms.num_of_rooms\" | \"breakout_rooms.approx\" | \"breakout_rooms.participants_per_room\" | \"breakout_rooms.division_text\" | \"breakout_rooms.start_breakout\" | \"breakout_rooms.close_breakout\" | \"breakout_rooms.update_breakout\" | \"breakout_rooms.discard_changes\" | \"breakout_rooms.room\" | \"breakout_rooms.rooms\" | \"breakout_rooms.room_name\" | \"breakout_rooms.edit_room_name\" | \"breakout_rooms.save_room_name\" | \"breakout_rooms.add_room\" | \"breakout_rooms.add_room_brief\" | \"breakout_rooms.select_all\" | \"breakout_rooms.unassign_all\" | \"breakout_rooms.assign\" | \"breakout_rooms.assign_participants\" | \"breakout_rooms.none_assigned\" | \"breakout_rooms.drag_drop_participants\" | \"breakout_rooms.click_drop_participants\" | \"breakout_rooms.status.assign_multiple\" | \"breakout_rooms.status.select_room\" | \"breakout_rooms.ephemeral_status.participants_assigned\" | \"breakout_rooms.ephemeral_status.participants_assigned_randomly\" | \"breakout_rooms.ephemeral_status.changes_discarded\" | \"breakout_rooms.confirm_modal.start_breakout.header\" | \"breakout_rooms.confirm_modal.start_breakout.content\" | \"breakout_rooms.confirm_modal.start_breakout.cancelText\" | \"breakout_rooms.confirm_modal.start_breakout.ctaText\" | \"breakout_rooms.confirm_modal.close_breakout.header\" | \"breakout_rooms.confirm_modal.close_breakout.content\" | \"breakout_rooms.confirm_modal.close_breakout.ctaText\" | \"breakout_rooms.move_reason.started_msg\" | \"breakout_rooms.move_reason.started_desc\" | \"breakout_rooms.move_reason.closed_msg\" | \"breakout_rooms.move_reason.closed_desc\" | \"breakout_rooms.move_reason.switch_room\" | \"breakout_rooms.move_reason.switch_main_room\" | \"breakout_rooms.all_assigned\" | \"breakout_rooms.empty_main_room\" | \"breakout_rooms.leave_confirmation\" | \"breakout_rooms.leave_confirmation.main_room_btn\" | \"ai\" | \"ai.meeting_ai\" | \"ai.home\" | \"ai.transcriptions\" | \"ai.personal\" | \"ai.caption_view\" | \"ai.chat.tooltip\" | \"ai.chat.summerise\" | \"ai.chat.agenda\" | \"search\" | \"search.could_not_find\" | \"search.empty\" | \"end\" | \"end.all\" | \"ended.rejected\" | \"ended.left\" | \"ended.kicked\" | \"ended.disconnected\" | \"ended.network\" | \"ended.unauthorized\" | \"network\" | \"network.reconnecting\" | \"network.delay_extended\" | \"network.disconnected\" | \"network.leaving\" | \"network.restored\" | \"network.delay\" | \"network.lost\" | \"network.lost_extended\" | \"livestream\" | \"livestream.indicator\" | \"livestream.skip\" | \"livestream.idle\" | \"livestream.starting\" | \"livestream.stopping\" | \"livestream.waiting_on_manual_ingestion\" | \"livestream.error.not_supported\" | \"livestream.error.not_found\" | \"livestream.error.unknown\" | \"livestream.error.sync\" | \"livestream.error.start\" | \"livestream.error.stop\" | \"livestream.go_live\" | \"livestream.end_live\" | \"livestream.error\" | \"cta.help\" | \"cta.continue\" | \"cta.reload\" | \"cta.confirmation\" | \"cta.system_settings\" | \"remote_access.empty\" | \"remote_access.requests\" | \"remote_access.allow\" | \"remote_access.grant\" | \"remote_access.indicator\" | \"chat\" | \"chat.new\" | \"chat.max_limit_warning\" | \"chat.rate_limit_error\" | \"chat.new_channel\" | \"chat.channel_name\" | \"chat.member_name\" | \"chat.add_members\" | \"chat.delete_msg\" | \"chat.edit_msg\" | \"chat.send_msg\" | \"chat.send_attachment\" | \"chat.send_img\" | \"chat.send_file\" | \"chat.send_emoji\" | \"chat.update_msg\" | \"chat.channel_members\" | \"chat.img.loading\" | \"chat.error.img_not_found\" | \"chat.error.empty_results\" | \"chat.img.shared_by\" | \"chat.reply\" | \"chat.message_placeholder\" | \"chat.click_to_send\" | \"chat.search_msgs\" | \"chat.search_conversations\" | \"chat.start_conversation\" | \"chat.empty_search\" | \"chat.empty_channel\" | \"chat.cancel_upload\" | \"chat.view_chats\" | \"chat.everyone\" | \"chat.pinned_msgs\" | \"chat.toggle_pinned_msgs\" | \"date.today\" | \"date.yesteday\" | \"date.sunday\" | \"date.monday\" | \"date.tuesday\" | \"date.wednesday\" | \"date.thursday\" | \"date.friday\" | \"date.saturday\" | \"list.empty\" | \"grid.listening\" | \"transcript.off\" | \"transcript.on\" | \"settings.notification_sound\" | \"settings.microphone_input\" | \"settings.speaker_output\" | \"settings.mirror_video\" | \"settings.camera_off\" | \"dialog.close\" | \"notifications.joined\" | \"notifications.left\" | \"notifications.requesting_to_join_meeting\" | \"notifications.requested_to_join_stage\" | \"notifications.joined_stage\" | \"notifications.request_to_join_accepted\" | \"notifications.request_to_join_rejected\" | \"notifications.accept\" | \"notifications.new_poll_created_by\" | \"notifications.connected_to\" | \"notifications.plugin_switched_to\" | \"notifications.remote_control_requested\" | \"notifications.remote_control_request_sent\" | \"notifications.remote_control_request_accepted\" | \"notifications.remote_control_granted\" | \"notifications.remote_control_terminated\" | \"debugger.troubleshooting.label\" | \"debugger.quality.good\" | \"debugger.quality.average\" | \"debugger.quality.poor\" | \"debugger.stats.bitrate.label\" | \"debugger.stats.bitrate.description\" | \"debugger.stats.packet_loss.label\" | \"debugger.stats.packet_loss.description\" | \"debugger.stats.jitter.label\" | \"debugger.stats.jitter.description\" | \"debugger.stats.cpu_limitations.label\" | \"debugger.stats.cpu_limitations.description\" | \"debugger.stats.bandwidth_limitations.label\" | \"debugger.stats.bandwidth_limitations.description\" | \"debugger.audio.label\" | \"debugger.audio.troubleshooting.label\" | \"debugger.audio.messages.generating_report\" | \"debugger.audio.messages.enable_media\" | \"debugger.audio.sections.network_media\" | \"debugger.video.label\" | \"debugger.video.troubleshooting.label\" | \"debugger.video.messages.generating_report\" | \"debugger.video.messages.enable_media\" | \"debugger.video.sections.network_media\" | \"debugger.screenshare.label\" | \"debugger.screenshare.troubleshooting.label\" | \"debugger.screenshare.sections.network_media\" | \"debugger.screenshare.messages.generating_report\" | \"debugger.screenshare.messages.enable_media\" | \"debugger.system.label\" | \"debugger.system.troubleshooting.label\" | \"debugger.system.sections.battery\" | \"debugger.system.battery.level.label\" | \"debugger.system.battery.level.description\" | \"debugger.system.battery.charging.label\" | \"debugger.system.battery.charging.description\" | \"debugger.system.battery.charging.is_charging\" | \"debugger.system.battery.charging.is_not_charging\") => string",
+                    "references": {
+                        "RtkI18n": {
+                            "location": "import",
+                            "path": "../../lib/lang",
+                            "id": "src/lib/lang/index.ts::RtkI18n"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "useLanguage()"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "viewerCount": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "meeting",
+                "methodName": "meetingChanged"
+            }];
+    }
+}
+__decorate([
+    SyncWithStore()
+], RtkViewerCount.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkViewerCount.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkViewerCount.prototype, "t", void 0);

package/dist/collection/components/rtk-virtualized-list/rtk-virtualized-participant-list.css

@@ -0,0 +1,4 @@
+:host {
+    height: 100%;
+    width: 100%
+}

package/dist/collection/components/rtk-virtualized-list/rtk-virtualized-participant-list.js

@@ -0,0 +1,264 @@
+import { h } from "@stencil/core";
+import { debounce } from "lodash-es";
+export class RtkVirtualizedParticipantList {
+    constructor() {
+        /** Items to be virtualized */
+        this.items = [];
+        /** Height of each item in pixels (assumed fixed) */
+        this.itemHeight = 55; // Mutable so we can update it
+        /** Buffer items to render before and after the visible area */
+        this.bufferedItemsCount = 5;
+        /** Element to render if list is empty */
+        this.emptyListElement = null;
+        this.visibleStart = 0; // Start of visible items
+        this.visibleEnd = 0; // End of visible items
+        this.containerHeight = 0; // Height of the container
+        this.lastScrollTop = 0; // To track and restore scrollTop
+        this.recalculatePositioning = () => {
+            // Measure container height and update visible items
+            this.updateContainerHeight();
+            // Check for the first item height
+            requestAnimationFrame(() => {
+                this.updateItemHeight();
+            });
+        };
+        this.updateContainerHeight = () => {
+            if (!this.el.querySelector('.virtual-list-container').clientHeight) {
+                return;
+            }
+            // Check for the first item height
+            requestAnimationFrame(() => {
+                this.updateItemHeight();
+            });
+            this.containerHeight = this.el.querySelector('.virtual-list-container').clientHeight;
+            this.updateVisibleRange();
+        };
+        this.onScroll = debounce(() => {
+            const scrollTop = this.el.querySelector('.virtual-list-container').scrollTop;
+            if (scrollTop > this.lastScrollTop && this.visibleEnd === this.items.length) {
+                return;
+            }
+            // Track scrollTop for resetting after re-render
+            this.lastScrollTop = scrollTop;
+            this.updateVisibleRange();
+        });
+    }
+    itemsChanged() {
+        this.recalculatePositioning();
+    }
+    componentDidLoad() {
+        this.recalculatePositioning();
+        // Set up the scroll event listener
+        this.el.querySelector('.virtual-list-container').addEventListener('scroll', this.onScroll);
+        window.addEventListener('resize', this.recalculatePositioning);
+    }
+    componentDidUpdate() {
+        // Update item height if it changes
+        this.updateItemHeight();
+    }
+    disconnectedCallback() {
+        // Remove event listeners to prevent memory leaks
+        this.el.querySelector('.virtual-list-container').removeEventListener('scroll', this.onScroll);
+        window.removeEventListener('resize', this.recalculatePositioning);
+    }
+    updateVisibleRange() {
+        // Get the current scroll position
+        const scrollTop = this.el.querySelector('.virtual-list-container').scrollTop;
+        // Calculate the start and end of visible items based on scroll position and item height
+        const startIndex = Math.floor(scrollTop / this.itemHeight);
+        // Calculate the number of fully visible items and include an extra one if there's a partially visible one
+        const visibleCount = Math.ceil(this.containerHeight / this.itemHeight);
+        // The end index should include the buffer and partially visible item
+        const endIndex = Math.min(this.items.length, startIndex + visibleCount + this.bufferedItemsCount);
+        // Update the visible range in the component's state
+        this.visibleStart = startIndex;
+        this.visibleEnd = endIndex;
+        // Reset the scroll position to ensure smooth rendering
+        this.el.querySelector('.virtual-list-container').scrollTop = this.lastScrollTop;
+    }
+    updateItemHeight() {
+        // Get the first rendered item
+        const firstRenderedItem = this.el.querySelector('.virtual-list-item');
+        if (firstRenderedItem) {
+            // Temporarily remove the height style to let the browser compute natural height
+            const originalHeight = firstRenderedItem.style.height;
+            firstRenderedItem.style.height = 'auto'; // Let it take natural height
+            // Measure the natural height
+            const naturalHeight = firstRenderedItem.getBoundingClientRect().height;
+            // Reapply the original height (if needed)
+            if (originalHeight) {
+                firstRenderedItem.style.height = originalHeight;
+            }
+            // Check if the measured height differs from the current itemHeight
+            if (naturalHeight && Math.floor(naturalHeight) !== Math.floor(this.itemHeight)) {
+                this.itemHeight = naturalHeight;
+            }
+        }
+    }
+    renderItems() {
+        // Slice the items array to only render the visible and buffered items
+        const visibleItems = this.items.slice(this.visibleStart, this.visibleEnd);
+        // Render each visible item at the correct position using absolute positioning
+        return visibleItems.map((item, index) => {
+            const itemIndex = this.visibleStart + index;
+            return (h("div", { class: "virtual-list-item", key: item.id, style: {
+                    position: 'absolute',
+                    top: `${itemIndex * this.itemHeight}px`,
+                    height: `${this.itemHeight}px`,
+                    width: '100%',
+                } }, this.renderItem(item, itemIndex)));
+        });
+    }
+    render() {
+        var _a;
+        const totalHeight = this.items.length * this.itemHeight; // Total height of the list
+        return (h("div", { key: 'f46088e437f2da25f0599d9050d3b45f01a08323', class: "virtual-list-container", style: {
+                position: 'relative',
+                height: '100%',
+                overflowX: 'hidden',
+                overflowY: 'auto',
+            } }, h("div", { key: 'b980284407bddc11ba6b9a365eff13601b694732', style: { height: `${totalHeight}px`, position: 'relative' } }, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ? this.emptyListElement : this.renderItems()), h("div", { key: 'aca29d6c447481589c4928ad04ced0f2f926681b', style: { height: `${this.itemHeight}px` } })));
+    }
+    static get is() { return "rtk-virtualized-participant-list"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rtk-virtualized-participant-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rtk-virtualized-participant-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Peer[]",
+                    "resolved": "Peer[]",
+                    "references": {
+                        "Peer": {
+                            "location": "import",
+                            "path": "../..",
+                            "id": "src/index.ts::Peer"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items to be virtualized"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "renderItem": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(item: Peer, index: number) => HTMLElement",
+                    "resolved": "(item: Peer, index: number) => HTMLElement",
+                    "references": {
+                        "Peer": {
+                            "location": "import",
+                            "path": "../..",
+                            "id": "src/index.ts::Peer"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Function to render each item"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "itemHeight": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of each item in pixels (assumed fixed)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "item-height",
+                "reflect": false,
+                "defaultValue": "55"
+            },
+            "bufferedItemsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Buffer items to render before and after the visible area"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "buffered-items-count",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "emptyListElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Element to render if list is empty"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visibleStart": {},
+            "visibleEnd": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "itemsChanged"
+            }];
+    }
+}

package/dist/collection/components/rtk-waiting-screen/rtk-waiting-screen.css

@@ -0,0 +1,45 @@
+:host {
+  line-height: initial;
+  font-family: var(--rtk-font-family, sans-serif);
+
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+}
+
+p {
+  margin: var(--rtk-space-0, 0px);
+  padding: var(--rtk-space-0, 0px);
+}
+
+
+:host {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.centered {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+rtk-logo {
+  margin-bottom: var(--rtk-space-8, 32px);
+  height: var(--rtk-space-12, 48px);
+}
+
+p {
+  font-size: 16px;
+  border-radius: var(--rtk-border-radius-lg, 12px);
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));
+  padding-left: var(--rtk-space-8, 32px);
+  padding-right: var(--rtk-space-8, 32px);
+  padding-top: var(--rtk-space-4, 16px);
+  padding-bottom: var(--rtk-space-4, 16px);
+  color: rgb(var(--rtk-colors-text-1000, 255 255 255));
+}