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

Show note for Video Ratio setting

Browse Source
This commit is contained in:
redphx
2024-05-26 11:16:52 +07:00
parent 030791d9c4
commit ac37fe05bc
3 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/stream-settings.styl
View File

@@ -118,11 +118,9 @@
.bx-quick-settings-bar-note {
display: block;
text-align: center;
font-size: 12px;
font-weight: lighter;
font-style: italic;
padding-top: 16px;
}
.bx-quick-settings-tab-contents {

37
src/modules/ui/ui.ts
View File

@@ -4,7 +4,7 @@ import { BxIcon } from "@utils/bx-icon";
import { UserAgent } from "@utils/user-agent";
import { BxEvent } from "@utils/bx-event";
import { MkbRemapper } from "@modules/mkb/mkb-remapper";
import { getPref, PrefKey, toPrefElement } from "@utils/preferences";
import { getPref, Preferences, PrefKey, toPrefElement } from "@utils/preferences";
import { StreamStats } from "@modules/stream/stream-stats";
import { TouchController } from "@modules/touch-controller";
import { t } from "@utils/translation";
@@ -96,7 +96,6 @@ function setupQuickSettingsBar() {
items: [
{
pref: PrefKey.AUDIO_VOLUME,
label: t('volume'),
onChange: (e: any, value: number) => {
SoundShortcut.setGainNodeVolume(value);
},
@@ -123,32 +122,27 @@ function setupQuickSettingsBar() {
items: [
{
pref: PrefKey.VIDEO_RATIO,
label: t('ratio'),
onChange: updateVideoPlayerCss,
},
{
pref: PrefKey.VIDEO_CLARITY,
label: t('clarity'),
onChange: updateVideoPlayerCss,
unsupported: isSafari,
},
{
pref: PrefKey.VIDEO_SATURATION,
label: t('saturation'),
onChange: updateVideoPlayerCss,
},
{
pref: PrefKey.VIDEO_CONTRAST,
label: t('contrast'),
onChange: updateVideoPlayerCss,
},
{
pref: PrefKey.VIDEO_BRIGHTNESS,
label: t('brightness'),
onChange: updateVideoPlayerCss,
},
],
@@ -167,21 +161,18 @@ function setupQuickSettingsBar() {
items: [
{
pref: PrefKey.CONTROLLER_ENABLE_VIBRATION,
label: t('controller-vibration'),
unsupported: !VibrationManager.supportControllerVibration(),
onChange: VibrationManager.updateGlobalVars,
},
{
pref: PrefKey.CONTROLLER_DEVICE_VIBRATION,
label: t('device-vibration'),
unsupported: !VibrationManager.supportDeviceVibration(),
onChange: VibrationManager.updateGlobalVars,
},
(VibrationManager.supportControllerVibration() || VibrationManager.supportDeviceVibration()) && {
pref: PrefKey.CONTROLLER_VIBRATION_INTENSITY,
label: t('vibration-intensity'),
unsupported: !VibrationManager.supportDeviceVibration(),
onChange: VibrationManager.updateGlobalVars,
},
@@ -273,43 +264,35 @@ function setupQuickSettingsBar() {
items: [
{
pref: PrefKey.STATS_SHOW_WHEN_PLAYING,
label: t('show-stats-on-startup'),
},
{
pref: PrefKey.STATS_QUICK_GLANCE,
label: '👀 ' + t('enable-quick-glance-mode'),
onChange: (e: InputEvent) => {
(e.target! as HTMLInputElement).checked ? StreamStats.quickGlanceSetup() : StreamStats.quickGlanceStop();
},
},
{
pref: PrefKey.STATS_ITEMS,
label: t('stats'),
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_POSITION,
label: t('position'),
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_TEXT_SIZE,
label: t('text-size'),
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_OPACITY,
label: t('opacity'),
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_TRANSPARENT,
label: t('transparent-background'),
onChange: StreamStats.refreshStyles,
},
{
pref: PrefKey.STATS_CONDITIONAL_FORMATTING,
label: t('conditional-formatting'),
onChange: StreamStats.refreshStyles,
},
],
@@ -398,13 +381,17 @@ function setupQuickSettingsBar() {
$control = toPrefElement(pref, setting.onChange, setting.params);
}
const $content = CE<HTMLElement>('div', {'class': 'bx-quick-settings-row', 'data-type': settingGroup.group},
CE('label', {for: `bx_setting_${pref}`},
setting.label,
setting.unsupported && CE<HTMLElement>('div', {'class': 'bx-quick-settings-bar-note'}, t('browser-unsupported-feature')),
),
!setting.unsupported && $control,
);
const label = Preferences.SETTINGS[pref as PrefKey].label || setting.label;
const note = Preferences.SETTINGS[pref as PrefKey].note || setting.note;
const $content = CE('div', {'class': 'bx-quick-settings-row', 'data-type': settingGroup.group},
CE('label', {for: `bx_setting_${pref}`},
label,
note && CE('div', {'class': 'bx-quick-settings-bar-note'}, note),
setting.unsupported && CE('div', {'class': 'bx-quick-settings-bar-note'}, t('browser-unsupported-feature')),
),
!setting.unsupported && $control,
);
$group.appendChild($content);

18
src/utils/preferences.ts
View File

@@ -373,10 +373,12 @@ export class Preferences {
},
[PrefKey.CONTROLLER_ENABLE_VIBRATION]: {
label: t('controller-vibration'),
default: true,
},
[PrefKey.CONTROLLER_DEVICE_VIBRATION]: {
label: t('device-vibration'),
default: 'off',
options: {
on: t('on'),
@@ -386,6 +388,7 @@ export class Preferences {
},
[PrefKey.CONTROLLER_VIBRATION_INTENSITY]: {
label: t('vibration-intensity'),
type: SettingElementType.NUMBER_STEPPER,
default: 100,
min: 0,
@@ -501,6 +504,7 @@ export class Preferences {
},
},
[PrefKey.VIDEO_CLARITY]: {
label: t('clarity'),
type: SettingElementType.NUMBER_STEPPER,
default: 0,
min: 0,
@@ -510,6 +514,8 @@ export class Preferences {
},
},
[PrefKey.VIDEO_RATIO]: {
label: t('ratio'),
note: t('stretch-note'),
default: '16:9',
options: {
'16:9': '16:9',
@@ -523,6 +529,7 @@ export class Preferences {
},
},
[PrefKey.VIDEO_SATURATION]: {
label: t('saturation'),
type: SettingElementType.NUMBER_STEPPER,
default: 100,
min: 50,
@@ -533,6 +540,7 @@ export class Preferences {
},
},
[PrefKey.VIDEO_CONTRAST]: {
label: t('contrast'),
type: SettingElementType.NUMBER_STEPPER,
default: 100,
min: 50,
@@ -543,6 +551,7 @@ export class Preferences {
},
},
[PrefKey.VIDEO_BRIGHTNESS]: {
label: t('brightness'),
type: SettingElementType.NUMBER_STEPPER,
default: 100,
min: 50,
@@ -562,6 +571,7 @@ export class Preferences {
default: false,
},
[PrefKey.AUDIO_VOLUME]: {
label: t('volume'),
type: SettingElementType.NUMBER_STEPPER,
default: 100,
min: 0,
@@ -574,6 +584,7 @@ export class Preferences {
[PrefKey.STATS_ITEMS]: {
label: t('stats'),
default: [StreamStat.PING, StreamStat.FPS, StreamStat.BITRATE, StreamStat.DECODE_TIME, StreamStat.PACKETS_LOST, StreamStat.FRAMES_LOST],
multipleOptions: {
[StreamStat.PING]: `${StreamStat.PING.toUpperCase()}: ${t('stat-ping')}`,
@@ -588,12 +599,15 @@ export class Preferences {
},
},
[PrefKey.STATS_SHOW_WHEN_PLAYING]: {
label: t('show-stats-on-startup'),
default: false,
},
[PrefKey.STATS_QUICK_GLANCE]: {
label: '👀 ' + t('enable-quick-glance-mode'),
default: true,
},
[PrefKey.STATS_POSITION]: {
label: t('position'),
default: 'top-right',
options: {
'top-left': t('top-left'),
@@ -602,6 +616,7 @@ export class Preferences {
},
},
[PrefKey.STATS_TEXT_SIZE]: {
label: t('text-size'),
default: '0.9rem',
options: {
'0.9rem': t('small'),
@@ -610,9 +625,11 @@ export class Preferences {
},
},
[PrefKey.STATS_TRANSPARENT]: {
label: t('transparent-background'),
default: false,
},
[PrefKey.STATS_OPACITY]: {
label: t('opacity'),
type: SettingElementType.NUMBER_STEPPER,
default: 80,
min: 50,
@@ -623,6 +640,7 @@ export class Preferences {
},
},
[PrefKey.STATS_CONDITIONAL_FORMATTING]: {
label: t('conditional-formatting'),
default: false,
},