feat: advanced settings

.github/CHANGELOG.yaml

@@ -26,6 +26,9 @@ releases:
       - title: fix move people to new installer config url
         categories: [Core]
         authors: [FoxtrotSierra]
+      - title: Add advanced settings (e.g. disable hardware acceleration)
+        categories: [Core]
+        authors: [FoxtrotSierra]
   - name: 3.4.3
     changes:
       - title: Change installer configuration to Cloudflare

src/main/index.ts

@@ -222,6 +222,31 @@ function initializeApp() {
 
   Menu.setApplicationMenu(null);
 
+  const disableGpu = process.argv.slice(1).some((arg) => arg === '--disable-gpu');
+
+  if (disableGpu) {
+    settings.set('advanced.disableHardwareAcceleration', true);
+  }
+  if (settings.get('advanced.disableHardwareAcceleration')) {
+    app.disableHardwareAcceleration();
+  }
+
+  const disableGpuSandbox = process.argv.slice(1).some((arg) => arg === '--disable-gpu-sandbox');
+  if (disableGpuSandbox) {
+    settings.set('advanced.disableGpuSandbox', true);
+  }
+  if (settings.get('advanced.disableGpuSandbox')) {
+    app.commandLine.appendSwitch('disable-gpu-sandbox');
+  }
+
+  const noSandbox = process.argv.slice(1).some((arg) => arg === '--no-sandbox');
+  if (noSandbox) {
+    settings.set('advanced.noSandbox', true);
+  }
+  if (settings.get('advanced.noSandbox')) {
+    app.commandLine.appendSwitch('no-sandbox');
+  }
+
   // This method will be called when Electron has finished
   // initialization and is ready to create browser windows.
   // Some APIs can only be used after this event occurs.

src/main/mainSettings.ts

@@ -16,6 +16,12 @@ interface Settings {
       maximized: boolean;
     };
   };
+  advanced: {
+    showAll: boolean;
+    disableHardwareAcceleration: boolean;
+    disableGpuSandbox: boolean;
+    noSandbox: boolean;
+  };
 }
 
 const schema: Schema<Settings> = {
@@ -41,6 +47,26 @@ const schema: Schema<Settings> = {
       },
     },
   },
+  advanced: {
+    type: 'object',
+    default: {},
+    properties: {
+      showAll: {
+        type: 'boolean',
+        default: false,
+      },
+      disableHardwareAcceleration: {
+        type: 'boolean',
+        default: false,
+      },
+      disableGpuSandbox: {
+        type: 'boolean',
+      },
+      noSandbox: {
+        type: 'boolean',
+      },
+    },
+  },
 };
 
 const store = new Store({ schema, clearInvalidConfig: true });

src/renderer/components/SettingsSection/Advanced.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import settings from 'main/mainSettings';
+import { useSetting } from 'renderer/rendererSettings';
+import { Toggle } from '../Toggle';
+import { SettingItemProps, SettingsItem } from './General';
+
+const DisableHardwareAcceleration = ({ value, setValue }: SettingItemProps<boolean>) => {
+  const handleClick = (value: boolean) => {
+    settings.set('advanced.disableHardwareAcceleration', value);
+    setValue(value);
+  };
+
+  return (
+    <SettingsItem name="Disable Hardware Acceleration">
+      <Toggle value={value} onToggle={handleClick} />
+    </SettingsItem>
+  );
+};
+
+const DisableGpuSandbox = ({ value, setValue }: SettingItemProps<boolean>) => {
+  const handleClick = (value: boolean) => {
+    settings.set('advanced.disableGpuSandbox', value);
+    setValue(value);
+  };
+
+  return (
+    <SettingsItem name="Disable GPU Sandbox">
+      <Toggle value={value} onToggle={handleClick} />
+    </SettingsItem>
+  );
+};
+
+const DisableSandbox = ({ value, setValue }: SettingItemProps<boolean>) => {
+  const handleClick = (value: boolean) => {
+    settings.set('advanced.noSandbox', value);
+    setValue(value);
+  };
+
+  return (
+    <SettingsItem name="Disable Sandbox">
+      <Toggle value={value} onToggle={handleClick} />
+    </SettingsItem>
+  );
+};
+
+export const AdvancedSettings = (): JSX.Element => {
+  const [showAll] = useSetting<boolean>('advanced.showAll');
+  const showAllSettings = showAll || process.env.NODE_ENV === 'development';
+  const [disableHardwareAcceleration, setDisableHardwareAcceleration] = useSetting<boolean>(
+    'advanced.disableHardwareAcceleration',
+  );
+  const [disableGpuSandbox, setDisableGpuSandbox] = useSetting<boolean>('advanced.disableGpuSandbox');
+  const [disableSandbox, setDisableSandbox] = useSetting<boolean>('advanced.noSandbox');
+
+  return (
+    <div>
+      <div className="flex flex-col">
+        <h2 className="text-red">Advanced Settings</h2>
+        <div className="flex flex-col divide-y divide-gray-600">
+          <DisableHardwareAcceleration value={disableHardwareAcceleration} setValue={setDisableHardwareAcceleration} />
+          {(disableGpuSandbox || showAllSettings) && (
+            <DisableGpuSandbox value={disableGpuSandbox} setValue={setDisableGpuSandbox} />
+          )}
+          {(disableSandbox || showAllSettings) && (
+            <DisableSandbox value={disableSandbox} setValue={setDisableSandbox} />
+          )}
+          <p className="text-red">It is required to restart the application to apply changes</p>
+        </div>
+      </div>
+    </div>
+  );
+};

src/renderer/components/SettingsSection/Customization.tsx

@@ -1,19 +1,7 @@
-import React, { FC } from 'react';
+import React from 'react';
 import settings, { useSetting } from 'renderer/rendererSettings';
 import { Toggle } from '../Toggle';
-
-const SettingsItem: FC<{ name: string }> = ({ name, children }) => (
-  <div className="flex flex-row items-center justify-between py-3.5">
-    {/* TODO: Remove this styling later */}
-    <p className="m-0">{name}</p>
-    {children}
-  </div>
-);
-
-interface SettingItemProps<T> {
-  value: T;
-  setValue: (value: T) => void;
-}
+import { SettingItemProps, SettingsItem } from './General';
 
 const DarkThemeItem = ({ value, setValue }: SettingItemProps<boolean>) => {
   const handleClick = () => {

src/renderer/components/SettingsSection/Developer.tsx

@@ -1,17 +1,11 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useSetting } from 'renderer/rendererSettings';
 import { Toggle } from 'renderer/components/Toggle';
 import * as packageInfo from '../../../../package.json';
 import { Button, ButtonType } from 'renderer/components/Button';
 import { ipcRenderer } from 'electron';
 import channels from 'common/channels';
-
-const SettingsItem: FC<{ name: string }> = ({ name, children }) => (
-  <div className="flex flex-row items-center justify-between py-3.5">
-    <p className="m-0">{name}</p>
-    {children}
-  </div>
-);
+import { SettingsItem } from './General';
 
 export const DeveloperSettings: React.FC = () => {
   const [configDownloadUrl, setConfigDownloadUrl] = useSetting<string>('mainSettings.configDownloadUrl');

src/renderer/components/SettingsSection/Download.tsx

@@ -1,20 +1,8 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { setupMsfsCommunityPath, setupInstallPath, setupTempLocation } from 'renderer/actions/install-path.utils';
 import settings, { useSetting } from 'renderer/rendererSettings';
 import { Toggle } from '../Toggle';
-
-const SettingsItem: FC<{ name: string }> = ({ name, children }) => (
-  <div className="flex flex-row items-center justify-between py-3.5">
-    {/* TODO: Remove this styling later */}
-    <p className="m-0">{name}</p>
-    {children}
-  </div>
-);
-
-interface SettingItemProps<T> {
-  value: T;
-  setValue: (value: T) => void;
-}
+import { SettingItemProps, SettingsItem } from './General';
 
 interface PathSettingItemProps extends SettingItemProps<string> {
   name: string;

src/renderer/components/SettingsSection/General.tsx

@@ -3,15 +3,15 @@ import settings, { useSetting } from 'renderer/rendererSettings';
 import { ipcRenderer } from 'electron';
 import { Toggle } from '../Toggle';
 
-const SettingsItem: FC<{ name: string }> = ({ name, children }) => (
+export const SettingsItem: FC<{ name: string }> = ({ name, children }) => (
   <div className="flex flex-row items-center justify-between py-3.5">
     {/* TODO: Remove this styling later */}
     <p className="m-0">{name}</p>
     {children}
   </div>
 );
 
-interface SettingItemProps<T> {
+export interface SettingItemProps<T> {
   value: T;
   setValue: (value: T) => void;
 }

src/renderer/components/SettingsSection/index.tsx

@@ -2,6 +2,7 @@ import React, { FC, useState } from 'react';
 import { GeneralSettings } from 'renderer/components/SettingsSection/General';
 import { Redirect, Route } from 'react-router-dom';
 import { AboutSettings } from 'renderer/components/SettingsSection/About';
+import { AdvancedSettings } from 'renderer/components/SettingsSection/Advanced';
 import { SideBar, SideBarLink, SideBarTitle } from 'renderer/components/SideBar';
 import { CustomizationSettings } from './Customization';
 import { DownloadSettings } from './Download';
@@ -76,6 +77,10 @@ export const SettingsSection = (): JSX.Element => {
           {/*    </span>*/}
           {/*</SideBarLink>*/}
 
+          <SideBarLink to="/settings/advanced">
+            <span className="font-manrope text-3xl font-semibold">Advanced</span>
+          </SideBarLink>
+
           {showDevSettings && (
             <SideBarLink to="/settings/developer">
               <span className="font-manrope text-3xl font-semibold">Developer</span>
@@ -85,6 +90,7 @@ export const SettingsSection = (): JSX.Element => {
           <SideBarLink to="/settings/about">
             <span className="font-manrope text-3xl font-semibold">About</span>
           </SideBarLink>
+
           <div className="relative mt-auto">
             <ResetButton type={ButtonType.Neutral} onClick={handleReset}>
               Reset Settings
@@ -109,6 +115,10 @@ export const SettingsSection = (): JSX.Element => {
             <CustomizationSettings />
           </Route>
 
+          <Route path="/settings/advanced">
+            <AdvancedSettings />
+          </Route>
+
           {showDevSettings && (
             <Route path="/settings/developer">
               <DeveloperSettings />