fix #63 and update electron

package.json

@@ -204,13 +204,14 @@
     "@vue/test-utils": "^2.1.0",
     "concurrently": "^7.1.0",
     "cross-env": "^7.0.3",
-    "electron": "^19.1.2",
+    "electron": "20.2.0",
     "electron-builder": "^23.6.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.2.1",
     "electron-rebuild": "^3.2.7",
     "electronmon": "^2.0.2",
     "eslint": "^8.12.0",
+    "jest": "^29.2.1",
     "postcss": "^8.4.18",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
@@ -222,7 +223,6 @@
     "unplugin-vue-components": "^0.22.8",
     "url-loader": "^4.1.1",
     "vitest": "^0.24.3",
-    "jest": "^29.2.1",
     "vue-loader": "^17.0.0",
     "vue-tsc": "^1.0.4"
   },

src/main/logger.ts

@@ -8,4 +8,22 @@ export class Logger {
   public static print(...msg: string[]) {
     console.log(chalk.hex("#6669D3")(" ➜ "), ...msg)
   }
+
+  public static fn(name: string, params?: Object, ...msg: string[]) {
+    console.log(chalk.hex("#933ce8")(" ✭ "), "Function:", chalk.hex("#933ce8")(`${name}()`), chalk.hex("#6669D3")(msg[0] ? " ➜ " : ""), ...msg)
+    if (params) {
+      console.log(chalk.gray(`    Parameters: 
+     ${Object.entries(params).map(([name, value]) => ` ${chalk.hex("#933ce8")("↳")} ${chalk.magenta(name)}: "${value}"`)}
+    `));
+    }
+  }
+
+  public static handle(name: string, params?: Object, ...msg: string[]) {
+    console.log(chalk.hex("#42adf5")(" 🛈"), "IPC Handle Function:", chalk.hex("#42adf5")(`"${name}"`), chalk.hex("#6669D3")(msg[0] ? " ➜ " : ""), ...msg)
+    if (params) {
+      console.log(chalk.gray(`    Parameters: 
+     ${Object.entries(params).map(([name, value]) => ` ${chalk.hex("#42adf5")("↳")} ${chalk.magenta(name)}: "${value}"`)}
+    `));
+    }
+  }
 } 

src/main/mainWindow.ts

@@ -79,6 +79,7 @@ export class MainWindow {
 	}
 
 	public show(): void {
+		Logger.fn("show");
 		this.window.loadURL(resolveHTMLPath("index"));
 
 		this.window.on("ready-to-show", () => {
@@ -99,14 +100,17 @@ export class MainWindow {
 	}
 
 	public destroy(): void {
+		Logger.fn("destroy");
 		this.window.destroy();
 	}
 
 	public playAudio(path: string): void {
+		Logger.fn("playAudio", { path });
 		this.window.webContents.send("play-file", path);
 	}
 
 	private setWindowEvents(): void {
+		Logger.fn("setWindowEvents");
 		Logger.print("Setting Window events")
 
 
@@ -137,6 +141,7 @@ export class MainWindow {
 	}
 
 	private setIpcEvents(): void {
+		Logger.fn("setIpcEvents");
 		Logger.print("Setting IPC events")
 
 		Object.entries({
@@ -150,13 +155,13 @@ export class MainWindow {
 			// Temporary fix
 			"close": (_: Event, [window]: string[]) => window === "preferences" ? this.preferencesWindow?.close() : this.window.close(),
 
-			"read-file": (_: Event, [path]: string[]) => fs.promises.readFile(path),
-
-			"mini-player": (_: Event) => {
-				this.window.setSize(this.windowOptions.minWidth!, 164)
+			"read-file": (_: Event, [path]: string[]) => {
+				Logger.handle("read-file");
+				return fs.promises.readFile(path)
 			},
 
 			"open-file-dialog": async () => {
+				Logger.handle("open-file-dialog");
 				const response = await dialog.showOpenDialog({
 					properties: ["openFile"],
 					filters: [
@@ -169,6 +174,7 @@ export class MainWindow {
 			},
 
 			"open-folder-dialog": async () => {
+				Logger.handle("open-folder-dialog");
 				const response = await dialog.showOpenDialog({
 					properties: ["openDirectory"],
 				});
@@ -177,11 +183,17 @@ export class MainWindow {
 					this.window.webContents.send("play-folder", await loadFolder(response.filePaths[0]));
 			},
 
-			"percent-cpu-usage": async () => process.getCPUUsage().percentCPUUsage,
+			"percent-cpu-usage": async () => {
+				return process.getCPUUsage().percentCPUUsage
+			},
 
-			"get-cover": async (_: Event, [path]: string[]) => this.getResizedCover(path),
+			"get-cover": async (_: Event, [path]: string[]) => {
+				Logger.handle("get-cover", { path });
+				return this.getResizedCover(path);
+			},
 
 			"get-cover-colors": async (_: Event, [path]: string[]): Promise<FastAverageColorResult> => {
+				Logger.handle("get-cover-colors", { path });
 				const coverBuffer = await this.getCover(path);
 				if (!coverBuffer)
 					return Promise.reject();
@@ -194,23 +206,18 @@ export class MainWindow {
 				}
 			},
 
-			"get-cover-pixelized": async (_: Event, [path]: string[]) => {
-				const coverBuffer = await this.getCover(path);
-
-				if (!coverBuffer)
-					return;
-
-				return (await sharp(await sharp(coverBuffer).resize(128, 128, {
-					kernel: "nearest",
-				}).png().toBuffer()).resize(256, 256, {
-					kernel: "nearest",
-				}).png().toBuffer()).toString("base64");
+			"get-metadata": async (_: Event, [path]: string[]) => {
+				Logger.handle("get-metadata", { path });
+				return path && mm.parseBuffer(await fs.promises.readFile(path))
 			},
-			"get-metadata": async (_: Event, [path]: string[]) => path && mm.parseBuffer(await fs.promises.readFile(path)),
 
-			"show-item": (_: Event, [fullPath]: string[]) => shell.showItemInFolder(path.normalize(fullPath)),
+			"show-item": (_: Event, [fullPath]: string[]) => {
+				Logger.handle("show-item", { fullPath });
+				shell.showItemInFolder(path.normalize(fullPath));
+			},
 
 			"drop-file": async (_: Event, [paths]: string[][]) => {
+				Logger.handle("drop-file", { paths })
 				paths.forEach(async (path) => {
 					const stat = await fs.promises.stat(path);
 					if (stat.isDirectory())
@@ -220,39 +227,46 @@ export class MainWindow {
 				});
 			},
 
-			"sync-window-state": () => ({
-				isMinimized: this.window.isMinimized(),
-				isMaximized: this.window.isMaximized(),
-			}),
+			"sync-window-state": () => {
+				Logger.handle("sync-window-state")
+				return {
+					isMinimized: this.window.isMinimized(),
+					isMaximized: this.window.isMaximized(),
+				}
+			},
 
 			"update-rich-presence": (_: Event, [
 				title,
 				duration,
 				seek,
 				status,
-			]: string[]) => this.discord.updateCurrentSong(title, duration, seek, status === "true"),
-
-			"open-preferences": () => {
-				this.preferencesWindow = new BrowserWindow({ ...this.windowOptions, show: true, width: 600, height: 800 });
-				this.preferencesWindow.loadURL(resolveHTMLPath("index") + "/#preferences");
-				this.preferencesWindow.once('ready-to-show', () => {
-					this.preferencesWindow!.show();
+			]: string[]) => {
+				Logger.handle("update-rich-presence", {
+					title,
+					duration,
+					seek,
+					status,
 				})
+				this.discord.updateCurrentSong(title, duration, seek, status === "true")
 			},
+
 			"check-for-updates": () => {
+				Logger.handle("check-for-updates")
 				checkForUpdatesAndInstall();
 			}
 		}).forEach(([channel, handler]) => ipcMain.handle(channel, handler));
 	}
 
 	private async getCover(path: string): Promise<Buffer | undefined> {
+		Logger.fn("playAudio", { path });
 		const file = await fs.promises.readFile(path);
 		const meta = await mm.parseBuffer(file);
 
 		return meta.common.picture?.[0].data;
 	}
 
 	private async getResizedCover(path: string, resizeTo = 128): Promise<string | undefined> {
+		Logger.fn("playAudio", { path, resizeTo });
 		const cover = await this.getCover(path);
 
 		if (!cover)
@@ -265,6 +279,7 @@ export class MainWindow {
 }
 
 export async function checkForUpdatesAndInstall() {
+	Logger.fn("checkForUpdatesAndInstall");
 	Logger.print("Checking for updates...")
 	autoUpdater.checkForUpdatesAndNotify();
 }

src/main/preload.ts

@@ -13,7 +13,6 @@ export type Channels =
 	"get-cover" |
 	"get-metadata" |
 	"show-item" |
-	"mini-player" |
 	"percent-cpu-usage" |
 	"update-rich-presence" |
 	"sync-window-state" |

src/renderer/components/MenuBar.vue

@@ -33,9 +33,6 @@ const player = usePlayer();
           :title="`Clear Waveform cache (${bytesToHuman(state.waveformCacheSize.value)})`"
           @click="state.state.waveformCache = {}" />
         <menu-option :title="`Check for updates`" @click="electron.invoke('check-for-updates')" />
-
-        <menu-option title="Miniplayer" @click="electron.invoke('mini-player')" />
-
       </Menu>
       <Menu title="Debug" v-if="state.isDev.value">
         <menu-option title="Test 'UpdateInstallingNotification'"

src/renderer/components/Vectorscope.vue

@@ -29,7 +29,7 @@ onMounted(() => {
 	const bufferX = new Float32Array(analyzerX.fftSize);
 	const bufferY = new Float32Array(analyzerY.fftSize);
 
-	canvasCtx.value.strokeStyle = "#ffcd0166";
+	canvasCtx.value.strokeStyle = "#f5874266";
 
 	canvasCtx.value.lineWidth = state.settings.vectorscopeLineThickness;
 	watch(() => state.settings.vectorscopeLineThickness, () => canvasCtx.value.lineWidth = state.settings.vectorscopeLineThickness)

src/renderer/shortcuts.ts

@@ -45,7 +45,6 @@ export default class Shortcuts {
       // Register the event for each key
       for (let j = 0; j < keys.length; j++)
         onKeyStroke(keys[j], (e) => {
-          e.preventDefault();
           e.stopPropagation();
           action(e);
         });