Update Remote Play dialog's styling

This commit is contained in:
redphx 2025-01-16 07:14:52 +07:00
parent f9cf02b2da
commit 48da8bc527
7 changed files with 38 additions and 38 deletions

View File

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

View File

@ -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;
}

View File

@ -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);

View File

@ -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', {});

View File

@ -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() {

View File

@ -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();

View File

@ -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+)\./;