Add option for Game Bar's position

This commit is contained in:
redphx 2024-05-12 08:01:49 +07:00
parent 84adf9989e
commit 1be9bd8ee1
6 changed files with 40 additions and 12 deletions

View File

@ -1,7 +1,6 @@
#bx-game-bar {
z-index: var(--bx-game-bar-z-index);
position: fixed;
left: 0;
bottom: 0;
width: 40px;
height: 90px;
@ -30,7 +29,6 @@
display: flex;
overflow: hidden;
background: #1a1b1ee8;
border-radius: 0 10px 10px 0;
box-shadow: 0px 0px 6px #1c1c1c;
transition: opacity 0.1s ease-in;
@ -98,4 +96,22 @@
}
}
}
&[data-position="bottom-left"] {
left: 0;
direction: ltr;
.bx-game-bar-container {
border-radius: 0 10px 10px 0;
}
}
&[data-position="bottom-right"] {
right: 0;
direction: rtl;
.bx-game-bar-container {
border-radius: 10px 0 0 10px;
}
}
}

View File

@ -150,7 +150,7 @@ window.addEventListener(BxEvent.STREAM_PLAYING, e => {
STATES.isPlaying = true;
injectStreamMenuButtons();
if (getPref(PrefKey.GAME_BAR_ENABLED)) {
if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
const gameBar = GameBar.getInstance();
gameBar.reset();
gameBar.enable();
@ -213,7 +213,7 @@ function main() {
// Setup UI
addCss();
Toast.setup();
getPref(PrefKey.GAME_BAR_ENABLED) && GameBar.getInstance();
(getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
BX_FLAGS.PreloadUi && setupStreamUi();
StreamBadges.setupEvents();

View File

@ -31,7 +31,10 @@ export class GameBar {
private constructor() {
let $container;
const $gameBar = CE('div', {id: 'bx-game-bar', class: 'bx-gone'},
const position = getPref(PrefKey.GAME_BAR_POSITION);
const $gameBar = CE('div', {id: 'bx-game-bar', class: 'bx-gone', 'data-position': position},
$container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
createSvgIcon(BxIcon.CARET_RIGHT),
);

View File

@ -28,8 +28,6 @@ const SETTINGS_UI = {
PrefKey.STREAM_TARGET_RESOLUTION,
PrefKey.STREAM_CODEC_PROFILE,
PrefKey.GAME_BAR_ENABLED,
PrefKey.AUDIO_MIC_ON_PLAYING,
PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
@ -42,6 +40,12 @@ const SETTINGS_UI = {
],
},
[t('game-bar')]: {
items: [
PrefKey.GAME_BAR_POSITION,
],
},
[t('local-co-op')]: {
items: [
PrefKey.LOCAL_CO_OP_ENABLED,

View File

@ -16,7 +16,7 @@ enum InputType {
export const BxExposed = {
// Enable/disable Game Bar when playing/pausing
onPollingModeChanged: (mode: 'All' | 'None') => {
if (!getPref(PrefKey.GAME_BAR_ENABLED)) {
if (getPref(PrefKey.GAME_BAR_POSITION) === 'off') {
return;
}

View File

@ -32,7 +32,7 @@ export enum PrefKey {
STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog',
GAME_BAR_ENABLED = 'game_bar_enabled',
GAME_BAR_POSITION = 'game_bar_position',
LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
// LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
@ -314,9 +314,14 @@ export class Preferences {
default: false,
},
[PrefKey.GAME_BAR_ENABLED]: {
label: t('enable-game-bar'),
default: true,
[PrefKey.GAME_BAR_POSITION]: {
label: t('position'),
default: 'bottom-left',
options: {
'bottom-left': t('bottom-left'),
'bottom-right': t('bottom-right'),
'off': t('off'),
},
},
[PrefKey.LOCAL_CO_OP_ENABLED]: {