mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-06-03 06:07:19 +02:00
Update Remote Play dialog's styling
This commit is contained in:
parent
f9cf02b2da
commit
48da8bc527
@ -78,7 +78,7 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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', {});
|
||||
|
||||
|
@ -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() {
|
||||
|
@ -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();
|
||||
|
@ -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+)\./;
|
||||
|
Loading…
x
Reference in New Issue
Block a user