allow drag dropping

- files to batch list #2400
- files to tracks panel

src/renderer/src/App.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useState, useCallback, useRef, useMemo, CSSProperties, ReactEventHandler, FocusEventHandler } from 'react';
+import { memo, useEffect, useState, useCallback, useRef, useMemo, CSSProperties, ReactEventHandler, FocusEventHandler, DragEventHandler } from 'react';
 import { FaAngleLeft, FaRegTimesCircle } from 'react-icons/fa';
 import { MdRotate90DegreesCcw } from 'react-icons/md';
 import { AnimatePresence } from 'framer-motion';
@@ -2392,15 +2392,29 @@ function App() {
     };
   }, [checkFileOpened, customOutDir, detectedFps, filePath, getFrameCount, getKeyboardAction, goToTimecodeDirect, importEdlFile, loadCutSegments, mainActions, promptDownloadMediaUrlWrapper, selectedSegments, toggleKeyboardShortcuts, tryExportEdlFile, userOpenFiles]);
 
+  const handleBatchFilesDrop = useCallback<DragEventHandler<HTMLDivElement>>((ev) => {
+    ev.preventDefault();
+    if (!ev.dataTransfer) return;
+    const filePaths = [...ev.dataTransfer.files].map((f) => electron.webUtils.getPathForFile(f));
+    focusWindow();
+    batchLoadPaths(filePaths, true);
+  }, [batchLoadPaths]);
+
+  const handleStreamSourceFileDrop = useCallback<DragEventHandler<HTMLDivElement>>((ev) => {
+    ev.preventDefault();
+    if (!ev.dataTransfer) return;
+    const filePaths = [...ev.dataTransfer.files].map((f) => electron.webUtils.getPathForFile(f));
+    if (filePaths.length !== 1) return;
+    focusWindow();
+    addStreamSourceFile(filePaths[0]!);
+  }, [addStreamSourceFile]);
+
   useEffect(() => {
     async function onDrop(ev: DragEvent) {
       ev.preventDefault();
       if (!ev.dataTransfer) return;
-      const { files } = ev.dataTransfer;
-      const filePaths = [...files].map((f) => electron.webUtils.getPathForFile(f));
-
+      const filePaths = [...ev.dataTransfer.files].map((f) => electron.webUtils.getPathForFile(f));
       focusWindow();
-
       userOpenFiles(filePaths);
     }
     const element = videoContainerRef.current;
@@ -2504,6 +2518,7 @@ function App() {
                       closeBatch={closeBatch}
                       onMergeFilesClick={concatBatch}
                       onBatchConvertToSupportedFormatClick={convertFormatBatch}
+                      onDrop={handleBatchFilesDrop}
                     />
                   )}
                 </AnimatePresence>
@@ -2748,6 +2763,7 @@ function App() {
                     toggleCopyStreamIds={toggleCopyStreamIds}
                     changeEnabledStreamsFilter={changeEnabledStreamsFilter}
                     toggleCopyAllStreamsForPath={toggleCopyAllStreamsForPath}
+                    onStreamSourceFileDrop={handleStreamSourceFileDrop}
                   />
                 )}
               </Sheet>

src/renderer/src/StreamsSelector.tsx

@@ -1,4 +1,4 @@
-import { memo, useState, useMemo, useCallback, Dispatch, SetStateAction, CSSProperties, ReactNode, ChangeEventHandler } from 'react';
+import { memo, useState, useMemo, useCallback, Dispatch, SetStateAction, CSSProperties, ReactNode, ChangeEventHandler, DragEventHandler } from 'react';
 
 import { FaImage, FaPaperclip, FaVideo, FaVideoSlash, FaFileImport, FaVolumeUp, FaVolumeMute, FaBan, FaFileExport } from 'react-icons/fa';
 import { GoFileBinary } from 'react-icons/go';
@@ -361,7 +361,7 @@ const fileStyle: CSSProperties = { margin: '1.5em 1em 1.5em 1em', padding: 5, ov
 
 
 function StreamsSelector({
-  mainFilePath, mainFileFormatData, mainFileStreams, mainFileChapters, isCopyingStreamId, toggleCopyStreamId, setCopyStreamIdsForPath, onExtractStreamPress, onExtractAllStreamsPress, allFilesMeta, externalFilesMeta, setExternalFilesMeta, showAddStreamSourceDialog, shortestFlag, setShortestFlag, nonCopiedExtraStreams, customTagsByFile, setCustomTagsByFile, paramsByStreamId, updateStreamParams, formatTimecode, loadSubtitleTrackToSegments, toggleCopyStreamIds, changeEnabledStreamsFilter, toggleCopyAllStreamsForPath,
+  mainFilePath, mainFileFormatData, mainFileStreams, mainFileChapters, isCopyingStreamId, toggleCopyStreamId, setCopyStreamIdsForPath, onExtractStreamPress, onExtractAllStreamsPress, allFilesMeta, externalFilesMeta, setExternalFilesMeta, showAddStreamSourceDialog, shortestFlag, setShortestFlag, nonCopiedExtraStreams, customTagsByFile, setCustomTagsByFile, paramsByStreamId, updateStreamParams, formatTimecode, loadSubtitleTrackToSegments, toggleCopyStreamIds, changeEnabledStreamsFilter, toggleCopyAllStreamsForPath, onStreamSourceFileDrop,
 }: {
   mainFilePath: string,
   mainFileFormatData: FFprobeFormat | undefined,
@@ -388,6 +388,7 @@ function StreamsSelector({
   toggleCopyStreamIds: (path: string, filter: (a: FFprobeStream) => boolean) => void,
   changeEnabledStreamsFilter: () => void,
   toggleCopyAllStreamsForPath: (path: string) => void,
+  onStreamSourceFileDrop: DragEventHandler<HTMLDivElement>,
 }) {
   const [editingFile, setEditingFile] = useState<string>();
   const [editingStream, setEditingStream] = useState<EditingStream>();
@@ -421,7 +422,7 @@ function StreamsSelector({
     <>
       <p style={{ margin: '.5em 2em .5em 1em' }}>{t('Click to select which tracks to keep when exporting:')}</p>
 
-      <div style={fileStyle}>
+      <div style={fileStyle} onDrop={onStreamSourceFileDrop}>
         {/* We only support editing main file metadata for now */}
         <FileHeading onInfoClick={onInfoClick} path={mainFilePath} formatData={mainFileFormatData} chapters={mainFileChapters} onEditClick={() => setEditingFile(mainFilePath)} toggleCopyAllStreams={() => toggleCopyAllStreamsForPath(mainFilePath)} onExtractAllStreamsPress={onExtractAllStreamsPress} changeEnabledStreamsFilter={changeEnabledStreamsFilter} />
         <table className={styles['table']}>

src/renderer/src/components/BatchFilesList.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react';
+import { DragEventHandler, memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 import { FaTimes, FaHatWizard } from 'react-icons/fa';
@@ -21,7 +21,7 @@ const iconStyle = {
   padding: '3px 5px',
 };
 
-function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBatchFiles, onBatchFileSelect, batchListRemoveFile, closeBatch, onMergeFilesClick, onBatchConvertToSupportedFormatClick }: {
+function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBatchFiles, onBatchFileSelect, batchListRemoveFile, closeBatch, onMergeFilesClick, onBatchConvertToSupportedFormatClick, onDrop }: {
   selectedBatchFiles: string[],
   filePath: string | undefined,
   width: number,
@@ -32,6 +32,7 @@ function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBa
   closeBatch: () => void,
   onMergeFilesClick: () => void,
   onBatchConvertToSupportedFormatClick: () => void,
+  onDrop: DragEventHandler<HTMLDivElement>,
 }) {
   const { t } = useTranslation();
 
@@ -63,6 +64,7 @@ function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBa
       animate={{ x: 0 }}
       exit={{ x: -width }}
       transition={mySpring}
+      onDrop={onDrop}
     >
       <div style={{ fontSize: 14, paddingBottom: 3, paddingTop: 0, paddingLeft: 10, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
         <div>{t('Batch file list')}{batchFiles.length > 0 && ` (${batchFiles.length})`}</div>