Add 'remove' buttons

css/playlist-window.css

@@ -163,6 +163,17 @@
   width: 3px;
   height: 54px;
 }
+#winamp2-js #playlist-remove-menu.playlist-menu .bar {
+  height: 72px;
+}
+
+#winamp2-js #playlist-remove-menu {
+  position: absolute;
+  bottom: 12px;
+  left: 43px;
+  width: 22px;
+  height: 18px;
+}
 
 #winamp2-js #playlist-selection-menu {
   position: absolute;

js/actionTypes.js

@@ -46,3 +46,6 @@ export const SELECT_ALL = "SELECT_ALL";
 export const SELECT_ZERO = "SELECT_ZERO";
 export const INVERT_SELECTION = "INVERT_SELECTION";
 export const PLAYLIST_SIZE_CHANGED = "PLAYLIST_SIZE_CHANGED";
+export const REMOVE_ALL_TRACKS = "REMOVE_ALL_TRACKS";
+export const CROP_TRACKS = "CROP_TRACKS";
+export const REMOVE_SELECTED_TRACKS = "REMOVE_SELECTED_TRACKS";

js/components/PlaylistWindow/RemoveMenu.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { connect } from "react-redux";
+import {
+  REMOVE_ALL_TRACKS,
+  CROP_TRACKS,
+  REMOVE_SELECTED_TRACKS
+} from "../../actionTypes";
+
+const RemoveMenu = props => (
+  <div id="playlist-remove-menu" className="playlist-menu selected">
+    <div className="bar" />
+    <ul>
+      <li className="remove-misc" onClick={props.removeSelected} />
+      <li className="remove-all" onClick={props.removeAll} />
+      <li className="crop" onClick={props.crop} />
+      <li className="remove-selected" onClick={props.removeSelected} />
+    </ul>
+  </div>
+);
+
+const mapDispatchToProps = {
+  removeSelected: () => ({ type: REMOVE_SELECTED_TRACKS }),
+  removeAll: () => ({ type: REMOVE_ALL_TRACKS }),
+  crop: () => ({ type: CROP_TRACKS })
+};
+export default connect(null, mapDispatchToProps)(RemoveMenu);

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 RemoveMenu from "./RemoveMenu";
 import SelectionMenu from "./SelectionMenu";
 import ResizeTarget from "./ResizeTarget";
 import { percentToIndex } from "../../utils";
@@ -96,6 +97,7 @@ const PlaylistWindow = props => {
       </div>
       <div className="playlist-bottom draggable">
         <div className="playlist-bottom-left draggable">
+          <RemoveMenu />
           <SelectionMenu />
         </div>
         <div className="playlist-bottom-center draggable" />
@@ -144,7 +146,7 @@ const mapStateToProps = state => {
     skinPlaylistStyle,
     playlistScrollPosition,
     playlistSize,
-    trackOrder
+    trackOrder: trackOrder.filter(id => state.tracks[id])
   };
 };
 

js/components/Skin.js

@@ -78,6 +78,18 @@ const imageSelectors = {
   PLAYLIST_VISUALIZER_BACKGROUND: [".playlist-visualizer"],
   PLAYLIST_SHADE_BACKGROUND: ["#playlist.shade"],
 
+  PLAYLIST_REMOVE_MENU_BAR: ["#playlist-remove-menu.selected .bar"],
+  PLAYLIST_REMOVE_ALL: ["#playlist-remove-menu .remove-all"],
+  PLAYLIST_REMOVE_ALL_SELECTED: ["#playlist-remove-menu .remove-all:hover"],
+  PLAYLIST_CROP: ["#playlist-remove-menu .crop"],
+  PLAYLIST_CROP_SELECTED: ["#playlist-remove-menu .crop:hover"],
+  PLAYLIST_REMOVE_SELECTED: ["#playlist-remove-menu .remove-selected"],
+  PLAYLIST_REMOVE_SELECTED_SELECTED: [
+    "#playlist-remove-menu .remove-selected:hover"
+  ],
+  PLAYLIST_REMOVE_MISC: ["#playlist-remove-menu .remove-misc"],
+  PLAYLIST_REMOVE_MISC_SELECTED: ["#playlist-remove-menu .remove-misc:hover"],
+
   PLAYLIST_SELECT_MENU_BAR: ["#playlist-selection-menu.selected .bar"],
   PLAYLIST_INVERT_SELECTION: ["#playlist-selection-menu .invert-selection"],
   PLAYLIST_INVERT_SELECTION_SELECTED: [

js/reducers.js

@@ -39,7 +39,10 @@ import {
   SELECT_ALL,
   SELECT_ZERO,
   INVERT_SELECTION,
-  PLAYLIST_SIZE_CHANGED
+  PLAYLIST_SIZE_CHANGED,
+  REMOVE_ALL_TRACKS,
+  CROP_TRACKS,
+  REMOVE_SELECTED_TRACKS
 } from "./actionTypes";
 import { playlistEnabled } from "./config";
 
@@ -251,6 +254,22 @@ const tracks = (state = defaultTracksState, action) => {
         newTracks[id] = { ...state[id], selected: !state[id].selected };
         return newTracks;
       }, {});
+    case REMOVE_ALL_TRACKS:
+      return {};
+    case CROP_TRACKS:
+      return Object.keys(state).reduce((newTracks, id) => {
+        if (state[id].selected) {
+          newTracks[id] = state[id];
+        }
+        return newTracks;
+      }, {});
+    case REMOVE_SELECTED_TRACKS:
+      return Object.keys(state).reduce((newTracks, id) => {
+        if (!state[id].selected) {
+          newTracks[id] = state[id];
+        }
+        return newTracks;
+      }, {});
     default:
       return state;
   }
@@ -262,6 +281,8 @@ const defaultPlaylistState = {
 };
 const playlist = (state = defaultPlaylistState, action) => {
   switch (action.type) {
+    case REMOVE_ALL_TRACKS:
+      return { ...state, trackOrder: [], currentTrack: null };
     default:
       return state;
   }