From d29447173c40f1a6fbb567b1f83be44789318b84 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sat, 15 Jul 2023 16:56:01 +0700
Subject: [PATCH] Fix Quick video settings feature not working with touch
 screen

---
 better-xcloud.user.js | 44 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/better-xcloud.user.js b/better-xcloud.user.js
index 5511427..bde0b0b 100644
--- a/better-xcloud.user.js
+++ b/better-xcloud.user.js
@@ -790,12 +790,21 @@ function injectVideoSettingsButton() {
 
     const $quickBar = document.querySelector('.better_xcloud_quick_settings_bar');
     const $parent = $screen.parentElement;
-    $parent.addEventListener('click', e => {
-        if (e.target == $parent) {
-            // Hide Quick settings bar
-            $quickBar.style.display = 'none';
+    const hideQuickBarFunc = e => {
+        if (e.target != $parent && e.target.id !== 'MultiTouchSurface') {
+            return;
         }
-    });
+
+        // Hide Quick settings bar
+        $quickBar.style.display = 'none';
+
+        $parent.removeEventListener('click', hideQuickBarFunc);
+        $parent.removeEventListener('touchend', hideQuickBarFunc);
+
+        if (e.target.id === 'MultiTouchSurface') {
+            e.target.removeEventListener('touchstart', hideQuickBarFunc);
+        }
+    }
 
     const observer = new MutationObserver(mutationList => {
         mutationList.forEach(item => {
@@ -839,6 +848,14 @@ function injectVideoSettingsButton() {
 
                     // Close HUD
                     document.querySelector('button[class*=StreamMenu-module__backButton]').click();
+
+                    $parent.addEventListener('click', hideQuickBarFunc);
+                    $parent.addEventListener('touchend', hideQuickBarFunc);
+
+                    const $touchSurface = document.querySelector('#MultiTouchSurface');
+                    if ($touchSurface) {
+                        $touchSurface.addEventListener('touchstart', hideQuickBarFunc);
+                    }
                 });
 
                 $orgButton.parentElement.insertBefore($button, $orgButton.parentElement.firstChild);
@@ -961,10 +978,14 @@ function numberPicker(key) {
     $decBtn.addEventListener('click', onClick);
     $decBtn.addEventListener('mousedown', onMouseDown);
     $decBtn.addEventListener('mouseup', onMouseUp);
+    $decBtn.addEventListener('touchstart', onMouseDown);
+    $decBtn.addEventListener('touchend', onMouseUp);
 
     $incBtn.addEventListener('click', onClick);
     $incBtn.addEventListener('mousedown', onMouseDown);
     $incBtn.addEventListener('mouseup', onMouseUp);
+    $incBtn.addEventListener('touchstart', onMouseDown);
+    $incBtn.addEventListener('touchend', onMouseUp);
 
     return $wrapper;
 }
@@ -1042,11 +1063,18 @@ function setupVideoSettingsBar() {
     color: #000;
 }
 
-.better_xcloud_quick_settings_bar button:hover {
-    background-color: #414141;
-    color: white;
+@media (hover: hover) {
+    .better_xcloud_quick_settings_bar button:hover {
+        background-color: #414141;
+        color: white;
+    }
 }
 
+.better_xcloud_quick_settings_bar button:active {
+        background-color: #414141;
+        color: white;
+    }
+
 .better_xcloud_quick_settings_bar span {
     display: inline-block;
     width: 26px;