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/game-bar/action-base.ts

@@ -0,0 +1,6 @@
+export abstract class BaseGameBarAction {
+    constructor() {}
+    reset() {}
+
+    abstract render(): HTMLElement;
+}

src/modules/game-bar/action-screenshot.ts

@@ -0,0 +1,78 @@
+import { BxEvent } from "@utils/bx-event";
+import { AppInterface, STATES } from "@utils/global";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { BaseGameBarAction } from "./action-base";
+import { t } from "@utils/translation";
+
+export class ScreenshotAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const currentStream = STATES.currentStream;
+        currentStream.$screenshotCanvas = CE('canvas', {'class': 'bx-gone'});
+        document.documentElement.appendChild(currentStream.$screenshotCanvas!);
+
+        const onClick = (e: Event) => {
+                BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+                this.takeScreenshot();
+            };
+
+        this.$content = createButton({
+                style: ButtonStyle.GHOST,
+                icon: BxIcon.SCREENSHOT,
+                title: t('take-screenshot'),
+                onClick: onClick,
+            });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    takeScreenshot(callback?: any) {
+        const currentStream = STATES.currentStream;
+        const $video = currentStream.$video;
+        const $canvas = currentStream.$screenshotCanvas;
+        if (!$video || !$canvas) {
+            return;
+        }
+
+        const $canvasContext = $canvas.getContext('2d', {
+                alpha: false,
+                willReadFrequently: false,
+            })!;
+
+        $canvasContext.drawImage($video, 0, 0, $canvas.width, $canvas.height);
+
+        // Get data URL and pass to parent app
+        if (AppInterface) {
+            const data = $canvas.toDataURL('image/png').split(';base64,')[1];
+            AppInterface.saveScreenshot(currentStream.titleId, data);
+
+            // Free screenshot from memory
+            $canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
+
+            callback && callback();
+            return;
+        }
+
+        $canvas && $canvas.toBlob(blob => {
+                // Download screenshot
+                const now = +new Date;
+                const $anchor = CE<HTMLAnchorElement>('a', {
+                        'download': `${currentStream.titleId}-${now}.png`,
+                        'href': URL.createObjectURL(blob!),
+                    });
+                $anchor.click();
+
+                // Free screenshot from memory
+                URL.revokeObjectURL($anchor.href);
+                $canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
+
+                callback && callback();
+            }, 'image/png');
+    }
+}

src/modules/game-bar/action-touch-control.ts

@@ -0,0 +1,51 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { TouchController } from "@modules/touch-controller";
+import { BaseGameBarAction } from "./action-base";
+import { t } from "@utils/translation";
+
+export class TouchControlAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+
+            const $parent = (e as any).target.closest('div[data-enabled]');
+            let enabled = $parent.getAttribute('data-enabled', 'true') === 'true';
+            $parent.setAttribute('data-enabled', (!enabled).toString());
+
+            TouchController.toggleVisibility(enabled);
+        };
+
+        const $btnEnable = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.TOUCH_CONTROL_ENABLE,
+            title: t('show-touch-controller'),
+            onClick: onClick,
+        });
+
+        const $btnDisable = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.TOUCH_CONTROL_DISABLE,
+            title: t('hide-touch-controller'),
+            onClick: onClick,
+        });
+
+        this.$content = CE('div', {'data-enabled': 'true'},
+            $btnEnable,
+            $btnDisable,
+        );
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.$content.setAttribute('data-enabled', 'true');
+    }
+}

src/modules/game-bar/game-bar.ts

@@ -0,0 +1,116 @@
+import { CE, createSvgIcon } from "@utils/html";
+import { ScreenshotAction } from "./action-screenshot";
+import { TouchControlAction } from "./action-touch-control";
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import type { BaseGameBarAction } from "./action-base";
+import { STATES } from "@utils/global";
+import { PrefKey, getPref } from "@utils/preferences";
+
+
+export class GameBar {
+    static readonly #VISIBLE_DURATION = 2000;
+    static #timeout: number | null;
+
+    static #$gameBar: HTMLElement;
+    static #$container: HTMLElement;
+
+    static #$actions: BaseGameBarAction[] = [];
+
+    static #beginHideTimeout() {
+        GameBar.#clearHideTimeout();
+
+        GameBar.#timeout = window.setTimeout(() => {
+                GameBar.#timeout = null;
+                GameBar.hideBar();
+            }, GameBar.#VISIBLE_DURATION);
+    }
+
+    static #clearHideTimeout() {
+        GameBar.#timeout && clearTimeout(GameBar.#timeout);
+        GameBar.#timeout = null;
+    }
+
+    static enable() {
+        GameBar.#$gameBar && GameBar.#$gameBar.classList.remove('bx-gone');
+    }
+
+    static disable() {
+        GameBar.#$gameBar && GameBar.#$gameBar.classList.add('bx-gone');
+        GameBar.hideBar();
+    }
+
+    static showBar() {
+        if (!GameBar.#$container) {
+            return;
+        }
+
+        GameBar.#$container.classList.remove('bx-offscreen', 'bx-hide');
+        GameBar.#$container.classList.add('bx-show');
+
+        GameBar.#beginHideTimeout();
+    }
+
+    static hideBar() {
+        if (!GameBar.#$container) {
+            return;
+        }
+
+        GameBar.#$container.classList.remove('bx-show');
+        GameBar.#$container.classList.add('bx-hide');
+    }
+
+    // Reset all states
+    static reset() {
+        for (const action of GameBar.#$actions) {
+            action.reset();
+        }
+    }
+
+    static setup() {
+        let $container;
+        const $gameBar = CE('div', {id: 'bx-game-bar', class: 'bx-gone'},
+                $container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
+                createSvgIcon(BxIcon.CARET_RIGHT),
+            );
+
+        GameBar.#$actions = [
+            new ScreenshotAction(),
+            ...(STATES.hasTouchSupport && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off') ? [new TouchControlAction()] : []),
+        ];
+
+        for (const action of GameBar.#$actions) {
+            $container.appendChild(action.render());
+        }
+
+        // Toggle game bar when clicking on the game bar box
+        $gameBar.addEventListener('click', e => {
+            if (e.target === $gameBar) {
+                if ($container.classList.contains('bx-show')) {
+                    GameBar.hideBar();
+                } else {
+                    GameBar.showBar();
+                }
+            }
+        });
+
+        // Hide game bar after clicking on an action
+        window.addEventListener(BxEvent.GAME_BAR_ACTION_ACTIVATED, GameBar.hideBar);
+
+        $container.addEventListener('pointerover', GameBar.#clearHideTimeout);
+        $container.addEventListener('pointerout', GameBar.#beginHideTimeout);
+
+        // Add animation when hiding game bar
+        $container.addEventListener('transitionend', e => {
+            const classList = $container.classList;
+            if (classList.contains('bx-hide')) {
+                classList.remove('bx-offscreen', 'bx-hide');
+                classList.add('bx-offscreen');
+            }
+        });
+
+        document.documentElement.appendChild($gameBar);
+        GameBar.#$gameBar = $gameBar;
+        GameBar.#$container = $container;
+    }
+}