diff --git a/css/playlist-window.css b/css/playlist-window.css index fdad4616..60d738e2 100644 --- a/css/playlist-window.css +++ b/css/playlist-window.css @@ -234,11 +234,6 @@ height: 100%; position: absolute; right: 150px; - display: none; /* Only show if the window is wide enough */ -} - -#webamp #playlist-window.wide .playlist-visualizer { - display: block; } #webamp #playlist-window .mini-time { @@ -321,9 +316,10 @@ right: 30px; } -#webamp #playlist-window #visualizer { +#webamp #playlist-window .visualizer-wrapper { position: absolute; - /* TODO: These numbers are not quite right */ - top: 10px; - left: 5px; + top: 12px; + left: 2px; + width: 72px; + overflow: hidden; } diff --git a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap index 0fca32e0..8d5aa782 100644 --- a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap +++ b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap @@ -169,10 +169,6 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
-
diff --git a/js/components/PlaylistWindow/index.tsx b/js/components/PlaylistWindow/index.tsx index a0beda33..784e0c25 100644 --- a/js/components/PlaylistWindow/index.tsx +++ b/js/components/PlaylistWindow/index.tsx @@ -5,7 +5,6 @@ import classnames from "classnames"; import { WINDOWS, TRACK_HEIGHT } from "../../constants"; import { SET_FOCUSED_WINDOW } from "../../actionTypes"; import { - toggleVisualizerStyle, scrollUpFourTracks, scrollDownFourTracks, loadFilesFromReferences, @@ -38,7 +37,9 @@ interface StateProps { offset: number; maxTrackIndex: number; playlistWindowPixelSize: { width: number; height: number }; - focused: string; + showVisualizer: boolean; + activateVisualizer: boolean; + selected: boolean; skinPlaylistStyle: PlaylistStyle; playlistSize: [number, number]; playlistShade: boolean; @@ -49,7 +50,6 @@ interface DispatchProps { focusPlaylist(): void; close(): void; toggleShade(): void; - toggleVisualizerStyle(): void; scrollUpFourTracks(): void; scrollDownFourTracks(): void; loadFilesFromReferences( @@ -83,13 +83,15 @@ class PlaylistWindow extends React.Component { const { skinPlaylistStyle, focusPlaylist, - focused, + selected, playlistSize, playlistWindowPixelSize, playlistShade, close, toggleShade, - analyser + analyser, + showVisualizer, + activateVisualizer } = this.props; if (playlistShade) { return ; @@ -103,10 +105,7 @@ class PlaylistWindow extends React.Component { width: `${playlistWindowPixelSize.width}px` }; - const classes = classnames("window", "draggable", { - selected: focused === WINDOWS.PLAYLIST, - wide: playlistSize[0] > 2 - }); + const classes = classnames("window", "draggable", { selected }); const showSpacers = playlistSize[0] % 2 === 0; @@ -153,18 +152,18 @@ class PlaylistWindow extends React.Component {
-
- {/* TODO: Resize the visualizer so it fits */ - false && ( - - )} -
+ {showVisualizer && ( +
+ {activateVisualizer && ( +
+ +
+ )} +
+ )}
{ type: SET_FOCUSED_WINDOW, window: WINDOWS.PLAYLIST }), - close: () => dispatch(closeWindow("playlist")), + close: () => dispatch(closeWindow(WINDOWS.PLAYLIST)), toggleShade: () => dispatch(togglePlaylistShadeMode()), - toggleVisualizerStyle: () => dispatch(toggleVisualizerStyle()), scrollUpFourTracks: () => dispatch(scrollUpFourTracks()), scrollDownFourTracks: () => dispatch(scrollDownFourTracks()), loadFilesFromReferences: (e, startIndex) => @@ -209,18 +207,22 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => { const mapStateToProps = (state: AppState): StateProps => { const { - windows: { focused }, playlist: { trackOrder } } = state; + const playlistSize = Selectors.getWindowSize(state)(WINDOWS.PLAYLIST); return { offset: Selectors.getScrollOffset(state), maxTrackIndex: trackOrder.length - 1, - playlistWindowPixelSize: Selectors.getWindowPixelSize(state)("playlist"), - focused, + playlistWindowPixelSize: Selectors.getWindowPixelSize(state)( + WINDOWS.PLAYLIST + ), + showVisualizer: playlistSize[0] > 2, + activateVisualizer: !Selectors.getWindowOpen(state)(WINDOWS.MAIN), + playlistSize, + selected: Selectors.getFocusedWindow(state) === WINDOWS.PLAYLIST, skinPlaylistStyle: Selectors.getSkinPlaylistStyle(state), - playlistSize: Selectors.getWindowSize(state)("playlist"), - playlistShade: Boolean(Selectors.getWindowShade(state)("playlist")), + playlistShade: Boolean(Selectors.getWindowShade(state)(WINDOWS.PLAYLIST)), duration: Selectors.getDuration(state) }; };