Rename "Quick Bar" to "Stream Settings dialog"

This commit is contained in:
redphx 2024-05-26 11:42:19 +07:00
parent ac37fe05bc
commit 9166761780
5 changed files with 36 additions and 36 deletions

View File

@ -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] {

View File

@ -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;

View File

@ -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),
);

View File

@ -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'));
}

View File

@ -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<HTMLElement>('div', {'class': 'bx-quick-settings-bar bx-gone'},
$tabs = CE<HTMLElement>('div', {'class': 'bx-quick-settings-tabs'}),
$settings = CE<HTMLElement>('div', {'class': 'bx-quick-settings-tab-contents'}),
const $wrapper = CE<HTMLElement>('div', {'class': 'bx-stream-settings-dialog bx-gone'},
$tabs = CE<HTMLElement>('div', {'class': 'bx-stream-settings-tabs'}),
$settings = CE<HTMLElement>('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();