diff --git a/public/electron.js b/public/electron.js
index a0504998..7bda57fe 100644
--- a/public/electron.js
+++ b/public/electron.js
@@ -69,6 +69,9 @@ function createWindow() {
...getSizeOptions(),
darkTheme: true,
webPreferences: {
+ // todo remove after upgrading electron https://github.com/electron/electron/issues/28511
+ nativeWindowOpen: true,
+
enableRemoteModule: true,
contextIsolation: false,
nodeIntegration: true,
diff --git a/src/components/KeyboardShortcuts.jsx b/src/components/KeyboardShortcuts.jsx
index c7c065fa..812a4916 100644
--- a/src/components/KeyboardShortcuts.jsx
+++ b/src/components/KeyboardShortcuts.jsx
@@ -9,6 +9,7 @@ import uniq from 'lodash/uniq';
import SetCutpointButton from './SetCutpointButton';
import SegmentCutpointButton from './SegmentCutpointButton';
+import Window from './Window';
const renderKeys = (keys) => keys.map((key, i) => (
@@ -564,6 +565,15 @@ const KeyboardShortcutsDialog = memo(({
}) => {
const { t } = useTranslation();
+ if (!isShown) return null;
+
+ return (
+
+
+
+ );
+
+ /*
return (
- );
+ ); */
});
export default KeyboardShortcutsDialog;
diff --git a/src/components/Window.jsx b/src/components/Window.jsx
new file mode 100644
index 00000000..105add11
--- /dev/null
+++ b/src/components/Window.jsx
@@ -0,0 +1,30 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+// todo https://github.com/JakeGinnivan/react-popout/blob/master/lib/react-popout.jsx
+
+// https://github.com/mifi/lossless-cut/issues/726
+const Window = memo(({ children, features, onClose }) => {
+ const windowRef = useRef();
+ const [windowOpen, setWindowOpen] = useState(false);
+
+ useEffect(() => {
+ windowRef.current = window.open(undefined, undefined, features);
+ setWindowOpen(true);
+
+ return () => {
+ windowRef.current.close();
+ };
+ }, [features]);
+
+ useEffect(() => {
+ windowRef.current.addEventListener('unload', onClose);
+ return () => windowRef.current.removeEventListener('unload', onClose);
+ }, [onClose]);
+
+ if (!windowOpen) return null;
+
+ return ReactDOM.createPortal(children, windowRef.current.document.body);
+});
+
+export default Window;