From f8660f319bc4085ccdf05d9f6042679f1a577601 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 10 Mar 2018 18:59:59 -0800
Subject: [PATCH] Load directories

---
 js/actionCreators.js                    |  2 +-
 js/components/PlaylistWindow/AddMenu.js | 22 +++++++++++++++++-----
 js/fileUtils.js                         |  8 +++++++-
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/js/actionCreators.js b/js/actionCreators.js
index 7cd47702..204329b3 100644
--- a/js/actionCreators.js
+++ b/js/actionCreators.js
@@ -397,7 +397,7 @@ export function setSkinFromUrl(url) {
 // versions below, since they can defer to the user-defined behavior.
 function _openFileDialog(accept) {
   return async dispatch => {
-    const fileReferences = await promptForFileReferences(accept);
+    const fileReferences = await promptForFileReferences({ accept });
     dispatch(loadFilesFromReferences(fileReferences));
   };
 }
diff --git a/js/components/PlaylistWindow/AddMenu.js b/js/components/PlaylistWindow/AddMenu.js
index 4e72e14c..74d4ba3e 100644
--- a/js/components/PlaylistWindow/AddMenu.js
+++ b/js/components/PlaylistWindow/AddMenu.js
@@ -4,18 +4,22 @@ import { addTracksFromReferences } from "../../actionCreators";
 import { promptForFileReferences } from "../../fileUtils";
 import PlaylistMenu from "./PlaylistMenu";
 
+const el = document.createElement("input");
+el.type = "file";
+const DIR_SUPPORT =
+  typeof el.webkitdirectory !== "undefined" ||
+  typeof el.mozdirectory !== "undefined" ||
+  typeof el.directory !== "undefined";
+
 /* eslint-disable no-alert */
 
-const AddMenu = ({ nextIndex, addFilesAtIndex }) => (
+const AddMenu = ({ nextIndex, addFilesAtIndex, addDirAtIndex }) => (
   <PlaylistMenu id="playlist-add-menu">
     <div
       className="add-url"
       onClick={() => alert("Not supported in Winamp2-js")}
     />
-    <div
-      className="add-dir"
-      onClick={() => alert("Not supported in Winamp2-js")}
-    />
+    <div className="add-dir" onClick={() => addDirAtIndex(nextIndex)} />
     <div className="add-file" onClick={() => addFilesAtIndex(nextIndex)} />
   </PlaylistMenu>
 );
@@ -28,6 +32,14 @@ const mapDispatchToProps = dispatch => ({
   addFilesAtIndex: async nextIndex => {
     const fileReferences = await promptForFileReferences();
     dispatch(addTracksFromReferences(fileReferences, null, nextIndex));
+  },
+  addDirAtIndex: async nextIndex => {
+    if (!DIR_SUPPORT) {
+      alert("Not supported in your browser");
+      return;
+    }
+    const fileReferences = await promptForFileReferences({ directory: true });
+    dispatch(addTracksFromReferences(fileReferences, null, nextIndex));
   }
 });
 
diff --git a/js/fileUtils.js b/js/fileUtils.js
index d70894b6..f54ea1ac 100644
--- a/js/fileUtils.js
+++ b/js/fileUtils.js
@@ -80,7 +80,10 @@ export async function genArrayBufferFromUrl(url) {
   });
 }
 
-export async function promptForFileReferences(accept) {
+export async function promptForFileReferences({
+  accept = null,
+  directory = false
+}) {
   return new Promise(resolve => {
     // Does this represent a memory leak somehow?
     // Can this fail? Do we ever reject?
@@ -88,6 +91,9 @@ export async function promptForFileReferences(accept) {
     if (accept) fileInput.setAttribute("accept", accept);
     fileInput.type = "file";
     fileInput.multiple = true;
+    fileInput.webkitdirectory = directory;
+    fileInput.directory = directory;
+    fileInput.mozdirectory = directory;
     // Not entirely sure why this is needed, since the input
     // was just created, but somehow this helps prevent change
     // events from getting swallowed.