diff --git a/src/assets/css/navigation-dialog.styl b/src/assets/css/navigation-dialog.styl index 70af076..9f52279 100755 --- a/src/assets/css/navigation-dialog.styl +++ b/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; } diff --git a/src/assets/css/remote-play.styl b/src/assets/css/remote-play.styl index 9e6023c..41c2c2b 100755 --- a/src/assets/css/remote-play.styl +++ b/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; - padding: 2px 10px; + border-radius: 8px; + padding: 2px 6px; margin-left: 8px; vertical-align: middle; } diff --git a/src/index.ts b/src/index.ts index c9a3a8d..45a14b0 100755 --- a/src/index.ts +++ b/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); diff --git a/src/modules/ui/dialog/remote-play-dialog.ts b/src/modules/ui/dialog/remote-play-dialog.ts index 7b95060..664590e 100755 --- a/src/modules/ui/dialog/remote-play-dialog.ts +++ b/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', {}); diff --git a/src/modules/ui/header.ts b/src/modules/ui/header.ts index f6c2d90..7ed1d36 100755 --- a/src/modules/ui/header.ts +++ b/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({ - classes: ['bx-header-remote-play-button', 'bx-gone'], - icon: BxIcon.REMOTE_PLAY, - title: t('remote-play'), - style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR, - onClick: e => RemotePlayManager.getInstance()?.togglePopup(), - }); + if (isFullVersion()) { + this.$btnRemotePlay = createButton({ + classes: ['bx-header-remote-play-button', 'bx-gone'], + icon: BxIcon.REMOTE_PLAY, + title: t('remote-play'), + 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() { diff --git a/src/utils/history.ts b/src/utils/history.ts index 3cb9add..06de4b6 100755 --- a/src/utils/history.ts +++ b/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(); diff --git a/src/utils/xcloud-interceptor.ts b/src/utils/xcloud-interceptor.ts index 88b0bb1..073dd8a 100755 --- a/src/utils/xcloud-interceptor.ts +++ b/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+)\./;