Game bar (#392)

* Fix games with custom touch control sometimes not showing touch icon

* Create game-bar with screenshot button

* Disable Game bar when opening the Guide

* Remove SCREENSHOT_BUTTON_POSITION pref

* Make the touch control action functional

* Show game bar when the game starts

* Fix 720p/High not working (#387)

* Update icons

* Update game bar's animations

* Reset states of Game bar actions before playing

* Don't show Touch control action on non-touch-supported devices

* Clean up

* Update translations

* Update actions' texts

* Clean up

src/modules/touch-controller.ts

@@ -1,5 +1,5 @@
 import { STATES } from "@utils/global";
-import { CE, escapeHtml } from "@utils/html";
+import { escapeHtml } from "@utils/html";
 import { Toast } from "@utils/toast";
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS } from "@utils/bx-flags";
@@ -12,7 +12,11 @@ const LOG_TAG = 'TouchController';
 
 export class TouchController {
     static readonly #EVENT_SHOW_DEFAULT_CONTROLLER = new MessageEvent('message', {
-            data: '{"content":"{\\"layoutId\\":\\"\\"}","target":"/streaming/touchcontrols/showlayoutv2","type":"Message"}',
+            data: JSON.stringify({
+                content: '{"layoutId":""}',
+                target: '/streaming/touchcontrols/showlayoutv2',
+                type: 'Message',
+            }),
             origin: 'better-xcloud',
         });
 
@@ -23,17 +27,17 @@ export class TouchController {
         });
     */
 
-    static #$bar: HTMLElement;
     static #$style: HTMLStyleElement;
 
     static #enable = false;
-    static #showing = false;
     static #dataChannel: RTCDataChannel | null;
 
     static #customLayouts: {[index: string]: any} = {};
     static #baseCustomLayouts: {[index: string]: any} = {};
     static #currentLayoutId: string;
 
+    static #customList: string[];
+
     static enable() {
         TouchController.#enable = true;
     }
@@ -48,37 +52,28 @@ export class TouchController {
 
     static #showDefault() {
         TouchController.#dispatchMessage(TouchController.#EVENT_SHOW_DEFAULT_CONTROLLER);
-        TouchController.#showing = true;
     }
 
     static #show() {
         document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.remove('bx-offscreen');
-        TouchController.#showing = true;
     }
 
     static #hide() {
         document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.add('bx-offscreen');
-        TouchController.#showing = false;
     }
 
-    static #toggleVisibility() {
+    static toggleVisibility(status: boolean) {
         if (!TouchController.#dataChannel) {
             return;
         }
 
-        TouchController.#showing ? TouchController.#hide() : TouchController.#show();
-    }
-
-    static #toggleBar(value: boolean) {
-        TouchController.#$bar && TouchController.#$bar.setAttribute('data-showing', value.toString());
+        status ? TouchController.#hide() : TouchController.#show();
     }
 
     static reset() {
         TouchController.#enable = false;
-        TouchController.#showing = false;
         TouchController.#dataChannel = null;
 
-        TouchController.#$bar && TouchController.#$bar.removeAttribute('data-showing');
         TouchController.#$style && (TouchController.#$style.textContent = '');
     }
 
@@ -195,15 +190,19 @@ export class TouchController {
     }
 
     static updateCustomList() {
+        const key = 'better_xcloud_custom_touch_layouts';
+        TouchController.#customList = JSON.parse(window.localStorage.getItem(key) || '[]');
+
         NATIVE_FETCH('https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/touch-layouts/ids.json')
             .then(response => response.json())
             .then(json => {
-                window.localStorage.setItem('better_xcloud_custom_touch_layouts', JSON.stringify(json));
+                TouchController.#customList = json;
+                window.localStorage.setItem(key, JSON.stringify(json));
             });
     }
 
     static getCustomList(): string[] {
-        return JSON.parse(window.localStorage.getItem('better_xcloud_custom_touch_layouts') || '[]');
+        return TouchController.#customList;
     }
 
     static setup() {
@@ -223,32 +222,9 @@ export class TouchController {
             });
         };
 
-        const $fragment = document.createDocumentFragment();
         const $style = document.createElement('style');
-        $fragment.appendChild($style);
+        document.documentElement.appendChild($style);
 
-        const $bar = CE('div', {'id': 'bx-touch-controller-bar'});
-        $fragment.appendChild($bar);
-
-        document.documentElement.appendChild($fragment);
-
-        // Setup double-tap event
-        let clickTimeout: number | null;
-        $bar.addEventListener('mousedown', (e: MouseEvent) => {
-            clickTimeout && clearTimeout(clickTimeout);
-            if (clickTimeout) {
-                // Double-clicked
-                clickTimeout = null;
-                TouchController.#toggleVisibility();
-                return;
-            }
-
-            clickTimeout = window.setTimeout(() => {
-                clickTimeout = null;
-            }, 400);
-        });
-
-        TouchController.#$bar = $bar;
         TouchController.#$style = $style;
 
         const PREF_STYLE_STANDARD = getPref(PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD);
@@ -307,7 +283,6 @@ export class TouchController {
                 try {
                     if (msg.data.includes('/titleinfo')) {
                         const json = JSON.parse(JSON.parse(msg.data).content);
-                        TouchController.#toggleBar(json.focused);
 
                         focused = json.focused;
                         if (!json.focused) {