Add back the ability to create shortcut for Remote Play

src/assets/css/remote-play.styl

@@ -36,16 +36,16 @@
 .bx-remote-play-device-wrapper {
     display: flex;
     margin-bottom: 12px;
+    gap: 10px;
 
     &:last-child {
-    margin-bottom: 2px;
+        margin-bottom: 2px;
     }
 }
 
 .bx-remote-play-device-info {
     flex: 1;
     align-self: center;
-    padding: 4px 0;
 }
 
 .bx-remote-play-device-name {
@@ -73,7 +73,6 @@
 
 .bx-remote-play-connect-button {
     min-height: 100%;
-    margin: 4px 0;
 }
 
 .bx-remote-play-buttons {

src/modules/remote-play-manager.ts

@@ -209,15 +209,6 @@ export class RemotePlayManager {
             return;
         }
 
-        /*
-        // Show native dialog in Android app
-        if (AppInterface && AppInterface.showRemotePlayDialog) {
-            AppInterface.showRemotePlayDialog(JSON.stringify(this.consoles));
-            (document.activeElement as HTMLElement).blur();
-            return;
-        }
-        */
-
         RemotePlayDialog.getInstance().show();
     }
 

src/modules/ui/dialog/remote-play-dialog.ts

@@ -9,6 +9,8 @@ import { BxSelectElement } from "@/web-components/bx-select";
 import { BxEvent } from "@/utils/bx-event";
 import { BxLogger } from "@/utils/bx-logger";
 import { StreamResolution } from "@/enums/pref-values";
+import { setNearby } from "@/utils/navigation-utils";
+import { AppInterface } from "@/utils/global";
 
 
 export class RemotePlayDialog extends NavigationDialog {
@@ -73,8 +75,20 @@ export class RemotePlayDialog extends NavigationDialog {
         const manager = RemotePlayManager.getInstance()!;
         const consoles = manager.getConsoles();
 
+        const createConsoleShortcut = (e: Event) => {
+            const { serverId, deviceName } = (e.target as HTMLElement).dataset;
+            const optionsJson = JSON.stringify({
+                'resolution': getGlobalPref(GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION),
+            });
+
+            AppInterface?.createConsoleShortcut(serverId!, deviceName!, optionsJson);
+        };
+
         for (let con of consoles) {
-            const $child = CE('div', { class: 'bx-remote-play-device-wrapper' },
+            let $connect;
+            const $child = CE('div', {
+                    class: 'bx-remote-play-device-wrapper',
+                },
                 CE('div', { class: 'bx-remote-play-device-info' },
                     CE('div', false,
                         CE('span', { class: 'bx-remote-play-device-name' }, con.deviceName),
@@ -83,8 +97,20 @@ export class RemotePlayDialog extends NavigationDialog {
                     CE('div', { class: 'bx-remote-play-power-state' }, this.STATE_LABELS[con.powerState]),
                 ),
 
-                // Connect button
+                // Shortcut button
                 createButton({
+                    attributes: {
+                        'data-server-id': con.serverId,
+                        'data-device-name': con.deviceName,
+                    },
+                    icon: BxIcon.CREATE_SHORTCUT,
+                    style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+                    title: t('create-shortcut'),
+                    onClick: createConsoleShortcut,
+                }),
+
+                // Connect button
+                $connect = createButton({
                     classes: ['bx-remote-play-connect-button'],
                     label: t('console-connect'),
                     style: ButtonStyle.PRIMARY | ButtonStyle.FOCUSABLE,
@@ -92,6 +118,10 @@ export class RemotePlayDialog extends NavigationDialog {
                 }),
             );
 
+            setNearby($child, {
+                orientation: 'horizontal',
+                focus: $connect,
+            })
             $fragment.appendChild($child);
         }
 
@@ -130,7 +160,7 @@ export class RemotePlayDialog extends NavigationDialog {
     }
 
     focusIfNeeded(): void {
-        const $btnConnect = this.$container.querySelector<HTMLElement>('.bx-remote-play-device-wrapper button');
+        const $btnConnect = this.$container.querySelector<HTMLElement>('.bx-remote-play-device-wrapper button:last-of-type');
         $btnConnect && $btnConnect.focus();
     }
 }

src/types/global.d.ts

@@ -11,7 +11,27 @@ export {};
 
 declare global {
     interface Window {
-        AppInterface: any;
+        AppInterface: {
+            startPointerServer(),
+            requestPointerCapture(),
+            releasePointerCapture(),
+
+            runShortcut?(action: string),
+            saveScreenshot(name: string | undefined, data: string),
+            vibrate(dataJson: string, intensity: number),
+            openTrueAchievementsLink(override: boolean, xboxTitleId?: string | undefined, id?: string | undefined),
+
+            openAppSettings?(),
+            updateLatestScript(),
+            closeApp(),
+
+            createShortcut(path: string),
+            createConsoleShortcut(serverId: string, deviceName: string, optionsJson: string),
+            downloadWallpapers(titleSlug: string | undefined, productId: string | undefined),
+
+            onEvent(event: String),
+            onEventBus(event: String),
+        };
         BX_FLAGS?: BxFlags;
         BX_CE: (elmName: string, props: { [index: string]: any }={}) => HTMLElement;
         BX_EXPOSED: typeof BxExposed & Partial<{

src/utils/bx-event-bus.ts

@@ -152,7 +152,10 @@ export class BxEventBus<TEvents extends Record<string, any>> {
             try {
                 if (event in this.appJsInterfaces) {
                     const method = this.appJsInterfaces[event];
-                        AppInterface[method] && AppInterface[method]();
+                    if (method && method in AppInterface) {
+                        // @ts-ignore
+                        AppInterface[method]();
+                    }
                 } else {
                     AppInterface.onEventBus(this.group + '.' + (event as string));
                 }

src/utils/true-achievements.ts

@@ -153,7 +153,7 @@ export class TrueAchievements {
             xboxTitleId = this.getStreamXboxTitleId();
         }
 
-        if (AppInterface && AppInterface.openTrueAchievementsLink) {
+        if (AppInterface?.openTrueAchievementsLink) {
             AppInterface.openTrueAchievementsLink(override, xboxTitleId?.toString(), id?.toString());
             return;
         }