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

package/dist/esm/rtk-participant-setup.entry.js

@@ -0,0 +1,114 @@
+import { r as registerInstance, h, H as Host } from './index-c1fb98bb.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './ui-store-b453cdf2.js';
+import { S as SyncWithStore } from './index-6aaa85ca.js';
+
+const rtkParticipantSetupCss = ":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{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16 / 9;height:var(--rtk-space-56, 224px);overflow:hidden;border-radius:var(--rtk-border-radius-lg, 12px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity));transition-property:var(--rtk-transition-property, all);transition-duration:150ms}@media (prefers-reduced-motion){:host{--rtk-transition-property:none}}:host([size='sm'][variant='solid']) ::slotted(rtk-name-tag){left:var(--rtk-space-2, 8px);bottom:var(--rtk-space-2, 8px);height:var(--rtk-space-4, 16px)}video{display:none;position:absolute;height:100%;width:100%;border-radius:var(--rtk-border-radius-lg, 12px)}video.contain{-o-object-fit:contain;object-fit:contain}video.cover{-o-object-fit:cover;object-fit:cover}video.visible{display:block}video::-webkit-media-controls{display:none !important}:host([variant='gradient']) ::slotted(rtk-audio-visualizer){position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));padding:var(--rtk-space-2, 8px)}:host([variant='gradient']) ::slotted(rtk-name-tag){bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);display:flex;width:100%;align-items:center;justify-content:center;text-align:center;background-color:transparent;background-image:linear-gradient(to top, var(--tw-gradient-stops));--tw-gradient-from:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-gradient-to:rgba(var(--rtk-colors-background-1000, 8 8 8) / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:transparent}video.mirror{transform:scaleX(-1)}@media (orientation: portrait){:host{height:var(--rtk-space-44, 176px)}}";
+const RtkParticipantSetupStyle0 = rtkParticipantSetupCss;
+
+var __decorate = (undefined && undefined.__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;
+};
+const RtkParticipantSetup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isPinned = false;
+        /** Position of name tag */
+        this.nameTagPosition = 'bottom-left';
+        /** Whether tile is used for preview */
+        this.isPreview = false;
+        /** Config object */
+        this.config = defaultConfig;
+        /** Variant */
+        this.variant = 'solid';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.onVideoUpdate = (videoState) => {
+            this.videoState = videoState;
+        };
+    }
+    connectedCallback() {
+        // set videoState before initial render and initialize listeners
+        this.participantsChanged(this.participant);
+    }
+    componentDidLoad() {
+        // load videoState into video element after first render
+        this.videoStateChanged(this.videoState);
+    }
+    disconnectedCallback() {
+        if (this.participant == null)
+            return;
+        this.participant.removeListener('videoUpdate', this.onVideoUpdate);
+    }
+    async participantsChanged(participant) {
+        if (participant != null) {
+            this.videoState = {
+                videoEnabled: participant.videoEnabled,
+                videoTrack: participant.videoTrack,
+            };
+            this.isPinned = participant.isPinned;
+            participant.addListener('videoUpdate', this.onVideoUpdate);
+        }
+    }
+    videoStateChanged(videoState) {
+        if (videoState != null && this.videoEl != null) {
+            if (videoState.videoEnabled) {
+                const stream = new MediaStream();
+                stream.addTrack(videoState.videoTrack);
+                this.videoEl.srcObject = stream;
+            }
+            else {
+                this.videoEl.srcObject = undefined;
+            }
+        }
+    }
+    isMirrored() {
+        var _a;
+        if (this.participant != null) {
+            const isSelf = 'preview' in this.participant || this.isPreview;
+            if (isSelf) {
+                const states = this.states;
+                const mirrorVideo = (_a = states === null || states === void 0 ? void 0 : states.prefs) === null || _a === void 0 ? void 0 : _a.mirrorVideo;
+                if (typeof mirrorVideo === 'boolean') {
+                    return mirrorVideo;
+                }
+            }
+        }
+        return false;
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h(Host, { key: '69573519e7127835dd9304dcfb507ebbb94e0de8' }, h("video", { key: '75c047e3029721e655016da9a40e2b94770a5234', ref: (el) => (this.videoEl = el), class: {
+                visible: (_a = this.videoState) === null || _a === void 0 ? void 0 : _a.videoEnabled,
+                mirror: this.isMirrored(),
+                [(_d = (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.videoFit) !== null && _d !== void 0 ? _d : 'cover']: true,
+            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: '3bdccee7fb4e001425249fe832b4bdcb01751306' })));
+    }
+    static get watchers() { return {
+        "participant": ["participantsChanged"],
+        "videoState": ["videoStateChanged"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantSetup.prototype, "t", void 0);
+RtkParticipantSetup.style = RtkParticipantSetupStyle0;
+
+export { RtkParticipantSetup as rtk_participant_setup };

package/dist/esm/rtk-participant_2.entry.js

@@ -0,0 +1,414 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-c1fb98bb.js';
+import { a as defaultIconPack, c as useLanguage, d as defaultConfig, F as FlagsmithFeatureFlags } from './ui-store-b453cdf2.js';
+import { l as lenChildren, R as Render } from './index-d31a2e33.js';
+import { f as formatName, s as shorten } from './string-ed1380fb.js';
+import { c as computePosition, b as autoPlacement, o as offset, s as shift, h as hide } from './floating-ui.dom.esm-cf1488a2.js';
+import { S as SyncWithStore } from './index-6aaa85ca.js';
+import { d as debounce } from './debounce-ea0579b2.js';
+import './isObjectLike-773b9473.js';
+
+const rtkParticipantCss = ":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{position:relative;display:flex;height:var(--rtk-space-14, 56px);align-items:center;justify-content:space-between;cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host rtk-avatar{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);font-size:14px}.left{display:flex;align-items:center}.left>*{margin-right:var(--rtk-space-2, 8px)}.left>*:last-child{margin-right:var(--rtk-space-0, 0px)}.right{display:flex;align-items:center;justify-content:flex-end}.right>*{margin-left:var(--rtk-space-2, 8px)}.right>*:first-child{margin-left:var(--rtk-space-0, 0px)}.name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}rtk-icon.red{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}rtk-icon.more{cursor:pointer}.menu{position:relative;display:inline-block;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#menu-list{position:absolute;top:var(--rtk-space-8, 32px) !important;right:var(--rtk-space-4, 16px) !important;z-index:20}";
+const RtkParticipantStyle0 = rtkParticipantCss;
+
+var __decorate = (undefined && undefined.__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;
+};
+const RtkParticipant = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rtkSendNotification = createEvent(this, "rtkSendNotification", 7);
+        this.pinnedListener = ({ isPinned }) => {
+            this.isPinned = isPinned;
+        };
+        this.toggleTileListener = ({ hidden }) => {
+            this.isHidden = hidden;
+        };
+        this.stageListener = ({ stageStatus }) => {
+            this.isOnStage = stageStatus === 'ON_STAGE';
+        };
+        /** Show participant summary */
+        this.view = 'sidebar';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Config object */
+        this.config = defaultConfig;
+        this.audioEnabled = false;
+        this.videoEnabled = false;
+        this.isPinned = false;
+        this.isHidden = false;
+        this.isOnStage = false;
+        this.canDisableParticipantAudio = false;
+        this.canDisableParticipantVideo = false;
+        this.canKickParticipant = false;
+        this.canPinParticipant = false;
+        this.canAllowParticipantOnStage = false;
+        this.menuOpen = false;
+        this.permissionsUpdateListener = () => {
+            this.meetingChanged(this.meeting);
+        };
+        this.inviteToStageToggle = async () => {
+            const p = this.participant;
+            const { stage } = this.meeting;
+            // If request has been sent once, do nothing.
+            if (p.stageStatus === 'ACCEPTED_TO_JOIN_STAGE') {
+                // Send a notification to host telling that the user has been invited.
+                this.rtkSendNotification.emit({
+                    message: `${p.name} ${this.t('stage.invited_notification')}`,
+                    trace: `join-stage-${p.id}`,
+                });
+                return;
+            }
+            if (this.isOnStage) {
+                // NOTE (@madhugb): when a pinned participnat is removed from stage, we need to unpin them manually
+                if (p.isPinned)
+                    p.unpin();
+                await stage.kick([p.userId]);
+            }
+            else {
+                await stage.grantAccess([p.userId]);
+                // Send a notification to host telling that the user has been invited.
+                this.rtkSendNotification.emit({
+                    message: `${p.name} ${this.t('stage.invited_notification')}`,
+                    trace: `join-stage-invite-${p.id}`,
+                });
+            }
+            this.isOnStage = p.stageStatus === 'ON_STAGE';
+        };
+        this.handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            const clickedOutside = !path.includes(this.host);
+            // handles clicking on other menu triggers
+            if (clickedOutside && this.menuOpen) {
+                this.menuOpen = false;
+            }
+        };
+        this.update = () => {
+            const triggerEl = this.host.shadowRoot.getElementById('trigger');
+            const menuListEl = this.host.shadowRoot.getElementById('menu-list');
+            computePosition(triggerEl, menuListEl, {
+                placement: 'bottom-end', // Default placement
+                middleware: [
+                    autoPlacement({
+                        allowedPlacements: ['bottom-end', 'top-end'], // Prioritize bottom alignment
+                        alignment: 'end', // Align to start of the trigger
+                    }),
+                    offset(4), // Add space between the trigger and menu
+                    shift({ padding: 8 }), // Adjust if the menu is too close to the viewport edges
+                    hide(),
+                ],
+            }).then(({ x, y, placement }) => {
+                let position = null;
+                if (placement === 'bottom-end') {
+                    position = {
+                        right: `${x}px`,
+                        top: `${y}px`,
+                    };
+                }
+                else {
+                    position = {
+                        right: `${x}px`,
+                        bottom: `${y}px`,
+                    };
+                }
+                Object.assign(menuListEl.style, position);
+            });
+        };
+        this.onMenuToggle = () => {
+            this.menuOpen = !this.menuOpen;
+            if (this.menuOpen) {
+                this.update();
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.participantChanged(this.participant);
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        var _a;
+        document.removeEventListener('click', this.handleOutsideClick);
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+        if (this.participant == null || this.participant.removeListener == undefined)
+            return;
+        this.audioUpdateListener &&
+            this.participant.removeListener('audioUpdate', this.audioUpdateListener);
+        this.videoUpdateListener &&
+            this.participant.removeListener('videoUpdate', this.videoUpdateListener);
+        this.participant.removeListener('pinned', this.pinnedListener);
+        this.participant.removeListener('unpinned', this.pinnedListener);
+        this.participant.removeListener('stageStatusUpdate', this.stageListener);
+        this.participant.removeListener('toggleTile', this.toggleTileListener);
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (meeting != null) {
+            const { self } = meeting;
+            this.canDisableParticipantAudio =
+                self.permissions.canAllowParticipantAudio || self.permissions.canDisableParticipantAudio;
+            this.canDisableParticipantVideo =
+                self.permissions.canAllowParticipantVideo || self.permissions.canDisableParticipantVideo;
+            this.canKickParticipant =
+                self.permissions.kickParticipant &&
+                    ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.__internals__.features.hasFeature(FlagsmithFeatureFlags.DISABLE_KICKING)) !==
+                        true &&
+                    (((_b = this.meeting) === null || _b === void 0 ? void 0 : _b.__internals__.features.hasFeature(FlagsmithFeatureFlags.ADMIN_CANTREMOVE_ADMIN)) !== true ||
+                        ((_c = this.participant) === null || _c === void 0 ? void 0 : _c.presetName) !== 'webinar_admin');
+            this.canPinParticipant = self.permissions.pinParticipant;
+            this.canAllowParticipantOnStage =
+                self.permissions.acceptStageRequests &&
+                    self.permissions.stageEnabled &&
+                    (((_d = this.meeting) === null || _d === void 0 ? void 0 : _d.__internals__.features.hasFeature(FlagsmithFeatureFlags.ADMIN_CANTREMOVE_ADMIN)) !== true ||
+                        ((_e = this.participant) === null || _e === void 0 ? void 0 : _e.presetName) !== 'webinar_admin') &&
+                    (((_f = this.meeting) === null || _f === void 0 ? void 0 : _f.__internals__.features.hasFeature(FlagsmithFeatureFlags.CANTINVITE_VIEWER)) !== true ||
+                        ((_g = this.participant) === null || _g === void 0 ? void 0 : _g.presetName) !== 'webinar_viewer');
+            meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+        }
+    }
+    participantChanged(participant) {
+        var _a;
+        if (participant != null) {
+            this.audioEnabled = participant.audioEnabled;
+            this.videoEnabled = participant.videoEnabled;
+            this.isPinned = participant.isPinned;
+            this.isHidden = (_a = participant.hidden) !== null && _a !== void 0 ? _a : false;
+            this.isOnStage = participant.stageStatus === 'ON_STAGE';
+            this.audioUpdateListener = ({ audioEnabled }) => {
+                this.audioEnabled = audioEnabled;
+            };
+            this.videoUpdateListener = ({ videoEnabled }) => {
+                this.videoEnabled = videoEnabled;
+            };
+            if (participant.addListener == undefined)
+                return;
+            participant.addListener('audioUpdate', this.audioUpdateListener);
+            participant.addListener('videoUpdate', this.videoUpdateListener);
+            participant.addListener('pinned', this.pinnedListener);
+            participant.addListener('unpinned', this.pinnedListener);
+            participant.addListener('stageStatusUpdate', this.stageListener);
+            this.participant.addListener('toggleTile', this.toggleTileListener);
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const isAudioRoom = ((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta.viewType) === 'AUDIO_ROOM';
+        const isSelf = ((_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.id) === this.participant.id;
+        const showMenu = (this.canDisableParticipantAudio && this.audioEnabled) ||
+            (this.canDisableParticipantVideo && this.videoEnabled && !isAudioRoom) ||
+            this.canKickParticipant ||
+            (this.canPinParticipant && this.isOnStage) ||
+            this.canAllowParticipantOnStage;
+        const name = formatName(((_c = this.participant) === null || _c === void 0 ? void 0 : _c.name) || '');
+        // NOTE(@madhugb): Show some actions for only on stage / non-webinar participants
+        // NOTE(@vaibhavshn): Update check after listeners are implemented
+        const isActiveParticipant = this.isOnStage || ['GROUP_CALL', 'AUDIO_ROOM'].includes((_d = this.meeting) === null || _d === void 0 ? void 0 : _d.meta.viewType);
+        const defaults = {
+            meeting: this.meeting,
+            size: 'sm',
+            states: this.states,
+            config: this.config,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        return (h(Host, { key: '9a717049edf15cfec3e497a30a37f873dcb37fd8' }, h("div", { class: "left", key: (_e = this.participant) === null || _e === void 0 ? void 0 : _e.id }, h("rtk-avatar", { key: '4e161f74ce11be1050c95556065867289ab618b2', participant: this.participant, size: "sm", iconPack: this.iconPack, t: this.t }), h("p", { key: 'c1e71db1ba1ed2e8defbbb9802c22df8b64670fc', class: "name", title: name }, shorten(name, 16), " ", ((_f = this.meeting) === null || _f === void 0 ? void 0 : _f.self.id) === ((_g = this.participant) === null || _g === void 0 ? void 0 : _g.id) && this.t('(you)'))), this.view === 'sidebar' && (h("div", { key: '165e14ba9f5e063820c6f440dc9eb03344e7bcdf', class: "right" }, isActiveParticipant && (h("rtk-icon", { key: 'd6651dc9e7eb12ed56742f08096ef239bd4429c1', class: {
+                red: !this.audioEnabled,
+            }, icon: this.audioEnabled ? this.iconPack.mic_on : this.iconPack.mic_off })), isActiveParticipant && !isAudioRoom && (h("rtk-icon", { key: '89506d158acdb3e2629a7a2ab51aef475f9f3b75', class: {
+                red: !this.videoEnabled,
+            }, icon: this.videoEnabled ? this.iconPack.video_on : this.iconPack.video_off })), (showMenu ||
+            lenChildren({
+                element: 'rtk-participant',
+                defaults: defaults,
+                childProps: {
+                    participant: this.participant,
+                },
+            }) > 0) && (h("div", { key: '202a957dfe004c8c1f2195bf93c9ce9ce167a96f', class: "menu" }, h("span", { key: 'a01163f9da5fab4a1d7922f8abfe5a2e4a4dcf2c', id: "trigger", onClick: this.onMenuToggle }, h("rtk-button", { key: '144e0c418b6a038d560f8087825471b649229ecb', variant: "ghost", kind: "icon", slot: "trigger" }, h("rtk-icon", { key: '18abb20a0969e0332d8fe2b5dcfe41bfc66955f7', class: "more", icon: this.iconPack.more_vertical }))), h("span", { key: '3a22ebe5a21228b6ea6e15933d961b24085dce44', id: "menu-list" }, this.menuOpen && (h("rtk-menu-list", { key: '86688ad10d1440c5b534fe2f002225e0368ae24a', iconPack: this.iconPack, t: this.t }, this.canPinParticipant && isActiveParticipant && !isAudioRoom && (h("rtk-menu-item", { key: 'c22833b86d8583bdaec723a269afa7298cb0ca0d', onClick: () => {
+                if (this.isPinned) {
+                    this.participant.unpin();
+                }
+                else {
+                    this.participant.pin();
+                }
+            }, iconPack: this.iconPack, t: this.t }, h("rtk-icon", { key: '9cdde53aaffca1f0042a69048b77f31fc10c69d6', icon: this.isPinned ? this.iconPack.pin_off : this.iconPack.pin, slot: "start" }), this.isPinned ? this.t('unpin') : this.t('pin'))), isSelf && (h("rtk-menu-item", { key: 'b651953a9b02065ca223c46dd7dbadedc8401031', iconPack: this.iconPack, t: this.t, onClick: () => {
+                this.isHidden
+                    ? this.participant.show()
+                    : this.participant.hide();
+            } }, h("rtk-icon", { key: 'e63383cca42314f8ac0a9a03d13948b4eb5ced8c', icon: this.isHidden ? this.iconPack.minimize : this.iconPack.maximize, slot: "start" }), !this.meeting.self.hidden ? this.t('minimize') : this.t('maximize'))), this.canDisableParticipantAudio &&
+            isActiveParticipant &&
+            this.audioEnabled && (h("rtk-menu-item", { key: '86f670083fa1000cc99c5a57d4da2cb789c88aee', iconPack: this.iconPack, t: this.t, onClick: () => {
+                this.participant.disableAudio();
+            } }, h("rtk-icon", { key: 'd75504ef4431c83efea2d281baad6a10c8a2e3b3', icon: this.iconPack.mic_off, slot: "start" }), this.t('mute'))), this.canDisableParticipantVideo &&
+            isActiveParticipant &&
+            this.videoEnabled && (h("rtk-menu-item", { key: '2634fae26bc72fec773f3a7f85fad7ebc1cfca11', iconPack: this.iconPack, t: this.t, onClick: () => {
+                this.participant.disableVideo();
+            } }, h("rtk-icon", { key: '57d51380b52a20a8f9dfc51931401712f4d67f26', icon: this.iconPack.video_off, slot: "start" }), this.t('participants.turn_off_video'))), this.canAllowParticipantOnStage &&
+            ((_h = this.participant) === null || _h === void 0 ? void 0 : _h.id) !== ((_j = this.meeting) === null || _j === void 0 ? void 0 : _j.self.id) && (h("rtk-menu-item", { key: '64ab2f51f494b8d3d445ae9aece430e8c0fca673', iconPack: this.iconPack, t: this.t, class: this.isOnStage ? 'red' : '', onClick: this.inviteToStageToggle }, h("rtk-icon", { key: '5633f66f3679bfc3b6e87a55cfb884e63260767c', icon: this.isOnStage
+                ? this.iconPack.leave_stage
+                : this.iconPack.join_stage, slot: "start" }), this.isOnStage
+            ? this.t('stage.remove_from_stage')
+            : this.t('stage.add_to_stage'))), !isSelf && this.canKickParticipant && (h("rtk-menu-item", { key: '664e9b1c843aa0cc7a47062b4f353a8e1105a368', iconPack: this.iconPack, t: this.t, class: "red", onClick: () => {
+                var _a, _b;
+                (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.participants.kick((_b = this.participant) === null || _b === void 0 ? void 0 : _b.id);
+            } }, h("rtk-icon", { key: '10cb3a42b4c861241d983d9cb1ebfe594500fbc3', icon: this.iconPack.dismiss, slot: "start" }), this.t('kick'))), h("slot", { key: 'ed681666f5bb8bf06a6fac4b929853d9b6bc704c' }, h(Render, { key: '8177a2248bf03ffbe26a7f0f560eb81439a00fb3', element: "rtk-participant", defaults: defaults, childProps: {
+                participant: this.participant,
+            }, deepProps: true, onlyChildren: true })))))))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "participant": ["participantChanged"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkParticipant.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipant.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipant.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipant.prototype, "t", void 0);
+RtkParticipant.style = RtkParticipantStyle0;
+
+const rtkVirtualizedParticipantListCss = ":host{height:100%;width:100%}";
+const RtkVirtualizedParticipantListStyle0 = rtkVirtualizedParticipantListCss;
+
+const RtkVirtualizedParticipantList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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: '1a35b2155ffba410d278513dbdfeb7fd238443d8', class: "virtual-list-container", style: {
+                position: 'relative',
+                height: '100%',
+                overflowX: 'hidden',
+                overflowY: 'auto',
+            } }, h("div", { key: '90f445de9af8464c23dbd931f46600e015839d4f', style: { height: `${totalHeight}px`, position: 'relative' } }, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ? this.emptyListElement : this.renderItems()), h("div", { key: 'b7acc66cc75273c722b5a9c78949c67d785d5725', style: { height: `${this.itemHeight}px` } })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "items": ["itemsChanged"]
+    }; }
+};
+RtkVirtualizedParticipantList.style = RtkVirtualizedParticipantListStyle0;
+
+export { RtkParticipant as rtk_participant, RtkVirtualizedParticipantList as rtk_virtualized_participant_list };