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

package/dist/cjs/rtk-fullscreen-toggle.cjs.entry.js

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const fullScreen = require('./full-screen-de3e9caf.js');
+const index = require('./index-daae8cee.js');
+
+const rtkFullscreenToggleCss = ":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{display:block}:host([data-hidden]){display:none}";
+const RtkFullscreenToggleStyle0 = rtkFullscreenToggleCss;
+
+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 RtkFullscreenToggle = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.fullScreenActive = false;
+        this.isFullScreenSupported = true;
+        this.onFullScreenchange = () => {
+            this.fullScreenActive = fullScreen.isFullScreenEnabled();
+        };
+        this.toggleFullScreen = () => {
+            let fullScreenElement = this.targetElement || document.querySelector('rtk-meeting');
+            if (!fullScreenElement)
+                return;
+            if (!this.fullScreenActive) {
+                fullScreen.requestFullScreen(fullScreenElement);
+                this.fullScreenActive = true;
+            }
+            else {
+                fullScreen.exitFullSreen();
+                this.fullScreenActive = false;
+            }
+            this.stateUpdate.emit({ activeMoreMenu: false });
+        };
+    }
+    connectedCallback() {
+        this.isFullScreenSupported = fullScreen.isFullScreenSupported();
+        this.onFullScreenchange();
+        window.addEventListener('webkitfullscreenchange', this.onFullScreenchange);
+        window.addEventListener('fullscreenchange', this.onFullScreenchange);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('webkitfullscreenchange', this.onFullScreenchange);
+        window.removeEventListener('fullscreenchange', this.onFullScreenchange);
+    }
+    render() {
+        if (!this.isFullScreenSupported) {
+            return index$1.h(index$1.Host, { "data-hidden": true });
+        }
+        return (index$1.h(index$1.Host, { title: this.t('full_screen') }, index$1.h("rtk-controlbar-button", { size: this.size, iconPack: this.iconPack, onClick: this.toggleFullScreen, icon: this.fullScreenActive
+                ? this.iconPack.full_screen_minimize
+                : this.iconPack.full_screen_maximize, label: this.fullScreenActive ? this.t('full_screen.exit') : this.t('full_screen'), variant: this.variant })));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkFullscreenToggle.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkFullscreenToggle.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkFullscreenToggle.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkFullscreenToggle.prototype, "t", void 0);
+RtkFullscreenToggle.style = RtkFullscreenToggleStyle0;
+
+exports.rtk_fullscreen_toggle = RtkFullscreenToggle;

package/dist/cjs/rtk-grid-pagination.cjs.entry.js

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
+const debounce = require('./debounce-6080cc73.js');
+
+const rtkGridPaginationCss = ":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{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;font-size:16px}:host([data-hidden]){display:none}:host([size='sm']){font-size:12px}:host([size='sm']) .center{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px)}:host([size='sm']) rtk-button{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}:host([size='sm']) rtk-button rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}rtk-button{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.center{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.center .page{color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.center .slash{margin-left:var(--rtk-space-0\\.5, 2px);margin-right:var(--rtk-space-0\\.5, 2px)}.center .pages{align-self:flex-end;font-size:12px}:host([variant='rounded']){overflow:hidden;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host([variant='rounded']) rtk-button{border-radius:9999px;border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}:host([variant='rounded']) rtk-button:not([disabled]):hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='rounded']) rtk-button:not([disabled]):focus{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}:host([variant='grid']) rtk-button{position:absolute;top:50%;height:var(--rtk-space-20, 80px);width:var(--rtk-space-20, 80px);opacity:0.2;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}:host([variant='grid']) rtk-button:hover{opacity:1}:host([variant='grid']) rtk-button{transform:translateY(-50%)}:host([variant='grid']) rtk-button.prev{left:var(--rtk-space-0, 0px);border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host([variant='grid']) rtk-button.next{right:var(--rtk-space-0, 0px);border-top-left-radius:9999px;border-bottom-left-radius:9999px}:host([variant='grid']) rtk-button.auto{left:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host([variant='grid']) .dots{position:absolute;left:50%;bottom:var(--rtk-space-3, 12px);display:flex;align-items:center;transform:translateX(-50%)}:host([variant='grid']) .dots .dot{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-2, 8px);width:var(--rtk-space-2, 8px);cursor:pointer;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([variant='grid']) .dots .dot:last-child{margin-right:var(--rtk-space-0, 0px)}:host([variant='grid']) .dots .dot.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host([variant='grid'][size='sm']) rtk-button{height:var(--rtk-space-14, 56px);width:var(--rtk-space-14, 56px);opacity:0.1}";
+const RtkGridPaginationStyle0 = rtkGridPaginationCss;
+
+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 MASS_ACTIONS_DEBOUNCE_TIMER = 50; // In ms
+const RtkGridPagination = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Variant */
+        this.variant = 'rounded';
+        /** Icon Pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.page = 1;
+        this.pageCount = 0;
+        this.activeCount = 0;
+        this.activeComputedCount = 0;
+        this.showPagination = false;
+        this.onPageChanged = ({ currentPage, pageCount, }) => {
+            this.pageCount = pageCount;
+            this.page = currentPage;
+        };
+        this.toggleGridPagination = debounce.debounce_1(() => {
+            var _a;
+            const { self, participants } = this.meeting;
+            const { mobile, desktop } = (_a = self.config) === null || _a === void 0 ? void 0 : _a.maxVideoStreams;
+            const maxCount = this.size === 'sm' ? mobile : desktop;
+            const stagePeopleCount = participants.joined
+                .toArray()
+                .filter((p) => p.stageStatus === 'ON_STAGE').length;
+            if (stagePeopleCount < maxCount) {
+                this.showPagination = false;
+            }
+            else {
+                this.showPagination = true;
+            }
+        }, MASS_ACTIONS_DEBOUNCE_TIMER);
+        this.onParticipantJoin = debounce.debounce_1(() => {
+            this.pageCount = this.meeting.participants.pageCount;
+            this.toggleGridPagination();
+        }, MASS_ACTIONS_DEBOUNCE_TIMER);
+        this.onParticipantLeave = debounce.debounce_1(() => {
+            this.pageCount = this.meeting.participants.pageCount;
+            this.toggleGridPagination();
+        }, MASS_ACTIONS_DEBOUNCE_TIMER);
+        this.onStateStatusUpdate = debounce.debounce_1(() => {
+            this.pageCount = this.meeting.participants.pageCount;
+            this.toggleGridPagination();
+        }, MASS_ACTIONS_DEBOUNCE_TIMER);
+        this.prevPage = () => {
+            if (this.meeting == null)
+                return;
+            const { participants } = this.meeting;
+            if (this.page > 1) {
+                participants.setPage((this.page -= 1));
+            }
+            else if (participants.viewMode === 'PAGINATED') {
+                participants.setViewMode('ACTIVE_GRID');
+            }
+        };
+        this.nextPage = () => {
+            if (this.meeting == null)
+                return;
+            const { participants } = this.meeting;
+            if (this.page > 0 && this.page < this.pageCount) {
+                participants.setPage((this.page += 1));
+            }
+            else if (participants.count > 0 && this.pageCount === 0) {
+                participants.setViewMode('PAGINATED');
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.sizeChanged();
+    }
+    disconnectedCallback() {
+        if (this.meeting == null)
+            return;
+        const { participants, stage } = this.meeting;
+        participants.removeListener('pageChanged', this.onPageChanged);
+        participants.removeListener('viewModeChanged', this.onPageChanged);
+        participants.joined.removeListener('participantJoined', this.onParticipantJoin);
+        participants.joined.removeListener('participantLeft', this.onParticipantLeave);
+        participants.joined.removeListener('stageStatusUpdate', this.onStateStatusUpdate);
+        stage.removeListener('stageStatusUpdate', this.onStateStatusUpdate);
+    }
+    meetingChanged(meeting) {
+        if (meeting != null) {
+            const { stage, participants } = meeting;
+            this.page = participants.currentPage;
+            this.pageCount = participants.pageCount;
+            participants.addListener('viewModeChanged', this.onPageChanged);
+            participants.addListener('pageChanged', this.onPageChanged);
+            participants.joined.addListener('participantJoined', this.onParticipantJoin);
+            participants.joined.addListener('participantLeft', this.onParticipantLeave);
+            participants.joined.addListener('stageStatusUpdate', this.onStateStatusUpdate);
+            stage.addListener('stageStatusUpdate', this.onStateStatusUpdate);
+            this.activeCount = this.meeting.participants.joined.size;
+            this.activeComputedCount = this.meeting.participants.joined.size;
+            this.toggleGridPagination();
+        }
+    }
+    sizeChanged() {
+        this.toggleGridPagination();
+    }
+    render() {
+        const { meta } = this.meeting;
+        const isAudioRoom = (meta === null || meta === void 0 ? void 0 : meta.viewType) === 'AUDIO_ROOM';
+        if (isAudioRoom || !this.showPagination) {
+            return index$1.h(index$1.Host, { "data-hidden": true });
+        }
+        return (index$1.h(index$1.Host, null, index$1.h("rtk-button", { class: "prev", variant: "secondary", kind: "icon", disabled: this.pageCount === 0, onClick: this.prevPage, "aria-label": this.t('page.prev') }, index$1.h("rtk-icon", { icon: this.iconPack.chevron_left })), this.variant !== 'grid' && (index$1.h("div", { class: "center" }, index$1.h("span", { class: "page" }, this.pageCount === 0 ? (index$1.h("rtk-tooltip", { label: this.t('layout.auto') }, index$1.h("rtk-button", { kind: "icon", class: "auto" }, index$1.h("rtk-icon", { icon: this.iconPack.wand })))) : (this.page)), this.pageCount !== 0 && [
+            index$1.h("span", { class: "slash" }, "/"),
+            index$1.h("span", { class: "pages" }, this.pageCount),
+        ])), this.variant === 'grid' && this.pageCount > 0 && (index$1.h("div", { class: "dots" }, [...Array(this.pageCount)].map((_, index) => (index$1.h("div", { key: `dot-${index}`, class: { dot: true, active: index + 1 === this.page } }))))), index$1.h("rtk-button", { class: "next", variant: "secondary", kind: "icon", disabled: this.page !== 0 && this.page === this.pageCount, onClick: this.nextPage, "aria-label": this.t('page.next') }, index$1.h("rtk-icon", { icon: this.iconPack.chevron_right, tabIndex: -1, "aria-hidden": true }))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "size": ["sizeChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkGridPagination.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkGridPagination.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkGridPagination.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkGridPagination.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkGridPagination.prototype, "t", void 0);
+RtkGridPagination.style = RtkGridPaginationStyle0;
+
+exports.rtk_grid_pagination = RtkGridPagination;

package/dist/cjs/rtk-grid.cjs.entry.js

@@ -0,0 +1,362 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const debounce = require('./debounce-6080cc73.js');
+const index$2 = require('./index-821d14b7.js');
+const index = require('./index-daae8cee.js');
+const grid = require('./grid-edc342a7.js');
+
+const rtkGridCss = ":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{display:block;height:100%;width:100%}.offline-grid{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}.offline-grid h3{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);font-size:20px;font-weight:500;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.offline-grid p{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);text-align:center;font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.offline-grid rtk-icon{margin-bottom:var(--rtk-space-2, 8px)}.webinar-stage{box-sizing:border-box;height:100%;display:flex;align-content:center;align-items:center;justify-content:center;text-align:center}.webinar-stage h2{margin:var(--rtk-space-0, 0px);font-weight:normal}rtk-viewer-count{display:none}.ctr{display:flex;flex-direction:column;align-items:center}.message{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))}.description{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);font-size:14px}rtk-livestream-indicator{display:none}@media only screen and (max-device-height: 480px) and (orientation: landscape){rtk-viewer-count[variant='embedded']{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}rtk-livestream-indicator{position:absolute;top:var(--rtk-space-0, 0px);left:var(--rtk-space-2, 8px);z-index:20;margin-top:var(--rtk-space-0, 0px);margin-left:var(--rtk-space-0, 0px);display:flex}}";
+const RtkGridStyle0 = rtkGridCss;
+
+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 MASS_ACTIONS_DEBOUNCE_TIMER = 50; // In ms
+const RtkGrid = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        this.hideSelf = false;
+        this.participants = [];
+        this.pinnedParticipants = [];
+        this.screenShareParticipants = [];
+        this.plugins = [];
+        this.emptyStage = false;
+        this.showLiveStreamPlayer = false;
+        this.canCurrentPeerHost = false;
+        this.pipSupported = false;
+        this.pipEnabled = false;
+        this.hidden = false;
+        /** Grid Layout */
+        this.layout = 'row';
+        /** The aspect ratio of each participant */
+        this.aspectRatio = '16:9';
+        /** Gap between participants */
+        this.gap = 8;
+        /** Config object */
+        this.config = uiStore.defaultConfig;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Grid size */
+        this.gridSize = grid.defaultGridSize;
+        /** @deprecated  */
+        this.overrides = {};
+        this.invalidRoomStates = ['init', 'waitlisted', 'ended', 'kicked', 'rejected'];
+        // TODO(@madhugb): Temp hack, remove this when we ship manual subscription
+        this.filterParticipants = (participants) => {
+            var _a;
+            // Only filter for non recorders
+            if (this.overrides && ((_a = this.overrides) === null || _a === void 0 ? void 0 : _a.videoUnsubscribed)) {
+                const presetFilters = this.overrides.videoUnsubscribed.preset;
+                if (presetFilters.length > 0) {
+                    // Filter out unsubscribed participants
+                    participants = participants.filter((p) => {
+                        const unsubscribed = presetFilters.some((regex) => {
+                            if (p.presetName === undefined)
+                                return false;
+                            return p.presetName.match(regex);
+                        });
+                        return !unsubscribed;
+                    });
+                }
+            }
+            return participants;
+        };
+        this.onViewModeChanged = () => {
+            if (this.meeting == null)
+                return;
+            this.updateActiveParticipants();
+        };
+        this.onParticipantJoined = debounce.debounce_1(() => {
+            this.updateActiveParticipants();
+        }, MASS_ACTIONS_DEBOUNCE_TIMER);
+        this.onParticipantLeft = debounce.debounce_1(() => {
+            this.updateActiveParticipants();
+        }, MASS_ACTIONS_DEBOUNCE_TIMER);
+        this.stageStatusListener = () => {
+            this.updateActiveParticipants();
+            this.showLiveStreamPlayer = uiStore.isLiveStreamViewer(this.meeting);
+            if (this.meeting.stage.status !== 'ON_STAGE') {
+                this.removeScreenShare(this.meeting.self);
+            }
+        };
+        this.peerStageStatusListener = (participant) => {
+            this.updateActiveParticipants();
+            if (this.meeting.stage.status !== 'ON_STAGE') {
+                this.removePinned(participant);
+                this.removeScreenShare(participant);
+            }
+        };
+        this.onScreenShareUpdate = (participant) => {
+            if (participant.screenShareEnabled) {
+                this.addScreenShare(participant);
+            }
+            else {
+                this.removeScreenShare(participant);
+            }
+        };
+        this.onSelfScreenShareUpdate = ({ screenShareEnabled, }) => {
+            if (screenShareEnabled) {
+                this.addScreenShare(this.meeting.self);
+            }
+            else {
+                this.removeScreenShare(this.meeting.self);
+            }
+        };
+        this.toggleTileListener = ({ hidden }) => {
+            this.hidden = hidden;
+            this.updateActiveParticipants();
+        };
+        this.onPluginStateUpdate = (plugin, { active }) => {
+            if (active) {
+                if (!this.plugins.some((p) => p.id === plugin.id)) {
+                    this.plugins = [...this.plugins, plugin];
+                }
+            }
+            else {
+                this.plugins = this.plugins.filter((p) => p.id !== plugin.id);
+            }
+        };
+        this.onParticipantPinned = () => {
+            this.updateActiveParticipants();
+        };
+        this.onParticipantUnpinned = () => {
+            this.updateActiveParticipants();
+        };
+        this.updateRoomStateListener = () => {
+            this.roomState = this.meeting.self.roomState;
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        this.disconnectMeeting(this.meeting);
+    }
+    disconnectMeeting(meeting) {
+        var _a;
+        if (meeting == null)
+            return;
+        this.participants = [];
+        this.plugins = [];
+        const { self, participants, plugins } = meeting;
+        self.removeListener('pinned', this.onParticipantPinned);
+        self.removeListener('unpinned', this.onParticipantUnpinned);
+        self.removeListener('roomLeft', this.updateRoomStateListener);
+        self.removeListener('roomJoined', this.updateRoomStateListener);
+        self.removeListener('screenShareUpdate', this.onSelfScreenShareUpdate);
+        self.removeListener('toggleTile', this.toggleTileListener);
+        plugins === null || plugins === void 0 ? void 0 : plugins.all.removeListener('stateUpdate', this.onPluginStateUpdate);
+        (_a = meeting.stage) === null || _a === void 0 ? void 0 : _a.removeListener('stageStatusUpdate', this.stageStatusListener);
+        participants.removeListener('viewModeChanged', this.onViewModeChanged);
+        participants.active.removeListener('participantLeft', this.onParticipantLeft);
+        participants.active.removeListener('participantJoined', this.onParticipantJoined);
+        participants.pinned.removeListener('participantJoined', this.onParticipantPinned);
+        participants.pinned.removeListener('participantLeft', this.onParticipantUnpinned);
+        participants.joined.removeListener('screenShareUpdate', this.onScreenShareUpdate);
+        participants.joined.removeListener('stageStatusUpdate', this.peerStageStatusListener);
+    }
+    meetingChanged(meeting, oldMeeting) {
+        var _a, _b, _c, _d;
+        if (oldMeeting !== null)
+            this.disconnectMeeting(oldMeeting);
+        if (meeting != null) {
+            const { self, participants, plugins, stage } = meeting;
+            // Check if PiP is supported and enabled
+            this.pipSupported =
+                ((_a = this.meeting.participants.pip) === null || _a === void 0 ? void 0 : _a.isSupported()) && ((_b = meeting.self.config) === null || _b === void 0 ? void 0 : _b.pipMode);
+            if (this.pipSupported) {
+                this.meeting.participants.pip.init();
+            }
+            // Initialize values
+            const { permissions } = self;
+            this.roomState = self.roomState;
+            const isOffStage = this.meeting.stage.status !== 'ON_STAGE';
+            const isRecorder = permissions === null || permissions === void 0 ? void 0 : permissions.isRecorder;
+            this.hideSelf = isOffStage || isRecorder || permissions.hiddenParticipant;
+            this.participants = this.filterParticipants([
+                ...participants.active.toArray(),
+                ...(!self.isPinned && !this.hideSelf ? [self] : []),
+            ]);
+            this.pinnedParticipants = [
+                ...participants.pinned.toArray(),
+                ...(self.isPinned && !this.hideSelf ? [self] : []),
+            ];
+            this.screenShareParticipants = participants.joined
+                .toArray()
+                .filter((participant) => participant.screenShareEnabled);
+            this.plugins = (plugins === null || plugins === void 0 ? void 0 : plugins.active.toArray()) || [];
+            if (permissions === null || permissions === void 0 ? void 0 : permissions.stageEnabled) {
+                this.canCurrentPeerHost = permissions.acceptStageRequests || permissions.canPresent;
+                this.updateStage();
+            }
+            this.hidden = meeting.self.hidden;
+            // Add all listeners
+            self.addListener('roomLeft', this.updateRoomStateListener);
+            self.addListener('roomJoined', this.updateRoomStateListener);
+            self.addListener('screenShareUpdate', this.onSelfScreenShareUpdate);
+            self.addListener('pinned', this.onParticipantPinned);
+            self.addListener('unpinned', this.onParticipantUnpinned);
+            self.addListener('toggleTile', this.toggleTileListener);
+            stage === null || stage === void 0 ? void 0 : stage.addListener('stageStatusUpdate', this.stageStatusListener);
+            plugins === null || plugins === void 0 ? void 0 : plugins.all.addListener('stateUpdate', this.onPluginStateUpdate);
+            participants.addListener('viewModeChanged', this.onViewModeChanged);
+            participants.active.addListener('participantLeft', this.onParticipantLeft);
+            (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.on('stageStatusUpdate', this.peerStageStatusListener);
+            participants.joined.addListener('screenShareUpdate', this.onScreenShareUpdate);
+            participants.active.addListener('participantJoined', this.onParticipantJoined);
+            participants.pinned.addListener('participantJoined', this.onParticipantPinned);
+            participants.pinned.addListener('participantLeft', this.onParticipantUnpinned);
+            if ((_d = meeting.stage) === null || _d === void 0 ? void 0 : _d.status) {
+                this.stageStatusListener();
+            }
+        }
+    }
+    overridesChanged(_overrides) {
+        this.updateActiveParticipants();
+    }
+    screenShareParticipantsChanged(participants) {
+        const activeScreenShare = participants.length > 0;
+        if (!!uiStore.uiState.states.activeScreenShare === activeScreenShare)
+            return;
+        this.stateUpdate.emit({ activeScreenShare });
+        uiStore.uiState.states.activeScreenShare = activeScreenShare;
+    }
+    pluginsChanged(plugins) {
+        const activePlugin = plugins.length > 0;
+        if (!!uiStore.uiState.states.activePlugin === activePlugin)
+            return;
+        this.stateUpdate.emit({ activePlugin });
+        uiStore.uiState.states.activePlugin = activePlugin;
+    }
+    pinnedParticipantsChanged(participants) {
+        const activeSpotlight = participants.length > 0;
+        if (!!uiStore.uiState.states.activeSpotlight === activeSpotlight)
+            return;
+        this.stateUpdate.emit({ activeSpotlight });
+        uiStore.uiState.states.activeSpotlight = activeSpotlight;
+    }
+    updateActiveParticipants() {
+        var _a;
+        const { self, participants, stage } = this.meeting;
+        // NOTE(ishita1805): checking hiddenParticipant for v2 meetings.
+        this.hideSelf =
+            this.hidden ||
+                stage.status !== 'ON_STAGE' ||
+                ((_a = self.permissions) === null || _a === void 0 ? void 0 : _a.isRecorder) ||
+                self.permissions.hiddenParticipant;
+        this.participants = this.filterParticipants([
+            ...participants.active.toArray().filter((p) => p.id !== self.id),
+            ...(participants.viewMode === 'ACTIVE_GRID' && !self.isPinned && !this.hideSelf
+                ? [self]
+                : []),
+        ]);
+        this.pinnedParticipants = [
+            ...participants.pinned.toArray().filter((p) => p.id !== self.id),
+            ...(self.isPinned && !this.hideSelf ? [self] : []),
+        ];
+        this.screenShareParticipants = participants.joined
+            .toArray()
+            .filter((participant) => participant.screenShareEnabled);
+        if (self.screenShareEnabled) {
+            this.screenShareParticipants = this.screenShareParticipants.concat([self]);
+        }
+        this.updateStage();
+    }
+    updateStage() {
+        var _a;
+        const { self } = this.meeting;
+        if (!this.meeting)
+            return;
+        if ((_a = self === null || self === void 0 ? void 0 : self.permissions) === null || _a === void 0 ? void 0 : _a.stageEnabled) {
+            this.emptyStage = this.participants.length === 0 && this.pinnedParticipants.length === 0;
+        }
+        else {
+            this.emptyStage = false;
+        }
+    }
+    addScreenShare(participant) {
+        if (!this.screenShareParticipants.some((p) => p.id === participant.id)) {
+            this.screenShareParticipants = [...this.screenShareParticipants, participant];
+        }
+    }
+    removeScreenShare(participant) {
+        this.screenShareParticipants = this.screenShareParticipants.filter((p) => p.id !== participant.id);
+    }
+    removePinned(participant) {
+        this.pinnedParticipants = this.pinnedParticipants.filter((p) => p.id !== participant.id);
+    }
+    render() {
+        const defaults = {
+            meeting: this.meeting,
+            size: this.size,
+            states: this.states,
+            config: this.config,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        if (this.invalidRoomStates.includes(this.roomState)) {
+            return (index$1.h(index$1.Host, null, index$1.h("div", { class: "offline-grid" }, index$1.h("rtk-icon", { icon: this.iconPack.join_stage, size: "xl" }), index$1.h("h3", null, this.t('disconnected')), index$1.h("p", null, this.t('disconnected.description')))));
+        }
+        if (this.roomState === 'disconnected') {
+            return (index$1.h(index$1.Host, null, index$1.h("div", { class: "offline-grid" }, index$1.h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), index$1.h("h3", null, this.t('offline')), index$1.h("p", null, this.t('offline.description')))));
+        }
+        if (this.roomState === 'failed') {
+            return (index$1.h(index$1.Host, null, index$1.h("div", { class: "offline-grid" }, index$1.h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), index$1.h("h3", null, this.t('failed')), index$1.h("p", null, this.t('failed.description')))));
+        }
+        if (this.showLiveStreamPlayer) {
+            return (index$1.h(index$1.Host, null, index$1.h("rtk-livestream-player", { meeting: this.meeting, size: this.size }), index$1.h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), index$1.h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded", t: this.t })));
+        }
+        if (this.emptyStage) {
+            return (index$1.h(index$1.Host, null, index$1.h("div", { class: "webinar-stage" }, index$1.h("div", { class: "center" }, this.canCurrentPeerHost && (index$1.h("div", { class: "ctr", part: "container" }, index$1.h("p", { class: "message", part: "message" }, this.t('stage.empty_host')), index$1.h("span", { class: "description", part: "description" }, this.t('stage.empty_host_summary')))), !this.canCurrentPeerHost && (index$1.h("div", { class: "ctr", part: "container" }, index$1.h("p", { class: "message", part: "message" }, this.t('stage.empty_viewer'))))))));
+        }
+        return (index$1.h(index$1.Host, null, index$1.h(index$2.Render, { element: "rtk-grid", defaults: defaults, childProps: {
+                participants: this.participants,
+                screenShareParticipants: this.screenShareParticipants,
+                plugins: this.plugins,
+                pinnedParticipants: this.pinnedParticipants,
+                aspectRatio: this.aspectRatio,
+                gap: this.gap,
+                layout: this.layout,
+                gridSize: this.gridSize,
+            }, onlyChildren: true }), index$1.h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), index$1.h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded" })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "overrides": ["overridesChanged"],
+        "screenShareParticipants": ["screenShareParticipantsChanged"],
+        "plugins": ["pluginsChanged"],
+        "pinnedParticipants": ["pinnedParticipantsChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkGrid.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkGrid.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkGrid.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkGrid.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkGrid.prototype, "t", void 0);
+RtkGrid.style = RtkGridStyle0;
+
+exports.rtk_grid = RtkGrid;