@cloudflare/realtimekit-ui 1.0.9-staging.2 → 1.0.9-staging.4

package/dist/esm/rtk-debugger-audio_4.entry.js

@@ -0,0 +1,679 @@
+import { r as registerInstance, h, H as Host } from './index-c1fb98bb.js';
+import { e as defaultIconPack, h as useLanguage } from './ui-store-9e486e1b.js';
+import { S as SyncWithStore } from './index-e65afca5.js';
+
+/** Method to return media health based on the media & network stats */
+function getNetworkBasedMediaHealth({ stats, }) {
+    if (!stats || !stats.length) {
+        return null;
+    }
+    let networkHealth = 'Good';
+    const allStatsHealths = stats.map((statsObj) => statsObj.verdict);
+    if (allStatsHealths.includes('Poor')) {
+        networkHealth = 'Poor';
+    }
+    else if (allStatsHealths.includes('Average')) {
+        networkHealth = 'Average';
+    }
+    return networkHealth;
+}
+/** Gives verdict based on the packet loss */
+function getPacketLossVerdict({ packetLossPercentage, }) {
+    let verdict = 'Good';
+    if (packetLossPercentage > 4) {
+        verdict = 'Poor';
+    }
+    else if (packetLossPercentage >= 1 && packetLossPercentage <= 4) {
+        verdict = 'Average';
+    }
+    return verdict;
+}
+/** Gives verdict based on the jitter */
+function getJitterVerdict({ jitterInMS }) {
+    let verdict = 'Good';
+    if (jitterInMS > 100) {
+        verdict = 'Poor';
+    }
+    else if (jitterInMS >= 50 && jitterInMS <= 100) {
+        verdict = 'Average';
+    }
+    return verdict;
+}
+/** Gives verdict based on the jitter */
+function getBitrateVerdict({ bitrate, }) {
+    let verdict = 'Good';
+    const bitrateInKbps = Math.round(bitrate / 1024); // it is Kilo bits
+    if (bitrateInKbps === 0) {
+        verdict = 'Poor';
+    }
+    return verdict;
+}
+function getOverallBatteryVerdict({ stats }) {
+    if (!stats || !stats.length) {
+        return null;
+    }
+    let networkHealth = 'Good';
+    const allStatsHealths = stats.map((statsObj) => statsObj.verdict);
+    if (allStatsHealths.includes('Poor')) {
+        networkHealth = 'Poor';
+    }
+    else if (allStatsHealths.includes('Average')) {
+        networkHealth = 'Average';
+    }
+    return networkHealth;
+}
+function getBatteryLevelVerdict({ batteryLevelPercentage, }) {
+    let batteryLevelVerdict = 'Good';
+    if (batteryLevelPercentage < 20) {
+        batteryLevelVerdict = 'Poor';
+    }
+    else if (batteryLevelPercentage < 50) {
+        batteryLevelVerdict = 'Average';
+    }
+    return batteryLevelVerdict;
+}
+function getBatteryChargingVerdict({ charging, dischargingTimeInSeconds, batteryLevelPercentage, }) {
+    const MINS_30 = 30 * 60;
+    if (batteryLevelPercentage < 20) {
+        return 'Poor';
+    }
+    if (charging) {
+        return 'Good';
+    }
+    if (dischargingTimeInSeconds < MINS_30) {
+        return 'Poor';
+    }
+    return 'Average';
+}
+
+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$3 = (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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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"]
+    }; }
+};
+__decorate$3([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "meeting", void 0);
+__decorate$3([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "states", void 0);
+__decorate$3([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "iconPack", void 0);
+__decorate$3([
+    SyncWithStore()
+], RtkDebuggerAudio.prototype, "t", void 0);
+RtkDebuggerAudio.style = RtkDebuggerAudioStyle0;
+
+const rtkDebuggerScreenshareCss = ":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}";
+const RtkDebuggerScreenshareStyle0 = rtkDebuggerScreenshareCss;
+
+var __decorate$2 = (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 RtkDebuggerScreenShare = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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;
+        /** Stats as formatted array to display */
+        this.audioProducerFormattedStats = [];
+        /** Last raw video score stats obj */
+        this.audioProducerScoreStats = null;
+        /** Summarised health of network stats */
+        this.networkBasedMediaHealth = 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;
+            }
+            if (kind === 'audio' && isScreenshare) {
+                this.audioProducerScoreStats = scoreStats;
+            }
+        };
+        this.screenShareUpdateListener = () => {
+            if (!this.meeting.self.screenShareEnabled) {
+                this.videoProducerScoreStats = null;
+                this.audioProducerScoreStats = 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,
+        });
+    }
+    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: true,
+            }),
+        });
+        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;
+        /** Only screenshare video is deciding the media health currently */
+        // this.networkBasedMediaHealth = getNetworkBasedMediaHealth({
+        //   kind: 'audio',
+        //   isScreenshare: true,
+        //   stats: newStatsList,
+        // });
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        if (!this.meeting) {
+            return;
+        }
+        this.meeting.self.off('mediaScoreUpdate', this.mediaScoreUpdateListener);
+        this.meeting.self.off('screenShareUpdate', this.screenShareUpdateListener);
+    }
+    async meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        meeting.self.on('mediaScoreUpdate', this.mediaScoreUpdateListener);
+        meeting.self.on('screenShareUpdate', this.screenShareUpdateListener);
+    }
+    render() {
+        var _a, _b;
+        if (!this.meeting) {
+            return;
+        }
+        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.screenshare.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.screenShareEnabled ? (h("span", null, this.t('debugger.screenshare.messages.generating_report'))) : (h("span", null, this.t('debugger.screenshare.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"],
+        "audioProducerScoreStats": ["audioProducerScoreStatsChanged"],
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate$2([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "meeting", void 0);
+__decorate$2([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "states", void 0);
+__decorate$2([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "iconPack", void 0);
+__decorate$2([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "t", void 0);
+RtkDebuggerScreenShare.style = RtkDebuggerScreenshareStyle0;
+
+const rtkDebuggerSystemCss = ":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-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}.battery-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}.battery-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))}.battery-row:last-child{border-bottom:none}.battery-cell{display:flex;flex-direction:column}.battery-cell.label strong{font-size:14px}.battery-cell.label .description{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}.battery-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 RtkDebuggerSystemStyle0 = rtkDebuggerSystemCss;
+
+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 RtkDebuggerSystem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Is Network section expanded */
+        this.isBatterySectionOpen = true;
+        /** Summarised health of network stats */
+        this.batterySectionHealth = null;
+        /** Battery manager */
+        this.battery = null;
+        /** Stats as formatted array to display */
+        this.batteryFormattedStats = [];
+        this.batteryUpdateListener = () => {
+            const batteryLevelPercentage = Math.round(this.battery.level * 100);
+            const newBatteryStats = [];
+            newBatteryStats.push({
+                name: this.t('debugger.system.battery.level.label'),
+                value: `${batteryLevelPercentage}%`,
+                description: this.t('debugger.system.battery.level.description'),
+                verdict: getBatteryLevelVerdict({
+                    batteryLevelPercentage,
+                }),
+            });
+            newBatteryStats.push({
+                name: this.t('debugger.system.battery.charging.label'),
+                value: `${this.battery.charging
+                    ? this.t('debugger.system.battery.charging.is_charging')
+                    : this.t('debugger.system.battery.charging.is_not_charging')}`,
+                description: this.t('debugger.system.battery.charging.description'),
+                verdict: getBatteryChargingVerdict({
+                    batteryLevelPercentage,
+                    chargingTimeInSeconds: this.battery.chargingTime,
+                    dischargingTimeInSeconds: this.battery.dischargingTime,
+                    charging: this.battery.charging,
+                }),
+            });
+            this.batterySectionHealth = getOverallBatteryVerdict({
+                stats: newBatteryStats,
+            });
+            this.batteryFormattedStats = newBatteryStats;
+        };
+    }
+    toggleSection(section) {
+        if (section === 'battery')
+            this.isBatterySectionOpen = !this.isBatterySectionOpen;
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        if (!this.meeting) {
+            return;
+        }
+        if (this.battery) {
+            this.battery.removeEventListener('levelchange', this.batteryUpdateListener);
+            this.battery.removeEventListener('chargingchange', this.batteryUpdateListener);
+        }
+    }
+    async meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        if (typeof navigator.getBattery !== 'undefined') {
+            this.battery = await navigator.getBattery();
+            this.battery.addEventListener('levelchange', this.batteryUpdateListener);
+            this.battery.addEventListener('chargingchange', this.batteryUpdateListener);
+            this.batteryUpdateListener();
+        }
+    }
+    render() {
+        var _a, _b;
+        if (!this.meeting) {
+            return;
+        }
+        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", onClick: () => this.toggleSection('battery') }, h("span", null, this.t('debugger.system.sections.battery')), this.batterySectionHealth && (h("span", { class: `status ${(_a = this.batterySectionHealth) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` }, this.t(`debugger.quality.${(_b = this.batterySectionHealth) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`)))), this.isBatterySectionOpen && !!this.batteryFormattedStats.length && (h("div", { class: "section-body battery-table" }, this.batteryFormattedStats.map((formattedStatsObj) => {
+            var _a, _b;
+            return (h("div", { class: "battery-row" }, h("div", { class: "battery-cell label" }, h("strong", null, formattedStatsObj.name), h("span", { class: "description" }, formattedStatsObj.description)), h("div", { class: "battery-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 {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate$1([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "meeting", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "states", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "iconPack", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "t", void 0);
+RtkDebuggerSystem.style = RtkDebuggerSystemStyle0;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerVideo.prototype, "t", void 0);
+RtkDebuggerVideo.style = RtkDebuggerVideoStyle0;
+
+export { RtkDebuggerAudio as rtk_debugger_audio, RtkDebuggerScreenShare as rtk_debugger_screenshare, RtkDebuggerSystem as rtk_debugger_system, RtkDebuggerVideo as rtk_debugger_video };