diff --git a/src/assets/css/game-bar.styl b/src/assets/css/game-bar.styl index ec46004..27cbaea 100644 --- a/src/assets/css/game-bar.styl +++ b/src/assets/css/game-bar.styl @@ -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; + } + } } diff --git a/src/index.ts b/src/index.ts index 735581c..5e3d129 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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(); diff --git a/src/modules/game-bar/game-bar.ts b/src/modules/game-bar/game-bar.ts index a43b990..db6eefc 100644 --- a/src/modules/game-bar/game-bar.ts +++ b/src/modules/game-bar/game-bar.ts @@ -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), ); diff --git a/src/modules/ui/global-settings.ts b/src/modules/ui/global-settings.ts index 651759e..b6aa4a8 100644 --- a/src/modules/ui/global-settings.ts +++ b/src/modules/ui/global-settings.ts @@ -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, diff --git a/src/utils/bx-exposed.ts b/src/utils/bx-exposed.ts index a849d32..5f76064 100644 --- a/src/utils/bx-exposed.ts +++ b/src/utils/bx-exposed.ts @@ -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; } diff --git a/src/utils/preferences.ts b/src/utils/preferences.ts index 6c6f4bf..2dd3b93 100644 --- a/src/utils/preferences.ts +++ b/src/utils/preferences.ts @@ -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]: {