From e97cb3c2436ba3db29cfbc7eb18990453b4da83a Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 30 Sep 2017 13:33:27 -0700
Subject: [PATCH] Add selection menu (always open, for now)

---
 css/playlist-window.css                       | 40 +++++++++++++++++++
 js/actionTypes.js                             |  3 ++
 js/components/PlaylistWindow/SelectionMenu.js | 21 ++++++++++
 js/components/PlaylistWindow/index.js         |  5 ++-
 js/components/Skin.js                         | 13 ++++++
 js/reducers.js                                | 23 +++++++++--
 js/skinSprites.js                             |  7 ++--
 7 files changed, 105 insertions(+), 7 deletions(-)
 create mode 100644 js/components/PlaylistWindow/SelectionMenu.js

diff --git a/css/playlist-window.css b/css/playlist-window.css
index 9faf2e56..0887feda 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -134,6 +134,46 @@
   position: absolute;
 }
 
+#winamp2-js .playlist-menu li {
+  list-style: none;
+  display: block;
+  display: none;
+  width: 22px;
+  height: 18px;
+}
+
+#winamp2-js .playlist-menu.selected ul {
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+}
+
+#winamp2-js .playlist-menu.selected li {
+  list-style: none;
+  display: block;
+  width: 22px;
+  height: 18px;
+  padding: 0;
+  margin: 0;
+}
+
+#winamp2-js .playlist-menu .bar {
+  position: absolute;
+  bottom: 0;
+  left: -3px;
+  width: 3px;
+  height: 54px;
+}
+
+#winamp2-js #playlist-selection-menu {
+  position: absolute;
+  bottom: 12px;
+  left: 72px;
+  width: 22px;
+  height: 18px;
+}
+
 #winamp2-js .playlist-bottom-right {
   width: 150px;
   height: 100%;
diff --git a/js/actionTypes.js b/js/actionTypes.js
index 95895a0e..1ecfbc80 100644
--- a/js/actionTypes.js
+++ b/js/actionTypes.js
@@ -42,3 +42,6 @@ export const UNSET_USER_MESSAGE = "UNSET_USER_MESSAGE";
 export const SET_PLAYLIST_SCROLL_POSITION = "SET_PLAYLIST_SCROLL_POSITION";
 export const CLICKED_TRACK = "CLICKED_TRACK";
 export const CTRL_CLICKED_TRACK = "CTRL_CLICKED_TRACK";
+export const SELECT_ALL = "SELECT_ALL";
+export const SELECT_ZERO = "SELECT_ZERO";
+export const INVERT_SELECTION = "INVERT_SELECTION";
diff --git a/js/components/PlaylistWindow/SelectionMenu.js b/js/components/PlaylistWindow/SelectionMenu.js
new file mode 100644
index 00000000..3876ddaf
--- /dev/null
+++ b/js/components/PlaylistWindow/SelectionMenu.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { connect } from "react-redux";
+import { SELECT_ALL, SELECT_ZERO, INVERT_SELECTION } from "../../actionTypes";
+
+const SelectionMenu = props => (
+  <div id="playlist-selection-menu" className="playlist-menu selected">
+    <div className="bar" />
+    <ul>
+      <li className="invert-selection" onClick={props.invertSelection} />
+      <li className="select-zero" onClick={props.selectZero} />
+      <li className="select-all" onClick={props.selectAll} />
+    </ul>
+  </div>
+);
+
+const mapDispatchToProps = {
+  invertSelection: () => ({ type: INVERT_SELECTION }),
+  selectAll: () => ({ type: SELECT_ALL }),
+  selectZero: () => ({ type: SELECT_ZERO })
+};
+export default connect(null, mapDispatchToProps)(SelectionMenu);
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 81498fba..ad868c6b 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -5,6 +5,7 @@ import Slider from "rc-slider/lib/Slider";
 
 import MiniTime from "../MiniTime";
 import Track from "./Track";
+import SelectionMenu from "./SelectionMenu";
 import { percentToIndex } from "../../utils";
 import { WINDOWS } from "../../constants";
 import {
@@ -81,7 +82,9 @@ const PlaylistWindow = props => {
         </div>
       </div>
       <div className="playlist-bottom draggable">
-        <div className="playlist-bottom-left draggable" />
+        <div className="playlist-bottom-left draggable">
+          <SelectionMenu />
+        </div>
         <div className="playlist-bottom-center draggable" />
         <div className="playlist-bottom-right draggable">
           <div className="playlist-action-buttons">
diff --git a/js/components/Skin.js b/js/components/Skin.js
index 23d251a0..2c3ee31c 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -77,6 +77,19 @@ const imageSelectors = {
   PLAYLIST_BOTTOM_RIGHT_CORNER: [".playlist-bottom-right"],
   PLAYLIST_VISUALIZER_BACKGROUND: [".playlist-visualizer"],
   PLAYLIST_SHADE_BACKGROUND: ["#playlist.shade"],
+
+  PLAYLIST_SELECT_MENU_BAR: ["#playlist-selection-menu.selected .bar"],
+  PLAYLIST_INVERT_SELECTION: ["#playlist-selection-menu .invert-selection"],
+  PLAYLIST_INVERT_SELECTION_SELECTED: [
+    "#playlist-selection-menu .invert-selection:hover"
+  ],
+  PLAYLIST_SELECT_ZERO: ["#playlist-selection-menu .select-zero"],
+  PLAYLIST_SELECT_ZERO_SELECTED: [
+    "#playlist-selection-menu .select-zero:hover"
+  ],
+  PLAYLIST_SELECT_ALL: ["#playlist-selection-menu .select-all"],
+  PLAYLIST_SELECT_ALL_SELECTED: ["#playlist-selection-menu .select-all:hover"],
+
   EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"],
   EQ_TITLE_BAR: [".equalizer-top"],
   EQ_TITLE_BAR_SELECTED: [".selected .equalizer-top"],
diff --git a/js/reducers.js b/js/reducers.js
index 2ffbefb9..47541e4a 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -35,7 +35,10 @@ import {
   UNSET_USER_MESSAGE,
   SET_PLAYLIST_SCROLL_POSITION,
   CLICKED_TRACK,
-  CTRL_CLICKED_TRACK
+  CTRL_CLICKED_TRACK,
+  SELECT_ALL,
+  SELECT_ZERO,
+  INVERT_SELECTION
 } from "./actionTypes";
 import { playlistEnabled } from "./config";
 
@@ -221,8 +224,7 @@ const defaultTracksState = {
 const tracks = (state = defaultTracksState, action) => {
   switch (action.type) {
     case CLICKED_TRACK:
-      const ids = Object.keys(state);
-      return ids.reduce((newTracks, id) => {
+      return Object.keys(state).reduce((newTracks, id) => {
         newTracks[id] = { ...state[id], selected: id === String(action.id) };
         return newTracks;
       }, {});
@@ -230,6 +232,21 @@ const tracks = (state = defaultTracksState, action) => {
       const track = state[action.id];
       const newTrack = { ...track, selected: !track.selected };
       return { ...state, [action.id]: newTrack };
+    case SELECT_ALL:
+      return Object.keys(state).reduce((newTracks, id) => {
+        newTracks[id] = { ...state[id], selected: true };
+        return newTracks;
+      }, {});
+    case SELECT_ZERO:
+      return Object.keys(state).reduce((newTracks, id) => {
+        newTracks[id] = { ...state[id], selected: false };
+        return newTracks;
+      }, {});
+    case INVERT_SELECTION:
+      return Object.keys(state).reduce((newTracks, id) => {
+        newTracks[id] = { ...state[id], selected: !state[id].selected };
+        return newTracks;
+      }, {});
     default:
       return state;
   }
diff --git a/js/skinSprites.js b/js/skinSprites.js
index 7884afa4..7b98de6b 100644
--- a/js/skinSprites.js
+++ b/js/skinSprites.js
@@ -340,10 +340,11 @@ export default {
       width: 22,
       height: 18
     },
-    { name: "PLAYLIST_REMOVE_MENU_BAR", x: 48, y: 111, width: 3, height: 54 },
-    { name: "PLAYLIST_SELECT_MENU_BAR", x: 100, y: 111, width: 3, height: 72 },
+    { name: "PLAYLIST_ADD_MENU_BAR", x: 48, y: 111, width: 3, height: 54 },
+    { name: "PLAYLIST_REMOVE_MENU_BAR", x: 100, y: 111, width: 3, height: 72 },
+    { name: "PLAYLIST_SELECT_MENU_BAR", x: 150, y: 111, width: 3, height: 54 },
     { name: "PLAYLIST_MISC_MENU_BAR", x: 200, y: 111, width: 3, height: 54 },
-    { name: "PLAYLIST_LIST_MENU_BAR", x: 250, y: 111, width: 3, height: 54 }
+    { name: "PLAYLIST_LIST_BAR", x: 250, y: 111, width: 3, height: 54 }
   ],
   EQ_EX: [
     {