upgrade electron #714

package.json

@@ -49,10 +49,10 @@
     "cross-env": "^7.0.3",
     "csv-parse": "^4.15.3",
     "csv-stringify": "^5.6.2",
-    "electron": "8",
+    "electron": "^21.3.0",
     "electron-builder": "^23.3.3",
     "electron-builder-notarize": "^1.4.0",
-    "electron-devtools-installer": "^3.1.1",
+    "electron-devtools-installer": "^3.2.0",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.25.3",
@@ -94,10 +94,11 @@
     "wait-on": "^5.3.0"
   },
   "dependencies": {
+    "@electron/remote": "^2.0.8",
     "cue-parser": "^0.3.0",
-    "electron-is-dev": "1",
+    "electron-is-dev": "^2.0.0",
     "electron-store": "5.1.1",
-    "electron-unhandled": "^3.0.2",
+    "electron-unhandled": "^4.0.1",
     "execa": "^5.0.0",
     "file-type": "16",
     "file-url": "^3.0.0",
@@ -122,10 +123,10 @@
   },
   "browserslist": {
     "production": [
-      "electron 8.0"
+      "electron 17.0"
     ],
     "development": [
-      "electron 8.0"
+      "electron 17.0"
     ]
   },
   "build": {

public/electron.js

@@ -5,6 +5,7 @@ const i18n = require('i18next');
 const debounce = require('lodash/debounce');
 const yargsParser = require('yargs-parser');
 const JSON5 = require('json5');
+const remote = require('@electron/remote/main');
 
 const logger = require('./logger');
 const menu = require('./menu');
@@ -17,8 +18,9 @@ require('./i18n');
 const { app, ipcMain } = electron;
 const { BrowserWindow } = electron;
 
-// https://github.com/electron/electron/issues/18397
-app.allowRendererProcessReuse = true;
+remote.initialize();
+
+app.commandLine.appendSwitch('enable-features', 'PlatformHEVCDecoderSupport')
 
 unhandled({
   showDialog: true,
@@ -77,6 +79,9 @@ function createWindow() {
     },
   });
 
+  remote.enable(mainWindow.webContents);
+
+
   if (isDev) mainWindow.loadURL('http://localhost:3001');
   // Need to useloadFile for special characters https://github.com/mifi/lossless-cut/issues/40
   else mainWindow.loadFile('build/index.html');

src/App.jsx

@@ -76,16 +76,18 @@ import { fallbackLng } from './i18n';
 import { createSegment, getCleanCutSegments, getSegApparentStart, findSegmentsAtCursor, sortSegments, invertSegments, getSegmentTags, convertSegmentsToChapters, hasAnySegmentOverlap } from './segments';
 import { getOutSegError as getOutSegErrorRaw } from './util/outputNameTemplate';
 
+import isDev from './isDev';
 
-const isDev = window.require('electron-is-dev');
 const electron = window.require('electron'); // eslint-disable-line
 const { exists } = window.require('fs-extra');
 const filePathToUrl = window.require('file-url');
 const { parse: parsePath, join: pathJoin, basename, dirname } = window.require('path');
 
-const { dialog } = electron.remote;
+const remote = window.require('@electron/remote');
 
-const { focusWindow } = electron.remote.require('./electron');
+const { dialog } = remote;
+
+const { focusWindow } = remote.require('./electron');
 
 
 const ffmpegExtractWindow = 60;

src/BottomBar.jsx

@@ -21,7 +21,7 @@ import { getSegColor } from './util/colors';
 import { formatDuration, parseDuration } from './util/duration';
 import useUserSettings from './hooks/useUserSettings';
 
-const isDev = window.require('electron-is-dev');
+import isDev from './isDev';
 
 const start = new Date().getTime();
 const zoomOptions = Array(13).fill().map((unused, z) => 2 ** z);

src/dialogs.jsx

@@ -14,7 +14,7 @@ import CopyClipboardButton from './components/CopyClipboardButton';
 
 const electron = window.require('electron'); // eslint-disable-line
 
-const { dialog, app } = electron.remote;
+const { dialog, app } = window.require('@electron/remote');
 
 const ReactSwal = withReactContent(Swal);
 

src/edlStore.js

@@ -8,8 +8,7 @@ const fs = window.require('fs-extra');
 const cueParser = window.require('cue-parser');
 const { basename } = window.require('path');
 
-const electron = window.require('electron'); // eslint-disable-line
-const { dialog } = electron.remote;
+const { dialog } = window.require('@electron/remote');
 
 export async function loadCsvSeconds(path) {
   return parseCsv(await fs.readFile(path, 'utf-8'));

src/ffmpeg.js

@@ -7,11 +7,12 @@ import Timecode from 'smpte-timecode';
 import { pcmAudioCodecs, getMapStreamsArgs } from './util/streams';
 import { getSuffixedOutPath, isDurationValid, getExtensionForFormat, isWindows, isMac, platform, arch } from './util';
 
+import isDev from './isDev';
+
 const execa = window.require('execa');
 const { join } = window.require('path');
 const FileType = window.require('file-type');
 const readline = window.require('readline');
-const isDev = window.require('electron-is-dev');
 const { pathExists } = window.require('fs-extra');
 
 let customFfPath;

src/hooks/useNativeMenu.js

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 // TODO pull out?
-const { remote } = window.require('electron');
+const remote = window.require('@electron/remote');
 const { Menu } = remote;
 
 // https://github.com/transflow/use-electron-context-menu

src/hooks/useUserSettingsRoot.js

@@ -2,11 +2,12 @@ import { useEffect, useState, useRef, useCallback } from 'react';
 import i18n from 'i18next';
 
 import { errorToast } from '../util';
+import isDev from '../isDev';
 
 const electron = window.require('electron'); // eslint-disable-line
-const isDev = window.require('electron-is-dev');
+const remote = window.require('@electron/remote');
 
-const configStore = electron.remote.require('./configStore');
+const configStore = remote.require('./configStore');
 
 export default () => {
   const firstUpdateRef = useRef(true);

src/i18n.js

@@ -5,7 +5,9 @@ const Backend = window.require('i18next-fs-backend');
 
 const electron = window.require('electron'); // eslint-disable-line
 
-const { commonI18nOptions, fallbackLng, loadPath, addPath } = electron.remote.require('./i18n-common');
+const remote = window.require('@electron/remote');
+
+const { commonI18nOptions, fallbackLng, loadPath, addPath } = remote.require('./i18n-common');
 
 export { fallbackLng };
 

src/index.jsx

@@ -9,9 +9,9 @@ import './fonts.css';
 import './main.css';
 
 
-const electron = window.require('electron');
+const { app } = window.require('@electron/remote');
 
-console.log('Version', electron.remote.app.getVersion());
+console.log('Version', app.getVersion());
 
 
 ReactDOM.render(

src/isDev.js

@@ -0,0 +1 @@
+export default true; // todo

src/reporting.jsx

@@ -10,6 +10,8 @@ import { isStoreBuild, isMasBuild, isWindowsStoreBuild } from './util';
 const electron = window.require('electron'); // eslint-disable-line
 const os = window.require('os');
 
+const { app } = window.require('@electron/remote');
+
 
 const ReactSwal = withReactContent(Swal);
 
@@ -20,7 +22,7 @@ export function openSendReportDialog(err, state) {
     : <p><Trans>Please create an issue at <span style={{ fontWeight: 'bold', cursor: 'pointer' }} role="button" onClick={() => electron.shell.openExternal('https://github.com/mifi/lossless-cut/issues')}>https://github.com/mifi/lossless-cut/issues</span> where you describe what you were doing.</Trans></p>;
 
   const platform = os.platform();
-  const version = electron.remote.app.getVersion();
+  const version = app.getVersion();
 
   const text = `${err ? err.stack : 'No error occurred.'}\n\n${JSON.stringify({
     err: err && {

src/util/outputNameTemplate.js

@@ -1,9 +1,9 @@
 import i18n from 'i18next';
 
 import { isMac, isWindows, hasDuplicates } from '../util';
+import isDev from '../isDev';
 
 const { sep: pathSep, join: pathJoin, normalize: pathNormalize } = window.require('path');
-const isDev = window.require('electron-is-dev');
 
 // eslint-disable-next-line import/prefer-default-export
 export function getOutSegError({ fileNames, filePath, outputDir }) {