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

package/dist/components/p-606ca241.js

@@ -0,0 +1,119 @@
+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-e6d09c50.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$2 } from './p-4cc0e9a5.js';
+import { d as defineCustomElement$1 } from './p-2f2fb96d.js';
+
+const rtkPollFormCss = ":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)))}.create-poll{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);display:flex;flex:1 1 0%;flex-direction:column;padding:var(--rtk-space-3, 12px);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))}.create-poll p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);text-align:center}.create-poll textarea{display:flex;border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);font-family:var(--rtk-font-family, sans-serif);border-width:var(--rtk-border-width-none, 0);border-style:none;font-weight:500;outline:2px solid transparent;outline-offset:2px;margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);resize:vertical;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.create-poll textarea:focus{outline-style:solid;outline-offset:2px;outline-color:rgb(var(--rtk-colors-background-600, 60 60 60))}.option{display:flex;flex-direction:row;align-items:center;margin-bottom:var(--rtk-space-3, 12px);width:100%}.option input{width:100%;border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.remove-option{margin-left:var(--rtk-space-2, 8px);width:var(--rtk-space-10, 40px);border-radius:var(--rtk-border-radius-sm, 4px)}.add-option{margin-bottom:var(--rtk-space-3, 12px)}label{margin-bottom:var(--rtk-space-3, 12px)}.error-text{margin-top:var(--rtk-space-3, 12px);text-align:center;font-size:12px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkPollFormStyle0 = rtkPollFormCss;
+
+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 RtkPoll = /*@__PURE__*/ proxyCustomElement(class RtkPoll extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onCreate = createEvent(this, "rtkCreatePoll", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Options */
+        this.options = ['', ''];
+        this.anonymous = false;
+        this.hideVotes = true;
+    }
+    removeOption(index) {
+        var _a;
+        this.options = this.options.filter((_, ind) => ind !== index);
+        if (((_a = this.error) === null || _a === void 0 ? void 0 : _a.code) === 1)
+            this.error = undefined;
+    }
+    addOption() {
+        this.options = [...this.options, ''];
+    }
+    updateOption(ev, index) {
+        var _a;
+        this.options[index] = ev.target.value;
+        if (((_a = this.error) === null || _a === void 0 ? void 0 : _a.code) === 1)
+            this.error = undefined;
+    }
+    handleSubmit() {
+        const pollObject = {
+            question: this.question.value,
+            options: this.options,
+            anonymous: this.anonymous,
+            hideVotes: this.anonymous ? true : this.hideVotes,
+        };
+        if (!pollObject.question) {
+            this.error = {
+                code: 0,
+                message: this.t('polls.errors.question_required'),
+            };
+            return;
+        }
+        if (this.options.filter((op) => op.trim() === '').length > 0) {
+            this.error = {
+                code: 1,
+                message: this.t('polls.errors.empty_option'),
+            };
+            return;
+        }
+        this.onCreate.emit(pollObject);
+    }
+    render() {
+        return (h(Host, { key: 'a5d66ad4586b3e3bf360fc7f3330cbebfcc27d29' }, h("div", { key: 'ab293118b0a4e4f0839da8b1f28e8bb4c3075e00', class: "create-poll" }, h("p", { key: 'dd851c73436db148c85fa4ae605841acc4047114' }, this.t('polls.question')), h("textarea", { key: 'f2fc86324169b0eb23eccbf6f9a9425b2fa43cef', onInput: () => {
+                if (this.error && this.error.code === 0)
+                    this.error = undefined;
+            }, ref: (e) => (this.question = e), placeholder: this.t('polls.question.placeholder') }), this.options.map((item, index) => (h("div", { class: "option" }, h("input", { placeholder: this.t('polls.option.placeholder'), value: item, onInput: (event) => this.updateOption(event, index) }), index > 1 && (h("rtk-button", { kind: "icon", class: "auto remove-option", variant: "secondary", onClick: () => this.removeOption(index) }, h("rtk-icon", { icon: this.iconPack.subtract })))))), h("rtk-button", { key: 'd33f567bcd74edf4ace17cd3a0ca36daf69eeb8c', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: '1ded9b5aeec6b5b5fec3cc2ec43c488b48a0568b' }, h("input", { key: '37047cb8a6ccb8c37fc56261fb2f32fa0ff19d92', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: '50ac11b8af600d337cc2a1d8ec934e1abac7eaf6' }, h("input", { key: '6d3df46887a4285d923cc2f8b82abf396a2df8fa', id: "hideVotes", type: "checkbox", disabled: this.anonymous, checked: this.anonymous ? true : this.hideVotes, onChange: (e) => (this.hideVotes = e.target.checked) }), this.t('polls.results.hide')), h("rtk-button", { key: '36f2228ca82a29f9d72f768fa65028690230a26f', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && h("span", { key: 'fe7a37df641bcf672e8c85a87251df19d8d1fc91', class: "error-text" }, this.error.message))));
+    }
+    static get style() { return RtkPollFormStyle0; }
+}, [1, "rtk-poll-form", {
+        "iconPack": [16],
+        "t": [16],
+        "options": [32],
+        "anonymous": [32],
+        "hideVotes": [32],
+        "error": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkPoll.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPoll.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-poll-form", "rtk-button", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-poll-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkPoll);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkPoll as R, defineCustomElement as d };

package/dist/components/p-60fdbd75.js

@@ -0,0 +1,224 @@
+import { h, e as Host } from './p-c3592601.js';
+
+/**
+ * Computes selectors and returns them based on their priority.
+ */
+const computeSelectors = ({ element, size, states = {}, config = {}, }) => {
+    let selectors = [];
+    const data = config === null || config === void 0 ? void 0 : config.root[element];
+    const add = (selector) => {
+        selectors.push(selector);
+        if (typeof size === 'string') {
+            selectors.push(`${selector}.${size}`);
+        }
+    };
+    add(element);
+    if (typeof data === 'object' && !Array.isArray(data) && data !== null) {
+        // check if the data variable is an object, strictly and not an array or just null
+        const { state, states: elementStates } = data;
+        let selector = element;
+        let activeStates = [];
+        if (Array.isArray(elementStates)) {
+            activeStates = elementStates.filter((state) => states[state]);
+            activeStates.sort();
+            for (const state of activeStates) {
+                add(`${selector}.${state}`);
+            }
+            if (activeStates.length > 1) {
+                const booleanStateSelector = [selector, ...activeStates].join('.');
+                add(booleanStateSelector);
+            }
+        }
+        if (typeof state === 'string') {
+            // rtk-meeting[meeting=joined]
+            const keyValueSelector = `${element}[${state}=${states[state]}]`;
+            add(keyValueSelector);
+            for (const state of activeStates) {
+                add(`${keyValueSelector}.${state}`);
+            }
+            if (activeStates.length > 1) {
+                const withBooleanStateSelector = [keyValueSelector, ...activeStates].join('.');
+                add(withBooleanStateSelector);
+            }
+        }
+    }
+    return selectors;
+};
+/**
+ * Returns the computed styles - styles obtained from combining styles from all computed selectors
+ * on the basis of their priorities.
+ */
+const getComputedStyles = ({ selectors, styles }) => {
+    if (!Array.isArray(selectors) || styles == null)
+        return {};
+    const computedStyles = {};
+    for (const selector of selectors) {
+        const style = styles[selector];
+        if (style != null) {
+            Object.assign(computedStyles, style);
+        }
+    }
+    return computedStyles;
+};
+/**
+ * Returns the computed children which are to be rendered inside an element
+ */
+const getComputedChildren = ({ selectors, root }) => {
+    if (!root || !Array.isArray(selectors))
+        return [];
+    let children = [];
+    for (const selector of selectors) {
+        const el = root[selector];
+        if (Array.isArray(el)) {
+            children = [...el];
+        }
+        else if (el) {
+            if (el.children) {
+                children = [...el.children];
+            }
+            if (Array.isArray(el.remove)) {
+                for (const toRemove of el.remove) {
+                    children = children.filter((child) => {
+                        if (typeof child === 'string') {
+                            return child !== toRemove;
+                        }
+                        else if (Array.isArray(child)) {
+                            return child[0] !== toRemove;
+                        }
+                        return true;
+                    });
+                }
+            }
+            if (el.addBefore) {
+                for (const [beforeEl, toAdd] of Object.entries(el.addBefore)) {
+                    const idx = children.findIndex((child) => {
+                        if (typeof child === 'string') {
+                            return child === beforeEl;
+                        }
+                        else if (Array.isArray(child)) {
+                            return child[0] === beforeEl;
+                        }
+                        return false;
+                    });
+                    if (idx >= 0) {
+                        children.splice(idx, 0, ...toAdd);
+                    }
+                }
+            }
+            if (Array.isArray(el.add)) {
+                children = children.concat(el.add);
+            }
+            if (Array.isArray(el.prepend)) {
+                children = el.prepend.concat(children);
+            }
+        }
+    }
+    return children;
+};
+
+/**
+ * Renders the children of an element.
+ */
+const RenderChildren = ({ elements, defaults, props = {}, deepProps = false, elementProps = {}, }) => {
+    if (!Array.isArray(elements) || elements.length === 0)
+        return null;
+    return elements.map((element) => {
+        return (h(Render, { element: element, defaults: defaults, props: props, childProps: deepProps && props, elementProps: elementProps }));
+    });
+};
+const lenChildren = ({ element, defaults, props = {}, elementProps = {} }) => {
+    var _a;
+    const { config, size, states } = defaults;
+    let Tag, configProps = {}, configChildren = [];
+    if (Array.isArray(element)) {
+        // get props if element is passed in array form:
+        // ['rtk-participant-tile', { variant: 'gradient' }]
+        [Tag, configProps, ...configChildren] = element;
+    }
+    else {
+        Tag = element;
+    }
+    const elemData = (_a = config === null || config === void 0 ? void 0 : config.root) === null || _a === void 0 ? void 0 : _a[Tag];
+    if (elemData != null && 'props' in elemData) {
+        props = Object.assign(Object.assign({}, elemData['props']), props);
+    }
+    props = Object.assign(Object.assign({}, props), configProps);
+    if (Tag in elementProps) {
+        props = Object.assign(Object.assign({}, props), elementProps[Tag]);
+    }
+    const selectors = computeSelectors({ element: Tag, size, states, config });
+    const computedChildren = getComputedChildren({ selectors, root: config.root });
+    return computedChildren.length;
+};
+/**
+ * Renders an element from UI Config
+ */
+const Render = ({ element, defaults, childProps = {}, props = {}, onlyChildren = false, asHost = false, deepProps = false, elementProps = {}, }, children) => {
+    var _a;
+    const { config, size, states } = defaults;
+    let Tag, configProps = {}, configChildren = [];
+    if (Array.isArray(element)) {
+        // get props if element is passed in array form:
+        // ['rtk-participant-tile', { variant: 'gradient' }]
+        [Tag, configProps, ...configChildren] = element;
+    }
+    else {
+        Tag = element;
+    }
+    const elemData = (_a = config === null || config === void 0 ? void 0 : config.root) === null || _a === void 0 ? void 0 : _a[Tag];
+    if (elemData != null && 'props' in elemData) {
+        props = Object.assign(Object.assign({}, elemData['props']), props);
+    }
+    props = Object.assign(Object.assign({}, props), configProps);
+    if (Tag in elementProps) {
+        props = Object.assign(Object.assign({}, props), elementProps[Tag]);
+    }
+    const selectors = computeSelectors({ element: Tag, size, states, config });
+    const computedChildren = getComputedChildren({ selectors, root: config.root });
+    if (onlyChildren) {
+        return (h(RenderChildren, { elements: computedChildren, defaults: defaults, props: childProps, deepProps: deepProps, elementProps: elementProps }));
+    }
+    const styles = getComputedStyles({ selectors, styles: config.styles });
+    if (asHost) {
+        return (h(Host, Object.assign({}, defaults, { style: styles }, props),
+            h(RenderChildren, { elements: computedChildren, defaults: defaults, props: childProps, deepProps: deepProps, elementProps: elementProps }),
+            children,
+            configChildren.map((child) => {
+                if (Array.isArray(child)) {
+                    const [Tag, props] = child;
+                    return h(Tag, Object.assign({}, defaults, props));
+                }
+                return child;
+            })));
+    }
+    if (['rtk-header', 'rtk-controlbar'].includes(Tag)) {
+        props['disableRender'] = true;
+    }
+    if (Tag.startsWith('rtk-')) {
+        return (h(Tag, Object.assign({}, defaults, { style: styles }, props),
+            h(RenderChildren, { elements: computedChildren, defaults: defaults, props: childProps, deepProps: deepProps, elementProps: elementProps }),
+            children,
+            configChildren.map((child) => {
+                if (Array.isArray(child)) {
+                    const [Tag, props] = child;
+                    return h(Tag, Object.assign({}, defaults, props));
+                }
+                return child;
+            })));
+    }
+    else {
+        const [HTMLTag, id] = Tag.split('#');
+        return (h(HTMLTag, Object.assign({ id: id, style: styles }, props),
+            h(RenderChildren, { elements: computedChildren, defaults: defaults, props: childProps, deepProps: deepProps, elementProps: elementProps }),
+            children,
+            configChildren.map((child) => {
+                if (Array.isArray(child)) {
+                    const [Tag, props] = child;
+                    return h(Tag, Object.assign({}, defaults, props));
+                }
+                return child;
+            })));
+    }
+};
+
+export { Render as R, lenChildren as l };

package/dist/components/p-62a6b783.js

@@ -0,0 +1,194 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { g as getBitrateVerdict, a as getPacketLossVerdict, b as getJitterVerdict, c as getNetworkBasedMediaHealth } from './p-0e02697c.js';
+
+const rtkDebuggerVideoCss = ":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-video{display:flex;flex-direction:column}";
+const RtkDebuggerVideoStyle0 = rtkDebuggerVideoCss;
+
+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 RtkDebuggerVideo = /*@__PURE__*/ proxyCustomElement(class RtkDebuggerVideo 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.videoProducerFormattedStats = [];
+        /** Last raw video score stats obj */
+        this.videoProducerScoreStats = 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 === 'video' && !isScreenshare) {
+                this.videoProducerScoreStats = scoreStats;
+            }
+        };
+        this.deviceListUpdateListener = async () => {
+            const videoDevices = await this.meeting.self.getVideoDevices();
+            this.devicesHealth = (videoDevices === null || videoDevices === void 0 ? void 0 : videoDevices.length) > 0 ? 'Good' : 'Poor';
+        };
+        this.videoUpdateListener = () => {
+            if (!this.meeting.self.videoEnabled) {
+                this.videoProducerScoreStats = null;
+            }
+        };
+    }
+    async videoProducerScoreStatsChanged(newVideoProducerScoreStats) {
+        if (!newVideoProducerScoreStats) {
+            this.videoProducerFormattedStats = [];
+            return;
+        }
+        const statsObj = newVideoProducerScoreStats;
+        const newStatsList = [];
+        newStatsList.push({
+            name: this.t('debugger.stats.cpu_limitations.label'),
+            value: statsObj.cpuLimitations ? 'Yes' : 'No',
+            description: this.t('debugger.stats.cpu_limitations.description'),
+            verdict: statsObj.cpuLimitations ? 'Poor' : 'Good',
+        });
+        newStatsList.push({
+            name: this.t('debugger.stats.bandwidth_limitations.label'),
+            value: statsObj.bandwidthLimitations ? 'Yes' : 'No',
+            description: this.t('debugger.stats.bandwidth_limitations.description'),
+            verdict: statsObj.bandwidthLimitations ? 'Poor' : 'Good',
+        });
+        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: 'video',
+                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.videoProducerFormattedStats = newStatsList;
+        this.networkBasedMediaHealth = getNetworkBasedMediaHealth({
+            kind: 'video',
+            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('videoUpdate', this.videoUpdateListener);
+        this.meeting.self.off('deviceListUpdate', this.deviceListUpdateListener);
+    }
+    async meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        meeting.self.on('mediaScoreUpdate', this.mediaScoreUpdateListener);
+        meeting.self.on('videoUpdate', this.videoUpdateListener);
+        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.video.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.videoProducerFormattedStats.length && (h("div", { class: "section-body missing-stats" }, this.meeting.self.videoEnabled ? (h("span", null, this.t('debugger.video.messages.generating_report'))) : (h("span", null, this.t('debugger.video.messages.enable_media'))))), this.isNetworkOpen && !!this.videoProducerFormattedStats.length && (h("div", { class: "section-body network-table" }, this.videoProducerFormattedStats.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 {
+        "videoProducerScoreStats": ["videoProducerScoreStatsChanged"],
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkDebuggerVideoStyle0; }
+}, [1, "rtk-debugger-video", {
+        "meeting": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "isNetworkOpen": [32],
+        "isDevicesOpen": [32],
+        "videoProducerFormattedStats": [32],
+        "videoProducerScoreStats": [32],
+        "networkBasedMediaHealth": [32],
+        "devicesHealth": [32]
+    }, undefined, {
+        "videoProducerScoreStats": ["videoProducerScoreStatsChanged"],
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-debugger-video"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-debugger-video":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkDebuggerVideo);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkDebuggerVideo as R, defineCustomElement as d };