@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/components/p-ee490919.js

@@ -0,0 +1,148 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$7 } from './p-2f10ccec.js';
+import { d as defineCustomElement$6 } from './p-92a1602c.js';
+import { d as defineCustomElement$5 } from './p-400d8f0d.js';
+import { d as defineCustomElement$4 } from './p-cf6253c5.js';
+import { d as defineCustomElement$3 } from './p-3d754c34.js';
+import { d as defineCustomElement$2 } from './p-bd20259b.js';
+import { d as defineCustomElement$1 } from './p-4f0299cf.js';
+
+const rtkChannelHeaderCss = "header{box-sizing:border-box;height:var(--rtk-space-16, 64px);width:100%;padding:var(--rtk-space-4, 16px);display:flex;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-sm, 1px);border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-bottom-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-border-opacity))}header.searching{justify-content:flex-end}header.searching .channel-details{display:none}header .channel-details{display:flex;flex-grow:1;flex-direction:column;justify-content:center;height:var(--rtk-space-9, 36px);width:var(--rtk-space-1, 4px)}header .channel-details .name{font-weight:500}header .channel-details .members{margin-top:var(--rtk-space-0\\.5, 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}header .channel-tools{display:flex;flex-shrink:0;justify-content:flex-end;gap:var(--rtk-space-1, 4px);min-width:var(--rtk-space-24, 96px)}header .channel-tools rtk-tooltip{height:var(--rtk-space-8, 32px);width:var(--rtk-space-10, 40px);display:flex}header .search-input{height:var(--rtk-space-8, 32px);width:var(--rtk-space-48, 192px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}header .name{font-size:16px}header .br-primary-btn{background-color:transparent}header .br-primary-btn:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}@media (orientation: landscape) and (min-width: 400px){header.searching .channel-details{display:flex}}.back-btn{margin-right:var(--rtk-space-3, 12px)}";
+const RtkChannelHeaderStyle0 = rtkChannelHeaderCss;
+
+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 RtkChannelHeader = /*@__PURE__*/ proxyCustomElement(class RtkChannelHeader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.search = createEvent(this, "search", 7);
+        this.searchDismissed = createEvent(this, "searchDismissed", 7);
+        this.back = createEvent(this, "back", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.showChannelDetailsDialog = false;
+        this.showSearchBar = false;
+        this.members = [];
+        /** Show back button */
+        this.showBackButton = false;
+    }
+    onChannelChanged() {
+        if (this.$searchInput)
+            this.$searchInput.value = '';
+        this.showSearchBar = false;
+        if (!this.channel.isDirectMessage) {
+            this.meeting.chat.getChannelMembers(this.channel.id).then((members) => {
+                this.members = members;
+            });
+        }
+    }
+    connectedCallback() {
+        this.onChannelChanged();
+    }
+    renderChannelDetails() {
+        return (h("rtk-dialog", { open: true, onRtkDialogClose: () => {
+                this.showChannelDetailsDialog = false;
+            }, iconPack: this.iconPack, t: this.t }, h("rtk-channel-details", { members: this.members, channel: this.channel })));
+    }
+    render() {
+        if (!this.channel) {
+            return null;
+        }
+        return (h(Host, null, this.showChannelDetailsDialog && this.renderChannelDetails(), h("header", { class: {
+                searching: this.showSearchBar,
+            } }, this.showBackButton && (h("rtk-button", { kind: "icon", variant: "secondary", class: "back-btn", onClick: () => {
+                this.back.emit();
+            } }, h("rtk-icon", { icon: this.iconPack.chevron_left }))), h("div", { class: "channel-details" }, h("span", { class: "name" }, this.channel.displayName), !this.channel.isDirectMessage && (h("span", { class: "members" }, this.members.map((member) => member.name).join(', ')))), h("div", { class: "channel-tools" }, !this.channel.isDirectMessage && (h("rtk-tooltip", { label: this.t('chat.channel_members'), variant: "primary" }, h("rtk-button", { kind: "button", variant: "secondary", size: "md", onClick: () => {
+                this.showChannelDetailsDialog = !this.showChannelDetailsDialog;
+            }, class: "br-primary-btn" }, h("rtk-icon", { icon: this.iconPack.people }))))))));
+    }
+    static get watchers() { return {
+        "channel": ["onChannelChanged"]
+    }; }
+    static get style() { return RtkChannelHeaderStyle0; }
+}, [0, "rtk-channel-header", {
+        "meeting": [16],
+        "channel": [16],
+        "iconPack": [16],
+        "t": [16],
+        "showBackButton": [4, "show-back-button"],
+        "showChannelDetailsDialog": [32],
+        "showSearchBar": [32],
+        "members": [32]
+    }, undefined, {
+        "channel": ["onChannelChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkChannelHeader.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelHeader.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChannelHeader.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-channel-header", "rtk-avatar", "rtk-button", "rtk-channel-details", "rtk-dialog", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-channel-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkChannelHeader);
+            }
+            break;
+        case "rtk-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-channel-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkChannelHeader as R, defineCustomElement as d };

package/dist/components/p-f0924403.js

@@ -0,0 +1,120 @@
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-c3592601.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { d as defineCustomElement$1 } from './p-3d754c34.js';
+
+const rtkTextComposerViewCss = ".chat-input {\n  position: relative;\n  z-index: 10;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  border-top-left-radius: var(--rtk-border-radius-md, 8px);\n  border-top-right-radius: var(--rtk-border-radius-md, 8px)\n}\n\n  .chat-input textarea {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  box-sizing: border-box;\n  padding: var(--rtk-space-3, 12px);\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255))\n}\n\n  .chat-input textarea::-moz-placeholder {\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255))\n}\n\n  .chat-input textarea::placeholder {\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255))\n}\n\n  .chat-input textarea {\n  font-family: var(--rtk-font-family, sans-serif);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  resize: none;\n  overflow-y: auto;\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  min-height: 60px;\n  font-size: 14px\n}\n\n@container chatcontainer (height < 360px) {\n  textarea {\n    height: 30px !important;\n    min-height: 30px !important\n  }\n}\n\n.text-error {\n  left: var(--rtk-space-0, 0px);\n  z-index: 10;\n  margin-top: var(--rtk-space-1, 4px);\n  margin-left: var(--rtk-space-1, 4px);\n  display: flex;\n  width: -moz-fit-content;\n  width: fit-content;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: var(--rtk-border-radius-sm, 4px);\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n  padding-left: var(--rtk-space-2, 8px);\n  padding-right: var(--rtk-space-2, 8px);\n  font-size: 12px;\n  font-weight: 600;\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-warning, 255 205 7) / var(--tw-text-opacity));\n  border: 1px solid\n}\n\n#warning-indicator {\n  margin-right: var(--rtk-space-1, 4px);\n  height: var(--rtk-space-3, 12px);\n  width: var(--rtk-space-3, 12px)\n}\n\n.text-error.breached {\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-border-opacity));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))\n}";
+const RtkTextComposerViewStyle0 = rtkTextComposerViewCss;
+
+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 RtkTextComposerView = /*@__PURE__*/ proxyCustomElement(class RtkTextComposerView extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onTextChange = createEvent(this, "textChange", 7);
+        /** Disable the text input (default = false) */
+        this.disabled = false;
+        /** Boolean to indicate if rate limit is breached */
+        this.rateLimitBreached = false;
+        /** Keydown event handler function */
+        this.keyDownHandler = () => { };
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.maxLengthBreached = 0;
+        this.onInputHandler = () => {
+            const text = this.$textArea.value.trim();
+            this.maybeResize(text);
+            this.checkLength(text);
+            this.onTextChange.emit(text);
+        };
+        this.maybeResize = (text) => {
+            const newLines = [...text.matchAll(/\n/g)].length;
+            this.$textArea.style.height = `${Math.min(200, 60 + 20 * newLines)}px`;
+        };
+    }
+    componentDidLoad() {
+        if (this.maxLength) {
+            this.$textArea.maxLength = this.maxLength;
+        }
+        const text = this.$textArea.value.trim();
+        if (text !== '') {
+            this.maybeResize(text);
+        }
+        this.$textArea.focus();
+    }
+    /** Sets value of the text input */
+    async setText(text, focus = false) {
+        this.$textArea.value = text;
+        this.maybeResize(text);
+        if (focus) {
+            this.$textArea.focus();
+        }
+        this.checkLength(text);
+        this.onTextChange.emit(text);
+    }
+    checkLength(text) {
+        // unicode code length
+        const textLen = text.length;
+        if (textLen + 10 >= this.maxLength) {
+            this.maxLengthBreached = text.length;
+        }
+        else if (textLen + 10 < this.maxLength && this.maxLengthBreached > 0) {
+            this.maxLengthBreached = 0;
+        }
+    }
+    render() {
+        return (h("div", { key: 'ce055f9e92b79c5ae63448220ea3f1e5adfb39c1', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: 'd131418c66d521fb7b3012465f5774113ae902eb', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: '01c5f7756fb5a76cf3319122c9d808f2b0f6bbf8', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: 'f96301c878d5b3b607fcd5de6d2131e647a3477a', class: 'text-error breached' }, h("rtk-icon", { key: '9b2ecdbac46b0e6ab09e91280c9ca473c719a5a9', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: 'fc08e05d8d917e72ec1218d0a2d2bc1db618c4cc', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
+    }
+    static get style() { return RtkTextComposerViewStyle0; }
+}, [1, "rtk-text-composer-view", {
+        "disabled": [4],
+        "placeholder": [1],
+        "value": [1],
+        "maxLength": [2, "max-length"],
+        "rateLimitBreached": [4, "rate-limit-breached"],
+        "keyDownHandler": [16],
+        "iconPack": [16],
+        "t": [16],
+        "maxLengthBreached": [32],
+        "setText": [64]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkTextComposerView.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTextComposerView.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-text-composer-view", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-text-composer-view":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkTextComposerView);
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkTextComposerView as R, defineCustomElement as d };

package/dist/components/p-f1dd271e.js

@@ -0,0 +1,182 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { g as getBitrateVerdict, a as getPacketLossVerdict, b as getJitterVerdict, c as getNetworkBasedMediaHealth } from './p-0e02697c.js';
+
+const rtkDebuggerAudioCss = ":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{position:relative;display:flex;flex-direction:column;overflow:hidden;height:100%;width:100%;color:rgb(var(--rtk-colors-text-1000, 255 255 255));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.tab-body::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}.tab-body::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}h3{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:600}#header{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-5, 20px);display:flex;align-items:center;justify-content:space-evenly}.tab-body{margin:var(--rtk-space-4, 16px);display:flex;height:100%;flex-direction:column;justify-content:space-between;overflow-y:auto}.status-container{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;padding:16px}.status-section{margin-bottom:12px}.section-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;padding:8px 0}.section-header.only-child{justify-content:center}.section-body.missing-stats{display:flex;text-align:center;justify-content:center}.section-header .status{color:rgba(var(--rtk-colors-success));font-weight:bold}.section-header .arrow{font-size:14px}.network-table{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;margin-top:8px;overflow:hidden}.network-row{display:flex;justify-content:space-between;padding:12px;border-bottom:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.network-row:last-child{border-bottom:none}.network-cell{display:flex;flex-direction:column}.network-cell.label strong{font-size:14px}.network-cell.label .description{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}.network-cell.value{text-align:right}.status.good{color:rgba(var(--rtk-colors-success))}.status.average{color:rgba(var(--rtk-colors-warning))}.status.poor{color:rgba(var(--rtk-colors-danger))}.value{font-size:14px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}rtk-settings-audio{display:flex;flex-direction:column}";
+const RtkDebuggerAudioStyle0 = rtkDebuggerAudioCss;
+
+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 RtkDebuggerAudio = /*@__PURE__*/ proxyCustomElement(class RtkDebuggerAudio extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Is Network section expanded */
+        this.isNetworkOpen = true;
+        /** Is Devices section expanded */
+        this.isDevicesOpen = false;
+        /** Stats as formatted array to display */
+        this.audioProducerFormattedStats = [];
+        /** Last raw audio score stats obj */
+        this.audioProducerScoreStats = null;
+        /** Summarised health of network stats */
+        this.networkBasedMediaHealth = null;
+        /** Summarised health of devices */
+        this.devicesHealth = null;
+        // private toggleSection(section: string) {
+        //   if (section === 'network') this.isNetworkOpen = !this.isNetworkOpen;
+        //   else if (section === 'devices') this.isDevicesOpen = !this.isDevicesOpen;
+        // }
+        this.mediaScoreUpdateListener = ({ kind, isScreenshare, scoreStats, }) => {
+            if (kind === 'audio' && !isScreenshare) {
+                this.audioProducerScoreStats = scoreStats;
+            }
+        };
+        this.deviceListUpdateListener = async () => {
+            const audioDevices = await this.meeting.self.getAudioDevices();
+            this.devicesHealth = (audioDevices === null || audioDevices === void 0 ? void 0 : audioDevices.length) > 0 ? 'Good' : 'Poor';
+        };
+        this.audioUpdateListener = () => {
+            if (!this.meeting.self.audioEnabled) {
+                this.audioProducerScoreStats = null;
+            }
+        };
+    }
+    async audioProducerScoreStatsChanged(newAudioProducerScoreStats) {
+        if (!newAudioProducerScoreStats) {
+            this.audioProducerFormattedStats = [];
+            return;
+        }
+        const statsObj = newAudioProducerScoreStats;
+        const newStatsList = [];
+        newStatsList.push({
+            name: this.t('debugger.stats.bitrate.label'),
+            value: `${Math.round(statsObj.bitrate / 1024)} kbps`,
+            description: this.t('debugger.stats.bitrate.description'),
+            verdict: getBitrateVerdict({
+                bitrate: statsObj.bitrate,
+                kind: 'audio',
+                isScreenshare: false,
+            }),
+        });
+        newStatsList.push({
+            name: this.t('debugger.stats.packet_loss.label'),
+            value: `${statsObj.packetsLostPercentage}%`,
+            description: this.t('debugger.stats.packet_loss.description'),
+            verdict: getPacketLossVerdict({ packetLossPercentage: statsObj.packetsLostPercentage }),
+        });
+        newStatsList.push({
+            name: this.t('debugger.stats.jitter.label'),
+            value: `${Math.round(statsObj.jitter * 1000)} ms`,
+            description: this.t('debugger.stats.jitter.description'),
+            verdict: getJitterVerdict({ jitterInMS: statsObj.jitter * 1000 }),
+        });
+        this.audioProducerFormattedStats = newStatsList;
+        this.networkBasedMediaHealth = getNetworkBasedMediaHealth({
+            kind: 'audio',
+            isScreenshare: false,
+            stats: newStatsList,
+        });
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        if (!this.meeting) {
+            return;
+        }
+        this.meeting.self.off('mediaScoreUpdate', this.mediaScoreUpdateListener);
+        this.meeting.self.off('audioUpdate', this.audioUpdateListener);
+        this.meeting.self.off('deviceListUpdate', this.deviceListUpdateListener);
+    }
+    async meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        meeting.self.on('mediaScoreUpdate', this.mediaScoreUpdateListener);
+        meeting.self.on('audioUpdate', this.audioUpdateListener);
+        meeting.self.on('deviceListUpdate', this.deviceListUpdateListener);
+        await this.deviceListUpdateListener();
+    }
+    render() {
+        var _a, _b;
+        if (!this.meeting) {
+            return;
+        }
+        // const defaults = {
+        //   meeting: this.meeting,
+        //   states: this.states || storeState,
+        //   iconPack: this.iconPack,
+        //   t: this.t,
+        // };
+        return (h(Host, null, h("div", { id: "header" }), h("div", { class: "tab-body" }, h("div", { class: "status-container" }, h("div", { class: "status-section" }, h("div", { class: `section-header ${!this.networkBasedMediaHealth ? 'only-child' : ''}` }, h("span", null, this.t('debugger.audio.sections.network_media')), this.networkBasedMediaHealth && (h("span", { class: `status ${(_a = this.networkBasedMediaHealth) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` }, this.t(`debugger.quality.${(_b = this.networkBasedMediaHealth) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`)))), this.isNetworkOpen && !this.audioProducerFormattedStats.length && (h("div", { class: "section-body missing-stats" }, this.meeting.self.audioEnabled ? (h("span", null, this.t('debugger.audio.messages.generating_report'))) : (h("span", null, this.t('debugger.audio.messages.enable_media'))))), this.isNetworkOpen && !!this.audioProducerFormattedStats.length && (h("div", { class: "section-body network-table" }, this.audioProducerFormattedStats.map((formattedStatsObj) => {
+            var _a, _b;
+            return (h("div", { class: "network-row" }, h("div", { class: "network-cell label" }, h("strong", null, formattedStatsObj.name), h("span", { class: "description" }, formattedStatsObj.description)), h("div", { class: "network-cell value" }, h("span", { class: `status ${(_a = formattedStatsObj.verdict) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` }, this.t(`debugger.quality.${(_b = formattedStatsObj.verdict) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`)), h("span", { class: "value" }, formattedStatsObj.value))));
+        }))))))));
+    }
+    static get watchers() { return {
+        "audioProducerScoreStats": ["audioProducerScoreStatsChanged"],
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkDebuggerAudioStyle0; }
+}, [1, "rtk-debugger-audio", {
+        "meeting": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "isNetworkOpen": [32],
+        "isDevicesOpen": [32],
+        "audioProducerFormattedStats": [32],
+        "audioProducerScoreStats": [32],
+        "networkBasedMediaHealth": [32],
+        "devicesHealth": [32]
+    }, undefined, {
+        "audioProducerScoreStats": ["audioProducerScoreStatsChanged"],
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-debugger-audio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-debugger-audio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkDebuggerAudio);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkDebuggerAudio as R, defineCustomElement as d };