try to implement window popout #726

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,

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 (
+    <Window onClose={onHide}>
+      <KeyboardShortcuts keyBindings={keyBindings} setKeyBindings={setKeyBindings} currentCutSeg={currentCutSeg} resetKeyBindings={resetKeyBindings} />
+    </Window>
+  );
+
+  /*
   return (
     <Dialog
       title={t('Keyboard & mouse shortcuts')}
@@ -576,7 +586,7 @@ const KeyboardShortcutsDialog = memo(({
     >
       {isShown ? <KeyboardShortcuts keyBindings={keyBindings} setKeyBindings={setKeyBindings} currentCutSeg={currentCutSeg} resetKeyBindings={resetKeyBindings} /> : <div />}
     </Dialog>
-  );
+  ); */
 });
 
 export default KeyboardShortcutsDialog;

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;