From a71d3e66e1dbb7ab4cfd38fceb2a5377005ea715 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 17 Nov 2017 21:17:41 -0800
Subject: [PATCH] Add missing playlist menus

---
 css/playlist-window.css                       | 25 +++++++++++++++++
 js/components/PlaylistWindow/AddMenu.js       | 20 ++++++++++++++
 js/components/PlaylistWindow/ListMenu.js      | 25 +++++++++++++++++
 js/components/PlaylistWindow/MiscMenu.js      | 20 +++++++++++---
 js/components/PlaylistWindow/RemoveMenu.js    |  7 ++++-
 .../__snapshots__/index.test.js.snap          | 27 +++++++++++++++++++
 js/components/PlaylistWindow/index.js         |  6 +++++
 js/skinSelectors.js                           | 24 +++++++++++++++++
 8 files changed, 149 insertions(+), 5 deletions(-)
 create mode 100644 js/components/PlaylistWindow/AddMenu.js
 create mode 100644 js/components/PlaylistWindow/ListMenu.js

diff --git a/css/playlist-window.css b/css/playlist-window.css
index 1c89b875..1e459193 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -163,6 +163,15 @@
   width: 3px;
   height: 54px;
 }
+
+#winamp2-js #playlist-add-menu {
+  position: absolute;
+  bottom: 12px;
+  left: 13px;
+  width: 22px;
+  height: 18px;
+}
+
 #winamp2-js #playlist-remove-menu.playlist-menu .bar {
   height: 72px;
 }
@@ -183,6 +192,22 @@
   height: 18px;
 }
 
+#winamp2-js #playlist-misc-menu {
+  position: absolute;
+  bottom: 12px;
+  left: 102px;
+  width: 22px;
+  height: 18px;
+}
+
+#winamp2-js #playlist-list-menu {
+  position: absolute;
+  bottom: 12px;
+  right: 22px;
+  width: 22px;
+  height: 18px;
+}
+
 #winamp2-js .playlist-bottom-right {
   width: 150px;
   height: 100%;
diff --git a/js/components/PlaylistWindow/AddMenu.js b/js/components/PlaylistWindow/AddMenu.js
new file mode 100644
index 00000000..01232f33
--- /dev/null
+++ b/js/components/PlaylistWindow/AddMenu.js
@@ -0,0 +1,20 @@
+import React from "react";
+import PlaylistMenu from "./PlaylistMenu";
+
+/* eslint-disable no-alert */
+
+const AddMenu = ({ openFileDialog }) => (
+  <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-file" onClick={openFileDialog} />
+  </PlaylistMenu>
+);
+
+export default AddMenu;
diff --git a/js/components/PlaylistWindow/ListMenu.js b/js/components/PlaylistWindow/ListMenu.js
new file mode 100644
index 00000000..3c8b644c
--- /dev/null
+++ b/js/components/PlaylistWindow/ListMenu.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { connect } from "react-redux";
+import PlaylistMenu from "./PlaylistMenu";
+
+/* eslint-disable no-alert */
+
+const ListMenu = () => (
+  <PlaylistMenu id="playlist-list-menu">
+    <div
+      className="new-list"
+      onClick={() => alert("Not supported in Winamp2-js")}
+    />
+    <div
+      className="save-list"
+      onClick={() => alert("Not supported in Winamp2-js")}
+    />
+    <div
+      className="load-list"
+      onClick={() => alert("Not supported in Winamp2-js")}
+    />
+  </PlaylistMenu>
+);
+
+const mapDispatchToProps = {};
+export default connect(null, mapDispatchToProps)(ListMenu);
diff --git a/js/components/PlaylistWindow/MiscMenu.js b/js/components/PlaylistWindow/MiscMenu.js
index fe76ab46..b1a0621d 100644
--- a/js/components/PlaylistWindow/MiscMenu.js
+++ b/js/components/PlaylistWindow/MiscMenu.js
@@ -3,11 +3,23 @@ import { connect } from "react-redux";
 import { FILE_INFO } from "../../actionTypes";
 import PlaylistMenu from "./PlaylistMenu";
 
-const MiscMenu = props => (
+/* eslint-disable no-alert */
+
+const MiscMenu = () => (
   <PlaylistMenu id="playlist-misc-menu">
-    <div className="sort-list" />
-    <div className="file-info" onClick={props.fileInfo} />
-    <div className="misc-options" />
+    <div
+      className="sort-list"
+      onClick={() => alert("Not supported in Winamp2-js")}
+    />
+    {/* onClick={props.fileInfo} */}
+    <div
+      className="file-info"
+      onClick={() => alert("Not supported in Winamp2-js")}
+    />
+    <div
+      className="misc-options"
+      onClick={() => alert("Not supported in Winamp2-js")}
+    />
   </PlaylistMenu>
 );
 
diff --git a/js/components/PlaylistWindow/RemoveMenu.js b/js/components/PlaylistWindow/RemoveMenu.js
index fcdb72c7..995a68d3 100644
--- a/js/components/PlaylistWindow/RemoveMenu.js
+++ b/js/components/PlaylistWindow/RemoveMenu.js
@@ -4,9 +4,14 @@ import { REMOVE_ALL_TRACKS } from "../../actionTypes";
 import { cropPlaylist, removeSelectedTracks } from "../../actionCreators";
 import PlaylistMenu from "./PlaylistMenu";
 
+/* eslint-disable no-alert */
+
 const RemoveMenu = props => (
   <PlaylistMenu id="playlist-remove-menu">
-    <div className="remove-misc" />
+    <div
+      className="remove-misc"
+      onClick={() => alert("Not supported in Winamp2-js")}
+    />
     <div className="remove-all" onClick={props.removeAll} />
     <div className="crop" onClick={props.crop} />
     <div className="remove-selected" onClick={props.removeSelected} />
diff --git a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
index 8e930fe1..a179c547 100644
--- a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
+++ b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
@@ -222,6 +222,15 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
     <div
       className="playlist-bottom-left draggable"
     >
+      <div
+        className="playlist-menu"
+        id="playlist-add-menu"
+        onClick={[Function]}
+      >
+        <div
+          className="bar"
+        />
+      </div>
       <div
         className="playlist-menu"
         id="playlist-remove-menu"
@@ -240,6 +249,15 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           className="bar"
         />
       </div>
+      <div
+        className="playlist-menu"
+        id="playlist-misc-menu"
+        onClick={[Function]}
+      >
+        <div
+          className="bar"
+        />
+      </div>
     </div>
     <div
       className="playlist-bottom-center draggable"
@@ -334,6 +352,15 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           onClick={[Function]}
         />
       </div>
+      <div
+        className="playlist-menu"
+        id="playlist-list-menu"
+        onClick={[Function]}
+      >
+        <div
+          className="bar"
+        />
+      </div>
       <div
         id="playlist-resize-target"
         onMouseDown={[Function]}
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 745822f4..79795c92 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -6,8 +6,11 @@ import Slider from "rc-slider/lib/Slider";
 import MiniTime from "../MiniTime";
 import PlaylistShade from "./PlaylistShade";
 import Track from "./Track";
+import AddMenu from "./AddMenu";
 import RemoveMenu from "./RemoveMenu";
 import SelectionMenu from "./SelectionMenu";
+import MiscMenu from "./MiscMenu";
+import ListMenu from "./ListMenu";
 import ResizeTarget from "./ResizeTarget";
 import RunningTimeDisplay from "./RunningTimeDisplay";
 import { percentToIndex } from "../../utils";
@@ -123,8 +126,10 @@ const PlaylistWindow = props => {
       </div>
       <div className="playlist-bottom draggable">
         <div className="playlist-bottom-left draggable">
+          <AddMenu openFileDialog={props.openFileDialog} />
           <RemoveMenu />
           <SelectionMenu />
+          <MiscMenu />
         </div>
         <div className="playlist-bottom-center draggable" />
         <div className="playlist-bottom-right draggable">
@@ -141,6 +146,7 @@ const PlaylistWindow = props => {
             />
           </div>
           <MiniTime />
+          <ListMenu />
           <ResizeTarget />
         </div>
       </div>
diff --git a/js/skinSelectors.js b/js/skinSelectors.js
index 649539ac..63cd8d72 100644
--- a/js/skinSelectors.js
+++ b/js/skinSelectors.js
@@ -79,6 +79,14 @@ export const imageSelectors = {
     "#playlist-window-shade.selected .right"
   ],
 
+  PLAYLIST_ADD_MENU_BAR: ["#playlist-add-menu.selected .bar"],
+  PLAYLIST_ADD_URL: ["#playlist-add-menu .add-url"],
+  PLAYLIST_ADD_URL_SELECTED: ["#playlist-add-menu .hover .add-url"],
+  PLAYLIST_ADD_DIR: ["#playlist-add-menu .add-dir"],
+  PLAYLIST_ADD_DIR_SELECTED: ["#playlist-add-menu .hover .add-dir"],
+  PLAYLIST_ADD_FILE: ["#playlist-add-menu .add-file"],
+  PLAYLIST_ADD_FILE_SELECTED: ["#playlist-add-menu .hover .add-file"],
+
   PLAYLIST_REMOVE_MENU_BAR: ["#playlist-remove-menu.selected .bar"],
   PLAYLIST_REMOVE_ALL: ["#playlist-remove-menu .remove-all"],
   PLAYLIST_REMOVE_ALL_SELECTED: ["#playlist-remove-menu .hover .remove-all"],
@@ -110,6 +118,22 @@ export const imageSelectors = {
     "#playlist-window-shade #playlist-shade-button:active"
   ],
 
+  PLAYLIST_MISC_MENU_BAR: ["#playlist-misc-menu.selected .bar"],
+  PLAYLIST_MISC_OPTIONS: ["#playlist-misc-menu .misc-options"],
+  PLAYLIST_MISC_OPTIONS_SELECTED: ["#playlist-misc-menu .hover .misc-options"],
+  PLAYLIST_FILE_INFO: ["#playlist-misc-menu .file-info"],
+  PLAYLIST_FILE_INFO_SELECTED: ["#playlist-misc-menu .hover .file-info"],
+  PLAYLIST_SORT_LIST: ["#playlist-misc-menu .sort-list"],
+  PLAYLIST_SORT_LIST_SELECTED: ["#playlist-misc-menu .hover .sort-list"],
+
+  PLAYLIST_LIST_BAR: ["#playlist-list-menu.selected .bar"],
+  PLAYLIST_NEW_LIST: ["#playlist-list-menu .new-list"],
+  PLAYLIST_NEW_LIST_SELECTED: ["#playlist-list-menu .hover .new-list"],
+  PLAYLIST_LOAD_LIST: ["#playlist-list-menu .load-list"],
+  PLAYLIST_LOAD_LIST_SELECTED: ["#playlist-list-menu .hover .load-list"],
+  PLAYLIST_SAVE_LIST: ["#playlist-list-menu .save-list"],
+  PLAYLIST_SAVE_LIST_SELECTED: ["#playlist-list-menu .hover .save-list"],
+
   EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"],
   EQ_TITLE_BAR: [".equalizer-top"],
   EQ_TITLE_BAR_SELECTED: [".selected .equalizer-top"],