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 ( {isShown ? :
}
- ); + ); */ }); 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;