mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-06-14 11:37:19 +02:00
273 lines
9.8 KiB
TypeScript
273 lines
9.8 KiB
TypeScript
import { PrefKey, getPref } from "@utils/preferences"
|
|
import { BxEvent } from "@utils/bx-event"
|
|
import { CE } from "@utils/html"
|
|
import { t } from "@utils/translation"
|
|
import { STATES } from "@utils/global"
|
|
|
|
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;
|
|
public static getInstance(): StreamStats {
|
|
if (!StreamStats.instance) {
|
|
StreamStats.instance = new StreamStats();
|
|
}
|
|
|
|
return StreamStats.instance;
|
|
}
|
|
|
|
#timeoutId?: number | null;
|
|
readonly #updateInterval = 1000;
|
|
|
|
#$container: HTMLElement | undefined;
|
|
#$fps: HTMLElement | undefined;
|
|
#$ping: HTMLElement | undefined;
|
|
#$dt: HTMLElement | undefined;
|
|
#$pl: HTMLElement | undefined;
|
|
#$fl: HTMLElement | undefined;
|
|
#$br: HTMLElement | undefined;
|
|
|
|
#lastVideoStat?: RTCBasicStat | null;
|
|
|
|
#quickGlanceObserver?: MutationObserver | null;
|
|
|
|
constructor() {
|
|
this.#render();
|
|
}
|
|
|
|
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.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval);
|
|
}
|
|
|
|
stop(glancing=false) {
|
|
if (glancing && !this.isGlancing()) {
|
|
return;
|
|
}
|
|
|
|
this.#timeoutId && clearTimeout(this.#timeoutId);
|
|
this.#timeoutId = null;
|
|
this.#lastVideoStat = null;
|
|
|
|
if (this.#$container) {
|
|
this.#$container.removeAttribute('data-display');
|
|
this.#$container.classList.add('bx-gone');
|
|
}
|
|
}
|
|
|
|
toggle() {
|
|
if (this.isGlancing()) {
|
|
this.#$container && (this.#$container.dataset.display = 'fixed');
|
|
} else {
|
|
this.isHidden() ? this.start() : this.stop();
|
|
}
|
|
}
|
|
|
|
onStoppedPlaying() {
|
|
this.stop();
|
|
this.quickGlanceStop();
|
|
this.hideSettingsUi();
|
|
}
|
|
|
|
isHidden = () => this.#$container && this.#$container.classList.contains('bx-gone');
|
|
isGlancing = () => this.#$container && this.#$container.dataset.display === 'glancing';
|
|
|
|
quickGlanceSetup() {
|
|
if (!STATES.isPlaying || this.#quickGlanceObserver) {
|
|
return;
|
|
}
|
|
|
|
const $uiContainer = document.querySelector('div[data-testid=ui-container]')!;
|
|
if (!$uiContainer) {
|
|
return;
|
|
}
|
|
|
|
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;
|
|
if (expanded === 'true') {
|
|
this.isHidden() && this.start(true);
|
|
} else {
|
|
this.stop(true);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.#quickGlanceObserver.observe($uiContainer, {
|
|
attributes: true,
|
|
attributeFilter: ['aria-expanded'],
|
|
subtree: true,
|
|
});
|
|
}
|
|
|
|
quickGlanceStop() {
|
|
this.#quickGlanceObserver && this.#quickGlanceObserver.disconnect();
|
|
this.#quickGlanceObserver = null;
|
|
}
|
|
|
|
async #update() {
|
|
if (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);
|
|
|
|
const stats = await STATES.currentStream.peerConnection.getStats();
|
|
let grade = '';
|
|
|
|
stats.forEach(stat => {
|
|
if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
|
|
// FPS
|
|
this.#$fps!.textContent = stat.framesPerSecond || 0;
|
|
|
|
// 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}%)`;
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
});
|
|
|
|
const lapsedTime = performance.now() - startTime;
|
|
this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval - lapsedTime);
|
|
}
|
|
|
|
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!;
|
|
$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;
|
|
}
|
|
|
|
hideSettingsUi() {
|
|
if (this.isGlancing() && !getPref(PrefKey.STATS_QUICK_GLANCE)) {
|
|
this.stop();
|
|
}
|
|
}
|
|
|
|
#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')],
|
|
};
|
|
|
|
const $barFragment = document.createDocumentFragment();
|
|
let statKey: keyof typeof stats;
|
|
for (statKey in stats) {
|
|
const $div = CE('div', {
|
|
'class': `bx-stat-${statKey}`,
|
|
title: stats[statKey][0]
|
|
},
|
|
CE('label', {}, statKey.toUpperCase()),
|
|
stats[statKey][1],
|
|
);
|
|
|
|
$barFragment.appendChild($div);
|
|
}
|
|
|
|
this.#$container = CE('div', {'class': 'bx-stats-bar bx-gone'}, $barFragment);
|
|
this.refreshStyles();
|
|
|
|
document.documentElement.appendChild(this.#$container!);
|
|
}
|
|
|
|
static setupEvents() {
|
|
window.addEventListener(BxEvent.STREAM_PLAYING, e => {
|
|
const PREF_STATS_QUICK_GLANCE = getPref(PrefKey.STATS_QUICK_GLANCE);
|
|
const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_PLAYING);
|
|
|
|
const streamStats = StreamStats.getInstance();
|
|
// Setup Stat's Quick Glance mode
|
|
|
|
if (PREF_STATS_SHOW_WHEN_PLAYING) {
|
|
streamStats.start();
|
|
} else if (PREF_STATS_QUICK_GLANCE) {
|
|
streamStats.quickGlanceSetup();
|
|
// Show stats bar
|
|
!PREF_STATS_SHOW_WHEN_PLAYING && streamStats.start(true);
|
|
}
|
|
});
|
|
}
|
|
|
|
static refreshStyles() {
|
|
StreamStats.getInstance().refreshStyles();
|
|
}
|
|
}
|