@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

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

@@ -0,0 +1,186 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './ui-store-9e11a7e4.js';
+import { S as SyncWithStore } from './index-7c11af40.js';
+import { d as debounce } from './debounce-ea0579b2.js';
+import './isObjectLike-773b9473.js';
+
+const rtkParticipantsCss = ":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)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;height:100%;width:100%;flex-direction:column;font-size:14px}*{box-sizing:border-box}.ctr{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);box-sizing:border-box;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-0, 0px);padding-bottom:var(--rtk-space-0, 0px);overflow-y:auto;flex-grow:1;flex-basis:0}.ctr.virtualised{overflow-y:hidden}.search{position:sticky;box-sizing:border-box;display:flex;align-items:center;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));margin-left:var(--rtk-space-3, 12px);margin-right:var(--rtk-space-3, 12px);margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px)}.search rtk-icon{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}.search input{box-sizing:border-box;height:var(--rtk-space-9, 36px);width:100%;padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;--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-1000, 255 255 255));outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);font-size:14px}.search input::-moz-placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.search input::placeholder{color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}:host([size='md']) .search{margin-top:var(--rtk-space-4, 16px) !important;margin-bottom:var(--rtk-space-4, 16px) !important}:host([size='sm']) .search{margin-top:var(--rtk-space-4, 16px) !important;margin-bottom:var(--rtk-space-4, 16px) !important}.no-pending-requests{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);text-align:center;font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}";
+const RtkParticipantsStyle0 = rtkParticipantsCss;
+
+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 RtkParticipants = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Config */
+        this.config = defaultConfig;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Default section */
+        this.defaultParticipantsTabId = 'stage-list';
+        /** Language */
+        this.t = useLanguage();
+        this.currentParticipantsTabId = this.defaultParticipantsTabId;
+        this.tabs = [];
+        this.hasRequests = false;
+        this.search = '';
+        this.updateParticipantCountsInTabs = debounce(() => {
+            var _a;
+            // totalRequests consist of stage requests & waitlisted ones
+            let totalRequests = ((_a = this.meeting.participants.waitlisted) === null || _a === void 0 ? void 0 : _a.size) || 0;
+            let totalOnStage = 0;
+            let totalViewers = 0;
+            this.meeting.participants.joined.toArray().forEach((participant) => {
+                if (participant.stageStatus === 'ON_STAGE') {
+                    totalOnStage++;
+                }
+                if (participant.stageStatus === 'OFF_STAGE') {
+                    totalViewers++;
+                }
+                if (participant.stageStatus === 'REQUESTED_TO_JOIN_STAGE') {
+                    totalRequests++;
+                    totalViewers++;
+                }
+                if (participant.stageStatus === 'ACCEPTED_TO_JOIN_STAGE') {
+                    totalViewers++;
+                }
+            });
+            if (this.meeting.self.stageStatus === 'ON_STAGE') {
+                totalOnStage++;
+            }
+            if (this.meeting.self.stageStatus === 'OFF_STAGE') {
+                totalViewers++;
+            }
+            if (this.meeting.self.stageStatus === 'REQUESTED_TO_JOIN_STAGE') {
+                totalRequests++;
+                totalViewers++;
+            }
+            if (this.meeting.self.stageStatus === 'ACCEPTED_TO_JOIN_STAGE') {
+                totalViewers++;
+            }
+            const tabs = [];
+            if (this.shouldShowRequestsTab()) {
+                tabs.push({
+                    id: 'requests',
+                    name: (h("span", null, this.t('requests'), "\u00A0", h("span", { class: `tab-participant-count-badge ${totalRequests > 0 ? 'requests-pending' : ''} ${this.currentParticipantsTabId === 'requests' ? 'selected-tab' : ''}` }, totalRequests))),
+                });
+            }
+            tabs.push({
+                id: 'stage-list',
+                name: (h("span", null, this.t('participants'), "\u00A0", h("span", { class: `tab-participant-count-badge ${this.currentParticipantsTabId === 'stage-list' ? 'selected-tab' : ''}` }, totalOnStage))),
+            });
+            if (this.shouldShowViewersTab()) {
+                tabs.push({
+                    id: 'viewer-list',
+                    name: (h("span", null, this.t('viewers'), "\u00A0", h("span", { class: `tab-participant-count-badge ${this.currentParticipantsTabId === 'viewer-list' ? 'selected-tab' : ''}` }, totalViewers))),
+                });
+            }
+            this.tabs = tabs;
+            this.hasRequests = totalRequests > 0;
+        });
+        this.onSearchInput = (e) => {
+            this.search = e.target.value;
+        };
+        this.shouldShowViewersTab = () => {
+            var _a, _b, _c;
+            return (_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.stageEnabled;
+        };
+        this.shouldShowRequestsTab = () => {
+            var _a;
+            let shouldShowWaitlist = false;
+            if (this.meeting.meta.viewType === 'LIVESTREAM') {
+                shouldShowWaitlist = false;
+            }
+            else {
+                shouldShowWaitlist =
+                    ((_a = this.meeting.self.config.waitingRoom) === null || _a === void 0 ? void 0 : _a.isEnabled) &&
+                        this.meeting.self.permissions.acceptWaitingRequests;
+            }
+            return ((this.meeting.self.permissions.stageEnabled &&
+                this.meeting.self.permissions.acceptStageRequests) ||
+                shouldShowWaitlist);
+        };
+        this.viewSection = (section) => {
+            this.currentParticipantsTabId = section;
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        if (this.meeting == null)
+            return;
+        this.meeting.participants.joined.off('participantJoined', this.updateParticipantCountsInTabs);
+        this.meeting.participants.joined.off('participantsUpdate', this.updateParticipantCountsInTabs);
+        this.meeting.participants.joined.off('participantLeft', this.updateParticipantCountsInTabs);
+        this.meeting.participants.joined.off('stageStatusUpdate', this.updateParticipantCountsInTabs);
+        this.meeting.stage.off('stageStatusUpdate', this.updateParticipantCountsInTabs);
+        this.meeting.participants.waitlisted.off('participantJoined', this.updateParticipantCountsInTabs);
+        this.meeting.participants.waitlisted.off('participantLeft', this.updateParticipantCountsInTabs);
+        this.meeting.participants.waitlisted.off('stageStatusUpdate', this.updateParticipantCountsInTabs);
+    }
+    meetingChanged(meeting) {
+        if (meeting == null)
+            return;
+        meeting.participants.joined.on('participantJoined', this.updateParticipantCountsInTabs);
+        meeting.participants.joined.on('participantsUpdate', this.updateParticipantCountsInTabs);
+        meeting.participants.joined.on('participantLeft', this.updateParticipantCountsInTabs);
+        meeting.participants.joined.on('stageStatusUpdate', this.updateParticipantCountsInTabs);
+        meeting.stage.on('stageStatusUpdate', this.updateParticipantCountsInTabs);
+        meeting.participants.waitlisted.on('participantJoined', this.updateParticipantCountsInTabs);
+        meeting.participants.waitlisted.on('participantLeft', this.updateParticipantCountsInTabs);
+        meeting.participants.waitlisted.on('stageStatusUpdate', this.updateParticipantCountsInTabs);
+        this.updateParticipantCountsInTabs();
+    }
+    currentParticipantsTabIdChanged() {
+        this.stateUpdate.emit({
+            participantsTabId: this.currentParticipantsTabId,
+        });
+        this.updateParticipantCountsInTabs();
+    }
+    render() {
+        const defaults = {
+            meeting: this.meeting,
+            states: this.states,
+            config: this.config,
+            size: this.size,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        return (h(Host, { key: '9957561cf7ae9a0a28d62bce7102dbb6145aaeda' }, h("div", { key: '5960602654c8d993afc99ce22582514d1438182b', class: "search", part: "search" }, h("rtk-icon", { key: 'cc94e5fd1e5540b893f2bdb5b4ad4e3563d37424', icon: this.iconPack.search, part: "search-icon" }), h("input", { key: 'c0a723db1be4d4a8c91907f24078678561a9bfb9', type: "search", autocomplete: "off", placeholder: this.t('search'), onInput: this.onSearchInput, part: "search-input" })), h("slot", { key: '7f145408b13056ad7e95b3469dc009ae46e73978', name: "start" }), h("div", { key: '465b74c71cd0239832ef60a0973537c71b394007', class: `ctr scrollbar ${this.currentParticipantsTabId !== 'requests' ? 'virtualised' : ''}`, part: "container" }, h("rtk-sidebar-ui", { key: 'c6395b16482d114f82af07df85faeb1dc2584c4a', tabs: this.tabs, currentTab: this.currentParticipantsTabId, view: "full-screen", hideHeader: true, hideCloseAction: true, style: { position: 'relative' }, onTabChange: (e) => {
+                this.viewSection(e.detail);
+                e.stopPropagation();
+            } }, (!this.currentParticipantsTabId || this.currentParticipantsTabId === 'stage-list') && (h("div", { key: '20d7a91bed3ea3047614d52ba30c5e832db6fce1', slot: "stage-list", style: { marginTop: '10px', height: '100%' } }, h("rtk-participants-stage-list", Object.assign({ key: '160ddba969e95e270e1443f11d48d989b4ee8561' }, defaults, { search: this.search, hideHeader: true })))), this.currentParticipantsTabId === 'requests' && (h("div", { key: '52d4eae9480d00972b61c0e2964fcb8fc5498c89', slot: "requests", style: { marginTop: '10px', height: '100%' } }, !this.hasRequests && (h("div", { key: '5690208be803224c202d81563be0fae45396dbeb', class: "no-pending-requests" }, this.t('participants.no_pending_requests'))), h("rtk-participants-stage-queue", Object.assign({ key: 'db4763d312a191c48279fa25168a1f363f574edc' }, defaults)), h("rtk-participants-waiting-list", Object.assign({ key: 'f2b4ad3ad303b1c8a5314b5dd55de16c9c168c19' }, defaults)))), this.currentParticipantsTabId === 'viewer-list' && (h("div", { key: 'a262369c69afd77e101ec10934a9d4065590e748', slot: "viewer-list", style: { marginTop: '10px', height: '100%' } }, h("rtk-participants-viewer-list", Object.assign({ key: '0142b3855f357213ba24260091e5e7d48acb268d' }, defaults, { search: this.search, hideHeader: true })))))), h("slot", { key: 'eae12c410cbe1282da2107420b4d44f66af5dd35', name: "end" })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "currentParticipantsTabId": ["currentParticipantsTabIdChanged"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkParticipants.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipants.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipants.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipants.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipants.prototype, "t", void 0);
+RtkParticipants.style = RtkParticipantsStyle0;
+
+export { RtkParticipants as rtk_participants };

package/dist/esm/rtk-pip-toggle.entry.js

@@ -0,0 +1,84 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './ui-store-9e11a7e4.js';
+import { S as SyncWithStore } from './index-7c11af40.js';
+
+const rtkPipToggleCss = ":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 RtkPipToggleStyle0 = rtkPipToggleCss;
+
+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 RtkPipToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Config */
+        this.config = defaultConfig;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.pipSupported = false;
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c;
+        if (!meeting)
+            return;
+        // Check if PiP is supported and enabled
+        this.pipSupported =
+            ((_a = meeting.participants.pip) === null || _a === void 0 ? void 0 : _a.isSupported()) &&
+                ((_b = meeting.self.config) === null || _b === void 0 ? void 0 : _b.pipMode) &&
+                ((_c = meeting.self.config) === null || _c === void 0 ? void 0 : _c.viewType) !== 'LIVESTREAM';
+    }
+    togglePip() {
+        if (!this.meeting.participants.pip)
+            return;
+        // Not active, activate
+        if (this.meeting.participants.pip.isActive) {
+            this.meeting.participants.pip.disable();
+        }
+        else {
+            this.meeting.participants.pip.enable();
+        }
+        this.stateUpdate.emit({ activeMoreMenu: false });
+    }
+    render() {
+        if (!this.pipSupported)
+            return h(Host, { "data-hidden": true });
+        const pipEnabled = this.meeting.participants.pip.isActive;
+        return (h(Host, { role: "log", "aria-label": `Picture-in-Picture mode` }, h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, onClick: () => this.togglePip(), icon: pipEnabled ? this.iconPack.pip_on : this.iconPack.pip_off, label: pipEnabled ? this.t('pip_off') : this.t('pip_on'), variant: this.variant })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkPipToggle.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPipToggle.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPipToggle.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPipToggle.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPipToggle.prototype, "t", void 0);
+RtkPipToggle.style = RtkPipToggleStyle0;
+
+export { RtkPipToggle as rtk_pip_toggle };

package/dist/esm/rtk-plugin-main_2.entry.js

@@ -0,0 +1,191 @@
+import { r as registerInstance, w as writeTask, h, H as Host, c as createEvent } from './index-c1fb98bb.js';
+import { a as defaultIconPack, c as useLanguage, d as defaultConfig } from './ui-store-9e11a7e4.js';
+import { S as SyncWithStore } from './index-7c11af40.js';
+import { f as formatName, s as shorten } from './string-ed1380fb.js';
+
+const rtkPluginMainCss = ":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%;flex-direction:column;overflow:hidden;border-radius:var(--rtk-border-radius-lg, 12px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}header{display:flex;height:var(--rtk-space-8, 32px);align-items:center;justify-content:space-between;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}header>div{display:flex;align-items:center}rtk-button{display:flex;height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);flex-direction:column;align-items:center;border-radius:9999px}rtk-button rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}iframe{display:block;flex:1 1 0%;margin:var(--rtk-space-0, 0px);border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);outline:2px solid transparent;outline-offset:2px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-video-bg, 24 24 24) / var(--tw-bg-opacity))}.iframe-container{position:relative;height:100%;width:100%}.block-inputs{position:absolute;z-index:10;height:100%;width:100%;border-left-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-lg, 4px);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-border-opacity))}iframe{height:100%;width:100%}";
+const RtkPluginMainStyle0 = rtkPluginMainCss;
+
+var __decorate$1 = (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 RtkPluginMain = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.canClosePlugin = false;
+        this.viewModeEnabled = false;
+        this.onIframeRef = (el) => {
+            var _a;
+            if (el === this.iframeEl)
+                return;
+            this.iframeEl = el;
+            (_a = this.plugin) === null || _a === void 0 ? void 0 : _a.addPluginView(el, 'plugin-main');
+        };
+        this.canInteractWithPlugin = () => {
+            const pluginId = this.plugin.id;
+            if (!pluginId)
+                return true;
+            /**
+             * For v1 canStartPlugins is the controller
+             * For v2 the controller is within plugin config
+             */
+            const pluginConfig = this.meeting.self.permissions.plugins
+                .config[pluginId];
+            /**
+             * In some cases plugin config is undefined, specifically seen in cases of self
+             * hosted plugins, in that case just return true
+             */
+            if (!pluginConfig)
+                return true;
+            /**
+             * In V2 config currently in dev portal when a preset is saved without opening the
+             * config menu then it gets added with access control undefined, to handle this case
+             * the following has been done
+             */
+            if (!pluginConfig.accessControl)
+                return true;
+            /**
+             * If access conrol is defined then return the permission
+             */
+            return pluginConfig.accessControl === 'FULL_ACCESS';
+        };
+    }
+    componentDidLoad() {
+        this.meetingChanged(this.meeting);
+        this.pluginChanged(this.plugin);
+    }
+    meetingChanged(meeting) {
+        if (meeting == undefined)
+            return;
+        const enabled = this.canInteractWithPlugin();
+        this.viewModeEnabled = !enabled;
+        writeTask(() => {
+            this.canClosePlugin =
+                meeting.self.permissions.plugins.canClose || this.plugin.enabledBy === meeting.self.id;
+        });
+    }
+    pluginChanged(plugin) {
+        this.toggleViewModeListener = (enable) => {
+            const enabled = this.canInteractWithPlugin();
+            if (enabled)
+                return;
+            this.viewModeEnabled = enable;
+        };
+        if (plugin != null) {
+            this.iframeEl && plugin.addPluginView(this.iframeEl, 'plugin-main');
+            plugin.addListener('toggleViewMode', this.toggleViewModeListener);
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.plugin) === null || _a === void 0 ? void 0 : _a.removePluginView('plugin-main');
+        (_b = this.plugin) === null || _b === void 0 ? void 0 : _b.removeListener('toggleViewMode', this.toggleViewModeListener);
+    }
+    render() {
+        if (this.plugin == null)
+            return null;
+        return (h(Host, null, h("header", { part: "header" }, h("div", null, this.plugin.name), this.canClosePlugin && (h("div", null, h("rtk-button", { kind: "icon", onClick: () => this.plugin.deactivate(), part: "button" }, h("rtk-icon", { icon: this.iconPack.dismiss }))))), h("div", { class: 'iframe-container' }, !(this.canInteractWithPlugin() || !this.viewModeEnabled) ? (h("div", { class: "block-inputs" })) : null, h("iframe", { ref: (el) => this.onIframeRef(el), part: "iframe" }))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "plugin": ["pluginChanged"]
+    }; }
+};
+__decorate$1([
+    SyncWithStore()
+], RtkPluginMain.prototype, "meeting", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkPluginMain.prototype, "iconPack", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkPluginMain.prototype, "t", void 0);
+RtkPluginMain.style = RtkPluginMainStyle0;
+
+const rtkTabBarCss = ".scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{box-sizing:border-box;display:flex;height:100%;width:var(--rtk-space-16, 64px);flex-direction:column;gap:var(--rtk-space-2, 8px);overflow-y:auto;font-family:var(--rtk-font-family, sans-serif)}rtk-button{z-index:10}.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)}.tab .name{margin-top:var(--rtk-space-0\\.5, 2px)}:host([size='sm']){flex-direction:column;margin-top:var(--rtk-space-4, 16px);height:var(--rtk-space-16, 64px);width:100%;flex-direction:row;gap:var(--rtk-space-2, 8px);overflow-x:auto}:host([size='sm']) .tab{margin:var(--rtk-space-0, 0px);text-overflow:clip;min-width:100px;height:40px}:host([size='sm']) .tab .col{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-2, 8px)}:host([size='sm']) .tab .col img,:host([size='sm']) .tab .col rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']) .tab .col .name{gap:var(--rtk-space-1, 4px)}:host([layout='column']){flex-direction:column}:host([layout='column']) .aside{flex:2;max-width:100%;width:100%}@media (orientation: portrait){:host([size='sm']){margin-top:var(--rtk-space-2, 8px);height:var(--rtk-space-16, 64px);width:100%;flex-direction:row;transition:all 0.3s linear}:host([size='md']){height:var(--rtk-space-24, 96px);width:100%;flex-direction:row;transition:all 0.3s linear}:host .tab{margin:var(--rtk-space-0, 0px)}}@media (orientation: landscape){:host([size='sm']){margin-right:var(--rtk-space-4, 16px);height:100%;width:var(--rtk-space-14, 56px);flex-direction:row;gap:var(--rtk-space-2, 8px);overflow-y:auto;overflow-x:hidden;transition:all 0.3s linear}:host([size='md']){margin-right:var(--rtk-space-4, 16px);height:100%;width:var(--rtk-space-14, 56px);flex-direction:row;gap:var(--rtk-space-2, 8px);overflow-y:auto;overflow-x:hidden;transition:all 0.3s linear}:host .tab{margin:var(--rtk-space-0, 0px)}:host([size='sm']) .tab{margin:var(--rtk-space-0, 0px);width:100%;text-overflow:clip;min-width:0px;min-height:40px}:host([size='sm']) .tab .col{display:flex;flex-direction:column;align-items:center;gap:var(--rtk-space-2, 8px);font-size:10px}:host([size='sm']) .tab .col img,:host([size='sm']) .tab .col rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px)}:host([size='sm']) .tab .col .name{gap:var(--rtk-space-1, 4px)}}";
+const RtkTabBarStyle0 = rtkTabBarCss;
+
+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 RtkTabBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabChange = createEvent(this, "tabChange", 7);
+        /** UI Config */
+        this.config = defaultConfig;
+        /** Grid Layout */
+        this.layout = 'row';
+        /** Icon Pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Tabs */
+        this.tabs = [];
+    }
+    render() {
+        return (h(Host, { key: 'd80fd5c45bdae491e9bfe398f7ba9d7ede356e02' }, h("rtk-spotlight-indicator", { key: '17d7a10e6d34c0b89fe5b7b5270eb24116e1c237', meeting: this.meeting, iconPack: this.iconPack, t: this.t, size: this.size }), this.tabs.map((tab) => {
+            var _a, _b, _c, _d, _e;
+            let isActive = false;
+            if (((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.type) === 'plugin' &&
+                tab.plugin &&
+                ((_b = this.activeTab) === null || _b === void 0 ? void 0 : _b.plugin.id) === tab.plugin.id)
+                isActive = true;
+            else if (((_c = this.activeTab) === null || _c === void 0 ? void 0 : _c.type) === 'screenshare' &&
+                tab.participant &&
+                ((_d = this.activeTab) === null || _d === void 0 ? void 0 : _d.participant.id) === tab.participant.id)
+                isActive = true;
+            if (tab.type === 'screenshare') {
+                const participant = tab.participant;
+                const name = formatName(participant.name);
+                return (h("rtk-button", { title: `${name}'s Screen Share`, key: tab.participant.id, kind: "icon", variant: isActive ? 'primary' : 'secondary', class: {
+                        tab: true,
+                        active: isActive,
+                    }, onClick: () => this.tabChange.emit(tab) }, h("div", { class: "center col" }, h("rtk-icon", { icon: this.iconPack.share_screen_person }), h("span", { class: "name" }, participant.id === ((_e = this.meeting) === null || _e === void 0 ? void 0 : _e.self.id) ? this.t('you') : shorten(name, 6)))));
+            }
+            else if (tab.type === 'plugin') {
+                const plugin = tab.plugin;
+                return (h("rtk-button", { title: plugin.name, key: plugin.id, kind: "icon", variant: isActive ? 'primary' : 'secondary', class: {
+                        tab: true,
+                        active: isActive,
+                    }, onClick: () => this.tabChange.emit(tab) }, h("div", { class: "center col" }, h("img", { src: plugin.picture }), h("span", { class: "name" }, shorten(plugin.name, 6)))));
+            }
+        })));
+    }
+};
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTabBar.prototype, "t", void 0);
+RtkTabBar.style = RtkTabBarStyle0;
+
+export { RtkPluginMain as rtk_plugin_main, RtkTabBar as rtk_tab_bar };

package/dist/esm/rtk-plugins-toggle.entry.js

@@ -0,0 +1,102 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1fb98bb.js';
+import { a as defaultIconPack, c as useLanguage } from './ui-store-9e11a7e4.js';
+import { b as canViewPlugins } from './sidebar-5df37ae6.js';
+import { S as SyncWithStore } from './index-7c11af40.js';
+
+const rtkPluginsToggleCss = ":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 RtkPluginsToggleStyle0 = rtkPluginsToggleCss;
+
+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 RtkPluginsToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.pluginsActive = false;
+        this.canViewPlugins = false;
+        this.updateCanView = () => {
+            this.canViewPlugins = canViewPlugins(this.meeting);
+        };
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.removeListener('stageStatusUpdate', this.updateCanView);
+        (_d = (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.permissions.removeListener('pluginsUpdate', this.updateCanView);
+    }
+    connectedCallback() {
+        this.statesChanged(this.states);
+        this.meetingChanged(this.meeting);
+    }
+    meetingChanged(meeting) {
+        var _a, _b;
+        if (meeting == null)
+            return;
+        this.canViewPlugins = canViewPlugins(meeting);
+        (_a = meeting === null || meeting === void 0 ? void 0 : meeting.stage) === null || _a === void 0 ? void 0 : _a.on('stageStatusUpdate', this.updateCanView);
+        (_b = meeting === null || meeting === void 0 ? void 0 : meeting.self) === null || _b === void 0 ? void 0 : _b.permissions.addListener('pluginsUpdate', this.updateCanView);
+    }
+    statesChanged(states) {
+        if (states != null) {
+            this.pluginsActive = states.activeSidebar === true && states.sidebar === 'plugins';
+        }
+    }
+    togglePlugins() {
+        const states = this.states;
+        this.pluginsActive = !((states === null || states === void 0 ? void 0 : states.activeSidebar) && (states === null || states === void 0 ? void 0 : states.sidebar) === 'plugins');
+        this.stateUpdate.emit({
+            activeSidebar: this.pluginsActive,
+            sidebar: this.pluginsActive ? 'plugins' : undefined,
+            activeMoreMenu: false,
+            activeAI: false,
+        });
+    }
+    handlePluginsActiveChange() {
+        // Plugins sidebar closed without opening a different sidebar
+        if (!this.pluginsActive && !this.states.activeSidebar) {
+            this.buttonEl.focus();
+        }
+    }
+    render() {
+        if (!this.canViewPlugins)
+            return h(Host, { "data-hidden": true });
+        const text = this.t('plugins');
+        return (h(Host, { title: text }, h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.pluginsActive }, onClick: () => this.togglePlugins(), icon: this.iconPack.rocket, label: text, variant: this.variant })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "states": ["statesChanged"],
+        "pluginsActive": ["handlePluginsActiveChange"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkPluginsToggle.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPluginsToggle.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPluginsToggle.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPluginsToggle.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPluginsToggle.prototype, "t", void 0);
+RtkPluginsToggle.style = RtkPluginsToggleStyle0;
+
+export { RtkPluginsToggle as rtk_plugins_toggle };