chore: update to electron v16

api.ts

@@ -230,9 +230,34 @@ export class Api {
                 })
         );
 
+        this.setTitleBarListeners();
         this.refreshPlaylists();
     }
 
+    /**
+     * Set default listeners for custom-titlebar
+     */
+    setTitleBarListeners() {
+        ipcMain.on('window-minimize', function (event) {
+            BrowserWindow.fromWebContents(event.sender).minimize();
+        });
+
+        ipcMain.on('window-maximize', function (event) {
+            const window = BrowserWindow.fromWebContents(event.sender);
+            window.isMaximized() ? window.unmaximize() : window.maximize();
+        });
+
+        ipcMain.on('window-close', function (event) {
+            BrowserWindow.fromWebContents(event.sender).close();
+        });
+
+        ipcMain.on('window-is-maximized', function (event) {
+            event.returnValue = BrowserWindow.fromWebContents(
+                event.sender
+            ).isMaximized();
+        });
+    }
+
     /**
      * Starts the update process for all the playlists with the enabled auto-refresh flag
      */

package.json

@@ -57,7 +57,7 @@
         "@yangkghjh/videojs-aspect-ratio-panel": "0.0.1",
         "about-window": "1.13.4",
         "axios": "0.21.2",
-        "custom-electron-titlebar": "3.2.5",
+        "custom-electron-titlebar": "4.0.0",
         "electron-context-menu": "3.1.1",
         "epg-parser": "0.1.1",
         "hls.js": "1.0.11",
@@ -118,8 +118,8 @@
         "conventional-changelog-cli": "2.2.2",
         "core-js": "3.6.5",
         "cross-env": "7.0.3",
-        "electron": "11.0.0",
-        "electron-builder": "22.13.1",
+        "electron": "16.0.0",
+        "electron-builder": "22.14.5",
         "eslint": "7.32.0",
         "eslint-plugin-import": "2.25.2",
         "husky": "5.0.9",

preload.ts

@@ -1,9 +1,14 @@
-import { Color, Titlebar } from 'custom-electron-titlebar';
+const customTitlebar = require('custom-electron-titlebar');
+const { ipcRenderer } = require('electron');
 
 window.addEventListener('DOMContentLoaded', () => {
-    new Titlebar({
-        backgroundColor: Color.fromHex('#000'),
-        itemBackgroundColor: Color.fromHex('#222'),
-        enableMnemonics: true,
+    new customTitlebar.Titlebar({
+        backgroundColor: customTitlebar.Color.fromHex('#000'),
+        onMinimize: () => ipcRenderer.send('window-minimize'),
+        onMaximize: () => ipcRenderer.send('window-maximize'),
+        onClose: () => ipcRenderer.send('window-close'),
+        isMaximized: () => ipcRenderer.sendSync('window-is-maximized'),
+        onMenuItemClick: (commandId) =>
+            ipcRenderer.send('menu-event', commandId),
     });
 });

src/app/services/data.service.ts

@@ -4,7 +4,7 @@ export abstract class DataService {
         return !!(window && window.process && (window.process as any).type);
     }
     get remote() {
-        return this.isElectron ? window.require('electron').remote : null;
+        return this.isElectron ? window.require('@electron/remote') : null;
     }
     get ipcRenderer(): typeof ipcRenderer {
         return this.isElectron ? window.require('electron').ipcRenderer : null;