Support additional gamescope options (#3476)

* Support additional gamescope options

* review comments

* switch back to onChange

* fix

* fix lint

Author: Etaash-mathamsetty

public/locales/en/translation.json

@@ -320,6 +320,7 @@
         },
         "gamemode": "Feral GameMode applies automatic and temporary tweaks to the system when running games. Enabling may improve performance.",
         "gamescope": {
+            "additionalOptions": "Additional commandline flags to pass into gamescope.",
             "fpsLimiter": "The amount of frames gamescope should limit to. E.g. 60",
             "fpsLimiterNoFocus": "The frame rate limit gamescope should limit per second if the game is not focused.",
             "gameHeight": "The height resolution used by the game. A 16:9 aspect ratio is assumed by gamescope.",
@@ -502,6 +503,7 @@
             "title": "Game Arguments (To run after the command):"
         },
         "gamescope": {
+            "additionalOptions": "Additional Options",
             "borderless": "Borderless",
             "fpsLimiter": "FPS Limiter",
             "fpsLimiterNoFocus": "FPS Limiter (No Focus)",

src/backend/launcher.ts

@@ -214,6 +214,10 @@ async function prepareLaunch(
         }
       }
 
+      gameScopeCommand.push(
+        ...shlex.split(gameSettings.gamescope.additionalOptions ?? '')
+      )
+
       // Note: needs to be the last option
       gameScopeCommand.push('--')
     }

src/common/types.ts

@@ -751,6 +751,7 @@ interface GameScopeSettings {
   upscaleMethod: string
   fpsLimiter: string
   fpsLimiterNoFocus: string
+  additionalOptions: string
 }
 
 export type InstallInfo =

src/frontend/screens/Settings/components/Gamescope.tsx

@@ -25,11 +25,16 @@ const Gamescope = () => {
     upscaleWidth: '',
     upscaleMethod: 'fsr',
     fpsLimiter: '',
-    fpsLimiterNoFocus: ''
+    fpsLimiterNoFocus: '',
+    additionalOptions: ''
   })
   const [fetching, setFetching] = useState(true)
   const [isInstalled, setIsInstalled] = useState(false)
 
+  const [additionalOptions, setAdditionalOptions] = useState(
+    gamescope.additionalOptions
+  )
+
   useEffect(() => {
     setFetching(true)
     window.api
@@ -356,6 +361,32 @@ const Gamescope = () => {
           />
         </div>
       )}
+      {/* Additional Options */}
+      <TextInputField
+        label={t('options.gamescope.additionalOptions', 'Additional Options')}
+        htmlId="additionalOptions"
+        placeholder=""
+        value={additionalOptions}
+        afterInput={
+          <FontAwesomeIcon
+            className="helpIcon"
+            icon={faCircleInfo}
+            title={t(
+              'help.gamescope.additionalOptions',
+              'Additional commandline flags to pass into gamescope.'
+            )}
+          />
+        }
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setAdditionalOptions(event.currentTarget.value)
+        }}
+        onBlur={(event: ChangeEvent<HTMLInputElement>) =>
+          setGamescope({
+            ...gamescope,
+            additionalOptions: event.currentTarget.value
+          })
+        }
+      />
     </div>
   )
 }