import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-ae373651.js';
import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage, K as isLiveStreamViewer } from './p-5b3a7f00.js';
import { d as debounce_1 } from './p-cbdd7a99.js';
import { R as Render } from './p-88bd1053.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { d as defaultGridSize } from './p-b13ddb7d.js';
import { d as defineCustomElement$9 } from './p-85587a5c.js';
import { d as defineCustomElement$8 } from './p-0031a3c0.js';
import { d as defineCustomElement$7 } from './p-c232dfce.js';
import { d as defineCustomElement$6 } from './p-3e0452c4.js';
import { d as defineCustomElement$5 } from './p-a2de6dfc.js';
import { d as defineCustomElement$4 } from './p-d4c852fe.js';
import { d as defineCustomElement$3 } from './p-e6245534.js';
import { d as defineCustomElement$2 } from './p-88e8bca6.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$1 = /*@__PURE__*/ proxyCustomElement(class RtkGrid extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.stateUpdate = 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 = createDefaultConfig();
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        /** Grid size */
        this.gridSize = 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)
                return;
            this.updateActiveParticipants();
        };
        this.onParticipantJoined = debounce_1(() => {
            this.updateActiveParticipants();
        }, MASS_ACTIONS_DEBOUNCE_TIMER);
        this.onParticipantLeft = debounce_1(() => {
            this.updateActiveParticipants();
        }, MASS_ACTIONS_DEBOUNCE_TIMER);
        this.stageStatusListener = () => {
            this.updateActiveParticipants();
            this.showLiveStreamPlayer = 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)
            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.canProduceAudio === 'ALLOWED' ||
                        permissions.canProduceVideo === 'ALLOWED' ||
                        permissions.canProduceScreenshare === 'ALLOWED';
                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 (!!this.states.activeScreenShare === activeScreenShare)
            return;
        this.stateUpdate.emit({ activeScreenShare });
        this.states.activeScreenShare = activeScreenShare;
    }
    pluginsChanged(plugins) {
        const activePlugin = plugins.length > 0;
        if (!!this.states.activePlugin === activePlugin)
            return;
        this.stateUpdate.emit({ activePlugin });
        this.states.activePlugin = activePlugin;
    }
    pinnedParticipantsChanged(participants) {
        const activeSpotlight = participants.length > 0;
        if (!!this.states.activeSpotlight === activeSpotlight)
            return;
        this.stateUpdate.emit({ activeSpotlight });
        this.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() {
        var _a, _b, _c, _d;
        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 (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.join_stage, size: "xl" }), h("h3", null, this.t('disconnected')), h("p", null, this.t('disconnected.description')))));
        }
        if (this.roomState === 'disconnected') {
            /**
             * NOTE(ravindra-cloudflare): When disconnected but WebRTC transports are
             * still healthy, skip the offline screen — media is still flowing.
             * The grid stays visible for seamless reconnection.
             */
            const mediaState = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.mediaState;
            const transportsHealthy = ((_c = mediaState === null || mediaState === void 0 ? void 0 : mediaState.send) === null || _c === void 0 ? void 0 : _c.state) === 'connected' && ((_d = mediaState === null || mediaState === void 0 ? void 0 : mediaState.recv) === null || _d === void 0 ? void 0 : _d.state) === 'connected';
            if (!transportsHealthy) {
                return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('offline')), h("p", null, this.t('offline.description')))));
            }
        }
        if (this.roomState === 'failed') {
            return (h(Host, null, h("div", { class: "offline-grid" }, h("rtk-icon", { icon: this.iconPack.disconnected, size: "xl" }), h("h3", null, this.t('failed')), h("p", null, this.t('failed.description')))));
        }
        if (this.showLiveStreamPlayer) {
            return (h(Host, null, h("rtk-livestream-player", { meeting: this.meeting, size: this.size }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded", t: this.t })));
        }
        if (this.emptyStage) {
            return (h(Host, null, h("div", { class: "webinar-stage" }, h("div", { class: "center" }, this.canCurrentPeerHost && (h("div", { class: "ctr", part: "container" }, h("p", { class: "message", part: "message" }, this.t('stage.empty_host')), h("span", { class: "description", part: "description" }, this.t('stage.empty_host_summary')))), !this.canCurrentPeerHost && (h("div", { class: "ctr", part: "container" }, h("p", { class: "message", part: "message" }, this.t('stage.empty_viewer'))))))));
        }
        return (h(Host, null, h(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 }), h("rtk-livestream-indicator", { meeting: this.meeting, size: "sm", t: this.t }), h("rtk-viewer-count", { meeting: this.meeting, variant: "embedded", t: this.t })));
    }
    static get watchers() { return {
        "meeting": ["meetingChanged"],
        "overrides": ["overridesChanged"],
        "screenShareParticipants": ["screenShareParticipantsChanged"],
        "plugins": ["pluginsChanged"],
        "pinnedParticipants": ["pinnedParticipantsChanged"]
    }; }
    static get style() { return RtkGridStyle0; }
}, [1, "rtk-grid", {
        "layout": [513],
        "aspectRatio": [513, "aspect-ratio"],
        "meeting": [16],
        "gap": [514],
        "size": [513],
        "states": [16],
        "config": [16],
        "iconPack": [16],
        "t": [16],
        "gridSize": [16],
        "overrides": [8],
        "participants": [32],
        "pinnedParticipants": [32],
        "screenShareParticipants": [32],
        "plugins": [32],
        "emptyStage": [32],
        "showLiveStreamPlayer": [32],
        "canCurrentPeerHost": [32],
        "pipSupported": [32],
        "pipEnabled": [32],
        "hidden": [32],
        "roomState": [32]
    }, undefined, {
        "meeting": ["meetingChanged"],
        "overrides": ["overridesChanged"],
        "screenShareParticipants": ["screenShareParticipantsChanged"],
        "plugins": ["pluginsChanged"],
        "pinnedParticipants": ["pinnedParticipantsChanged"]
    }]);
__decorate([
    SyncWithStore()
], RtkGrid$1.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkGrid$1.prototype, "states", void 0);
__decorate([
    SyncWithStore()
], RtkGrid$1.prototype, "config", void 0);
__decorate([
    SyncWithStore()
], RtkGrid$1.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkGrid$1.prototype, "t", void 0);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-grid", "rtk-button", "rtk-controlbar-button", "rtk-fullscreen-toggle", "rtk-icon", "rtk-livestream-indicator", "rtk-livestream-player", "rtk-spinner", "rtk-viewer-count"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-grid":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkGrid$1);
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "rtk-controlbar-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "rtk-fullscreen-toggle":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "rtk-livestream-indicator":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "rtk-livestream-player":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "rtk-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "rtk-viewer-count":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const RtkGrid = RtkGrid$1;
const defineCustomElement = defineCustomElement$1;

export { RtkGrid, defineCustomElement };
