feat: allow specifying angle backend

src/common/util.js

@@ -24,7 +24,8 @@ export const defaults = {
   cards: 'small',
   expandingSidebar: true,
   torrentPath: undefined,
-  font: undefined
+  font: undefined,
+  angle: 'default'
 }
 
 export const subtitleExtensions = ['srt', 'vtt', 'ass', 'ssa', 'sub', 'txt']

src/main/store.js

@@ -0,0 +1,30 @@
+import { app } from 'electron'
+import { join } from 'node:path'
+import { writeFileSync, readFileSync } from 'node:fs'
+
+class Store {
+  constructor (configName, defaults) {
+    this.path = join(app.getPath('userData'), configName + '.json')
+
+    this.data = parseDataFile(this.path, defaults)
+  }
+
+  get (key) {
+    return this.data[key]
+  }
+
+  set (key, val) {
+    this.data[key] = val
+    writeFileSync(this.path, JSON.stringify(this.data))
+  }
+}
+
+function parseDataFile (filePath, defaults) {
+  try {
+    return { ...defaults, ...JSON.parse(readFileSync(filePath).toString()) }
+  } catch (error) {
+    return defaults
+  }
+}
+
+export default new Store('settings', { angle: 'default' })

src/main/util.js

@@ -1,4 +1,5 @@
 import { app, ipcMain, shell, dialog } from 'electron'
+import store from './store.js'
 
 export const development = process.env.NODE_ENV?.trim() === 'development'
 
@@ -12,14 +13,17 @@ const flags = [
   ['enable-hardware-overlays', 'single-fullscreen,single-on-top,underlay'],
   ['enable-features', 'PlatformEncryptedDolbyVision,EnableDrDc,CanvasOopRasterization,ThrottleDisplayNoneAndVisibilityHiddenCrossOriginIframes,UseSkiaRenderer,WebAssemblyLazyCompilation'],
   ['force_high_performance_gpu'],
-  ['disable-features', 'Vulkan'],
+  ['disable-features', 'Vulkan,CalculateNativeWinOcclusion'],
   ['disable-color-correct-rendering'],
+  ['autoplay-policy', 'no-user-gesture-required'], ['disable-notifications'], ['disable-logging'], ['disable-permissions-api'], ['no-sandbox'], ['no-zygote'],
   ['force-color-profile', 'srgb']
 ]
 for (const [flag, value] of flags) {
   app.commandLine.appendSwitch(flag, value)
 }
 
+app.commandLine.appendSwitch('use-angle', store.get('angle') || 'default')
+
 if (!app.requestSingleInstanceLock()) app.quit()
 
 ipcMain.on('open', (event, url) => {
@@ -33,6 +37,10 @@ ipcMain.on('doh', (event, dns) => {
   })
 })
 
+ipcMain.on('angle', (e, data) => {
+  store.set('angle', data)
+})
+
 ipcMain.on('close', () => {
   app.quit()
 })

src/renderer/views/Settings.svelte

@@ -43,6 +43,9 @@
   let version = '1.0.0'
   window.IPC.on('version', data => (version = data))
   window.IPC.emit('version')
+  function updateAngle () {
+    window.IPC.emit('angle', set.angle)
+  }
 
   let wasUpdated = false
   window.IPC.on('update-available', () => {
@@ -534,6 +537,22 @@
             <label for='css-variables'>CSS Variables</label>
             <textarea class='form-control' id='css-variables' placeholder='--accent-color: #e5204c;' bind:value={$variables} />
           </div>
+          <div class='input-group mb-10 w-400 form-control-lg' data-toggle='tooltip' data-placement='top' data-title="What ANGLE Backend To Use. DON'T CHANGE WITHOUT REASON! On Some Windows Machines D3D9 Might Help With Flicker.">
+            <div class='input-group-prepend'>
+              <span class='input-group-text w-200 justify-content-center'>ANGLE Backend</span>
+            </div>
+            <select class='form-control form-control-lg' bind:value={settings.angle} on:change={updateAngle}>
+              <option value='default' selected>Default</option>
+              <option value='d3d9'>D3D9</option>
+              <option value='d3d11'>D3D11</option>
+              <option value='warp'>Warp [Software D3D11]</option>
+              <option value='gl'>GL</option>
+              <option value='gles'>GLES</option>
+              <option value='swiftshader'>SwiftShader</option>
+              <option value='vulkan'>Vulkan</option>
+              <option value='metal'>Metal</option>
+            </select>
+          </div>
         </div>
       </Tab>
       <Tab>