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; }