open file when clicking on dropzone

src/App.jsx

@@ -2206,7 +2206,7 @@ const App = memo(() => {
 
               {/* Middle part: */}
               <div style={{ position: 'relative', flexGrow: 1, overflow: 'hidden' }}>
-                {!isFileOpened && <NoFileLoaded mifiLink={mifiLink} currentCutSeg={currentCutSeg} />}
+                {!isFileOpened && <NoFileLoaded mifiLink={mifiLink} currentCutSeg={currentCutSeg} onClick={openFilesDialog} />}
 
                 <div className="no-user-select" style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, visibility: !isFileOpened || !hasVideo || bigWaveformEnabled ? 'hidden' : undefined }} onWheel={onTimelineWheel}>
                   {/* eslint-disable-next-line jsx-a11y/media-has-caption */}

src/NoFileLoaded.jsx

@@ -8,12 +8,17 @@ import useUserSettings from './hooks/useUserSettings';
 
 const electron = window.require('electron');
 
-const NoFileLoaded = memo(({ mifiLink, currentCutSeg }) => {
+const NoFileLoaded = memo(({ mifiLink, currentCutSeg, onClick }) => {
   const { t } = useTranslation();
   const { simpleMode } = useUserSettings();
 
   return (
-    <div className="no-user-select" style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, border: '1.5vmin dashed var(--gray3)', color: 'var(--gray12)', margin: '5vmin', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', whiteSpace: 'nowrap' }}>
+    <div
+      className="no-user-select"
+      style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, border: '1.5vmin dashed var(--gray3)', color: 'var(--gray12)', margin: '5vmin', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', whiteSpace: 'nowrap' }}
+      role="button"
+      onClick={onClick}
+    >
       <div style={{ fontSize: '6vmin', textTransform: 'uppercase', color: 'var(--gray11)' }}>{t('DROP FILE(S)')}</div>
 
       <div style={{ fontSize: '2.5vmin', color: 'var(--gray11)', marginBottom: '.3em' }}>
@@ -24,7 +29,7 @@ const NoFileLoaded = memo(({ mifiLink, currentCutSeg }) => {
         <Trans><SetCutpointButton currentCutSeg={currentCutSeg} side="start" style={{ verticalAlign: 'middle' }} /> <SetCutpointButton currentCutSeg={currentCutSeg} side="end" style={{ verticalAlign: 'middle' }} /> or <kbd>I</kbd> <kbd>O</kbd> to set cutpoints</Trans>
       </div>
 
-      <div style={{ fontSize: '2.5vmin', color: 'var(--gray11)' }} role="button">
+      <div style={{ fontSize: '2.5vmin', color: 'var(--gray11)' }} role="button" onClick={(e) => e.stopPropagation()}>
         {simpleMode ? (
           <Trans><SimpleModeButton style={{ verticalAlign: 'middle' }} size={16} /> to show advanced view</Trans>
         ) : (
@@ -37,7 +42,7 @@ const NoFileLoaded = memo(({ mifiLink, currentCutSeg }) => {
         <div style={{ position: 'relative', margin: '3vmin', width: '60vmin', height: '20vmin' }}>
           <iframe src={mifiLink.loadUrl} title="iframe" style={{ background: 'rgba(0,0,0,0)', border: 'none', pointerEvents: 'none', width: '100%', height: '100%', position: 'absolute' }} />
           {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
-          <div style={{ width: '100%', height: '100%', position: 'absolute', cursor: 'pointer' }} role="button" onClick={() => electron.shell.openExternal(mifiLink.targetUrl)} />
+          <div style={{ width: '100%', height: '100%', position: 'absolute', cursor: 'pointer' }} role="button" onClick={(e) => { e.stopPropagation(); electron.shell.openExternal(mifiLink.targetUrl); }} />
         </div>
       )}
     </div>