From cf65d12a843cd6c0fee5273b59b9cdf1147e7f93 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sun, 14 Jan 2024 17:01:45 +0700
Subject: [PATCH] Add a button to show MKB settings to the MKB overlay message
---
better-xcloud.user.js | 49 ++++++++++++++++++++++++++++++++++++-------
1 file changed, 42 insertions(+), 7 deletions(-)
diff --git a/better-xcloud.user.js b/better-xcloud.user.js
index 8adc285..25b2e11 100644
--- a/better-xcloud.user.js
+++ b/better-xcloud.user.js
@@ -2752,6 +2752,7 @@ const Icon = {
CONTROLLER: '',
DISPLAY: '',
MOUSE: '',
+ MOUSE_SETTINGS: '',
NEW: '',
COPY: '',
TRASH: '',
@@ -4542,11 +4543,19 @@ class MkbHandler {
document.addEventListener('pointerlockerror', this.#onPointerLockError);
this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
- createSvgIcon(Icon.MOUSE),
- CE('div', {},
- CE('p', {}, __('mkb-click-to-activate')),
- CE('p', {}, __('press-key-to-toggle-mkb')({key: 'F9'})),
- ),
+ createButton({
+ icon: Icon.MOUSE_SETTINGS,
+ onClick: e => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ showStreamSettings('mkb');
+ },
+ }),
+ CE('div', {},
+ CE('p', {}, __('mkb-click-to-activate')),
+ CE('p', {}, __('press-key-to-toggle-mkb')({key: 'F9'})),
+ ),
);
this.#$message.addEventListener('click', this.#onActivatePointerLock);
@@ -7149,6 +7158,10 @@ a.bx-button {
overflow: hidden;
}
+.bx-button:focus {
+ outline: none !important;
+}
+
.bx-button:hover, .bx-button.bx-focusable:focus {
background-color: var(--bx-default-button-hover-color);
}
@@ -7969,10 +7982,17 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
box-shadow: 0 0 6px #000;
}
+.bx-mkb-pointer-lock-msg:hover {
+ background: #151515;
+}
+
+.bx-mkb-pointer-lock-msg button {
+ margin-right: 12px;
+ height: 60px;
+}
+
.bx-mkb-pointer-lock-msg svg {
width: 32px;
- height: 32px;
- margin-right: 12px;
}
.bx-mkb-pointer-lock-msg div {
@@ -9517,6 +9537,21 @@ function injectStreamMenuButtons() {
}
+function showStreamSettings(tabId) {
+ 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');
+}
+
function patchVideoApi() {
const PREF_SKIP_SPLASH_VIDEO = PREFS.get(Preferences.SKIP_SPLASH_VIDEO);
const PREF_SCREENSHOT_BUTTON_POSITION = PREFS.get(Preferences.SCREENSHOT_BUTTON_POSITION);