Handle drag and drop of Data dir

Also some general fixes to the data dir picker button.

components/DataDirPicker.tsx

@@ -1,24 +1,32 @@
-import React, { useContext } from "react";
+import React, { useContext, useRef, useState, useEffect } from "react";
 
 import { WorkerPoolContext } from "../lib/WorkerPool";
-import { useAppDispatch } from "../lib/hooks";
+import { useAppSelector } from "../lib/hooks";
-import { clearPlugins, setPending } from "../slices/plugins";
+import { isPlugin, parsePluginFiles } from "../lib/plugins";
 import styles from "../styles/DataDirPicker.module.css";
 
-export const excludedPlugins = [
-  "Skyrim.esm",
-  "Update.esm",
-  "Dawnguard.esm",
-  "HearthFires.esm",
-  "Dragonborn.esm",
-];
-
 type Props = {};
 
 const DataDirPicker: React.FC<Props> = () => {
   const workerPool = useContext(WorkerPoolContext);
-  const dispatch = useAppDispatch();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const plugins = useAppSelector((state) => state.plugins.plugins);
+  const pluginsPending = useAppSelector((state) => state.plugins.pending);
+  const [loading, setLoading] = useState<boolean>(false);
 
+  useEffect(() => {
+    if (pluginsPending === 0 && loading) {
+      setLoading(false);
+    } else if (pluginsPending > 0 && !loading) {
+      setLoading(true);
+    }
+  }, [pluginsPending, loading, setLoading]);
+
+  // It would be nice to open the directory with window.showDirectoryPicker() in supported browsers,
+  // but it does not allow selecting directories under C:\\Program Files and it does not throw any error
+  // that I can catch here when a user tries to select it, so it's basically useless. So instead, I have
+  // to use this non-standard webkitdirectory input attribute that loads all files in a directory instead
+  // of just selecting the directory itself. Yay.
   const onDataDirButtonClick = async (event: {
     target: { files: FileList | null };
   }) => {
@@ -26,47 +34,43 @@ const DataDirPicker: React.FC<Props> = () => {
       return alert("Workers not loaded yet");
     }
     const files = event.target.files ?? [];
-    dispatch(clearPlugins());
     const plugins = [];
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
-      if (
+      if (isPlugin(file)) {
-        file.name.endsWith(".esp") ||
-        file.name.endsWith(".esm") ||
-        file.name.endsWith(".esl")
-      ) {
         plugins.push(file);
       }
     }
-    dispatch(setPending(plugins.length));
+    parsePluginFiles(plugins, workerPool);
-
-    plugins.forEach(async (plugin, index) => {
-      const contents = new Uint8Array(await plugin.arrayBuffer());
-      try {
-        workerPool.pushTask({
-          skipParsing: excludedPlugins.includes(plugin.name),
-          filename: plugin.name,
-          lastModified: plugin.lastModified,
-          contents,
-        });
-      } catch (error) {
-        console.error(error);
-      }
-    });
   };
 
   return (
     <>
       <p className={styles["no-top-margin"]}>
         To see all of the cell edits and conflicts for your current mod load
-        order select your <code>Data</code> directory below to load the plugins.
+        order select or drag-and-drop your <code>Data</code> directory below to
+        load the plugins.
       </p>
       <input
         type="file"
         webkitdirectory=""
         onChange={onDataDirButtonClick}
-        disabled={!workerPool}
+        style={{ display: "none" }}
+        ref={inputRef}
       />
+      {/* input webkitdirectory is buggy, so keep it hidden and control it through a normal button */}
+      <button
+        onClick={() => {
+          if (inputRef.current) {
+            inputRef.current.value = ""; // clear the value so reloading same directory works
+            inputRef.current.click();
+          }
+        }}
+        disabled={!workerPool || loading}
+      >
+        {loading ? "Loading" : plugins.length > 0 ? "Reload" : "Open"} Skyrim
+        Data directory
+      </button>
     </>
   );
 };

components/PluginsList.tsx

@@ -2,9 +2,9 @@ import Link from "next/link";
 import React from "react";
 
 import { useAppSelector, useAppDispatch } from "../lib/hooks";
+import { excludedPlugins } from "../lib/plugins";
 import { togglePlugin } from "../slices/plugins";
 import styles from "../styles/PluginList.module.css";
-import { excludedPlugins } from "./DataDirPicker";
 
 type Props = {};
 

lib/plugins.ts

@@ -0,0 +1,41 @@
+import { WorkerPool } from "./WorkerPool";
+import store from "./store";
+import { clearPlugins, setPending } from "../slices/plugins";
+
+export const excludedPlugins = [
+  "Skyrim.esm",
+  "Update.esm",
+  "Dawnguard.esm",
+  "HearthFires.esm",
+  "Dragonborn.esm",
+];
+
+export const isPluginPath = (path: string) => {
+  if (
+    path.endsWith(".esp") ||
+    path.endsWith(".esm") ||
+    path.endsWith(".esl")
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export const isPlugin = (file: File) => {
+  return isPluginPath(file.name);
+}
+
+export const parsePluginFiles = (pluginFiles: File[], workerPool: WorkerPool) => {
+  store.dispatch(clearPlugins());
+  store.dispatch(setPending(pluginFiles.length));
+
+  pluginFiles.forEach(async (plugin) => {
+    const contents = new Uint8Array(await plugin.arrayBuffer());
+    workerPool.pushTask({
+      skipParsing: excludedPlugins.includes(plugin.name),
+      filename: plugin.name,
+      lastModified: plugin.lastModified,
+      contents,
+    });
+  });
+}

pages/index.tsx

@@ -5,6 +5,7 @@ import "mapbox-gl/dist/mapbox-gl.css";
 
 import Map from "../components/Map";
 import { useAppDispatch } from "../lib/hooks";
+import { isPlugin, isPluginPath, parsePluginFiles } from "../lib/plugins";
 import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
 import { WorkerPool, WorkerPoolContext } from "../lib/WorkerPool";
 
@@ -94,9 +95,109 @@ const Home: NextPage = () => {
             evt.preventDefault();
 
             if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
-              const file = evt.dataTransfer.items[0].getAsFile();
+              const item = evt.dataTransfer.items[0];
-              if (file) {
+              if (item.kind === "file") {
-                dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+                // Gotta love all these competing web file system standards...
+                if (
+                  (
+                    item as DataTransferItem & {
+                      getAsFileSystemHandle?: () => Promise<FileSystemHandle>;
+                    }
+                  ).getAsFileSystemHandle
+                ) {
+                  const entry = await (
+                    item as DataTransferItem & {
+                      getAsFileSystemHandle: () => Promise<FileSystemHandle>;
+                    }
+                  ).getAsFileSystemHandle();
+                  if (entry.kind === "file") {
+                    const file = await (
+                      entry as FileSystemFileHandle
+                    ).getFile();
+                    dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+                    return;
+                  } else if (entry.kind === "directory") {
+                    const plugins: { getFile: () => Promise<File> }[] = [];
+                    const values = (
+                      entry as FileSystemDirectoryHandle & { values: any }
+                    ).values();
+                    // I'm scared of yield and generators so I'm just going to do a lame while loop
+                    while (true) {
+                      const next = await values.next();
+                      if (next.done) {
+                        break;
+                      }
+                      if (
+                        next.value.kind == "file" &&
+                        isPluginPath(next.value.name)
+                      ) {
+                        plugins.push(next.value);
+                      }
+                    }
+                    const pluginFiles = await Promise.all(
+                      plugins.map(async (plugin) => plugin.getFile())
+                    );
+                    if (workerPool) {
+                      parsePluginFiles(pluginFiles, workerPool);
+                    } else {
+                      alert("Workers not loaded yet");
+                    }
+                  }
+                } else if (
+                  (
+                    item as DataTransferItem & {
+                      webkitGetAsEntry?: FileSystemEntry | null;
+                    }
+                  ).webkitGetAsEntry
+                ) {
+                  const entry = item.webkitGetAsEntry();
+                  if (entry?.isFile) {
+                    (entry as FileSystemFileEntry).file(async (file) => {
+                      dispatch(
+                        setPluginsTxtAndApplyLoadOrder(await file.text())
+                      );
+                    });
+                  } else if (entry?.isDirectory) {
+                    const reader = (
+                      entry as FileSystemDirectoryEntry
+                    ).createReader();
+                    const plugins = await new Promise<FileSystemFileEntry[]>(
+                      (resolve, reject) => {
+                        const plugins: FileSystemFileEntry[] = [];
+                        reader.readEntries((entries) => {
+                          entries.forEach((entry) => {
+                            if (entry?.isFile && isPluginPath(entry.name)) {
+                              plugins.push(entry as FileSystemFileEntry);
+                            }
+                          });
+                          resolve(plugins);
+                        }, reject);
+                      }
+                    );
+                    const pluginFiles = await Promise.all(
+                      plugins.map(
+                        (plugin) =>
+                          new Promise<File>((resolve, reject) =>
+                            plugin.file((file) => resolve(file), reject)
+                          )
+                      )
+                    );
+                    if (workerPool) {
+                      parsePluginFiles(pluginFiles, workerPool);
+                    } else {
+                      alert("Workers not loaded yet");
+                    }
+                  }
+                } else {
+                  const file = item.getAsFile();
+                  if (file) {
+                    dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+                  }
+                }
+              } else if (item.kind === "string") {
+                item.getAsString((str) => {
+                  dispatch(setPluginsTxtAndApplyLoadOrder(str));
+                });
               }
             }
           }}