marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-07 08:07:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Remote Play popup: use radio inputs & add Help button

Browse Source
This commit is contained in:
redphx 2024-04-12 17:24:54 +07:00
parent 69a8db092e
commit 47fbbdcb59
1 changed files with 65 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
better-xcloud.user.js
View File

@ -3673,40 +3673,56 @@ class RemotePlay {
if (!RemotePlay.#CONSOLES || RemotePlay.#CONSOLES.length === 0) { if (!RemotePlay.#CONSOLES || RemotePlay.#CONSOLES.length === 0) {
$fragment.appendChild(CE('span', {}, t('no-consoles-found'))); $fragment.appendChild(CE('span', {}, t('no-consoles-found')));
} else { RemotePlay.#$content = CE('div', {}, $fragment);
const $settingNote = CE('p', {}); return;
}
const resolutions = [1080, 720]; const $settingNote = CE('p', {});
const currentResolution = getPref(Preferences.REMOTE_PLAY_RESOLUTION);
const $resolutionSelect = CE('select', {});
for (const resolution of resolutions) {
const value = `${resolution}p`;
const $option = CE('option', {'value': value}, value); const resolutions = [1080, 720];
if (currentResolution === value) { const currentResolution = getPref(Preferences.REMOTE_PLAY_RESOLUTION);
$option.selected = true; const $resolutionGroup = CE('div', {});
} for (const resolution of resolutions) {
const value = `${resolution}p`;
const id = `bx_radio_xhome_resolution_${resolution}`;
$resolutionSelect.appendChild($option); const $radio = CE('input', {
} 'type': 'radio',
$resolutionSelect.addEventListener('change', e => { 'value': value,
const value = $resolutionSelect.value; 'id': id,
'name': 'bx_radio_xhome_resolution',
}, value);
$radio.addEventListener('change', e => {
const value = e.target.value;
$settingNote.textContent = value === '1080p' ? '✅ ' + t('can-stream-xbox-360-games') : '❌ ' + t('cant-stream-xbox-360-games'); $settingNote.textContent = value === '1080p' ? '✅ ' + t('can-stream-xbox-360-games') : '❌ ' + t('cant-stream-xbox-360-games');
setPref(Preferences.REMOTE_PLAY_RESOLUTION, value); setPref(Preferences.REMOTE_PLAY_RESOLUTION, value);
}); });
$resolutionSelect.dispatchEvent(new Event('change'));
const $qualitySettings = CE('div', {'class': 'bx-remote-play-settings'}, const $label = CE('label', {
CE('div', {}, 'for': id,
CE('label', {}, t('target-resolution'), $settingNote), 'class': 'bx-remote-play-resolution',
$resolutionSelect, }, $radio, `${resolution}p`);
)
);
$fragment.appendChild($qualitySettings); $resolutionGroup.appendChild($label);
if (currentResolution === value) {
$radio.checked = true;
$radio.dispatchEvent(new Event('change'));
}
} }
const $qualitySettings = CE('div', {'class': 'bx-remote-play-settings'},
CE('div', {},
CE('label', {}, t('target-resolution'), $settingNote),
$resolutionGroup,
)
);
$fragment.appendChild($qualitySettings);
// Render concoles list
for (let con of RemotePlay.#CONSOLES) { for (let con of RemotePlay.#CONSOLES) {
let $connectButton; let $connectButton;
const $child = CE('div', {'class': 'bx-remote-play-device-wrapper'}, const $child = CE('div', {'class': 'bx-remote-play-device-wrapper'},
@ -3732,6 +3748,14 @@ class RemotePlay {
$fragment.appendChild($child); $fragment.appendChild($child);
} }
// Add Help button
$fragment.appendChild(createButton({
icon: Icon.QUESTION,
style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
url: 'https://better-xcloud.github.io/remote-play',
label: t('help'),
}));
RemotePlay.#$content = CE('div', {}, $fragment); RemotePlay.#$content = CE('div', {}, $fragment);
} }
@ -9730,6 +9754,11 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
} }
} }
.bx-remote-play-container > .bx-button {
display: table;
margin: 0 0 0 auto;
}
.bx-remote-play-settings { .bx-remote-play-settings {
margin-bottom: 12px; margin-bottom: 12px;
padding-bottom: 12px; padding-bottom: 12px;
@ -9759,6 +9788,19 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
text-align: center; text-align: center;
} }
.bx-remote-play-resolution {
display: block;
}
.bx-remote-play-resolution input[type="radio"] {
accent-color: var(--bx-primary-button-color);
margin-right: 6px;
}
.bx-remote-play-resolution input[type="radio"]:focus {
accent-color: var(--bx-primary-button-hover-color);
}
.bx-remote-play-device-wrapper { .bx-remote-play-device-wrapper {
display: flex; display: flex;
margin-bottom: 12px; margin-bottom: 12px;