diff --git a/better-xcloud.user.js b/better-xcloud.user.js index 85c409c..8bcad03 100644 --- a/better-xcloud.user.js +++ b/better-xcloud.user.js @@ -269,28 +269,83 @@ class StreamStats { static #lastStat; - static start() { + static #quickGlanceObserver; + + static start(glancing=false) { + if (!StreamStats.isHidden() || (glancing && StreamStats.#isGlancing())) { + return; + } + StreamStats.#$container.classList.remove('better-xcloud-gone'); + StreamStats.#$container.setAttribute('data-display', glancing ? 'glancing' : 'fixed'); + StreamStats.#interval = setInterval(StreamStats.update, StreamStats.#updateInterval); } - static stop() { - clearInterval(StreamStats.#interval); + static stop(glancing=false) { + if (glancing && !StreamStats.#isGlancing()) { + return; + } - StreamStats.#$container.classList.add('better-xcloud-gone'); + clearInterval(StreamStats.#interval); StreamStats.#interval = null; StreamStats.#lastStat = null; + + StreamStats.#$container.removeAttribute('data-display'); + StreamStats.#$container.classList.add('better-xcloud-gone'); } static toggle() { - StreamStats.#isHidden() ? StreamStats.start() : StreamStats.stop(); + if (StreamStats.#isGlancing()) { + StreamStats.#$container.setAttribute('data-display', 'fixed'); + } else { + StreamStats.isHidden() ? StreamStats.start() : StreamStats.stop(); + } } - static #isHidden = () => StreamStats.#$container.classList.contains('better-xcloud-gone'); + static onStoppedPlaying() { + StreamStats.stop(); + StreamStats.quickGlanceStop(); + StreamStats.hideSettingsUi(); + } + + static isHidden = () => StreamStats.#$container.classList.contains('better-xcloud-gone'); + static #isGlancing = () => 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.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.stop(); + if (StreamStats.isHidden() || !STREAM_WEBRTC) { + StreamStats.onStoppedPlaying(); return; } @@ -362,6 +417,10 @@ class StreamStats { static hideSettingsUi() { StreamStats.#$settings.style.display = 'none'; + + if (StreamStats.#isGlancing() && !PREFS.get(Preferences.STATS_QUICK_GLANCE)) { + StreamStats.stop(); + } } static #toggleSettingsUi() { @@ -412,7 +471,10 @@ class StreamStats { const $position = PREFS.toElement(Preferences.STATS_POSITION, refreshFunc); let $close; - const $showStartup = PREFS.toElement(Preferences.STATS_SHOW_WHEN_PLAYING, refreshFunc); + const $showStartup = PREFS.toElement(Preferences.STATS_SHOW_WHEN_PLAYING); + const $quickGlance = PREFS.toElement(Preferences.STATS_QUICK_GLANCE, e => { + e.target.checked ? StreamStats.quickGlanceSetup() : StreamStats.quickGlanceStop(); + }); const $transparent = PREFS.toElement(Preferences.STATS_TRANSPARENT, refreshFunc); const $formatting = PREFS.toElement(Preferences.STATS_CONDITIONAL_FORMATTING, refreshFunc); const $opacity = PREFS.toElement(Preferences.STATS_OPACITY, refreshFunc); @@ -424,6 +486,10 @@ class StreamStats { CE('label', {'for': `xcloud_setting_${Preferences.STATS_SHOW_WHEN_PLAYING}`}, 'Show stats when starting the game'), $showStartup ), + CE('div', {}, + CE('label', {'for': `xcloud_setting_${Preferences.STATS_QUICK_GLANCE}`}, 'Enable quick glance'), + $quickGlance + ), CE('div', {}, CE('label', {}, 'Position'), $position @@ -453,7 +519,6 @@ class StreamStats { } } - class UserAgent { static get PROFILE_EDGE_WINDOWS() { return 'edge-windows'; } static get PROFILE_SAFARI_MACOS() { return 'safari-macos'; } @@ -535,6 +600,7 @@ class Preferences { static get VIDEO_SATURATION() { return 'video_saturation'; } static get STATS_SHOW_WHEN_PLAYING() { return 'stats_show_when_playing'; } + static get STATS_QUICK_GLANCE() { return 'stats_quick_glance'; } static get STATS_POSITION() { return 'stats_position'; } static get STATS_TEXT_SIZE() { return 'stats_text_size'; } static get STATS_TRANSPARENT() { return 'stats_transparent'; } @@ -696,6 +762,10 @@ class Preferences { 'default': false, 'hidden': true, }, + [Preferences.STATS_QUICK_GLANCE]: { + 'default': false, + 'hidden': true, + }, [Preferences.STATS_POSITION]: { 'default': 'top-left', 'options': { @@ -1086,6 +1156,11 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] { text-wrap: nowrap; } +.better-xcloud-stats-bar[data-display=glancing]::before { + content: '👀 '; + vertical-align: middle; +} + .better-xcloud-stats-bar[data-position=top-left] { left: 0; } @@ -2046,6 +2121,7 @@ function injectVideoSettingsButton() { function patchVideoApi() { const PREF_SKIP_SPLASH_VIDEO = PREFS.get(Preferences.SKIP_SPLASH_VIDEO); const PREF_SCREENSHOT_BUTTON_POSITION = PREFS.get(Preferences.SCREENSHOT_BUTTON_POSITION); + const PREF_STATS_QUICK_GLANCE = PREFS.get(Preferences.STATS_QUICK_GLANCE); // Show video player when it's ready var showFunc; @@ -2057,6 +2133,10 @@ function patchVideoApi() { return; } + if (PREF_STATS_QUICK_GLANCE) { + StreamStats.quickGlanceSetup(); + } + $STREAM_VIDEO = this; $SCREENSHOT_CANVAS.width = this.videoWidth; $SCREENSHOT_CANVAS.height = this.videoHeight; @@ -2396,8 +2476,7 @@ function onHistoryChange() { STREAM_WEBRTC = null; $STREAM_VIDEO = null; - StreamStats.stop(); - StreamStats.hideSettingsUi(); + StreamStats.onStoppedPlaying(); document.querySelector('.better-xcloud-screenshot-button').style = ''; MouseCursorHider.stop();