Switch from remote to @electron/remote

package.json

@@ -34,6 +34,7 @@
     "package:checksums": "bash scripts/checksum.sh"
   },
   "dependencies": {
+    "@electron/remote": "^2.0.1",
     "@reduxjs/toolkit": "^1.7.1",
     "bluebird": "^3.7.2",
     "chardet": "^1.4.0",
@@ -90,7 +91,7 @@
     "@types/semver": "^7.3.9",
     "@typescript-eslint/eslint-plugin": "^5.8.0",
     "@typescript-eslint/parser": "^5.8.0",
-    "electron": "^13.6.2",
+    "electron": "^16.0.5",
     "electron-builder": "^22.14.5",
     "esbuild": "^0.14.8",
     "esbuild-plugin-postcss2": "^0.1.1",

src/main/main.ts

@@ -1,5 +1,6 @@
 import path from 'path';
 import { app, BrowserWindow } from 'electron';
+import { initialize as remoteInitialize, enable as remoteEnable } from '@electron/remote/main';
 
 import AppModule from './modules/app';
 import ApplicationMenuModule from './modules/application-menu';
@@ -19,6 +20,9 @@ import { checkBounds } from './lib/utils';
 const appRoot = path.resolve(__dirname, '..'); // Careful, not future-proof
 const rendererDistPath = path.join(appRoot, 'renderer');
 
+// @deprecated Remove all usage of remote in the app
+remoteInitialize();
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the javascript object is GCed.
 let mainWindow: Electron.BrowserWindow | null = null;
@@ -52,7 +56,6 @@ app.on('ready', async () => {
     show: false,
     webPreferences: {
       nodeIntegration: true,
-      enableRemoteModule: true,
       contextIsolation: false,
       autoplayPolicy: 'no-user-gesture-required',
     },
@@ -71,6 +74,9 @@ app.on('ready', async () => {
     return { action: 'deny' };
   });
 
+  // @deprecated Remove all usage of remote in the app
+  remoteEnable(mainWindow.webContents);
+
   // ... and load the html page generated by ESBuild
   mainWindow.loadURL(`file://${rendererDistPath}/app.html#/${config.defaultView}`);
 

src/renderer/App.tsx

@@ -72,9 +72,13 @@ const Museeks: React.FC = (props) => {
       drop(item: { files: Array<File> }) {
         const files = item.files.map((file) => file.path);
 
-        LibraryActions.add(files).catch((err) => {
-          console.warn(err);
-        });
+        LibraryActions.add(files)
+          .then((_importedTracks) => {
+            // TODO: Import to playlist here
+          })
+          .catch((err) => {
+            console.warn(err);
+          });
       },
       collect: (monitor) => ({
         isOver: monitor.isOver(),

src/renderer/components/PlaylistsNav/PlaylistsNav.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 
 import electron from 'electron';
+import { Menu } from '@electron/remote';
 import React from 'react';
 import Icon from 'react-fontawesome';
 
@@ -10,8 +11,6 @@ import { PlaylistModel } from '../../../shared/types/museeks';
 
 import styles from './PlaylistsNav.module.css';
 
-const { Menu } = electron.remote;
-
 interface Props {
   playlists: PlaylistModel[];
 }

src/renderer/components/TracksList/TracksList.tsx

@@ -1,4 +1,5 @@
 import electron from 'electron';
+import { Menu } from '@electron/remote';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import KeyBinding from 'react-keybinding-component';
 import chunk from 'lodash-es/chunk';
@@ -22,8 +23,7 @@ import scrollbarStyles from '../CustomScrollbar/CustomScrollbar.module.css';
 import headerStyles from '../Header/Header.module.css';
 import styles from './TracksList.module.css';
 
-const { shell, remote } = electron;
-const { Menu } = remote;
+const { shell } = electron;
 
 const CHUNK_LENGTH = 20;
 const ROW_HEIGHT = 30; // FIXME

src/renderer/lib/app.ts

@@ -1,22 +1,19 @@
 import path from 'path';
-import electron from 'electron';
+import { app, getCurrentWindow } from '@electron/remote';
 import linvodb from 'linvodb3';
 import leveljs from 'level-js';
 import teeny from 'teeny-conf';
 import Promise from 'bluebird';
 import { TrackModel, PlaylistModel } from '../../shared/types/museeks';
 
-const { remote } = electron;
-const { app } = remote;
-
 /*
 |--------------------------------------------------------------------------
 | Some variables
 |--------------------------------------------------------------------------
 */
 
 export const browserWindows = {
-  main: remote.getCurrentWindow(),
+  main: getCurrentWindow(),
 };
 
 export const pathUserData = app.getPath('userData');
@@ -30,7 +27,7 @@ export const pathSrc = __dirname;
 
 // TODO: only working on macOS, issue to follow:
 // https://github.com/electron/electron/issues/27116
-remote.app.on('open-file', (event, path) => {
+app.on('open-file', (event, path) => {
   event.preventDefault();
   console.info(path); // absolute path to file
 });

src/renderer/store/actions/LibraryActions.ts

@@ -95,9 +95,9 @@ const scan = {
   total: 0,
 };
 
-const scanTracks = async (paths: string[]): Promise<void> => {
+const scanTracks = async (paths: string[]): Promise<TrackModel[]> => {
   return new Promise((resolve, reject) => {
-    if (paths.length === 0) resolve();
+    if (paths.length === 0) resolve([]);
 
     try {
       // Instantiate queue
@@ -114,7 +114,7 @@ const scanTracks = async (paths: string[]): Promise<void> => {
         scan.processed = 0;
         scan.total = 0;
 
-        resolve();
+        resolve(scannedFiles);
       });
 
       scanQueue.on('success', () => {
@@ -138,8 +138,6 @@ const scanTracks = async (paths: string[]): Promise<void> => {
               tracks,
             },
           });
-
-          // TODO progressive loading in the store, don't freeze the app, able to add files/folders when scanning
         }
       });
       // End queue instantiation
@@ -180,7 +178,7 @@ const scanTracks = async (paths: string[]): Promise<void> => {
 /**
  * Add tracks to Library
  */
-export const add = async (pathsToScan: string[]): Promise<void> => {
+export const add = async (pathsToScan: string[]): Promise<TrackModel[]> => {
   store.dispatch({
     type: types.LIBRARY_REFRESH_START,
   });
@@ -232,23 +230,26 @@ export const add = async (pathsToScan: string[]): Promise<void> => {
         type: types.LIBRARY_REFRESH_END,
       });
 
-      return;
+      return [];
     }
 
     // 5. Scan tracks then scan playlists
-    await scanTracks(supportedTrackFiles);
+    const importedTracks = await scanTracks(supportedTrackFiles);
     await scanPlaylists(supportedPlaylistsFiles);
 
     await refresh();
     await PlaylistsActions.refresh();
+
+    return importedTracks;
   } catch (err) {
     ToastsActions.add('danger', 'An error occured when scanning the library');
     console.warn(err);
+    return [];
+  } finally {
+    store.dispatch({
+      type: types.LIBRARY_REFRESH_END,
+    });
   }
-
-  store.dispatch({
-    type: types.LIBRARY_REFRESH_END,
-  });
 };
 
 /**

src/renderer/store/actions/PlaylistsActions.ts

@@ -1,5 +1,4 @@
 import path from 'path';
-import electron from 'electron';
 import * as m3u from 'm3ujs';
 
 import { Playlist, TrackModel, PlaylistModel } from '../../../shared/types/museeks';
@@ -10,7 +9,7 @@ import * as app from '../../lib/app';
 import * as ToastsActions from './ToastsActions';
 import * as PlayerActions from './PlayerActions';
 
-const { dialog } = electron.remote;
+const remote = require('@electron/remote');
 
 /**
  * Start playing playlist (on double click)
@@ -211,9 +210,9 @@ export const exportToM3u = async (playlistId: string): Promise<void> => {
   const playlist: PlaylistModel = await app.db.Playlist.findOneAsync({ _id: playlistId });
   const tracks: TrackModel[] = await app.db.Track.findAsync({ _id: { $in: playlist.tracks } });
 
-  const { filePath } = await dialog.showSaveDialog(app.browserWindows.main, {
+  const { filePath } = await remote.dialog.showSaveDialog(app.browserWindows.main, {
     title: 'Export playlist',
-    defaultPath: path.resolve(electron.remote.app.getPath('music'), playlist.name),
+    defaultPath: path.resolve(remote.app.getPath('music'), playlist.name),
     filters: [
       {
         extensions: ['m3u'],

yarn.lock

@@ -1229,7 +1229,7 @@
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
-"@electron/get@^1.0.1":
+"@electron/get@^1.13.0":
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/@electron/get/-/get-1.13.1.tgz#42a0aa62fd1189638bd966e23effaebb16108368"
   integrity sha512-U5vkXDZ9DwXtkPqlB45tfYnnYBN8PePp1z/XDCupnSpdrxT8/ThCv9WCwPLf9oqiSGZTkH6dx2jDUPuoXpjkcA==
@@ -1245,6 +1245,11 @@
     global-agent "^3.0.0"
     global-tunnel-ng "^2.7.1"
 
+"@electron/remote@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@electron/remote/-/remote-2.0.1.tgz#810cbc595a21f0f94641eb2d7e8264063a3f84de"
+  integrity sha512-bGX4/yB2bPZwXm1DsxgoABgH0Cz7oFtXJgkerB8VrStYdTyvhGAULzNLRn9rVmeAuC3VUDXaXpZIlZAZHpsLIA==
+
 "@electron/universal@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@electron/universal/-/universal-1.0.5.tgz#b812340e4ef21da2b3ee77b2b4d35c9b86defe37"
@@ -3567,12 +3572,12 @@ electron-to-chromium@^1.4.17:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.24.tgz#9cf8a92d5729c480ee47ff0aa5555f57467ae2fa"
   integrity sha512-erwx5r69B/WFfFuF2jcNN0817BfDBdC4765kQ6WltOMuwsimlQo3JTEq0Cle+wpHralwdeX3OfAtw/mHxPK0Wg==
 
-electron@^13.6.2:
-  version "13.6.3"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-13.6.3.tgz#c0217178807d3e0b2175c49dbe33ea8dac447e73"
-  integrity sha512-kevgR6/RuEhchJQbgCKhHle9HvJhi2dOJlicFZJqbbqa9BVpZARqqFDlwTSatYxmUPUJwu09FvyMwJG2DMQIng==
+electron@^16.0.5:
+  version "16.0.5"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-16.0.5.tgz#16394c196e42215a82da1f4f39a3f757caf33cb1"
+  integrity sha512-TgQXWmEGQ3uH2P2JDq5GyJDEu/fimRgqp1iNisARtGreU1k3630PqWlR+4SPnSEHN9NuSv92ng6NWxtefeFzxg==
   dependencies:
-    "@electron/get" "^1.0.1"
+    "@electron/get" "^1.13.0"
     "@types/node" "^14.6.2"
     extract-zip "^1.0.3"