added window state persistence & vsync toggle

package.json

@@ -2,7 +2,7 @@
   "name": "amethyst",
   "author": "Geoxor <geoxor123@outlook.com>",
   "productName": "Amethyst",
-  "version": "1.8.48",
+  "version": "1.8.49",
   "main": "./release/dist/main/main.js",
   "licenses": [
     {
@@ -321,7 +321,9 @@
     "discord-rpc": "^4.0.1",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.6",
+    "electron-store": "^8.1.0",
     "electron-updater": "^5.3.0",
+    "electron-window-state": "^5.0.3",
     "ffmpeg-static": "^5.1.0",
     "file-saver": "^2.0.5",
     "mime-types": "^2.1.35",

src/main/main.ts

@@ -8,6 +8,8 @@
  */
 import { app } from "electron";
 import { checkForUpdatesAndInstall, MainWindow } from "./mainWindow";
+import Store from "electron-store";
+export const store = new Store();
 
 export const IS_DEV = process.env.NODE_ENV === "development" || process.env.DEBUG_PROD === "true";
 if (process.env.NODE_ENV === "production")
@@ -17,7 +19,6 @@ if (process.env.NODE_ENV === "production")
 // import("electron-debug").then(electronDebug => electronDebug ());
 
 app.setAppUserModelId("Amethyst");
-IS_DEV && app.commandLine.appendSwitch("disable-frame-rate-limit");
 app.commandLine.appendSwitch("js-flags", "--max-old-space-size=1536");
 
 if (!app.requestSingleInstanceLock()) {
@@ -27,6 +28,15 @@ if (!app.requestSingleInstanceLock()) {
 else {
 	app.whenReady()
 		.then(() => {
+			const useVsync = store.get("useVsync", true);
+			if (useVsync) {
+				app.commandLine.removeSwitch("disable-frame-rate-limit");
+				console.log("Vsync enabled");
+			} else {
+				app.commandLine.appendSwitch("disable-frame-rate-limit");
+				console.log("Vsync disabled");
+			}
+
 			const mainWindow = new MainWindow();
 
 			app.on("window-all-closed", () => {

src/main/mainWindow.ts

@@ -5,7 +5,8 @@ import path from "path";
 import { app, BrowserWindow, dialog, Event, ipcMain, Notification, shell } from "electron";
 import { Discord, FormatIcons } from "../plugins/amethyst.discord";
 import {ALLOWED_AUDIO_EXTENSIONS} from "../shared/constants";
-import { IS_DEV } from "./main";
+import { IS_DEV, store } from "./main";
+import windowStateKeeper from "electron-window-state";
 
 export const APP_VERSION = app.isPackaged ? app.getVersion() : process.env.npm_package_version ?? "0.0.0";
 export const METADATA_CACHE_PATH = path.join(app.getPath("appData"), "/amethyst/Metadata Cache");
@@ -59,31 +60,42 @@ const notifications: Record<string, Function> = {
 export class MainWindow {
 	public readonly window: BrowserWindow;
 	public updateCheckerTimer: NodeJS.Timer | undefined;
-
-	private readonly windowOptions: Electron.BrowserWindowConstructorOptions = {
-		titleBarStyle: "hidden",
-		show: false,
-		width: 1280,
-		height: 720,
-		minHeight: 500,
-		minWidth: 800,
-		icon: icon(),
-		frame: false,
-		webPreferences: {
-			preload: path.join(__dirname, "preload.js"),
-			webSecurity: false,
-			nodeIntegration: true,
-		},
-	};
-
+	private windowState = windowStateKeeper({
+		defaultWidth: 1280,
+		defaultHeight: 720,
+	});
 	private readonly discord: Discord;
 
 	constructor() {
-		this.window = new BrowserWindow(this.windowOptions);
+
+		this.window = new BrowserWindow({
+			titleBarStyle: "hidden",
+			show: false,
+			x: this.windowState.x,
+			y: this.windowState.y,
+			width: this.windowState.width,
+			height: this.windowState.height,
+			minHeight: 500,
+			minWidth: 800,
+			icon: icon(),
+			frame: false,
+			webPreferences: {
+				preload: path.join(__dirname, "preload.js"),
+				webSecurity: false,
+				nodeIntegration: true,
+			},
+		});
+
+		this.windowState.manage(this.window);
+
 		this.discord = new Discord();
+
+		// Let us register listeners on the window, so we can update the state
+		// automatically (the listeners will be removed when the window is closed)
+		// and restore the maximized or full screen state
 
 		this.setIpcEvents();
-		this.setWindowEvents();
+		this.setWindowEvents();  
 	}
 
 	public async getCover(path: string): Promise<Buffer | undefined> {
@@ -306,6 +318,13 @@ export class MainWindow {
 				this.discord.updateCurrentSong(title, duration, seek, format as FormatIcons);
 			},
 
+			"set-vsync": (_: Event, [useVsync]: string[]) => {
+				store.set("useVsync", useVsync);
+				console.log(`Set store 'frameRateLimit' to ${useVsync}`);
+				app.relaunch();
+				app.exit();
+			},
+
 			"clear-rich-presence": () => {
 				this.discord.clearRichPresence();
 			},

src/main/preload.ts

@@ -12,6 +12,7 @@ export type Channels =
 	"minimize" |
 	"show-save-dialog" |
 	"maximize" | 
+	"set-vsync" |
 	"get-appdata-path" |
 	"unmaximize" |
 	"read-file" |

src/renderer/icons/material/CircusRingOfFireIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  ><path d="M 9.9765625 2.4355469 C 9.7984375 2.4734219 9.61525 2.6132031 9.46875 2.8457031 L 8.5117188 4.3691406 C 8.1697187 4.9131406 7.4110313 4.9989219 6.9570312 4.5449219 C 6.6720313 4.2599219 6.2894219 4.2703125 6.1074219 4.5703125 C 5.9254219 4.8703125 5.5836563 5.5205781 5.3476562 6.0175781 C 5.3476562 6.0175781 4.3238822 8.171992 4.0625 9.7714844 C 3.387728 11.033671 3.0019531 12.472386 3.0019531 14 C 3.0019531 17.54188 5.0654235 20.607636 8.046875 22.074219 C 8.058622 22.098449 8.0659731 22.122181 8.078125 22.146484 L 8.1972656 22.146484 C 9.3500749 22.68707 10.630367 22.998047 11.984375 22.998047 C 13.340319 22.998047 14.625721 22.686146 15.783203 22.144531 L 16.078125 22.144531 C 16.108584 22.083576 16.12536 22.026701 16.152344 21.966797 C 19.023588 20.460563 20.998047 17.457299 20.998047 14 C 20.998047 12.480189 20.612619 11.049722 19.941406 9.7929688 C 19.685806 8.1913485 18.652344 6.0175781 18.652344 6.0175781 C 18.416344 5.5205781 18.073578 4.8703125 17.892578 4.5703125 C 17.711578 4.2703125 17.328969 4.2599219 17.042969 4.5449219 C 16.588969 4.9989219 15.830281 4.9131406 15.488281 4.3691406 L 14.53125 2.8457031 C 14.23825 2.3797031 13.796828 2.2857187 13.548828 2.6367188 C 13.300828 2.9877187 13.095797 3.2782031 13.091797 3.2832031 L 13.087891 3.2890625 C 12.548891 4.0330625 11.450109 4.0330625 10.912109 3.2890625 L 10.908203 3.2832031 C 10.904203 3.2782031 10.699172 2.9867188 10.451172 2.6367188 C 10.327172 2.4617188 10.154687 2.3976719 9.9765625 2.4355469 z M 11.984375 6.9980469 C 15.852297 6.9980469 19.001953 10.125744 19.001953 14 C 19.001953 16.188332 17.997163 18.139037 16.425781 19.421875 C 16.334317 19.01204 16.198145 18.632806 16.064453 18.283203 C 15.935453 17.946203 15.530469 17.837109 15.230469 18.037109 C 14.377469 18.603109 13.306672 18.873156 12.138672 18.285156 C 11.110672 17.775156 10.585359 16.686797 10.318359 15.591797 C 10.210359 15.146797 9.661375 14.993891 9.359375 15.337891 C 8.6034369 16.197493 7.5965445 17.602309 7.4824219 19.359375 C 5.9621031 18.076955 4.9980469 16.156504 4.9980469 14 C 4.9980469 10.12092 8.1164528 6.9980469 11.984375 6.9980469 z" /></svg>
+</template>

src/renderer/icons/material/index.ts

@@ -34,6 +34,7 @@ import ResizeIcon from "./ResizeIcon.vue";
 import HideIcon from "./HideIcon.vue";
 import DownloadingUpdatesIcon from "./DownloadingUpdatesIcon.vue";
 import PlayIcon from "./PlayIcon.vue";
+import CircusRingOfFireIcon from "./CircusRingOfFireIcon.vue";
 import ErrorIcon from "./ErrorIcon.vue";
 import ExternalLinkIcon from "./ExternalLinkIcon.vue";
 import BinocularsIcon from "./BinocularsIcon.vue";
@@ -62,6 +63,7 @@ export {
   RenameIcon,
   ResetIcon,
   RemoveIcon,
+  CircusRingOfFireIcon,
   DisconnectIcon,
   AzimuthIcon,
   BookshelfIcon,

src/renderer/router.ts

@@ -11,6 +11,7 @@ const routes: RouteRecordRaw[] = [
       { path: "/metering", name: "settings.metering", component: () => import("@/views/Settings/MeteringSettings.vue") },
       { path: "/behaviour", name: "settings.behaviour", component: () => import("@/views/Settings/BehaviourSettings.vue") },
       { path: "/integration", name: "settings.integration", component: () => import("@/views/Settings/IntegrationSettings.vue") },
+      { path: "/performance", name: "settings.performance", component: () => import("@/views/Settings/PerformanceSettings.vue") },
     ]
   },
   { path: "/playground", name: "playground", component: () => import("@/views/PlaygroundView.vue") },

src/renderer/state.ts

@@ -51,6 +51,7 @@ export class Store {
 		diagonalVectorscope: true,
 		showLoudnessMeter: true,
 		useLogarithmicSpectrum: true,
+		useVsync: true,
 		showBigVectorscope: false,
 		useDiscordRichPresence: true,
 		smoothScrollSpeed: 0.075,

src/renderer/views/Settings/PerformanceSettings.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useElectron, useState } from "@/amethyst";
+import SettingsBinarySwitch from "@/components/settings/SettingsBinarySwitch.vue";
+
+const state = useState();
+</script>
+
+<template>
+  <div>
+    <settings-binary-switch
+      v-model="state.settings.useVsync"
+      text="VSync"
+      @change="useElectron().ipc.invoke('set-vsync', [state.settings.useVsync])"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+
+</style>

src/renderer/views/Settings/SettingsView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import NavigationBar from "@/components/NavigationBar.vue";
 import NavigationButton from "@/components/NavigationButton.vue";
-import { PaintBrushIcon, GeometryIcon, PuzzleIcon, WaveIcon } from "@/icons/material";
+import { PaintBrushIcon, GeometryIcon, CircusRingOfFireIcon, PuzzleIcon, WaveIcon } from "@/icons/material";
 </script>
 
 <template>
@@ -14,6 +14,13 @@ import { PaintBrushIcon, GeometryIcon, PuzzleIcon, WaveIcon } from "@/icons/mate
         description="background, themes, visability"
         @click="$router.push({ name: 'settings.appearance' })"
       />
+      <navigation-button
+        :icon="CircusRingOfFireIcon"
+        :active="$route.name == 'settings.performance'"
+        text="Performance"
+        description="vsync, animations, rendering"
+        @click="$router.push({ name: 'settings.performance' })"
+      />
       <navigation-button
         :icon="WaveIcon"
         :active="$route.name == 'settings.metering'"