mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-08-09 06:37:43 +02:00
Port the rest of the code
This commit is contained in:
redphx
240
src/modules/stream/stream-badges.ts
Normal file
240
src/modules/stream/stream-badges.ts
Normal file
@@ -0,0 +1,240 @@
|
||||
import { t } from "../translation";
|
||||
import { BxEvent } from "../bx-event";
|
||||
import { CE } from "../../utils/html";
|
||||
|
||||
enum StreamBadge {
|
||||
PLAYTIME = 'playtime',
|
||||
BATTERY = 'battery',
|
||||
IN = 'in',
|
||||
OUT = 'out',
|
||||
|
||||
SERVER = 'server',
|
||||
VIDEO = 'video',
|
||||
AUDIO = 'audio',
|
||||
|
||||
BREAK = 'break',
|
||||
}
|
||||
|
||||
export class StreamBadges {
|
||||
static ipv6 = false;
|
||||
static resolution?: {width: number, height: number} | null = null;
|
||||
static video?: {codec: string, profile?: string | null} | null = null;
|
||||
static audio?: {codec: string, bitrate: number} | null = null;
|
||||
static fps = 0;
|
||||
static region = '';
|
||||
|
||||
static startBatteryLevel = 100;
|
||||
static startTimestamp = 0;
|
||||
|
||||
static #cachedDoms: {[index: string]: HTMLElement} = {};
|
||||
|
||||
static #interval?: number | null;
|
||||
static readonly #REFRESH_INTERVAL = 3000;
|
||||
|
||||
static #renderBadge(name: StreamBadge, value: string, color: string) {
|
||||
if (name === StreamBadge.BREAK) {
|
||||
return CE('div', {'style': 'display: block'});
|
||||
}
|
||||
|
||||
let $badge;
|
||||
if (StreamBadges.#cachedDoms[name]) {
|
||||
$badge = StreamBadges.#cachedDoms[name];
|
||||
$badge.lastElementChild!.textContent = value;
|
||||
return $badge;
|
||||
}
|
||||
|
||||
$badge = CE('div', {'class': 'bx-badge'},
|
||||
CE('span', {'class': 'bx-badge-name'}, t(`badge-${name}`)),
|
||||
CE('span', {'class': 'bx-badge-value', 'style': `background-color: ${color}`}, value));
|
||||
|
||||
if (name === StreamBadge.BATTERY) {
|
||||
$badge.classList.add('bx-badge-battery');
|
||||
}
|
||||
|
||||
StreamBadges.#cachedDoms[name] = $badge;
|
||||
return $badge;
|
||||
}
|
||||
|
||||
static async #updateBadges(forceUpdate: boolean) {
|
||||
if (!forceUpdate && !document.querySelector('.bx-badges')) {
|
||||
StreamBadges.#stop();
|
||||
return;
|
||||
}
|
||||
|
||||
// Playtime
|
||||
let now = +new Date;
|
||||
const diffSeconds = Math.ceil((now - StreamBadges.startTimestamp) / 1000);
|
||||
const playtime = StreamBadges.#secondsToHm(diffSeconds);
|
||||
|
||||
// Battery
|
||||
let batteryLevel = '100%';
|
||||
let batteryLevelInt = 100;
|
||||
let isCharging = false;
|
||||
if ('getBattery' in navigator) {
|
||||
try {
|
||||
const bm = await (navigator as NavigatorBattery).getBattery();
|
||||
isCharging = bm.charging;
|
||||
batteryLevelInt = Math.round(bm.level * 100);
|
||||
batteryLevel = `${batteryLevelInt}%`;
|
||||
|
||||
if (batteryLevelInt != StreamBadges.startBatteryLevel) {
|
||||
const diffLevel = Math.round(batteryLevelInt - StreamBadges.startBatteryLevel);
|
||||
const sign = diffLevel > 0 ? '+' : '';
|
||||
batteryLevel += ` (${sign}${diffLevel}%)`;
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
const stats = await STREAM_WEBRTC.getStats();
|
||||
let totalIn = 0;
|
||||
let totalOut = 0;
|
||||
stats.forEach(stat => {
|
||||
if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
|
||||
totalIn += stat.bytesReceived;
|
||||
totalOut += stat.bytesSent;
|
||||
}
|
||||
});
|
||||
|
||||
const badges = {
|
||||
[StreamBadge.IN]: totalIn ? StreamBadges.#humanFileSize(totalIn) : null,
|
||||
[StreamBadge.OUT]: totalOut ? StreamBadges.#humanFileSize(totalOut) : null,
|
||||
[StreamBadge.PLAYTIME]: playtime,
|
||||
[StreamBadge.BATTERY]: batteryLevel,
|
||||
};
|
||||
|
||||
let name: keyof typeof badges;
|
||||
for (name in badges) {
|
||||
const value = badges[name];
|
||||
if (value === null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const $elm = StreamBadges.#cachedDoms[name];
|
||||
$elm && ($elm.lastElementChild!.textContent = value);
|
||||
|
||||
if (name === StreamBadge.BATTERY) {
|
||||
// Show charging status
|
||||
$elm.setAttribute('data-charging', isCharging.toString());
|
||||
|
||||
if (StreamBadges.startBatteryLevel === 100 && batteryLevelInt === 100) {
|
||||
$elm.style.display = 'none';
|
||||
} else {
|
||||
$elm.removeAttribute('style');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static #stop() {
|
||||
StreamBadges.#interval && clearInterval(StreamBadges.#interval);
|
||||
StreamBadges.#interval = null;
|
||||
}
|
||||
|
||||
static #secondsToHm(seconds: number) {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor(seconds % 3600 / 60) + 1;
|
||||
|
||||
const hDisplay = h > 0 ? `${h}h`: '';
|
||||
const mDisplay = m > 0 ? `${m}m`: '';
|
||||
return hDisplay + mDisplay;
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/20732091
|
||||
static #humanFileSize(size: number) {
|
||||
const units = ['B', 'kB', 'MB', 'GB', 'TB'];
|
||||
|
||||
let i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
|
||||
return (size / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
|
||||
}
|
||||
|
||||
static async render() {
|
||||
// Video
|
||||
let video = '';
|
||||
if (StreamBadges.resolution) {
|
||||
video = `${StreamBadges.resolution.height}p`;
|
||||
}
|
||||
|
||||
if (StreamBadges.video) {
|
||||
video && (video += '/');
|
||||
video += StreamBadges.video.codec;
|
||||
if (StreamBadges.video.profile) {
|
||||
const profile = StreamBadges.video.profile;
|
||||
|
||||
let quality = profile;
|
||||
if (profile.startsWith('4d')) {
|
||||
quality = t('visual-quality-high');
|
||||
} else if (profile.startsWith('42e')) {
|
||||
quality = t('visual-quality-normal');
|
||||
} else if (profile.startsWith('420')) {
|
||||
quality = t('visual-quality-low');
|
||||
}
|
||||
|
||||
video += ` (${quality})`;
|
||||
}
|
||||
}
|
||||
|
||||
// Audio
|
||||
let audio;
|
||||
if (StreamBadges.audio) {
|
||||
audio = StreamBadges.audio.codec;
|
||||
const bitrate = StreamBadges.audio.bitrate / 1000;
|
||||
audio += ` (${bitrate} kHz)`;
|
||||
}
|
||||
|
||||
// Battery
|
||||
let batteryLevel = '';
|
||||
if ('getBattery' in navigator) {
|
||||
batteryLevel = '100%';
|
||||
}
|
||||
|
||||
// Server + Region
|
||||
let server = StreamBadges.region;
|
||||
server += '@' + (StreamBadges.ipv6 ? 'IPv6' : 'IPv4');
|
||||
|
||||
const BADGES = [
|
||||
[StreamBadge.PLAYTIME, '1m', '#ff004d'],
|
||||
[StreamBadge.BATTERY, batteryLevel, '#00b543'],
|
||||
[StreamBadge.IN, StreamBadges.#humanFileSize(0), '#29adff'],
|
||||
[StreamBadge.OUT, StreamBadges.#humanFileSize(0), '#ff77a8'],
|
||||
[StreamBadge.BREAK],
|
||||
[StreamBadge.SERVER, server, '#ff6c24'],
|
||||
video ? [StreamBadge.VIDEO, video, '#742f29'] : null,
|
||||
audio ? [StreamBadge.AUDIO, audio, '#5f574f'] : null,
|
||||
];
|
||||
|
||||
const $wrapper = CE('div', {'class': 'bx-badges'});
|
||||
BADGES.forEach(item => {
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $badge = StreamBadges.#renderBadge(...(item as [StreamBadge, string, string]));
|
||||
$wrapper.appendChild($badge);
|
||||
});
|
||||
|
||||
await StreamBadges.#updateBadges(true);
|
||||
StreamBadges.#stop();
|
||||
StreamBadges.#interval = setInterval(StreamBadges.#updateBadges, StreamBadges.#REFRESH_INTERVAL);
|
||||
|
||||
return $wrapper;
|
||||
}
|
||||
|
||||
static setupEvents() {
|
||||
window.addEventListener(BxEvent.STREAM_PLAYING, e => {
|
||||
const $video = (e as any).$video;
|
||||
|
||||
StreamBadges.resolution = {
|
||||
width: $video.videoWidth,
|
||||
height: $video.videoHeight
|
||||
};
|
||||
StreamBadges.startTimestamp = +new Date;
|
||||
|
||||
// Get battery level
|
||||
try {
|
||||
'getBattery' in navigator && (navigator as NavigatorBattery).getBattery().then(bm => {
|
||||
StreamBadges.startBatteryLevel = Math.round(bm.level * 100);
|
||||
});
|
||||
} catch(e) {}
|
||||
});
|
||||
}
|
||||
}
|
||||
300
src/modules/stream/stream-stats.ts
Normal file
300
src/modules/stream/stream-stats.ts
Normal file
@@ -0,0 +1,300 @@
|
||||
import { PrefKey, Preferences } from "../preferences"
|
||||
import { BxEvent } from "../bx-event"
|
||||
import { getPref } from "../preferences"
|
||||
import { StreamBadges } from "./stream-badges"
|
||||
import { CE } from "../../utils/html"
|
||||
import { t } from "../translation"
|
||||
|
||||
export enum StreamStat {
|
||||
PING = 'ping',
|
||||
FPS = 'fps',
|
||||
BITRATE = 'btr',
|
||||
DECODE_TIME = 'dt',
|
||||
PACKETS_LOST = 'pl',
|
||||
FRAMES_LOST = 'fl',
|
||||
};
|
||||
|
||||
export class StreamStats {
|
||||
static #interval?: number | null;
|
||||
static #updateInterval = 1000;
|
||||
|
||||
static #$container: HTMLElement;
|
||||
static #$fps: HTMLElement;
|
||||
static #$ping: HTMLElement;
|
||||
static #$dt: HTMLElement;
|
||||
static #$pl: HTMLElement;
|
||||
static #$fl: HTMLElement;
|
||||
static #$br: HTMLElement;
|
||||
|
||||
static #lastStat?: RTCBasicStat | null;
|
||||
|
||||
static #quickGlanceObserver?: MutationObserver | null;
|
||||
|
||||
static start(glancing=false) {
|
||||
if (!StreamStats.isHidden() || (glancing && StreamStats.isGlancing())) {
|
||||
return;
|
||||
}
|
||||
|
||||
StreamStats.#$container.classList.remove('bx-gone');
|
||||
StreamStats.#$container.setAttribute('data-display', glancing ? 'glancing' : 'fixed');
|
||||
|
||||
StreamStats.#interval = setInterval(StreamStats.update, StreamStats.#updateInterval);
|
||||
}
|
||||
|
||||
static stop(glancing=false) {
|
||||
if (glancing && !StreamStats.isGlancing()) {
|
||||
return;
|
||||
}
|
||||
|
||||
StreamStats.#interval && clearInterval(StreamStats.#interval);
|
||||
StreamStats.#interval = null;
|
||||
StreamStats.#lastStat = null;
|
||||
|
||||
if (StreamStats.#$container) {
|
||||
StreamStats.#$container.removeAttribute('data-display');
|
||||
StreamStats.#$container.classList.add('bx-gone');
|
||||
}
|
||||
}
|
||||
|
||||
static toggle() {
|
||||
if (StreamStats.isGlancing()) {
|
||||
StreamStats.#$container.setAttribute('data-display', 'fixed');
|
||||
} else {
|
||||
StreamStats.isHidden() ? StreamStats.start() : StreamStats.stop();
|
||||
}
|
||||
}
|
||||
|
||||
static onStoppedPlaying() {
|
||||
StreamStats.stop();
|
||||
StreamStats.quickGlanceStop();
|
||||
StreamStats.hideSettingsUi();
|
||||
}
|
||||
|
||||
static isHidden = () => StreamStats.#$container && StreamStats.#$container.classList.contains('bx-gone');
|
||||
static isGlancing = () => StreamStats.#$container && StreamStats.#$container.getAttribute('data-display') === 'glancing';
|
||||
|
||||
static quickGlanceSetup() {
|
||||
if (StreamStats.#quickGlanceObserver) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $uiContainer = document.querySelector('div[data-testid=ui-container]')!;
|
||||
StreamStats.#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') {
|
||||
StreamStats.isHidden() && StreamStats.start(true);
|
||||
} else {
|
||||
StreamStats.stop(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
StreamStats.#quickGlanceObserver.observe($uiContainer, {
|
||||
attributes: true,
|
||||
attributeFilter: ['aria-expanded'],
|
||||
subtree: true,
|
||||
});
|
||||
}
|
||||
|
||||
static quickGlanceStop() {
|
||||
StreamStats.#quickGlanceObserver && StreamStats.#quickGlanceObserver.disconnect();
|
||||
StreamStats.#quickGlanceObserver = null;
|
||||
}
|
||||
|
||||
static update() {
|
||||
if (StreamStats.isHidden() || !STREAM_WEBRTC) {
|
||||
StreamStats.onStoppedPlaying();
|
||||
return;
|
||||
}
|
||||
|
||||
const PREF_STATS_CONDITIONAL_FORMATTING = getPref(PrefKey.STATS_CONDITIONAL_FORMATTING);
|
||||
STREAM_WEBRTC.getStats().then(stats => {
|
||||
stats.forEach(stat => {
|
||||
let grade = '';
|
||||
if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
|
||||
// FPS
|
||||
StreamStats.#$fps.textContent = stat.framesPerSecond || 0;
|
||||
|
||||
// Packets Lost
|
||||
const packetsLost = stat.packetsLost;
|
||||
const packetsReceived = stat.packetsReceived;
|
||||
const packetsLostPercentage = (packetsLost * 100 / ((packetsLost + packetsReceived) || 1)).toFixed(2);
|
||||
StreamStats.#$pl.textContent = packetsLostPercentage === '0.00' ? packetsLost : `${packetsLost} (${packetsLostPercentage}%)`;
|
||||
|
||||
// Frames Dropped
|
||||
const framesDropped = stat.framesDropped;
|
||||
const framesReceived = stat.framesReceived;
|
||||
const framesDroppedPercentage = (framesDropped * 100 / ((framesDropped + framesReceived) || 1)).toFixed(2);
|
||||
StreamStats.#$fl.textContent = framesDroppedPercentage === '0.00' ? framesDropped : `${framesDropped} (${framesDroppedPercentage}%)`;
|
||||
|
||||
if (StreamStats.#lastStat) {
|
||||
const lastStat = StreamStats.#lastStat;
|
||||
// Bitrate
|
||||
const timeDiff = stat.timestamp - lastStat.timestamp;
|
||||
const bitrate = 8 * (stat.bytesReceived - lastStat.bytesReceived) / timeDiff / 1000;
|
||||
StreamStats.#$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;
|
||||
StreamStats.#$dt.textContent = `${currentDecodeTime.toFixed(2)}ms`;
|
||||
|
||||
if (PREF_STATS_CONDITIONAL_FORMATTING) {
|
||||
grade = (currentDecodeTime > 12) ? 'bad' : (currentDecodeTime > 9) ? 'ok' : (currentDecodeTime > 6) ? 'good' : '';
|
||||
}
|
||||
StreamStats.#$dt.setAttribute('data-grade', grade);
|
||||
}
|
||||
|
||||
StreamStats.#lastStat = stat;
|
||||
} else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
|
||||
// Round Trip Time
|
||||
const roundTripTime = typeof stat.currentRoundTripTime !== 'undefined' ? stat.currentRoundTripTime * 1000 : -1;
|
||||
StreamStats.#$ping.textContent = roundTripTime === -1 ? '???' : roundTripTime.toString();
|
||||
|
||||
if (PREF_STATS_CONDITIONAL_FORMATTING) {
|
||||
grade = (roundTripTime > 100) ? 'bad' : (roundTripTime > 75) ? 'ok' : (roundTripTime > 40) ? 'good' : '';
|
||||
}
|
||||
StreamStats.#$ping.setAttribute('data-grade', grade);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
static 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 = StreamStats.#$container;
|
||||
$container.setAttribute('data-stats', '[' + PREF_ITEMS.join('][') + ']');
|
||||
$container.setAttribute('data-position', PREF_POSITION);
|
||||
$container.setAttribute('data-transparent', PREF_TRANSPARENT);
|
||||
$container.style.opacity = PREF_OPACITY + '%';
|
||||
$container.style.fontSize = PREF_TEXT_SIZE;
|
||||
}
|
||||
|
||||
static hideSettingsUi() {
|
||||
if (StreamStats.isGlancing() && !getPref(PrefKey.STATS_QUICK_GLANCE)) {
|
||||
StreamStats.stop();
|
||||
}
|
||||
}
|
||||
|
||||
static render() {
|
||||
if (StreamStats.#$container) {
|
||||
return;
|
||||
}
|
||||
|
||||
const STATS = {
|
||||
[StreamStat.PING]: [t('stat-ping'), StreamStats.#$ping = CE('span', {}, '0')],
|
||||
[StreamStat.FPS]: [t('stat-fps'), StreamStats.#$fps = CE('span', {}, '0')],
|
||||
[StreamStat.BITRATE]: [t('stat-bitrate'), StreamStats.#$br = CE('span', {}, '0 Mbps')],
|
||||
[StreamStat.DECODE_TIME]: [t('stat-decode-time'), StreamStats.#$dt = CE('span', {}, '0ms')],
|
||||
[StreamStat.PACKETS_LOST]: [t('stat-packets-lost'), StreamStats.#$pl = CE('span', {}, '0')],
|
||||
[StreamStat.FRAMES_LOST]: [t('stat-frames-lost'), StreamStats.#$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);
|
||||
}
|
||||
|
||||
StreamStats.#$container = CE('div', {'class': 'bx-stats-bar bx-gone'}, $barFragment);
|
||||
document.documentElement.appendChild(StreamStats.#$container);
|
||||
|
||||
StreamStats.refreshStyles();
|
||||
}
|
||||
|
||||
static getServerStats() {
|
||||
STREAM_WEBRTC && STREAM_WEBRTC.getStats().then(stats => {
|
||||
const allVideoCodecs: {[index: string]: RTCBasicStat} = {};
|
||||
let videoCodecId;
|
||||
|
||||
const allAudioCodecs: {[index: string]: RTCBasicStat} = {};
|
||||
let audioCodecId;
|
||||
|
||||
const allCandidates: {[index: string]: string} = {};
|
||||
let candidateId;
|
||||
|
||||
stats.forEach((stat: RTCBasicStat) => {
|
||||
if (stat.type === 'codec') {
|
||||
const mimeType = stat.mimeType.split('/');
|
||||
if (mimeType[0] === 'video') {
|
||||
// Store all video stats
|
||||
allVideoCodecs[stat.id] = stat;
|
||||
} else if (mimeType[0] === 'audio') {
|
||||
// Store all audio stats
|
||||
allAudioCodecs[stat.id] = stat;
|
||||
}
|
||||
} else if (stat.type === 'inbound-rtp' && stat.packetsReceived > 0) {
|
||||
// Get the codecId of the video/audio track currently being used
|
||||
if (stat.kind === 'video') {
|
||||
videoCodecId = stat.codecId;
|
||||
} else if (stat.kind === 'audio') {
|
||||
audioCodecId = stat.codecId;
|
||||
}
|
||||
} else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
|
||||
candidateId = stat.remoteCandidateId;
|
||||
} else if (stat.type === 'remote-candidate') {
|
||||
allCandidates[stat.id] = stat.address;
|
||||
}
|
||||
});
|
||||
|
||||
// Get video codec from codecId
|
||||
if (videoCodecId) {
|
||||
const videoStat = allVideoCodecs[videoCodecId];
|
||||
const video: typeof StreamBadges.video = {
|
||||
codec: videoStat.mimeType.substring(6),
|
||||
};
|
||||
|
||||
if (video.codec === 'H264') {
|
||||
const match = /profile-level-id=([0-9a-f]{6})/.exec(videoStat.sdpFmtpLine);
|
||||
video.profile = match ? match[1] : null;
|
||||
}
|
||||
|
||||
StreamBadges.video = video;
|
||||
}
|
||||
|
||||
// Get audio codec from codecId
|
||||
if (audioCodecId) {
|
||||
const audioStat = allAudioCodecs[audioCodecId];
|
||||
StreamBadges.audio = {
|
||||
codec: audioStat.mimeType.substring(6),
|
||||
bitrate: audioStat.clockRate,
|
||||
}
|
||||
}
|
||||
|
||||
// Get server type
|
||||
if (candidateId) {
|
||||
console.log('candidate', candidateId, allCandidates);
|
||||
StreamBadges.ipv6 = allCandidates[candidateId].includes(':');
|
||||
}
|
||||
|
||||
if (getPref(PrefKey.STATS_SHOW_WHEN_PLAYING)) {
|
||||
StreamStats.start();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
StreamStats.getServerStats();
|
||||
// Setup Stat's Quick Glance mode
|
||||
if (PREF_STATS_QUICK_GLANCE) {
|
||||
StreamStats.quickGlanceSetup();
|
||||
// Show stats bar
|
||||
!PREF_STATS_SHOW_WHEN_PLAYING && StreamStats.start(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
344
src/modules/stream/stream-ui.ts
Normal file
344
src/modules/stream/stream-ui.ts
Normal file
@@ -0,0 +1,344 @@
|
||||
import { Icon } from "../../utils/html";
|
||||
import { BxEvent } from "../bx-event";
|
||||
import { PrefKey, getPref } from "../preferences";
|
||||
import { t } from "../translation";
|
||||
import { StreamBadges } from "./stream-badges";
|
||||
import { StreamStats } from "./stream-stats";
|
||||
|
||||
|
||||
class MouseHoldEvent {
|
||||
#isHolding = false;
|
||||
#timeout?: number | null;
|
||||
|
||||
#$elm;
|
||||
#callback;
|
||||
#duration;
|
||||
|
||||
#onMouseDown(e: MouseEvent | TouchEvent) {
|
||||
const _this = this;
|
||||
this.#isHolding = false;
|
||||
|
||||
this.#timeout && clearTimeout(this.#timeout);
|
||||
this.#timeout = setTimeout(() => {
|
||||
_this.#isHolding = true;
|
||||
_this.#callback();
|
||||
}, this.#duration);
|
||||
};
|
||||
|
||||
#onMouseUp(e: MouseEvent | TouchEvent) {
|
||||
this.#timeout && clearTimeout(this.#timeout);
|
||||
this.#timeout = null;
|
||||
|
||||
if (this.#isHolding) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
this.#isHolding = false;
|
||||
};
|
||||
|
||||
#addEventListeners = () => {
|
||||
this.#$elm.addEventListener('mousedown', this.#onMouseDown.bind(this));
|
||||
this.#$elm.addEventListener('click', this.#onMouseUp.bind(this));
|
||||
|
||||
this.#$elm.addEventListener('touchstart', this.#onMouseDown.bind(this));
|
||||
this.#$elm.addEventListener('touchend', this.#onMouseUp.bind(this));
|
||||
}
|
||||
|
||||
#clearEventLiseners = () => {
|
||||
this.#$elm.removeEventListener('mousedown', this.#onMouseDown);
|
||||
this.#$elm.removeEventListener('click', this.#onMouseUp);
|
||||
|
||||
this.#$elm.removeEventListener('touchstart', this.#onMouseDown);
|
||||
this.#$elm.removeEventListener('touchend', this.#onMouseUp);
|
||||
}
|
||||
|
||||
constructor($elm: HTMLElement, callback: any, duration=1000) {
|
||||
this.#$elm = $elm;
|
||||
this.#callback = callback;
|
||||
this.#duration = duration;
|
||||
|
||||
this.#addEventListeners();
|
||||
// $elm.clearMouseHoldEventListeners = this.#clearEventLiseners;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: Icon) {
|
||||
const $container = $orgButton.cloneNode(true) as HTMLElement;
|
||||
let timeout: number | null;
|
||||
|
||||
const onTransitionStart = (e: TransitionEvent) => {
|
||||
if ( e.propertyName !== 'opacity') {
|
||||
return;
|
||||
}
|
||||
|
||||
timeout && clearTimeout(timeout);
|
||||
$container.style.pointerEvents = 'none';
|
||||
};
|
||||
|
||||
const onTransitionEnd = (e: TransitionEvent) => {
|
||||
if ( e.propertyName !== 'opacity') {
|
||||
return;
|
||||
}
|
||||
|
||||
const left = document.getElementById('StreamHud')?.style.left;
|
||||
if (left === '0px') {
|
||||
timeout && clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
$container.style.pointerEvents = 'auto';
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
if (States.hasTouchSupport) {
|
||||
$container.addEventListener('transitionstart', onTransitionStart);
|
||||
$container.addEventListener('transitionend', onTransitionEnd);
|
||||
}
|
||||
|
||||
const $button = $container.querySelector('button')!;
|
||||
$button.setAttribute('title', label);
|
||||
|
||||
const $svg = $button.querySelector('svg')!;
|
||||
$svg.innerHTML = svgIcon;
|
||||
$svg.style.fill = 'none';
|
||||
|
||||
const attrs = {
|
||||
'fill': 'none',
|
||||
'stroke': '#fff',
|
||||
'fill-rule': 'evenodd',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-width': '2',
|
||||
'viewBox': '0 0 32 32'
|
||||
};
|
||||
|
||||
let attr: keyof typeof attrs;
|
||||
for (attr in attrs) {
|
||||
$svg.setAttribute(attr, attrs[attr]);
|
||||
}
|
||||
|
||||
return $container;
|
||||
}
|
||||
|
||||
|
||||
export function injectStreamMenuButtons() {
|
||||
const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
|
||||
if (!$screen) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (($screen as any).xObserving) {
|
||||
return;
|
||||
}
|
||||
|
||||
($screen as any).xObserving = true;
|
||||
|
||||
const $quickBar = document.querySelector('.bx-quick-settings-bar')!;
|
||||
const $parent = $screen.parentElement;
|
||||
const hideQuickBarFunc = (e?: MouseEvent | TouchEvent) => {
|
||||
if (e) {
|
||||
const $target = e.target as HTMLElement;
|
||||
e.stopPropagation();
|
||||
if ($target != $parent && $target.id !== 'MultiTouchSurface' && !$target.querySelector('#BabylonCanvasContainer-main')) {
|
||||
return;
|
||||
}
|
||||
if ($target.id === 'MultiTouchSurface') {
|
||||
$target.removeEventListener('touchstart', hideQuickBarFunc);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide Quick settings bar
|
||||
$quickBar.classList.add('bx-gone');
|
||||
|
||||
$parent?.removeEventListener('click', hideQuickBarFunc);
|
||||
// $parent.removeEventListener('touchstart', hideQuickBarFunc);
|
||||
}
|
||||
|
||||
let $btnStreamSettings: HTMLElement;
|
||||
let $btnStreamStats: HTMLElement;
|
||||
|
||||
const PREF_DISABLE_FEEDBACK_DIALOG = getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG);
|
||||
const observer = new MutationObserver(mutationList => {
|
||||
mutationList.forEach(item => {
|
||||
if (item.type !== 'childList') {
|
||||
return;
|
||||
}
|
||||
|
||||
item.removedNodes.forEach($node => {
|
||||
if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!($node as HTMLElement).className || !($node as HTMLElement).className.startsWith) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (($node as HTMLElement).className.startsWith('StreamMenu')) {
|
||||
if (!document.querySelector('div[class^=PureInStreamConfirmationModal]')) {
|
||||
BxEvent.dispatch(window, BxEvent.STREAM_MENU_HIDDEN);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
item.addedNodes.forEach(async $node => {
|
||||
if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
|
||||
return;
|
||||
}
|
||||
|
||||
let $elm: HTMLElement | null = $node as HTMLElement;
|
||||
|
||||
// Error Page: .PureErrorPage.ErrorScreen
|
||||
if ($elm.className.includes('PureErrorPage')) {
|
||||
BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
|
||||
return;
|
||||
}
|
||||
|
||||
if (PREF_DISABLE_FEEDBACK_DIALOG && $elm.className.startsWith('PostStreamFeedbackScreen')) {
|
||||
const $btnClose = $elm.querySelector('button');
|
||||
$btnClose && $btnClose.click();
|
||||
return;
|
||||
}
|
||||
|
||||
// Render badges
|
||||
if ($elm.className.startsWith('StreamMenu')) {
|
||||
BxEvent.dispatch(window, BxEvent.STREAM_MENU_SHOWN);
|
||||
|
||||
// Hide Quick bar when closing HUD
|
||||
const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]');
|
||||
if (!$btnCloseHud) {
|
||||
return;
|
||||
}
|
||||
|
||||
$btnCloseHud && $btnCloseHud.addEventListener('click', e => {
|
||||
$quickBar.classList.add('bx-gone');
|
||||
});
|
||||
|
||||
// Get "Quit game" button
|
||||
const $btnQuit = $elm.querySelector('div[class^=StreamMenu] > div > button:last-child') as HTMLElement;
|
||||
// Hold "Quit game" button to refresh the stream
|
||||
new MouseHoldEvent($btnQuit, () => {
|
||||
confirm(t('confirm-reload-stream')) && window.location.reload();
|
||||
}, 1000);
|
||||
|
||||
// Render stream badges
|
||||
const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
|
||||
$menu?.appendChild(await StreamBadges.render());
|
||||
|
||||
hideQuickBarFunc();
|
||||
return;
|
||||
}
|
||||
|
||||
if ($elm.className.startsWith('Overlay-module_') || $elm.className.startsWith('InProgressScreen')) {
|
||||
$elm = $elm.querySelector('#StreamHud');
|
||||
}
|
||||
|
||||
if (!$elm || ($elm.id || '') !== 'StreamHud') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Grip handle
|
||||
const $gripHandle = $elm.querySelector('button[class^=GripHandle]') as HTMLElement;
|
||||
|
||||
const hideGripHandle = () => {
|
||||
if (!$gripHandle) {
|
||||
return;
|
||||
}
|
||||
|
||||
$gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
|
||||
$gripHandle.click();
|
||||
$gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
|
||||
$gripHandle.click();
|
||||
}
|
||||
|
||||
// Get the second last button
|
||||
const $orgButton = $elm.querySelector('div[class^=HUDButton]') as HTMLElement;
|
||||
if (!$orgButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create Stream Settings button
|
||||
if (!$btnStreamSettings) {
|
||||
$btnStreamSettings = cloneStreamHudButton($orgButton, t('menu-stream-settings'), Icon.STREAM_SETTINGS);
|
||||
$btnStreamSettings.addEventListener('click', e => {
|
||||
hideGripHandle();
|
||||
e.preventDefault();
|
||||
|
||||
// Show Quick settings bar
|
||||
$quickBar.classList.remove('bx-gone');
|
||||
|
||||
$parent?.addEventListener('click', hideQuickBarFunc);
|
||||
//$parent.addEventListener('touchstart', hideQuickBarFunc);
|
||||
|
||||
const $touchSurface = document.getElementById('MultiTouchSurface');
|
||||
$touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideQuickBarFunc);
|
||||
});
|
||||
}
|
||||
|
||||
// Create Stream Stats button
|
||||
if (!$btnStreamStats) {
|
||||
$btnStreamStats = cloneStreamHudButton($orgButton, t('menu-stream-stats'), Icon.STREAM_STATS);
|
||||
$btnStreamStats.addEventListener('click', e => {
|
||||
hideGripHandle();
|
||||
e.preventDefault();
|
||||
|
||||
// Toggle Stream Stats
|
||||
StreamStats.toggle();
|
||||
|
||||
const btnStreamStatsOn = (!StreamStats.isHidden() && !StreamStats.isGlancing());
|
||||
$btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
|
||||
});
|
||||
}
|
||||
|
||||
const btnStreamStatsOn = (!StreamStats.isHidden() && !StreamStats.isGlancing());
|
||||
$btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
|
||||
|
||||
if ($orgButton) {
|
||||
const $btnParent = $orgButton.parentElement!;
|
||||
|
||||
// Insert buttons after Stream Settings button
|
||||
$btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild);
|
||||
$btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
|
||||
|
||||
// Move the Dots button to the beginning
|
||||
const $dotsButton = $btnParent.lastElementChild!;
|
||||
$dotsButton.parentElement!.insertBefore($dotsButton, $dotsButton.parentElement!.firstElementChild);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
observer.observe($screen, {subtree: true, childList: true});
|
||||
}
|
||||
|
||||
|
||||
export function showStreamSettings(tabId: string) {
|
||||
const $wrapper = document.querySelector('.bx-quick-settings-bar');
|
||||
if (!$wrapper) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Select tab
|
||||
if (tabId) {
|
||||
const $tab = $wrapper.querySelector(`.bx-quick-settings-tabs svg[data-group=${tabId}]`);
|
||||
$tab && $tab.dispatchEvent(new Event('click'));
|
||||
}
|
||||
|
||||
$wrapper.classList.remove('bx-gone');
|
||||
|
||||
const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
|
||||
if ($screen && $screen.parentElement) {
|
||||
const $parent = $screen.parentElement;
|
||||
if (!$parent || ($parent as any).bxClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
($parent as any).bxClick = true;
|
||||
|
||||
const onClick = (e: Event) => {
|
||||
$wrapper.classList.add('bx-gone');
|
||||
($parent as any).bxClick = false;
|
||||
$parent.removeEventListener('click', onClick);
|
||||
};
|
||||
|
||||
$parent.addEventListener('click', onClick);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user