@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/components/p-9fc565cf.js

@@ -0,0 +1,57 @@
+import { a as sanitizeLink } from './p-338c7261.js';
+
+const getExtension = (name) => {
+    // split query and hash from url, then get the filename
+    return name.split(/[#?]/)[0].split('.').pop().trim();
+};
+/**
+ * Formats size in bytes to human readable formats
+ * @param size Size in bytes
+ * @returns Human readable file size
+ */
+const getFileSize = (size) => {
+    if (!size)
+        return '0 B';
+    const i = Math.floor(Math.log(size) / Math.log(1024));
+    return `${(size / 1024 ** i).toFixed(2)} ${['B', 'kB', 'MB', 'GB', 'TB'][i]}`;
+};
+/**
+ * Extracts the file name from a URL.
+ * @param link The URL of the file
+ * @param fallback Fallback filename
+ * @returns File name
+ */
+const getFileName = (link, fallback = 'file') => {
+    try {
+        const url = new URL(link);
+        const name = url.pathname.split('/').pop();
+        return name !== '/' ? name : fallback;
+    }
+    catch (_) {
+        return fallback;
+    }
+};
+/**
+ * Downloads file from a given URL without leaving the current page
+ * @param link URL of the file to download
+ * @param options Optional Options for file download - `name` and `fallbackName`
+ */
+const downloadFile = async (link, options) => {
+    link = sanitizeLink(link);
+    let name = options === null || options === void 0 ? void 0 : options.name;
+    const res = await fetch(link);
+    if (!res.ok) {
+        // if unable to download file (CORS or some other error)
+        // open the URL in new tab
+        window.open(link, '_blank');
+        return;
+    }
+    const blobURL = URL.createObjectURL(await res.blob());
+    // Creates an anchor tag and simulates download
+    const a = document.createElement('a');
+    a.href = blobURL;
+    a.download = name !== null && name !== void 0 ? name : getFileName(link, options === null || options === void 0 ? void 0 : options.fallbackName);
+    a.click();
+};
+
+export { getFileSize as a, downloadFile as d, getExtension as g };

package/dist/components/p-a08b5a59.js

@@ -0,0 +1,329 @@
+import { i as isObjectLike, b as baseGetTag, a as isObject, r as root } from './p-2c3cda13.js';
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+}
+
+/** Used to match a single whitespace character. */
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return root.Date.now();
+};
+
+const now$1 = now;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now$1();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now$1());
+  }
+
+  function debounced() {
+    var time = now$1(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+export { debounce as d };

package/dist/components/p-a262dd1a.js

@@ -0,0 +1,227 @@
+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 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 = (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 = /*@__PURE__*/ proxyCustomElement(class RtkDebuggerScreenShare 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;
+        /** 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"]
+    }; }
+    static get style() { return RtkDebuggerScreenshareStyle0; }
+}, [1, "rtk-debugger-screenshare", {
+        "meeting": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "isNetworkOpen": [32],
+        "isDevicesOpen": [32],
+        "videoProducerFormattedStats": [32],
+        "videoProducerScoreStats": [32],
+        "audioProducerFormattedStats": [32],
+        "audioProducerScoreStats": [32],
+        "networkBasedMediaHealth": [32]
+    }, undefined, {
+        "videoProducerScoreStats": ["videoProducerScoreStatsChanged"],
+        "audioProducerScoreStats": ["audioProducerScoreStatsChanged"],
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerScreenShare.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-debugger-screenshare"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-debugger-screenshare":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkDebuggerScreenShare);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkDebuggerScreenShare as R, defineCustomElement as d };

package/dist/components/p-a2f4f9e3.js

@@ -0,0 +1,67 @@
+import { h } from './p-c3592601.js';
+import { M as MAX_TEXT_LENGTH, e as extractReplyBlock, s as stripOutReplyBlock, p as parseRichText } from './p-0abe4b8a.js';
+
+const renderLink = (content) => {
+    return (h("a", { class: "link", href: content, target: "_blank", rel: "noopener noreferrer" }, content));
+};
+const renderBold = (content) => {
+    if (typeof content === 'string') {
+        return h("b", null, content);
+    }
+    return h("b", null, renderTokens(content));
+};
+const renderItalic = (content) => {
+    if (typeof content === 'string') {
+        return h("i", null, content);
+    }
+    return h("i", null, renderTokens(content));
+};
+const renderStrikethrough = (content) => {
+    if (typeof content === 'string') {
+        return h("s", null, content);
+    }
+    return h("b", null, renderTokens(content));
+};
+const renderPlainText = (content) => {
+    if (typeof content === 'string') {
+        return content;
+    }
+    return h("p", null, renderTokens(content));
+};
+const renderTokens = (tokens) => {
+    return tokens.map((token) => {
+        switch (token.type) {
+            case 'a':
+                if (typeof token.content === 'string') {
+                    return renderLink(token.content);
+                }
+            case 'b':
+                return renderBold(token.content);
+            case 'i':
+                return renderItalic(token.content);
+            case 's':
+                return renderStrikethrough(token.content);
+            case 'q':
+                return h("span", { class: "block-quote" });
+            case 'plain_text':
+            default:
+                return renderPlainText(token.content);
+        }
+    });
+};
+const TextMessageView = ({ message }) => {
+    const slicedMessage = message.slice(0, MAX_TEXT_LENGTH);
+    const withReply = extractReplyBlock(slicedMessage, true);
+    const withoutReply = stripOutReplyBlock(slicedMessage);
+    return (h("p", null,
+        withReply.length !== 0 && (h("blockquote", null, withReply.split('\n').map((line) => {
+            const tokens = parseRichText(line);
+            return h("p", null, renderTokens(tokens));
+        }))),
+        withoutReply.split('\n').map((line) => {
+            const tokens = parseRichText(line);
+            return h("p", null, renderTokens(tokens));
+        })));
+};
+
+export { TextMessageView as T };