chore: upgrade electron 17 (#96)

* Revert "Bump node-sass from 4.14.1 to 7.0.0 (#90)"

This reverts commit 768a435.

* chore: upgrade electron 17

main.ts

@@ -6,6 +6,8 @@ import {
   MenuItemConstructorOptions,
   Tray,
   ipcMain,
+  session,
+  dialog,
 } from 'electron';
 
 import { join } from 'path';
@@ -47,7 +49,7 @@ function createWindow() {
       `--isDev=${isDev}`,
     ],
     nodeIntegration: true,
-    enableRemoteModule: true,
+    contextIsolation: false,
   };
 
   win = new BrowserWindow({
@@ -72,7 +74,7 @@ function createWindow() {
     );
     const ex = existsSync(reactDevtoolsPath);
     if (ex) {
-      BrowserWindow.addDevToolsExtension(reactDevtoolsPath);
+      session.defaultSession.loadExtension(reactDevtoolsPath);
     } else {
       console.error('react devtools extension path not found');
     }
@@ -238,3 +240,20 @@ function createMenu() {
 
   Menu.setApplicationMenu(Menu.buildFromTemplate(template));
 }
+
+ipcMain.handle('version', () => app.getVersion());
+ipcMain.handle('open-directory-explorer', () => new Promise(async (resolve, reject) => {
+  try {
+    const {filePaths} = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
+      properties: [
+        "openDirectory",
+        "createDirectory",
+      ],
+      title: 'Choose a directory'
+    });
+
+    resolve({filePaths});
+  } catch (err) {
+    reject(err);
+  }
+}));

package.json

@@ -40,14 +40,14 @@
     "cheerio": "^1.0.0-rc.5",
     "classnames": "^2.2.6",
     "command-exists": "^1.2.8",
+    "electron-fetch": "^1.7.4",
     "electron-is-dev": "^1.0.1",
     "fix-path": "^2.1.0",
     "fluent-ffmpeg": "2.1.2",
     "js-video-url-parser": "^0.2.8",
     "mkdirp": "^0.5.1",
     "mobx": "^5.8.0",
     "mobx-react": "^5.4.3",
-    "node-fetch": "^3.1.1",
     "progress-stream": "^2.0.0",
     "react": "^16.10.2",
     "react-dom": "^16.5.2",
@@ -72,7 +72,7 @@
     "autoprefixer": "^9.4.5",
     "coveralls": "^3.1.1",
     "css-loader": "^1.0.1",
-    "electron": "^11.5.0",
+    "electron": "^17.0.1",
     "electron-builder": "^22.14.5",
     "electron-icon-maker": "^0.0.5",
     "enzyme": "^3.11.0",
@@ -81,16 +81,16 @@
     "file-loader": "^2.0.0",
     "flush-promises": "^1.0.2",
     "jest": "^27.4.3",
-    "node-sass": "^7.0",
+    "node-sass": "^4.12",
     "npm-run-all": "^4.1.5",
     "object-assign": "^4.1.1",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "sinon": "^7.2.3",
     "style-loader": "^0.23.1",
-    "ts-loader": "^8.0.10",
+    "ts-loader": "^9.2.6",
     "typescript": "^4.0.5",
-    "webpack": "^5.4.0",
+    "webpack": "^5.69.1",
     "webpack-cli": "^4.2.0"
   },
   "build": {

src/components/about-modal/about-modal.tsx

@@ -3,13 +3,22 @@ import Button from 'semantic-ui-react/dist/commonjs/elements/Button';
 import Modal from 'semantic-ui-react/dist/commonjs/modules/Modal';
 import Header from 'semantic-ui-react/dist/commonjs/elements/Header';
 import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon';
-import { remote } from '../../services/electron-adapter';
+import { ipcRenderer } from 'electron';
 import { IModalProps } from '../../types';
 import { ExternalLink } from '../external-link';
 import { TWITTER_LINK, GITHUB_LINK, CONTACT_EMAIL } from '../../constants';
 import './about-modal.scss';
 
 export class AboutModal extends React.Component<IModalProps> {
+  state = {
+    version: '',
+  }
+
+  async componentDidMount() {
+    const currentVersion = await ipcRenderer.invoke('version');
+    this.setState({ version: currentVersion });
+  }
+
   render() {
     const { open, onClose } = this.props;
 
@@ -18,7 +27,7 @@ export class AboutModal extends React.Component<IModalProps> {
         <Header icon='info circle' content='About' />
         <Modal.Content>
           <p>
-            <b>Version:</b> {remote.app.getVersion()}
+            <b>Version:</b> {this.state.version}
           </p>
           <p>
             <b>Contact me:</b> <ExternalLink href={CONTACT_EMAIL}>[email protected]</ExternalLink>

src/components/electron-events-listener/electron-events-listener.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { ipcRenderer } from '../../services/electron-adapter';
+import { ipcRenderer } from 'electron';
 import { openAbout, openPreferences } from '../../services/modalsAndAlerts';
 import { EWindowEvents } from '../../types';
 

src/components/external-link.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { shell } from '../services/electron-adapter';
+import { shell } from 'electron';
 
 interface ExternalLinkProps {
   href: string;

src/components/form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { isDev } from '../services/additional-arguments';
-import { ipcRenderer, clipboard } from '../services/electron-adapter';
+import { ipcRenderer, clipboard } from 'electron';
 import { EWindowEvents } from '../types';
 import { isYoutubeURL } from '../services/api';
 import { settingsManager } from '../services/settings';

src/components/menu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Dropdown, Icon, Label } from 'semantic-ui-react';
 import { openPreferences, openAbout } from '../services/modalsAndAlerts';
-import { shell } from '../services/electron-adapter';
+import { shell } from 'electron';
 import { GITHUB_LINK, CONTACT_EMAIL, GITHUB_LINK_ISSUES, TWITTER_LINK, TWITTER_LINK_PROFILE } from '../constants';
 import store from '../mobx/store';
 

src/components/preferences-modal/preferences-modal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IModalProps } from '../../types';
 import { Icon, Modal, Header, Button, Form, Dropdown, DropdownProps, Checkbox, CheckboxProps, Popup } from 'semantic-ui-react';
-import { remote } from '../../services/electron-adapter';
+import { ipcRenderer } from 'electron'
 import { settingsManager, IConfig } from '../../services/settings';
 import { DownloadQuality, DownloadFormat } from '../../services/youtube-mp3-downloader'
 import { SyntheticEvent } from 'react';
@@ -32,13 +32,7 @@ export class PreferencesModal extends React.Component<IModalProps, IPreferencesM
   }
 
   openDirectoryExplorer = async () => {
-    const {filePaths} = await remote.dialog.showOpenDialog(remote.getCurrentWindow(), {
-      properties: [
-        "openDirectory",
-        "createDirectory",
-      ],
-      title: 'Choose a directory'
-    });
+    const {filePaths} = await ipcRenderer.invoke('open-directory-explorer');
 
     if (filePaths.length) {
       const downloadsFolder = filePaths[0]

src/components/video.tsx

@@ -3,7 +3,7 @@ import { observe } from 'mobx';
 import { observer } from 'mobx-react';
 import { IVideoEntity, EVideoStatus, IButtonProgressOptions } from '../types';
 import { ButtonProgress } from './button-progress';
-import { shell } from '../services/electron-adapter';
+import { shell } from 'electron';
 import { formatOptions } from './preferences-modal/lists';
 import { settingsManager } from '../services/settings';
 import { DownloadFormat } from '../services/youtube-mp3-downloader';

src/services/check-for-update.ts

@@ -1,10 +1,11 @@
-import { remote } from './electron-adapter';
+import fetch from 'electron-fetch';
+import { ipcRenderer } from 'electron';
 import { showAppHasUpdate } from './modalsAndAlerts';
 import store from '../mobx/store';
 
 
 export async function checkForUpdateAndNotify() {
-  const currentVersion = remote.app.getVersion();
+  const currentVersion = await ipcRenderer.invoke('version');
   const latestVersion = await fetch('https://api.github.com/repos/moshfeu/y2mp3/releases/latest')
                                 .then(data => data.json())
                                 .then(data => data.name.replace('v', ''));

src/services/playlist-scraper.ts

@@ -1,4 +1,3 @@
-import fetch from 'node-fetch';
 import * as cheerio from 'cheerio';
 
 export const scrap = async (playlistURL: string) => {

src/services/tray-messanger.ts

@@ -1,4 +1,4 @@
-import { ipcRenderer } from './electron-adapter';
+import { ipcRenderer } from 'electron';
 import store from '../mobx/store';
 
 const CHANNEL_NAME = 'tray';

src/services/youtube-mp3-downloader/index.ts

@@ -185,7 +185,7 @@ export class YoutubeMp3Downloader {
                       state: 'done',
                       payload: resultObj,
                     });
-                    resolve();
+                    resolve(task);
                     // once the new file saved, delete the original (w/o the album art) and rename the new to the original name
                     unlinkSync(filePath);
                     rename(tempFileName, filePath, () => ({}));
@@ -201,7 +201,7 @@ export class YoutubeMp3Downloader {
                   .saveToFile(tempFileName);
               } else {
                 task.data.onStateChanged({ state: 'done', payload: resultObj });
-                resolve();
+                resolve(task);
               }
             });
 

src/services/youtube-mp3-downloader/queue.spec.ts

@@ -1,5 +1,4 @@
 import { Queue, ITask } from './queue';
-import * as flush from 'flush-promises';
 
 describe('Queue', () => {
   let queue: Queue<any>;

src/services/youtube-mp3-downloader/queue.ts

@@ -1,8 +1,10 @@
+import { IDownloadTask } from '.';
+
 export interface ITask<T> {
   id: string;
   data: T;
   aborted?: boolean;
-  main: (task: this) => Promise<void>;
+  main: (task: this) => Promise<ITask<IDownloadTask>>;
 };
 
 export class Queue<T> {

webpack.config.js

@@ -62,7 +62,7 @@ module.exports = (env, argv) => ({
   },
   mode: 'development',
   devtool: 'inline-source-map',
-  target: 'node',
+  target: 'electron-renderer',
   plugins: [
     new DefinePlugin({
       'process.env.FLUENTFFMPEG_COV': false,