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

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

@@ -0,0 +1,158 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const sidebar = require('./sidebar-864a0b7a.js');
+const index = require('./index-2154d3c1.js');
+const index$2 = require('./index-333077f7.js');
+
+const rtkSidebarCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{height:100%;width:100%;max-width:var(--rtk-space-96, 384px);box-sizing:border-box;display:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));border-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity))}:host([view='sidebar']){right:var(--rtk-space-2, 8px);overflow:clip;border-radius:var(--rtk-border-radius-lg, 12px);--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-900, 26 26 26));--tw-shadow:var(--tw-shadow-colored)}:host([view='full-screen']){top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);max-width:100%}:host(.floating){position:absolute !important;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);left:auto;z-index:50}.pinned-state{position:absolute;right:var(--rtk-space-1, 4px);display:inline-flex;width:var(--rtk-space-2, 8px);justify-content:flex-end}";
+const RtkSidebarStyle0 = rtkSidebarCss;
+
+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 RtkSidebar = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** Enabled sections in sidebar */
+        this.enabledSections = [];
+        /** Default section */
+        this.defaultSection = 'chat';
+        /** Config */
+        this.config = uiStore.defaultConfig;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** View type */
+        this.view = 'sidebar';
+        this.currentTab = this.defaultSection;
+        this.isFloating = false;
+        this.enablePinning = true;
+        this.getTabs = () => {
+            if (!this.meeting.self.config) {
+                return this.enabledSections;
+            }
+            return this.enabledSections.filter((section) => this.meeting.self.config.controlBar.elements[section.id]);
+        };
+        this.close = () => {
+            this.stateUpdate.emit({ activeSidebar: false, sidebar: this.defaultSection });
+        };
+        this.toggleFloating = () => {
+            this.isFloating = !this.isFloating;
+        };
+    }
+    connectedCallback() {
+        var _a;
+        this.viewChanged(this.view);
+        this.statesChanged(this.states);
+        this.meetingChanged(this.meeting);
+        this.isFloating = ((_a = this.states) === null || _a === void 0 ? void 0 : _a.sidebarFloating) || false;
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        document.removeEventListener('keydown', this.keydownListener);
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.removeListener('stageStatusUpdate', this.onStageStatusUpdate);
+        this.onStageStatusUpdate = null;
+    }
+    meetingChanged(meeting) {
+        var _a, _b;
+        this.updateEnabledSections(meeting);
+        this.onStageStatusUpdate = (_status) => {
+            this.updateEnabledSections(this.meeting);
+        };
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.on('stageStatusUpdate', this.onStageStatusUpdate);
+    }
+    statesChanged(s) {
+        const states = s;
+        if (states === null || states === void 0 ? void 0 : states.sidebar) {
+            this.currentTab = states.sidebar;
+        }
+    }
+    viewChanged(view) {
+        if (view === 'full-screen') {
+            this.enablePinning = false;
+            this.keydownListener = (e) => {
+                if (e.key === 'Escape') {
+                    this.close();
+                }
+            };
+            document.addEventListener('keydown', this.keydownListener);
+        }
+        else {
+            this.enablePinning = true;
+        }
+    }
+    viewSection(section) {
+        this.currentTab = section;
+        this.stateUpdate.emit({ activeSidebar: true, sidebar: this.currentTab });
+    }
+    updateEnabledSections(meeting = this.meeting) {
+        const list = [];
+        if (sidebar.canViewChat(meeting)) {
+            list.push({ id: 'chat', name: this.t('chat') });
+        }
+        if (sidebar.canViewPolls(meeting)) {
+            list.push({ id: 'polls', name: this.t('polls') });
+        }
+        if (sidebar.canViewParticipants(meeting)) {
+            list.push({ id: 'participants', name: this.t('participants') });
+        }
+        if (sidebar.canViewPlugins(meeting)) {
+            list.push({ id: 'plugins', name: this.t('plugins') });
+        }
+        this.enabledSections = list;
+    }
+    render() {
+        var _a;
+        const defaults = {
+            meeting: this.meeting,
+            config: this.config,
+            states: this.states,
+            size: this.size,
+            t: this.t,
+            iconPack: this.iconPack,
+        };
+        // NOTE(ishita1805): This makes it easier to use the sidebar component in isolation.
+        if (((_a = defaults.states) === null || _a === void 0 ? void 0 : _a.activeSidebar) === false || !this.currentTab) {
+            return null;
+        }
+        return (index$1.h(index$1.Host, { class: this.enablePinning ? (this.isFloating ? 'floating' : '') : 'floating' }, index$1.h("rtk-sidebar-ui", { tabs: this.getTabs(), currentTab: this.currentTab, view: this.view, onTabChange: (e) => {
+                this.viewSection(e.detail);
+            }, onSidebarClose: this.close }, this.enablePinning && (index$1.h("div", { class: "pinned-state", slot: "pinned-state" }, index$1.h("rtk-button", { variant: "ghost", kind: "icon", onClick: this.toggleFloating, "aria-label": this.isFloating ? this.t('pin') : this.t('unpin') }, index$1.h("rtk-icon", { icon: this.isFloating ? this.iconPack.pin : this.iconPack.pin_off })))), defaults.states.sidebar === 'chat' && (index$1.h(index$2.Render, { element: "rtk-chat", defaults: defaults, props: { slot: 'chat' } })), defaults.states.sidebar === 'polls' && index$1.h("rtk-polls", Object.assign({}, defaults, { slot: "polls" })), defaults.states.sidebar === 'participants' && (index$1.h(index$2.Render, { element: "rtk-participants", defaults: defaults, props: { slot: 'participants' } })), defaults.states.sidebar === 'plugins' && index$1.h("rtk-plugins", Object.assign({}, defaults, { slot: "plugins" })))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "states": ["statesChanged"],
+        "view": ["viewChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkSidebar.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSidebar.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSidebar.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSidebar.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSidebar.prototype, "size", void 0);
+RtkSidebar.style = RtkSidebarStyle0;
+
+exports.rtk_sidebar = RtkSidebar;

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

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const index$2 = require('./index-333077f7.js');
+const grid = require('./grid-edc342a7.js');
+const ResizeObserver_es = require('./ResizeObserver.es-ba961f16.js');
+const index = require('./index-2154d3c1.js');
+
+const rtkSimpleGridCss = ":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:block;height:100%;width:100%}";
+const RtkSimpleGridStyle0 = rtkSimpleGridCss;
+
+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 RtkSimpleGrid = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Participants */
+        this.participants = [];
+        /**
+         * Aspect Ratio of participant tile
+         *
+         * Format: `width:height`
+         */
+        this.aspectRatio = '16:9';
+        /** Gap between participant tiles */
+        this.gap = 8;
+        /** UI Config */
+        this.config = uiStore.defaultConfig;
+        /** Icon Pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.dimensions = { width: 0, height: 0 };
+        this.setHostDimensions = () => {
+            const { clientWidth: width, clientHeight: height } = this.host;
+            this.dimensions = { width, height };
+        };
+    }
+    connectedCallback() {
+        this.resizeObserver = new ResizeObserver_es.index(this.setHostDimensions);
+        this.resizeObserver.observe(this.host);
+        this.meetingChanged(this.meeting);
+    }
+    meetingChanged(meeting) {
+        const meta = meeting === null || meeting === void 0 ? void 0 : meeting.meta;
+        if (meta)
+            this.mediaConnection = Object.assign({}, meta.mediaState);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        const defaults = {
+            meeting: this.meeting,
+            config: this.config,
+            states: this.states,
+            size: this.size,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        const { width, height, getPosition } = grid.useGrid({
+            dimensions: this.dimensions,
+            count: this.participants.length,
+            aspectRatio: this.aspectRatio,
+            gap: this.gap,
+        });
+        return (index$1.h(index$1.Host, { key: '954285505c59c26020a13412683395dd80bfd0b9' }, index$1.h("slot", { key: '5843e6f185d9e10a0e74b8f8e234b0e82e78c9fd' }, this.participants.map((participant, index) => {
+            const { top, left } = getPosition(index);
+            return (index$1.h(index$2.Render, { element: "rtk-participant-tile", defaults: defaults, props: {
+                    participant,
+                    style: {
+                        position: 'absolute',
+                        top: `${top}px`,
+                        left: `${left}px`,
+                        width: `${width}px`,
+                        height: `${height}px`,
+                    },
+                    key: participant.id,
+                    'data-participant': participant.id,
+                    mediaConnection: this.mediaConnection,
+                }, childProps: { participant }, deepProps: true }));
+        }))));
+    }
+    get host() { return index$1.getElement(this); }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkSimpleGrid.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSimpleGrid.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSimpleGrid.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSimpleGrid.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSimpleGrid.prototype, "t", void 0);
+RtkSimpleGrid.style = RtkSimpleGridStyle0;
+
+exports.rtk_simple_grid = RtkSimpleGrid;

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

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const grid = require('./grid-edc342a7.js');
+const index$2 = require('./index-333077f7.js');
+const index = require('./index-2154d3c1.js');
+
+const rtkSpotlightGridCss = ":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;height:100%;width:100%}main{flex:1 1 0%}.grid-width-sm{width:25%}.grid-width-md{width:50%}.grid-width-lg{width:66.666667%}:host([size='sm']),:host([size='md']){flex-direction:column}:host([size='md']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='md']) .grid-width-sm{height:25%}:host([size='md']) .grid-width-md{height:50%}:host([size='md']) .grid-width-lg{height:66.666667%}:host([size='sm']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='sm']) .grid-width-sm,:host([size='sm']) .grid-width-md,:host([size='sm']) .grid-width-lg{height:50%}:host([size='xl']) .grid-width-sm,:host([size='xl']) .grid-width-md,:host([size='xl']) .grid-width-lg{width:400px}:host([layout='column']){flex-direction:column}:host([layout='column']) main{flex:4}:host([layout='column']) aside{flex:2;max-width:100%;width:100%}";
+const RtkSpotlightGridStyle0 = rtkSpotlightGridCss;
+
+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 RtkSpotlightGrid = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Grid Layout */
+        this.layout = 'row';
+        /** Participants */
+        this.participants = [];
+        /** Pinned Participants */
+        this.pinnedParticipants = [];
+        /**
+         * Aspect Ratio of participant tile
+         *
+         * Format: `width:height`
+         */
+        this.aspectRatio = '16:9';
+        /** Gap between participant tiles */
+        this.gap = 8;
+        /** UI Config */
+        this.config = uiStore.defaultConfig;
+        /** Icon Pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Grid size */
+        this.gridSize = grid.defaultGridSize;
+        this.getAdaptiveSize = (length) => {
+            if (this.size === 'sm') {
+                return 'sm';
+            }
+            if (length > 3) {
+                return 'sm';
+            }
+            else {
+                if (this.size === 'md') {
+                    return 'sm';
+                }
+                return 'md';
+            }
+        };
+    }
+    render() {
+        const defaults = {
+            meeting: this.meeting,
+            config: this.config,
+            states: this.states,
+            size: this.size,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        const nonPinnedParticipants = this.participants.filter((p) => this.pinnedParticipants.some((pt) => pt.id != p.id));
+        return (index$1.h(index$1.Host, { key: 'f969a4a4e84d759236f508c76b1f17f2ca6c86fc' }, index$1.h("main", { key: '2b3a1b073a00b9a4ce2ef52ac16135032c5bca16', part: "main" }, index$1.h(index$2.Render, { key: '0173d3ee87d82e2aa2cfd67d4c4a9539545c725d', element: "rtk-simple-grid", defaults: defaults, props: {
+                part: 'main-grid',
+                participants: this.pinnedParticipants,
+                aspectRatio: this.aspectRatio,
+                gap: this.gap,
+                size: this.getAdaptiveSize(this.pinnedParticipants.length),
+            } })), nonPinnedParticipants.length > 0 && (index$1.h("aside", { key: 'f6432185ad98bf81d7c76cd9abb26a17973692f8', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, index$1.h(index$2.Render, { key: '504cc9d09a30d0fb00533aa9bfbd33353b0bd08a', element: "rtk-simple-grid", defaults: defaults, props: {
+                part: 'aside-grid',
+                participants: nonPinnedParticipants,
+                aspectRatio: this.aspectRatio,
+                gap: this.gap,
+                size: this.getAdaptiveSize(nonPinnedParticipants.length),
+            } })))));
+    }
+    get host() { return index$1.getElement(this); }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightGrid.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightGrid.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightGrid.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightGrid.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightGrid.prototype, "t", void 0);
+RtkSpotlightGrid.style = RtkSpotlightGridStyle0;
+
+exports.rtk_spotlight_grid = RtkSpotlightGrid;

package/dist/cjs/rtk-spotlight-indicator.cjs.entry.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const index = require('./index-2154d3c1.js');
+
+const rtkSpotlightIndicatorCss = ":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{font-size:12px}#sync-button{flex-direction:row;border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-1, 4px);display:flex;align-items:center;justify-content:center;margin-bottom:var(--rtk-space-1, 4px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) rtk-tooltip,:host([size='md']) rtk-tooltip{width:100%}:host([size='sm'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px);padding-left:var(--rtk-space-0, 0px)}:host([size='md'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}:host([size='lg'])>#sync-button{flex-direction:row;height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}@media (orientation: portrait){:host([size='lg']) #sync-button{flex-direction:column-reverse;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='md']) #sync-button{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='sm']) #sync-button{height:var(--rtk-space-10, 40px);width:var(--rtk-space-16, 64px);flex-direction:row}}#sync-button>rtk-icon{max-height:14px}#sync-button rtk-icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']) #sync-button>rtk-icon{width:auto}#sync-button.active rtk-icon{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}div{align-content:center;line-height:2rem}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-8, 32px)}#sync-button.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-bg-opacity))}";
+const RtkSpotlightIndicatorStyle0 = rtkSpotlightIndicatorCss;
+
+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 RtkSpotlightIndicator = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.permissionsUpdateListener = () => {
+            this.canSpotlight = this.meeting.self.permissions.canSpotlight;
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    meetingChanged(meeting) {
+        var _a, _b;
+        if (meeting != null) {
+            this.canSpotlight = meeting.self.permissions.canSpotlight;
+            this.isSpotlighted = (_b = (_a = meeting.meta) === null || _a === void 0 ? void 0 : _a.broadcastTabChanges) !== null && _b !== void 0 ? _b : false;
+            meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+        }
+    }
+    updateSpotlightState(shouldBroadcastTabChanges) {
+        var _a;
+        try {
+            (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.setBroadcastTabChanges(shouldBroadcastTabChanges);
+            this.isSpotlighted = shouldBroadcastTabChanges;
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(e);
+        }
+    }
+    render() {
+        if (!this.canSpotlight)
+            return;
+        return (index$1.h(index$1.Host, null, index$1.h("rtk-tooltip", { size: 'md', label: this.t('remote_access.indicator') }, index$1.h("div", { id: "sync-button", class: {
+                tab: true,
+                active: this.isSpotlighted,
+            }, onClick: () => this.updateSpotlightState(!this.isSpotlighted) }, index$1.h("span", { class: "name" }, "Sync"), index$1.h("rtk-icon", { id: "icon", icon: this.isSpotlighted ? this.iconPack.checkmark : this.iconPack.warning, tabIndex: -1, "aria-hidden": true })))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightIndicator.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightIndicator.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightIndicator.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightIndicator.prototype, "size", void 0);
+RtkSpotlightIndicator.style = RtkSpotlightIndicatorStyle0;
+
+exports.rtk_spotlight_indicator = RtkSpotlightIndicator;

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

@@ -0,0 +1,147 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const index = require('./index-2154d3c1.js');
+
+const canJoinStage = (meeting) => {
+    var _a, _b;
+    return (((_a = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _a === void 0 ? void 0 : _a.permissions.stageEnabled) && ((_b = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _b === void 0 ? void 0 : _b.permissions.stageAccess) === 'ALLOWED');
+};
+const canRequestToJoinStage = (meeting) => {
+    var _a, _b;
+    return (((_a = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _a === void 0 ? void 0 : _a.permissions.stageEnabled) &&
+        ((_b = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _b === void 0 ? void 0 : _b.permissions.stageAccess) !== 'NOT_ALLOWED');
+};
+
+const rtkStageToggleCss = ":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 RtkStageToggleStyle0 = rtkStageToggleCss;
+
+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 RtkStageToggle = 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.stageStatus = 'OFF_STAGE';
+        this.state = {
+            label: '',
+            disabled: false,
+            icon: '',
+        };
+        this.stageCallback = async () => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const stageStatus = (_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.status;
+            if (stageStatus === 'ON_STAGE') {
+                await ((_c = (_b = this === null || this === void 0 ? void 0 : this.meeting) === null || _b === void 0 ? void 0 : _b.stage) === null || _c === void 0 ? void 0 : _c.leave());
+            }
+            if (stageStatus === 'OFF_STAGE') {
+                (_e = (_d = this === null || this === void 0 ? void 0 : this.meeting) === null || _d === void 0 ? void 0 : _d.stage) === null || _e === void 0 ? void 0 : _e.requestAccess();
+                if (canJoinStage(this.meeting)) {
+                    uiStore.uiState.states.activeJoinStage = true;
+                    this.stateUpdate.emit({ activeJoinStage: true });
+                }
+            }
+            if (stageStatus === 'REQUESTED_TO_JOIN_STAGE') {
+                (_g = (_f = this === null || this === void 0 ? void 0 : this.meeting) === null || _f === void 0 ? void 0 : _f.stage) === null || _g === void 0 ? void 0 : _g.cancelRequestAccess();
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    stageStatusHandler(meeting, status) {
+        this.stageStatus = status;
+        if (status === 'ACCEPTED_TO_JOIN_STAGE') {
+            meeting.self.setupTracks({ audio: false, video: false });
+            this.stateUpdate.emit({ activeJoinStage: true });
+        }
+        this.state = this.getState();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.removeListener('stageStatusUpdate', (status) => this.stageStatusHandler(this.meeting, status));
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c, _d;
+        if (meeting == null)
+            return;
+        this.stageStatus = (_a = meeting.stage) === null || _a === void 0 ? void 0 : _a.status;
+        this.stageStatusHandler(meeting, (_b = meeting.stage) === null || _b === void 0 ? void 0 : _b.status);
+        (_d = (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.stage) === null || _d === void 0 ? void 0 : _d.on('stageStatusUpdate', (status) => this.stageStatusHandler(meeting, status));
+    }
+    getState() {
+        let label = '';
+        let icon = '';
+        let disabled = false;
+        switch (this.stageStatus) {
+            case 'ON_STAGE': {
+                icon = this.iconPack.leave_stage;
+                label = this.t('stage_request.leave_stage');
+                disabled = false;
+                break;
+            }
+            case 'ACCEPTED_TO_JOIN_STAGE': {
+                icon = this.iconPack.join_stage;
+                label = this.t('stage_request.request');
+                disabled = true;
+                break;
+            }
+            case 'REQUESTED_TO_JOIN_STAGE': {
+                icon = this.iconPack.join_stage;
+                label = this.t('stage_request.requested');
+                disabled = false;
+                break;
+            }
+            default: {
+                icon = this.iconPack.join_stage;
+                label = this.t('stage_request.request');
+                disabled = false;
+                break;
+            }
+        }
+        return { label, disabled, icon };
+    }
+    render() {
+        if (!canRequestToJoinStage(this.meeting))
+            return index$1.h(index$1.Host, { "data-hidden": true });
+        return (index$1.h(index$1.Host, { title: this.state.label }, index$1.h("rtk-tooltip", { placement: "top", kind: "block", label: this.state.label, delay: 600, part: "tooltip" }, index$1.h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, variant: this.variant, label: this.state.label, icon: this.state.icon, onClick: this.stageCallback, disabled: this.state.disabled, showWarning: false }))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkStageToggle.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkStageToggle.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkStageToggle.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkStageToggle.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkStageToggle.prototype, "t", void 0);
+RtkStageToggle.style = RtkStageToggleStyle0;
+
+exports.rtk_stage_toggle = RtkStageToggle;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-d3eba4b9.js');
+const uiStore = require('./ui-store-790d3fec.js');
+const index = require('./index-2154d3c1.js');
+
+const rtkStageCss = ":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;position:relative;overflow:hidden}";
+const RtkStageStyle0 = rtkStageCss;
+
+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 RtkStage = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+    }
+    render() {
+        return (index$1.h(index$1.Host, { key: 'f3dba7a49cfd4c051dfba4cef64430ec670512d8' }, index$1.h("slot", { key: '6500537d6fb1f3da3ede35f4e9aa3f227c71323f' })));
+    }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkStage.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkStage.prototype, "t", void 0);
+RtkStage.style = RtkStageStyle0;
+
+exports.rtk_stage = RtkStage;