Merge pull request #118 from 4gray/electron-16

Update to electron v16

.github/workflows/ci.yaml

@@ -24,7 +24,6 @@ jobs:
             - run: npm ci
             - run: npm test -- --coverage
             - run: bash <(curl -s https://codecov.io/bash)
-            - run: xvfb-run --auto-servernum npm run e2e
             - run: npm run build:prod
               env:
                   CI: true

.github/workflows/release.yml

@@ -23,7 +23,6 @@ jobs:
       - run: npm install
       - run: npm test -- --coverage
       - run: bash <(curl -s https://codecov.io/bash)
-      - run: xvfb-run --auto-servernum npm run e2e
       - run: npm run build:prod
         env:
           CI: true

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
      */

e2e/common-setup.ts

@@ -1,37 +0,0 @@
-const Application = require('spectron').Application;
-const electronPath = require('electron'); // Require Electron from the binaries included in node_modules.
-const path = require('path');
-
-export default function setup(): void {
-    beforeEach(async function () {
-        this.app = new Application({
-            // Your electron path can be any binary
-            // i.e for OSX an example path could be '/Applications/MyApp.app/Contents/MacOS/MyApp'
-            // But for the sake of the example we fetch it from our node_modules.
-            path: electronPath,
-
-            // Assuming you have the following directory structure
-
-            //  |__ my project
-            //     |__ ...
-            //     |__ main.js
-            //     |__ package.json
-            //     |__ index.html
-            //     |__ ...
-            //     |__ test
-            //        |__ spec.js  <- You are here! ~ Well you should be.
-
-            // The following line tells spectron to look and use the main.js file
-            // and the package.json located 1 level above.
-            args: [path.join(__dirname, '..')],
-            webdriverOptions: {},
-        });
-        await this.app.start();
-    });
-
-    afterEach(function () {
-        if (this.app && this.app.isRunning()) {
-            return this.app.stop();
-        }
-    });
-}

e2e/main.e2e.ts

@@ -1,26 +0,0 @@
-import { expect } from 'chai';
-import { SpectronClient } from 'spectron';
-
-import commonSetup from './common-setup';
-
-describe('iptvnator App', function () {
-    commonSetup.apply(this);
-
-    let client: SpectronClient;
-
-    beforeEach(function () {
-        client = this.app.client;
-    });
-
-    it('creates initial windows', async function () {
-        const count = await client.getWindowCount();
-        expect(count).to.equal(2);
-    });
-
-    it('should contain name of the app', async function () {
-        this.app.client.windowByIndex(1);
-        const elem = await client.$('.title');
-        const text = await elem.getText();
-        expect(text).to.equal('IPTVnator');
-    });
-});

electron-builder.json

@@ -1,5 +1,5 @@
 {
-    "productName": "iptvnator",
+    "productName": "IPTVnator",
     "directories": {
         "output": "release/"
     },

main.ts

@@ -12,6 +12,7 @@ const args = process.argv.slice(1),
 
 const api = new Api();
 contextMenu();
+require('@electron/remote/main').initialize();
 
 function createWindow(): BrowserWindow {
     // Create the browser window.
@@ -23,7 +24,6 @@ function createWindow(): BrowserWindow {
             nodeIntegration: true,
             allowRunningInsecureContent: serve ? true : false,
             contextIsolation: false,
-            enableRemoteModule: true,
             webSecurity: false,
         },
         resizable: true,
@@ -36,6 +36,8 @@ function createWindow(): BrowserWindow {
         title: 'IPTVnator',
     });
 
+    require('@electron/remote/main').enable(win.webContents);
+
     if (serve) {
         win.webContents.openDevTools();
         win.loadURL('http://localhost:4200');
@@ -73,7 +75,7 @@ function createEpgWorkerWindow() {
         show: false,
         webPreferences: {
             nodeIntegration: true,
-            enableRemoteModule: true,
+            contextIsolation: false,
         },
     });
 
@@ -92,8 +94,6 @@ function createEpgWorkerWindow() {
 }
 
 try {
-    app.allowRendererProcessReuse = true;
-
     // 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.

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": "https://github.com/4gray/custom-electron-titlebar.git#testing",
         "electron-context-menu": "3.1.1",
         "epg-parser": "0.1.1",
         "hls.js": "1.0.11",
@@ -81,7 +81,7 @@
     },
     "devDependencies": {
         "@angular-builders/custom-webpack": "13.0.0",
-        "@angular-devkit/build-angular": "13.0.4",
+        "@angular-devkit/build-angular": "13.2.0",
         "@angular-eslint/builder": "13.0.1",
         "@angular-eslint/eslint-plugin": "13.0.1",
         "@angular-eslint/eslint-plugin-template": "13.0.1",
@@ -104,7 +104,7 @@
         "@ngx-translate/http-loader": "6.0.0",
         "@semantic-release/changelog": "6.0.1",
         "@semantic-release/git": "10.0.1",
-        "@semantic-release/npm": "8.0.3",
+        "@semantic-release/npm": "9.0.0",
         "@types/chai": "4.3.0",
         "@types/jest": "27.0.3",
         "@types/mocha": "9.0.0",
@@ -118,31 +118,28 @@
         "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",
         "jest": "27.4.5",
         "jest-preset-angular": "11.0.1",
-        "mocha": "9.1.3",
         "ng-mocks": "12.5.1",
         "node-polyfill-webpack-plugin": "1.1.4",
         "npm-run-all": "4.1.5",
         "prettier": "2.5.1",
-        "semantic-release": "18.0.1",
-        "spectron": "13.0.0",
+        "semantic-release": "19.0.2",
         "stylelint": "14.2.0",
         "stylelint-config-standard": "24.0.0",
         "stylelint-scss": "4.1.0",
         "ts-node": "8.10.2",
         "tslib": "2.3.0",
         "typescript": "4.4.4",
-        "wait-on": "6.0.0",
-        "webdriver-manager": "12.1.8"
+        "wait-on": "6.0.0"
     },
     "engines": {
-        "node": ">=10.13.0"
+        "node": ">=12.18.4"
     },
     "browserslist": [
         "chrome 91"

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;