diff --git a/css/playlist-window.css b/css/playlist-window.css
index 8b1ce1e5..9cb93fad 100644
--- a/css/playlist-window.css
+++ b/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;
diff --git a/js/actionTypes.js b/js/actionTypes.js
index 89f59e44..262388ce 100644
--- a/js/actionTypes.js
+++ b/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";
diff --git a/js/components/PlaylistWindow/RemoveMenu.js b/js/components/PlaylistWindow/RemoveMenu.js
new file mode 100644
index 00000000..e12cb762
--- /dev/null
+++ b/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 => (
+
+);
+
+const mapDispatchToProps = {
+ removeSelected: () => ({ type: REMOVE_SELECTED_TRACKS }),
+ removeAll: () => ({ type: REMOVE_ALL_TRACKS }),
+ crop: () => ({ type: CROP_TRACKS })
+};
+export default connect(null, mapDispatchToProps)(RemoveMenu);
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 5272dd72..4840ada6 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 RemoveMenu from "./RemoveMenu";
import SelectionMenu from "./SelectionMenu";
import ResizeTarget from "./ResizeTarget";
import { percentToIndex } from "../../utils";
@@ -96,6 +97,7 @@ const PlaylistWindow = props => {
+
@@ -144,7 +146,7 @@ const mapStateToProps = state => {
skinPlaylistStyle,
playlistScrollPosition,
playlistSize,
- trackOrder
+ trackOrder: trackOrder.filter(id => state.tracks[id])
};
};
diff --git a/js/components/Skin.js b/js/components/Skin.js
index 2c3ee31c..ae3a87f4 100644
--- a/js/components/Skin.js
+++ b/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: [
diff --git a/js/reducers.js b/js/reducers.js
index 9cb48af9..26da86cd 100644
--- a/js/reducers.js
+++ b/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;
}