marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-08-07 13:48:27 +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 { .bx-quick-settings-bar-note {
display: block; display: block;
text-align: center;
font-size: 12px; font-size: 12px;
font-weight: lighter; font-weight: lighter;
font-style: italic; font-style: italic;
padding-top: 16px;
} }
.bx-quick-settings-tab-contents { .bx-quick-settings-tab-contents {

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

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

18
src/utils/preferences.ts
View File

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