Update Remote Play dialog's styling

src/assets/css/navigation-dialog.styl

@@ -78,7 +78,7 @@
             padding: 0;
             margin: 0;
             flex: 1;
-            font-size: 1.2rem;
+            font-size: 1.3rem;
             font-weight: bold;
         }
 

src/assets/css/remote-play.styl

@@ -1,23 +1,3 @@
-.bx-remote-play-container {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    color: white;
-    background: #1a1b1e;
-    border-radius: 10px;
-    width: 420px;
-    max-width: calc(100vw - 20px);
-    margin: 0 0 0 auto;
-    padding: 16px;
-
-    > .bx-button {
-        display: table;
-        margin: 0 0 0 auto;
-    }
-}
-
 .bx-remote-play-settings {
     margin-bottom: 12px;
     padding-bottom: 12px;
@@ -29,6 +9,7 @@
 
     label {
         flex: 1;
+        font-size: 14px;
 
         p {
             margin: 4px 0 0;
@@ -63,23 +44,24 @@
 
 .bx-remote-play-device-info {
     flex: 1;
+    align-self: center;
     padding: 4px 0;
 }
 
 .bx-remote-play-device-name {
-    font-size: 20px;
+    font-size: 14px;
     font-weight: bold;
     display: inline-block;
     vertical-align: middle;
 }
 
 .bx-remote-play-console-type {
-    font-size: 12px;
+    font-size: 8px;
     background: #004c87;
     color: #fff;
     display: inline-block;
-    border-radius: 14px;
+    border-radius: 8px;
-    padding: 2px 10px;
+    padding: 2px 6px;
     margin-left: 8px;
     vertical-align: middle;
 }

src/index.ts

@@ -164,7 +164,9 @@ document.addEventListener('readystatechange', e => {
 
     if (STATES.isSignedIn) {
         // Preload Remote Play
-        RemotePlayManager.getInstance()?.initialize();
+        if (isFullVersion()) {
+            RemotePlayManager.getInstance()?.initialize();
+        }
     } else {
         // Show Settings button in the header when not signed in
         window.setTimeout(HeaderSection.watchHeader, 2000);

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

@@ -32,7 +32,11 @@ export class RemotePlayDialog extends NavigationDialog {
     }
 
     private setupDialog() {
-        const $fragment = CE('div', { class: 'bx-remote-play-container' });
+        const $fragment = CE('div', { class: 'bx-centered-dialog' },
+            CE('div', { class: 'bx-dialog-title' },
+                CE('p', false, t('remote-play')),
+            ),
+        );
 
         const $settingNote = CE('p', {});
 

src/modules/ui/header.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with { type: "macro" };
+
 import { SCRIPT_VERSION } from "@utils/global";
 import { createButton, ButtonStyle, CE, isElementVisible } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
@@ -14,7 +16,7 @@ export class HeaderSection {
     public static getInstance = () => HeaderSection.instance ?? (HeaderSection.instance = new HeaderSection());
     private readonly LOG_TAG = 'HeaderSection';
 
-    private $btnRemotePlay: HTMLElement;
+    private $btnRemotePlay: HTMLElement | null;
     private $btnSettings: HTMLElement;
     private $buttonsWrapper: HTMLElement;
 
@@ -24,13 +26,17 @@ export class HeaderSection {
     constructor() {
         BxLogger.info(this.LOG_TAG, 'constructor()');
 
-        this.$btnRemotePlay = createButton({
+        if (isFullVersion()) {
-            classes: ['bx-header-remote-play-button', 'bx-gone'],
+            this.$btnRemotePlay = createButton({
-            icon: BxIcon.REMOTE_PLAY,
+                classes: ['bx-header-remote-play-button', 'bx-gone'],
-            title: t('remote-play'),
+                icon: BxIcon.REMOTE_PLAY,
-            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
+                title: t('remote-play'),
-            onClick: e => RemotePlayManager.getInstance()?.togglePopup(),
+                style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
-        });
+                onClick: e => RemotePlayManager.getInstance()?.togglePopup(),
+            });
+        } else {
+            this.$btnRemotePlay = null;
+        }
 
         this.$btnSettings = createButton({
             classes: ['bx-header-settings-button'],
@@ -98,7 +104,7 @@ export class HeaderSection {
     }
 
     showRemotePlayButton() {
-        this.$btnRemotePlay.classList.remove('bx-gone');
+        this.$btnRemotePlay?.classList.remove('bx-gone');
     }
 
     static watchHeader() {

src/utils/history.ts

@@ -1,3 +1,5 @@
+import { isFullVersion } from "@macros/build" with { type: "macro" };
+
 import { BxEvent } from "@utils/bx-event";
 import { LoadingScreen } from "@modules/loading-screen";
 import { RemotePlayManager } from "@/modules/remote-play-manager";
@@ -25,7 +27,9 @@ export function onHistoryChanged(e: PopStateEvent) {
         return;
     }
 
-    window.setTimeout(RemotePlayManager.detect, 10);
+    if (isFullVersion()) {
+        window.setTimeout(RemotePlayManager.detect, 10);
+    }
 
     // Hide Navigation dialog
     NavigationDialogManager.getInstance().hide();

src/utils/xcloud-interceptor.ts

@@ -59,7 +59,9 @@ export class XcloudInterceptor {
         const obj = await response.clone().json();
 
         // Store xCloud token
-        RemotePlayManager.getInstance()?.setXcloudToken(obj.gsToken);
+        if (isFullVersion()) {
+            RemotePlayManager.getInstance()?.setXcloudToken(obj.gsToken);
+        }
 
         // Get server list
         const serverRegex = /\/\/(\w+)\./;