From ac37fe05bc2ca5dd1724f558f32710da9919e56a Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Sun, 26 May 2024 11:16:52 +0700 Subject: [PATCH] Show note for Video Ratio setting --- src/assets/css/stream-settings.styl | 2 -- src/modules/ui/ui.ts | 37 ++++++++++------------------- src/utils/preferences.ts | 18 ++++++++++++++ 3 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/assets/css/stream-settings.styl b/src/assets/css/stream-settings.styl index 96a8ad6..623a37c 100644 --- a/src/assets/css/stream-settings.styl +++ b/src/assets/css/stream-settings.styl @@ -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 { diff --git a/src/modules/ui/ui.ts b/src/modules/ui/ui.ts index ad5f2c8..d375c06 100644 --- a/src/modules/ui/ui.ts +++ b/src/modules/ui/ui.ts @@ -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('div', {'class': 'bx-quick-settings-row', 'data-type': settingGroup.group}, - CE('label', {for: `bx_setting_${pref}`}, - setting.label, - setting.unsupported && CE('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); diff --git a/src/utils/preferences.ts b/src/utils/preferences.ts index 9a9dc56..21750b7 100644 --- a/src/utils/preferences.ts +++ b/src/utils/preferences.ts @@ -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, },