marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-08-06 13:18:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

New stats: clock, play time, battery, download, upload

Browse Source
This commit is contained in:
redphx
2024-10-06 15:50:39 +07:00
parent af41dc7c5e
commit 76b205a65a
12 changed files with 1547 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
src/modules/stream/stream-stats.ts
View File

@@ -4,15 +4,8 @@ import { t } from "@utils/translation"
import { STATES } from "@utils/global"
import { PrefKey } from "@/enums/pref-keys"
import { getPref } from "@/utils/settings-storages/global-settings-storage"
import { StreamStat, StreamStatsCollector, type StreamStatGrade } from "@/utils/stream-stats-collector"
export enum StreamStat {
PING = 'ping',
FPS = 'fps',
BITRATE = 'btr',
DECODE_TIME = 'dt',
PACKETS_LOST = 'pl',
FRAMES_LOST = 'fl',
};
export class StreamStats {
private static instance: StreamStats;
@@ -24,36 +17,76 @@ export class StreamStats {
return StreamStats.instance;
}
#timeoutId?: number | null;
readonly #updateInterval = 1000;
private intervalId?: number | null;
private readonly REFRESH_INTERVAL = 1 * 1000;
#$container: HTMLElement | undefined;
#$fps: HTMLElement | undefined;
#$ping: HTMLElement | undefined;
#$dt: HTMLElement | undefined;
#$pl: HTMLElement | undefined;
#$fl: HTMLElement | undefined;
#$br: HTMLElement | undefined;
private stats = {
[StreamStat.CLOCK]: {
name: t('clock'),
$element: CE('span'),
},
[StreamStat.PLAYTIME]: {
name: t('playtime'),
$element: CE('span'),
},
[StreamStat.BATTERY]: {
name: t('battery'),
$element: CE('span'),
},
[StreamStat.PING]: {
name: t('stat-ping'),
$element: CE('span'),
},
[StreamStat.FPS]: {
name: t('stat-fps'),
$element: CE('span'),
},
[StreamStat.BITRATE]: {
name: t('stat-bitrate'),
$element: CE('span'),
},
[StreamStat.DECODE_TIME]: {
name: t('stat-decode-time'),
$element: CE('span'),
},
[StreamStat.PACKETS_LOST]: {
name: t('stat-packets-lost'),
$element: CE('span'),
},
[StreamStat.FRAMES_LOST]: {
name: t('stat-frames-lost'),
$element: CE('span'),
},
[StreamStat.DOWNLOAD]: {
name: t('download'),
$element: CE('span'),
},
[StreamStat.UPLOAD]: {
name: t('upload'),
$element: CE('span'),
},
};
#lastVideoStat?: RTCBasicStat | null;
private $container!: HTMLElement;
#quickGlanceObserver?: MutationObserver | null;
quickGlanceObserver?: MutationObserver | null;
constructor() {
this.#render();
this.render();
}
start(glancing=false) {
async start(glancing=false) {
if (!this.isHidden() || (glancing && this.isGlancing())) {
return;
}
if (this.#$container) {
this.#$container.classList.remove('bx-gone');
this.#$container.dataset.display = glancing ? 'glancing' : 'fixed';
}
this.intervalId && clearInterval(this.intervalId);
await this.update(true);
this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval);
this.$container.classList.remove('bx-gone');
this.$container.dataset.display = glancing ? 'glancing' : 'fixed';
this.intervalId = window.setInterval(this.update.bind(this), this.REFRESH_INTERVAL);
}
stop(glancing=false) {
@@ -61,19 +94,16 @@ export class StreamStats {
return;
}
this.#timeoutId && clearTimeout(this.#timeoutId);
this.#timeoutId = null;
this.#lastVideoStat = null;
this.intervalId && clearInterval(this.intervalId);
this.intervalId = null;
if (this.#$container) {
this.#$container.removeAttribute('data-display');
this.#$container.classList.add('bx-gone');
}
this.$container.removeAttribute('data-display');
this.$container.classList.add('bx-gone');
}
toggle() {
if (this.isGlancing()) {
this.#$container && (this.#$container.dataset.display = 'fixed');
this.$container && (this.$container.dataset.display = 'fixed');
} else {
this.isHidden() ? this.start() : this.stop();
}
@@ -85,11 +115,11 @@ export class StreamStats {
this.hideSettingsUi();
}
isHidden = () => this.#$container && this.#$container.classList.contains('bx-gone');
isGlancing = () => this.#$container && this.#$container.dataset.display === 'glancing';
isHidden = () => this.$container.classList.contains('bx-gone');
isGlancing = () => this.$container.dataset.display === 'glancing';
quickGlanceSetup() {
if (!STATES.isPlaying || this.#quickGlanceObserver) {
if (!STATES.isPlaying || this.quickGlanceObserver) {
return;
}
@@ -98,7 +128,7 @@ export class StreamStats {
return;
}
this.#quickGlanceObserver = new MutationObserver((mutationList, observer) => {
this.quickGlanceObserver = new MutationObserver((mutationList, observer) => {
for (let record of mutationList) {
if (record.attributeName && record.attributeName === 'aria-expanded') {
const expanded = (record.target as HTMLElement).ariaExpanded;
@@ -111,7 +141,7 @@ export class StreamStats {
}
});
this.#quickGlanceObserver.observe($uiContainer, {
this.quickGlanceObserver.observe($uiContainer, {
attributes: true,
attributeFilter: ['aria-expanded'],
subtree: true,
@@ -119,98 +149,54 @@ export class StreamStats {
}
quickGlanceStop() {
this.#quickGlanceObserver && this.#quickGlanceObserver.disconnect();
this.#quickGlanceObserver = null;
this.quickGlanceObserver && this.quickGlanceObserver.disconnect();
this.quickGlanceObserver = null;
}
async #update() {
if (this.isHidden() || !STATES.currentStream.peerConnection) {
private async update(forceUpdate=false) {
if ((!forceUpdate && this.isHidden()) || !STATES.currentStream.peerConnection) {
this.onStoppedPlaying();
return;
}
this.#timeoutId = null;
const startTime = performance.now();
const PREF_STATS_CONDITIONAL_FORMATTING = getPref(PrefKey.STATS_CONDITIONAL_FORMATTING);
let grade: StreamStatGrade = '';
const stats = await STATES.currentStream.peerConnection.getStats();
let grade = '';
// Collect stats
const statsCollector = StreamStatsCollector.getInstance();
await statsCollector.collect();
stats.forEach(stat => {
if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
// FPS
this.#$fps!.textContent = stat.framesPerSecond || 0;
let statKey: keyof typeof this.stats;
for (statKey in this.stats) {
grade = '';
// Packets Lost
const packetsLost = Math.max(0, stat.packetsLost); // packetsLost can be negative, but we don't care about that
const packetsReceived = stat.packetsReceived;
const packetsLostPercentage = (packetsLost * 100 / ((packetsLost + packetsReceived) || 1)).toFixed(2);
this.#$pl!.textContent = packetsLostPercentage === '0.00' ? packetsLost.toString() : `${packetsLost} (${packetsLostPercentage}%)`;
const stat = this.stats[statKey];
const value = statsCollector.getStat(statKey);
const $element = stat.$element;
$element.textContent = value.toString();
// Frames dropped
const framesDropped = stat.framesDropped;
const framesReceived = stat.framesReceived;
const framesDroppedPercentage = (framesDropped * 100 / ((framesDropped + framesReceived) || 1)).toFixed(2);
this.#$fl!.textContent = framesDroppedPercentage === '0.00' ? framesDropped : `${framesDropped} (${framesDroppedPercentage}%)`;
if (!this.#lastVideoStat) {
this.#lastVideoStat = stat;
return;
}
const lastStat = this.#lastVideoStat;
// Bitrate
const timeDiff = stat.timestamp - lastStat.timestamp;
const bitrate = 8 * (stat.bytesReceived - lastStat.bytesReceived) / timeDiff / 1000;
this.#$br!.textContent = `${bitrate.toFixed(2)} Mbps`;
// Decode time
const totalDecodeTimeDiff = stat.totalDecodeTime - lastStat.totalDecodeTime;
const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded;
const currentDecodeTime = totalDecodeTimeDiff / framesDecodedDiff * 1000;
if (isNaN(currentDecodeTime)) {
this.#$dt!.textContent = '??ms';
} else {
this.#$dt!.textContent = `${currentDecodeTime.toFixed(2)}ms`;
}
if (PREF_STATS_CONDITIONAL_FORMATTING) {
grade = (currentDecodeTime > 12) ? 'bad' : (currentDecodeTime > 9) ? 'ok' : (currentDecodeTime > 6) ? 'good' : '';
this.#$dt!.dataset.grade = grade;
}
this.#lastVideoStat = stat;
} else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
// Round Trip Time
const roundTripTime = !!stat.currentRoundTripTime ? stat.currentRoundTripTime * 1000 : -1;
this.#$ping!.textContent = roundTripTime === -1 ? '???' : roundTripTime.toString();
if (PREF_STATS_CONDITIONAL_FORMATTING) {
grade = (roundTripTime > 100) ? 'bad' : (roundTripTime > 75) ? 'ok' : (roundTripTime > 40) ? 'good' : '';
this.#$ping!.dataset.grade = grade;
// Get stat's grade
if (PREF_STATS_CONDITIONAL_FORMATTING) {
if (statKey === StreamStat.PING || statKey === StreamStat.DECODE_TIME) {
grade = (value as any).calculateGrade();
}
}
});
const lapsedTime = performance.now() - startTime;
this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval - lapsedTime);
if ($element.dataset.grade !== grade) {
$element.dataset.grade = grade;
}
}
}
refreshStyles() {
const PREF_ITEMS = getPref(PrefKey.STATS_ITEMS);
const PREF_POSITION = getPref(PrefKey.STATS_POSITION);
const PREF_TRANSPARENT = getPref(PrefKey.STATS_TRANSPARENT);
const PREF_OPACITY = getPref(PrefKey.STATS_OPACITY);
const PREF_TEXT_SIZE = getPref(PrefKey.STATS_TEXT_SIZE);
const $container = this.#$container!;
const $container = this.$container;
$container.dataset.stats = '[' + PREF_ITEMS.join('][') + ']';
$container.dataset.position = PREF_POSITION;
$container.dataset.transparent = PREF_TRANSPARENT;
$container.style.opacity = PREF_OPACITY + '%';
$container.style.fontSize = PREF_TEXT_SIZE;
$container.dataset.position = getPref(PrefKey.STATS_POSITION);
$container.dataset.transparent = getPref(PrefKey.STATS_TRANSPARENT);
$container.style.opacity = getPref(PrefKey.STATS_OPACITY) + '%';
$container.style.fontSize = getPref(PrefKey.STATS_TEXT_SIZE);
}
hideSettingsUi() {
@@ -219,34 +205,25 @@ export class StreamStats {
}
}
#render() {
const stats = {
[StreamStat.PING]: [t('stat-ping'), this.#$ping = CE('span', {}, '0')],
[StreamStat.FPS]: [t('stat-fps'), this.#$fps = CE('span', {}, '0')],
[StreamStat.BITRATE]: [t('stat-bitrate'), this.#$br = CE('span', {}, '0 Mbps')],
[StreamStat.DECODE_TIME]: [t('stat-decode-time'), this.#$dt = CE('span', {}, '0ms')],
[StreamStat.PACKETS_LOST]: [t('stat-packets-lost'), this.#$pl = CE('span', {}, '0')],
[StreamStat.FRAMES_LOST]: [t('stat-frames-lost'), this.#$fl = CE('span', {}, '0')],
};
private async render() {
this.$container = CE('div', {class: 'bx-stats-bar bx-gone'});
const $barFragment = document.createDocumentFragment();
let statKey: keyof typeof stats;
for (statKey in stats) {
let statKey: keyof typeof this.stats;
for (statKey in this.stats) {
const stat = this.stats[statKey];
const $div = CE('div', {
'class': `bx-stat-${statKey}`,
title: stats[statKey][0]
},
class: `bx-stat-${statKey}`,
title: stat.name,
},
CE('label', {}, statKey.toUpperCase()),
stats[statKey][1],
stat.$element,
);
$barFragment.appendChild($div);
this.$container.appendChild($div);
}
this.#$container = CE('div', {'class': 'bx-stats-bar bx-gone'}, $barFragment);
this.refreshStyles();
document.documentElement.appendChild(this.#$container!);
document.documentElement.appendChild(this.$container);
}
static setupEvents() {
@@ -255,8 +232,8 @@ export class StreamStats {
const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_PLAYING);
const streamStats = StreamStats.getInstance();
// Setup Stat's Quick Glance mode
// Setup Stat's Quick Glance mode
if (PREF_STATS_SHOW_WHEN_PLAYING) {
streamStats.start();
} else if (PREF_STATS_QUICK_GLANCE) {