From 91667617801917db09cafb20612b076292757b36 Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Sun, 26 May 2024 11:42:19 +0700 Subject: [PATCH] Rename "Quick Bar" to "Stream Settings dialog" --- src/assets/css/stream-settings.styl | 12 +++++----- src/index.ts | 6 ++--- src/modules/mkb/mkb-remapper.ts | 2 +- src/modules/stream/stream-ui.ts | 34 ++++++++++++++--------------- src/modules/ui/ui.ts | 18 +++++++-------- 5 files changed, 36 insertions(+), 36 deletions(-) diff --git a/src/assets/css/stream-settings.styl b/src/assets/css/stream-settings.styl index 623a37c..6446f73 100644 --- a/src/assets/css/stream-settings.styl +++ b/src/assets/css/stream-settings.styl @@ -1,4 +1,4 @@ -.bx-quick-settings-bar { +.bx-stream-settings-dialog { display: flex; position: fixed; z-index: var(--bx-stream-settings-z-index); @@ -7,7 +7,7 @@ -webkit-user-select: none; } -.bx-quick-settings-tabs { +.bx-stream-settings-tabs { position: fixed; top: 0; right: 420px; @@ -39,7 +39,7 @@ } -.bx-quick-settings-tab-contents { +.bx-stream-settings-tab-contents { flex-direction: column; position: fixed; right: 0; @@ -89,7 +89,7 @@ } -.bx-quick-settings-row { +.bx-stream-settings-row { display: flex; border-bottom: 1px solid #40404080; margin-bottom: 16px; @@ -116,14 +116,14 @@ } } -.bx-quick-settings-bar-note { +.bx-stream-settings-dialog-note { display: block; font-size: 12px; font-weight: lighter; font-style: italic; } -.bx-quick-settings-tab-contents { +.bx-stream-settings-tab-contents { div[data-group="shortcuts"] { > div { &[data-has-gamepad=true] { diff --git a/src/index.ts b/src/index.ts index 212a161..a06ee79 100644 --- a/src/index.ts +++ b/src/index.ts @@ -178,9 +178,9 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => { // Stop MKB listeners getPref(PrefKey.MKB_ENABLED) && MkbHandler.INSTANCE.destroy(); - const $quickBar = document.querySelector('.bx-quick-settings-bar'); - if ($quickBar) { - $quickBar.classList.add('bx-gone'); + const $streamSettingsDialog = document.querySelector('.bx-stream-settings-dialog'); + if ($streamSettingsDialog) { + $streamSettingsDialog.classList.add('bx-gone'); } STATES.currentStream.audioGainNode = null; diff --git a/src/modules/mkb/mkb-remapper.ts b/src/modules/mkb/mkb-remapper.ts index 782617f..a3db430 100644 --- a/src/modules/mkb/mkb-remapper.ts +++ b/src/modules/mkb/mkb-remapper.ts @@ -460,7 +460,7 @@ export class MkbRemapper { const onChange = (e: Event, value: any) => { (this.#STATE.editingPresetData!.mouse as any)[key] = value; }; - const $row = CE('div', {'class': 'bx-quick-settings-row'}, + const $row = CE('div', {'class': 'bx-stream-settings-row'}, CE('label', {'for': `bx_setting_${key}`}, setting.label), $elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params), ); diff --git a/src/modules/stream/stream-ui.ts b/src/modules/stream/stream-ui.ts index 5c71a9a..97b0420 100644 --- a/src/modules/stream/stream-ui.ts +++ b/src/modules/stream/stream-ui.ts @@ -66,9 +66,9 @@ export function injectStreamMenuButtons() { ($screen as any).xObserving = true; - const $quickBar = document.querySelector('.bx-quick-settings-bar')!; + const $settingsDialog = document.querySelector('.bx-stream-settings-dialog')!; const $parent = $screen.parentElement; - const hideQuickBarFunc = (e?: MouseEvent | TouchEvent) => { + const hideSettingsFunc = (e?: MouseEvent | TouchEvent) => { if (e) { const $target = e.target as HTMLElement; e.stopPropagation(); @@ -76,15 +76,15 @@ export function injectStreamMenuButtons() { return; } if ($target.id === 'MultiTouchSurface') { - $target.removeEventListener('touchstart', hideQuickBarFunc); + $target.removeEventListener('touchstart', hideSettingsFunc); } } - // Hide Quick settings bar - $quickBar.classList.add('bx-gone'); + // Hide Stream settings dialog + $settingsDialog.classList.add('bx-gone'); - $parent?.removeEventListener('click', hideQuickBarFunc); - // $parent.removeEventListener('touchstart', hideQuickBarFunc); + $parent?.removeEventListener('click', hideSettingsFunc); + // $parent.removeEventListener('touchstart', hideSettingsFunc); } let $btnStreamSettings: HTMLElement; @@ -146,9 +146,9 @@ export function injectStreamMenuButtons() { return; } - // Hide Quick bar when closing HUD + // Hide Stream Settings dialog when closing HUD $btnCloseHud && $btnCloseHud.addEventListener('click', e => { - $quickBar.classList.add('bx-gone'); + $settingsDialog.classList.add('bx-gone'); }); // Create Refresh button from the Close button @@ -176,7 +176,7 @@ export function injectStreamMenuButtons() { const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]'); $menu?.appendChild(await StreamBadges.render()); - hideQuickBarFunc(); + hideSettingsFunc(); return; } @@ -215,14 +215,14 @@ export function injectStreamMenuButtons() { hideGripHandle(); e.preventDefault(); - // Show Quick settings bar - $quickBar.classList.remove('bx-gone'); + // Show Stream Settings dialog + $settingsDialog.classList.remove('bx-gone'); - $parent?.addEventListener('click', hideQuickBarFunc); - //$parent.addEventListener('touchstart', hideQuickBarFunc); + $parent?.addEventListener('click', hideSettingsFunc); + //$parent.addEventListener('touchstart', hideSettingsFunc); const $touchSurface = document.getElementById('MultiTouchSurface'); - $touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideQuickBarFunc); + $touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideSettingsFunc); }); } @@ -263,14 +263,14 @@ export function injectStreamMenuButtons() { export function showStreamSettings(tabId: string) { - const $wrapper = document.querySelector('.bx-quick-settings-bar'); + const $wrapper = document.querySelector('.bx-stream-settings-dialog'); if (!$wrapper) { return; } // Select tab if (tabId) { - const $tab = $wrapper.querySelector(`.bx-quick-settings-tabs svg[data-group=${tabId}]`); + const $tab = $wrapper.querySelector(`.bx-stream-settings-tabs svg[data-group=${tabId}]`); $tab && $tab.dispatchEvent(new Event('click')); } diff --git a/src/modules/ui/ui.ts b/src/modules/ui/ui.ts index d375c06..44e4157 100644 --- a/src/modules/ui/ui.ts +++ b/src/modules/ui/ui.ts @@ -68,7 +68,7 @@ function getVideoPlayerFilterStyle() { return filters.join(' '); } -function setupQuickSettingsBar() { +function setupStreamSettingsDialog() { const isSafari = UserAgent.isSafari(); const SETTINGS_UI = [ @@ -304,9 +304,9 @@ function setupQuickSettingsBar() { let $tabs: HTMLElement; let $settings: HTMLElement; - const $wrapper = CE('div', {'class': 'bx-quick-settings-bar bx-gone'}, - $tabs = CE('div', {'class': 'bx-quick-settings-tabs'}), - $settings = CE('div', {'class': 'bx-quick-settings-tab-contents'}), + const $wrapper = CE('div', {'class': 'bx-stream-settings-dialog bx-gone'}, + $tabs = CE('div', {'class': 'bx-stream-settings-tabs'}), + $settings = CE('div', {'class': 'bx-stream-settings-tab-contents'}), ); for (const settingTab of SETTINGS_UI) { @@ -384,11 +384,11 @@ function setupQuickSettingsBar() { 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}, + const $content = CE('div', {'class': 'bx-stream-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')), + note && CE('div', {'class': 'bx-stream-settings-dialog-note'}, note), + setting.unsupported && CE('div', {'class': 'bx-stream-settings-dialog-note'}, t('browser-unsupported-feature')), ), !setting.unsupported && $control, ); @@ -515,11 +515,11 @@ function preloadFonts() { export function setupStreamUi() { // Prevent initializing multiple times - if (!document.querySelector('.bx-quick-settings-bar')) { + if (!document.querySelector('.bx-stream-settings-dialog')) { preloadFonts(); window.addEventListener('resize', updateVideoPlayerCss); - setupQuickSettingsBar(); + setupStreamSettingsDialog(); StreamStats.render(); Screenshot.setup();