Add option for Game Bar's position

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;
+        }
+    }
 }

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();

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

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,

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

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