@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

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

@@ -0,0 +1,226 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-81ede08e.js');
+const grid = require('./grid-edc342a7.js');
+const index$2 = require('./index-821d14b7.js');
+const index = require('./index-e33a89b6.js');
+
+const rtkMixedGridCss = ":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%;display:flex}main{display:flex;flex:1 1 0%;padding-left:var(--rtk-space-4, 16px)}:host([layout='column']) main{padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}main rtk-tab-bar{margin-right:var(--rtk-space-4, 16px);box-sizing:border-box;display:flex;height:100%;width:var(--rtk-space-16, 64px);flex-direction:column}main #tabs{height:100%;flex:1 1 0%}rtk-button{z-index:10}.grid-width-sm{width:25%}.grid-width-md{width:50%}.grid-width-lg{width:66.666667%}.col{display:flex;flex-direction:column;align-items:center}.tab{display:flex;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);align-items:center;justify-content:center;margin-bottom:var(--rtk-space-2, 8px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.tab.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}.tab img{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);border-radius:var(--rtk-border-radius-sm, 4px)}:host([size='sm']){flex-direction:column}:host([size='sm']) .grid-width-lg,:host([size='sm']) .grid-width-md{height:50%;width:100%;max-width:100%}:host([size='sm']) .grid-width-sm{height:33.333333%;width:100%;max-width:100%}:host([size='sm']) main{display:flex;flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='sm']) rtk-tab-bar{height:var(--rtk-space-12, 48px);width:100%;flex-direction:row}:host([size='sm']) #tabs{flex:1 1 0%}:host([size='sm']) .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}:host([layout='column']){flex-direction:column}:host([layout='column']) main{display:flex;flex:1 1 0%}:host([layout='column']) .grid-width-lg,:host([layout='column']) .grid-width-md{height:50%;max-width:100%;width:100%}:host([layout='column']) .grid-width-sm{height:33.333333%;max-width:100%;width:100%}@media (orientation: portrait){:host{flex-direction:column}:host .grid-width-lg{height:50%;width:100%;max-width:100%}:host .grid-width-md{height:33.333333%;width:100%;max-width:100%}:host .grid-width-sm{height:25%;width:100%;max-width:100%}:host main{flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='md']) main{flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host rtk-tab-bar{height:var(--rtk-space-16, 64px);width:100%;flex-direction:row}:host #tabs{flex:1 1 0%}:host .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}}@media (orientation: landscape){:host{flex-direction:row}:host([size='sm']){flex-direction:row}:host .grid-width-lg{height:50%;width:100%;max-width:100%}:host([size='sm']) .grid-width-sm{height:100%;max-height:100%;width:16.666667%}:host([size='sm']) main{flex:1 1 0%;flex-direction:row;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}:host([size='md']) main{flex:1 1 0%;flex-direction:row;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='sm']) rtk-tab-bar{margin-right:var(--rtk-space-2, 8px);height:100%;width:var(--rtk-space-12, 48px);flex-direction:column}:host #tabs{flex:1 1 0%}:host .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}}";
+const RtkMixedGridStyle0 = rtkMixedGridCss;
+
+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 RtkMixedGrid = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Grid Layout */
+        this.layout = 'row';
+        /** Participants */
+        this.participants = [];
+        /** Pinned Participants */
+        this.pinnedParticipants = [];
+        /** Screenshare Participants */
+        this.screenShareParticipants = [];
+        /** Active Plugins */
+        this.plugins = [];
+        /**
+         * 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;
+    }
+    componentWillLoad() {
+        // initialise states
+        this.initialised = false;
+        this.screenShareParticipantsChanged(this.screenShareParticipants);
+        this.pluginsChanged(this.plugins);
+        this.initialised = true;
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.removeListener('activeTabUpdate', this.activeTabUpdateListener);
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c, _d;
+        if (meeting != null) {
+            if (((_a = meeting.meta) === null || _a === void 0 ? void 0 : _a.selfActiveTab) != undefined) {
+                this.onActiveTabUpdate((_b = meeting.meta.selfActiveTab) === null || _b === void 0 ? void 0 : _b.type, (_c = meeting.meta.selfActiveTab) === null || _c === void 0 ? void 0 : _c.id);
+            }
+            this.activeTabUpdateListener = (activeTab) => {
+                this.onActiveTabUpdate(activeTab === null || activeTab === void 0 ? void 0 : activeTab.type, activeTab === null || activeTab === void 0 ? void 0 : activeTab.id);
+            };
+            (_d = meeting.meta) === null || _d === void 0 ? void 0 : _d.addListener('activeTabUpdate', this.activeTabUpdateListener);
+        }
+    }
+    screenShareParticipantsChanged(participants = []) {
+        // If active tab has already been initialised by spotlight then don't change tab.
+        if (!this.initialised && this.activeTab != null)
+            return;
+        if (this.activeTab == null && participants.length > 0) {
+            this.setActiveTab({ type: 'screenshare', participant: participants[0] });
+        }
+        else {
+            this.revalidateActiveTab();
+        }
+    }
+    pluginsChanged(plugins) {
+        // If active tab has already been initialised by spotlight then don't change tab.
+        if (!this.initialised && this.activeTab != null)
+            return;
+        if (plugins.length > 0) {
+            const lastIndex = plugins.length - 1;
+            this.setActiveTab({ type: 'plugin', plugin: plugins[lastIndex] });
+        }
+        else {
+            this.revalidateActiveTab();
+        }
+    }
+    revalidateActiveTab() {
+        if (this.activeTab != null) {
+            if (this.activeTab.type === 'screenshare') {
+                const { participant } = this.activeTab;
+                if (!this.screenShareParticipants.some((p) => p.id === participant.id)) {
+                    this.reassignActiveTab();
+                }
+            }
+            else {
+                const { plugin } = this.activeTab;
+                if (!this.plugins.some((p) => p.id === plugin.id)) {
+                    this.reassignActiveTab();
+                }
+            }
+        }
+    }
+    setActiveTab(activeTab, shouldUpdateSelfActiveTab = true) {
+        var _a;
+        this.activeTab = activeTab;
+        const id = activeTab.type === 'screenshare' ? activeTab.participant.id : activeTab.plugin.id;
+        if (shouldUpdateSelfActiveTab)
+            (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.setSelfActiveTab({ type: activeTab.type, id }, 0);
+    }
+    reassignActiveTab() {
+        if (this.screenShareParticipants.length > 0) {
+            this.setActiveTab({ type: 'screenshare', participant: this.screenShareParticipants[0] });
+        }
+        else if (this.plugins.length > 0) {
+            const lastIndex = this.plugins.length - 1;
+            this.setActiveTab({ type: 'plugin', plugin: this.plugins[lastIndex] });
+        }
+    }
+    onActiveTabUpdate(type, id) {
+        if (type == undefined)
+            return;
+        if (id == undefined)
+            return;
+        switch (type) {
+            case 'plugin':
+                const plugin = this.plugins.find((p) => p.id === id);
+                if (plugin != undefined)
+                    this.setActiveTab({ type: 'plugin', plugin }, false);
+                break;
+            case 'screenshare':
+                const participant = this.screenShareParticipants.find((ssp) => ssp.id === id);
+                if (participant != undefined)
+                    this.setActiveTab({ type: 'screenshare', participant }, false);
+        }
+    }
+    getTabs() {
+        const screenshares = this.screenShareParticipants.map((participant) => ({
+            type: 'screenshare',
+            participant,
+        }));
+        const plugins = this.plugins.map((plugin) => ({ type: 'plugin', plugin }));
+        return screenshares.concat(plugins);
+    }
+    render() {
+        var _a, _b;
+        const defaults = {
+            meeting: this.meeting,
+            config: this.config,
+            states: this.states,
+            size: this.size,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        return (index$1.h(index$1.Host, { key: '52e26a16c20eee51ac0f3d01d932df88d58acb05' }, index$1.h("main", { key: '1838e7498d579bf70346bf921c9f3966721a1eea', id: "main-view", part: "main-view" }, ((_a = this.getTabs()) === null || _a === void 0 ? void 0 : _a.length) > 1 && (index$1.h("rtk-tab-bar", Object.assign({ key: 'b3f5f77e4b0bd36d12014881f0507c9de6e613af', activeTab: this.activeTab, tabs: this.getTabs(), onTabChange: (e) => this.setActiveTab(e.detail) }, defaults))), index$1.h("div", { id: "tabs", key: "tabs" }, this.screenShareParticipants.map((participant) => {
+            var _a, _b;
+            return (index$1.h(index$2.Render, { element: "rtk-screenshare-view", defaults: defaults, props: {
+                    participant,
+                    key: participant.id,
+                    style: {
+                        display: ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.type) === 'screenshare' &&
+                            ((_b = this.activeTab) === null || _b === void 0 ? void 0 : _b.participant.id) === participant.id
+                            ? 'flex'
+                            : 'none',
+                    },
+                }, childProps: { participant, isScreenShare: true }, deepProps: true }));
+        }), this.plugins.map((plugin) => {
+            var _a, _b;
+            return (index$1.h("rtk-plugin-main", Object.assign({}, defaults, { plugin: plugin, key: plugin.id, style: {
+                    display: ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.type) === 'plugin' && ((_b = this.activeTab) === null || _b === void 0 ? void 0 : _b.plugin.id) === plugin.id
+                        ? 'flex'
+                        : 'none',
+                } })));
+        }))), index$1.h(index$2.Render, { key: 'c3a9ce4706096e385fc522a37e3de7d9d30d1b70', element: "rtk-mixed-grid", defaults: defaults, childProps: {
+                part: 'participants-grid',
+                class: this.gridSize.mixed ? `grid-width-${this.gridSize.mixed}` : 'grid-width-lg',
+                participants: this.participants,
+                pinnedParticipants: this.pinnedParticipants,
+                screenShareParticipants: this.screenShareParticipants,
+                plugins: this.plugins,
+                aspectRatio: this.aspectRatio,
+                gap: this.gap,
+                size: ((_b = this.meeting.meta) === null || _b === void 0 ? void 0 : _b.viewType) === 'AUDIO_ROOM' ? 'md' : 'sm',
+                layout: 'row',
+            }, onlyChildren: true })));
+    }
+    get host() { return index$1.getElement(this); }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "screenShareParticipants": ["screenShareParticipantsChanged"],
+        "plugins": ["pluginsChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkMixedGrid.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMixedGrid.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMixedGrid.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMixedGrid.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMixedGrid.prototype, "t", void 0);
+RtkMixedGrid.style = RtkMixedGridStyle0;
+
+exports.rtk_mixed_grid = RtkMixedGrid;

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

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-81ede08e.js');
+const index = require('./index-e33a89b6.js');
+
+const rtkMoreToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{position:relative;display:flex;flex-direction:column;overflow:visible}.more-menu{position:absolute;right:calc(var(--rtk-space-24, 96px) * -1);bottom:var(--rtk-space-16, 64px);z-index:50;margin-bottom:var(--rtk-space-3, 12px);box-sizing:border-box;max-height:60vh;width:var(--rtk-space-64, 256px);overflow:auto;border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));outline:2px solid transparent;outline-offset:2px;display:flex;flex-direction:column;align-items:stretch}:host([size='sm']) .more-menu{bottom:var(--rtk-space-10, 40px)}.more-menu::-webkit-scrollbar{height:var(--rtk-space-0, 0px);width:var(--rtk-space-1\\.5, 6px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.more-menu::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
+const RtkMoreToggleStyle0 = rtkMoreToggleCss;
+
+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 RtkMoreToggle = 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();
+        this.handleKeyDown = ({ key }) => {
+            if (key === 'Escape') {
+                this.stateUpdate.emit({ activeMoreMenu: false });
+            }
+        };
+        this.handleOnClick = (e) => {
+            if (!e.composedPath().includes(this.host) && this.states.activeMoreMenu) {
+                this.stateUpdate.emit({ activeMoreMenu: false });
+            }
+        };
+        this.toggleMoreMenu = () => {
+            this.stateUpdate.emit({ activeMoreMenu: !this.states.activeMoreMenu });
+        };
+    }
+    connectedCallback() {
+        /** A11y */
+        window.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('click', this.handleOnClick);
+        // };
+    }
+    disconnectedCallback() {
+        window.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('click', this.handleOnClick);
+    }
+    render() {
+        const text = this.t('more');
+        return (index$1.h(index$1.Host, { key: 'cc4c42c7e70920678ccd5504299cc2ea132ba082', title: text }, this.states.activeMoreMenu && (index$1.h("div", { key: '4e15d624377561cc3bfac660822041079387d15c', class: "more-menu" }, index$1.h("slot", { key: '83c8c81d94edbed4d30143fe4a0a9fc77f7c3883', name: "more-elements" }))), index$1.h("rtk-controlbar-button", { key: '1b88da49b3bd62fc05f43e83743935cbe1848bdf', size: this.size, iconPack: this.iconPack, onClick: (e) => {
+                e.stopPropagation();
+                this.toggleMoreMenu();
+            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), index$1.h("slot", { key: '06155b80eabc3aa0c8495c5bc447af457acdd038', name: "expanded" })));
+    }
+    get host() { return index$1.getElement(this); }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkMoreToggle.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMoreToggle.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMoreToggle.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMoreToggle.prototype, "t", void 0);
+RtkMoreToggle.style = RtkMoreToggleStyle0;
+
+exports.rtk_more_toggle = RtkMoreToggle;

package/dist/cjs/rtk-mute-all-button.cjs.entry.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-81ede08e.js');
+const index = require('./index-e33a89b6.js');
+
+const rtkMuteAllButtonCss = ":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}";
+const RtkMuteAllButtonStyle0 = rtkMuteAllButtonCss;
+
+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 RtkMuteAllButton = 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.canDisable = false;
+        this.permissionsUpdateListener = () => {
+            var _a;
+            this.canDisable = !!((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.canDisableParticipantAudio);
+        };
+        this.onMuteAll = () => {
+            this.stateUpdate.emit({ activeMuteAllConfirmation: true });
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.permissions) === null || _c === void 0 ? void 0 : _c.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        this.canDisable = !!(meeting === null || meeting === void 0 ? void 0 : meeting.self.permissions.canDisableParticipantAudio);
+        meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    render() {
+        if (!this.canDisable) {
+            return null;
+        }
+        const label = this.t('mute_all');
+        return (index$1.h(index$1.Host, { title: label }, index$1.h("rtk-tooltip", { kind: "block", label: label, part: "tooltip" }, index$1.h("rtk-controlbar-button", { part: "controlbar-button", icon: this.iconPack.speaker_off, label: label, size: this.size, iconPack: this.iconPack, variant: this.variant, onClick: this.onMuteAll }))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkMuteAllButton.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMuteAllButton.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMuteAllButton.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkMuteAllButton.prototype, "t", void 0);
+RtkMuteAllButton.style = RtkMuteAllButtonStyle0;
+
+exports.rtk_mute_all_button = RtkMuteAllButton;

package/dist/cjs/rtk-name-tag.cjs.entry.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const string = require('./string-a410fab6.js');
+const uiStore = require('./ui-store-81ede08e.js');
+const index = require('./index-e33a89b6.js');
+
+const rtkNameTagCss = ":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:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);font-size:14px;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}span.name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}::slotted(rtk-audio-visualizer[slot='start']){margin-right:var(--rtk-space-1\\.5, 6px)}::slotted(rtk-audio-visualizer[slot='end']){margin-left:var(--rtk-space-1\\.5, 6px)}:host([size='sm']){font-size:12px;--tw-bg-opacity:0.6}:host([variant='text']){background-color:transparent;padding:var(--rtk-space-0, 0px)}";
+const RtkNameTagStyle0 = rtkNameTagCss;
+
+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 RtkNameTag = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Whether it is used in a screen share view */
+        this.isScreenShare = false;
+        /** Name tag variant */
+        this.variant = 'default';
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.length = 13;
+    }
+    sizeChanged(size) {
+        this.length = size === 'sm' ? 8 : 13;
+    }
+    formatNameTag(name, isSelf) {
+        return !this.isScreenShare
+            ? isSelf
+                ? `${string.shorten(name, this.length - 3)} (${this.t('you')})`
+                : string.shorten(name, this.length)
+            : isSelf
+                ? `${this.t('screen')} - ${string.shorten(name, this.length - 3)} (${this.t('you')})`
+                : `${this.t('screen')} - ${string.shorten(name, this.length)}`;
+    }
+    render() {
+        var _a, _b, _c;
+        const name = string.formatName(((_a = this.participant) === null || _a === void 0 ? void 0 : _a.name) || '');
+        const isSelf = ((_b = this.participant) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self.id);
+        return (index$1.h(index$1.Host, { key: '52aa7e44f5a12d953eb5637346fff58cd40ed0bb', title: name }, index$1.h("slot", { key: '24d7325456abe1ec7051c44eaf6067446e459f2d', name: "start" }), index$1.h("span", { key: 'c2e7c6d2ca6ab1f5e097ccccad09b52fcc9c846a', class: "name" }, this.formatNameTag(name, isSelf)), index$1.h("slot", { key: '586b6e09b16c88cc219f45843ac8dfd746c0482a', name: "end" })));
+    }
+    static get watchers() { return {
+        "size": ["sizeChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkNameTag.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkNameTag.prototype, "size", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkNameTag.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkNameTag.prototype, "t", void 0);
+RtkNameTag.style = RtkNameTagStyle0;
+
+exports.rtk_name_tag = RtkNameTag;

package/dist/cjs/rtk-network-indicator.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-81ede08e.js');
+const index = require('./index-e33a89b6.js');
+
+const rtkNetworkIndicatorCss = ":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:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}rtk-icon{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);z-index:10;height:100%;width:100%;--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}rtk-icon.good{--tw-text-opacity:1;color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-text-opacity))}rtk-icon.poor{--tw-text-opacity:1;color:rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-text-opacity))}rtk-icon.poorest{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='md']){height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']){height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}.bg-signal{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);z-index:0;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}";
+const RtkNetworkIndicatorStyle0 = rtkNetworkIndicatorCss;
+
+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 RtkNetworkIndicator = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        /** Is for screenshare */
+        this.isScreenShare = false;
+        this.score = 10;
+        this.onMediaScoreUpdate = ({ kind, isScreenshare, score }) => {
+            if (kind === 'video' || (this.isScreenShare && isScreenshare)) {
+                this.score = score;
+            }
+        };
+    }
+    connectedCallback() {
+        this.participantChanged(this.participant);
+    }
+    participantChanged(participant) {
+        if (!participant)
+            return;
+        participant.addListener('mediaScoreUpdate', this.onMediaScoreUpdate);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.participant) === null || _a === void 0 ? void 0 : _a.removeListener('mediaScoreUpdate', this.onMediaScoreUpdate);
+    }
+    render() {
+        let signal_strength = Math.round(this.score / 2);
+        let signal_status = 'good';
+        // make sure signal strength is within bounds [1,3]
+        // do not show if it is good
+        if (signal_strength > 3) {
+            return null;
+        }
+        else if (signal_strength < 1) {
+            signal_strength = 1;
+        }
+        switch (signal_strength) {
+            case 3:
+            case 2:
+                signal_status = 'poor';
+                break;
+            case 1:
+                signal_status = 'poorest';
+        }
+        return (index$1.h(index$1.Host, null, index$1.h("rtk-icon", { icon: this.iconPack[`signal_${signal_strength}`], class: signal_status }), index$1.h("rtk-icon", { icon: this.iconPack.signal_5, class: "bg-signal" })));
+    }
+    static get watchers() { return {
+        "participant": ["participantChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkNetworkIndicator.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkNetworkIndicator.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkNetworkIndicator.prototype, "t", void 0);
+RtkNetworkIndicator.style = RtkNetworkIndicatorStyle0;
+
+exports.rtk_network_indicator = RtkNetworkIndicator;

package/dist/cjs/rtk-participant-count.cjs.entry.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-81ede08e.js');
+const index = require('./index-e33a89b6.js');
+
+const rtkParticipantCountCss = ":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:inline-flex;height:var(--rtk-space-10, 40px);-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center}:host([data-hidden]){display:none}:host([size='sm']){font-size:12px}rtk-icon{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}:host([size='sm']) rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}";
+const RtkParticipantCountStyle0 = rtkParticipantCountCss;
+
+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 RtkParticipantCount = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language */
+        this.t = uiStore.useLanguage();
+        this.participantCount = 0;
+        this.isViewer = false;
+        this.disconnectMeeting = (meeting) => {
+            if (meeting != null && this.countListener != null) {
+                meeting.participants.joined.removeListener('participantJoined', this.countListener);
+                meeting.participants.joined.removeListener('participantLeft', this.countListener);
+                (meeting === null || meeting === void 0 ? void 0 : meeting.stage) &&
+                    this.stageUpdateListener &&
+                    meeting.stage.removeListener('stageStatusUpdate', this.stageUpdateListener);
+                meeting.self.removeListener('roomJoined', this.countListener);
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        this.disconnectMeeting(this.meeting);
+    }
+    meetingChanged(meeting, oldMeeting) {
+        this.disconnectMeeting(oldMeeting);
+        if (meeting != null) {
+            this.countListener = () => {
+                this.participantCount =
+                    meeting.participants.joined.size + (meeting.self.roomJoined ? 1 : 0);
+            };
+            this.countListener();
+            this.isViewer = uiStore.isLiveStreamViewer(this.meeting);
+            meeting.participants.joined.addListener('participantJoined', this.countListener);
+            meeting.participants.joined.addListener('participantLeft', this.countListener);
+            if (meeting === null || meeting === void 0 ? void 0 : meeting.stage) {
+                this.stageUpdateListener = () => {
+                    this.isViewer = uiStore.isLiveStreamViewer(this.meeting);
+                };
+                meeting === null || meeting === void 0 ? void 0 : meeting.stage.addListener('stageStatusUpdate', this.stageUpdateListener);
+            }
+            meeting.self.addListener('roomJoined', this.countListener);
+        }
+    }
+    render() {
+        if (this.isViewer)
+            return index$1.h(index$1.Host, { "data-hidden": true });
+        return (index$1.h(index$1.Host, { tabIndex: 0, role: "log", "aria-label": `${this.participantCount} ${this.t('participants')}` }, index$1.h("rtk-icon", { icon: this.iconPack.people, tabIndex: -1, "aria-hidden": true, part: "icon" }), this.participantCount));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    index.SyncWithStore()
+], RtkParticipantCount.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkParticipantCount.prototype, "iconPack", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkParticipantCount.prototype, "t", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkParticipantCount.prototype, "size", void 0);
+RtkParticipantCount.style = RtkParticipantCountStyle0;
+
+exports.rtk_participant_count = RtkParticipantCount;