Make generic window size management include playlist

js/actionCreators.js

@@ -64,9 +64,9 @@ import {
   TOGGLE_PLAYLIST_SHADE_MODE,
   MEDIA_TAG_REQUEST_INITIALIZED,
   MEDIA_TAG_REQUEST_FAILED,
-  PLAYLIST_SIZE_CHANGED,
   UPDATE_WINDOW_POSITIONS,
-  TOGGLE_DOUBLESIZE_MODE
+  TOGGLE_DOUBLESIZE_MODE,
+  WINDOW_SIZE_CHANGED
 } from "./actionTypes";
 
 import LoadQueue from "./loadQueue";
@@ -599,8 +599,8 @@ export function setPlaylistScrollPosition(position) {
   return { type: SET_PLAYLIST_SCROLL_POSITION, position };
 }
 
-export function setPlaylistSize(size) {
-  return { type: PLAYLIST_SIZE_CHANGED, size };
+export function setWindowSize(windowId, size) {
+  return { type: WINDOW_SIZE_CHANGED, windowId, size };
 }
 
 export function scrollNTracks(n) {

js/actionTypes.js

@@ -46,7 +46,6 @@ export const SHIFT_CLICKED_TRACK = "SHIFT_CLICKED_TRACK";
 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 FILE_INFO = "FILE_INFO";
@@ -70,4 +69,4 @@ export const NETWORK_CONNECTED = "NETWORK_CONNECTED";
 export const NETWORK_DISCONNECTED = "NETWORK_DISCONNECTED";
 export const UPDATE_WINDOW_POSITIONS = "UPDATE_WINDOW_POSITIONS";
 export const CHANNEL_COUNT_CHANGED = "CHANNEL_COUNT_CHANGED";
-export const GEN_WINDOW_SIZE_CHANGED = "GEN_WINDOW_SIZE_CHANGED";
+export const WINDOW_SIZE_CHANGED = "WINDOW_SIZE_CHANGED";

js/components/GenWindow/index.js

@@ -4,12 +4,8 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import "../../../css/gen-window.css";
 
-import {
-  SET_FOCUSED_WINDOW,
-  CLOSE_GEN_WINDOW,
-  GEN_WINDOW_SIZE_CHANGED
-} from "../../actionTypes";
-import { scrollVolume } from "../../actionCreators";
+import { SET_FOCUSED_WINDOW, CLOSE_GEN_WINDOW } from "../../actionTypes";
+import { scrollVolume, setWindowSize } from "../../actionCreators";
 import { getWindowPixelSize } from "../../selectors";
 import ResizeTarget from "../ResizeTarget";
 
@@ -37,7 +33,7 @@ export const GenWindow = ({
   setFocus,
   windowId,
   windowSize,
-  genWindowSizeChanged,
+  setGenWindowSize,
   scrollVolume: handleWheel
 }) => {
   const { width, height } = getWindowPixelSize(windowSize);
@@ -80,7 +76,7 @@ export const GenWindow = ({
         <div className="gen-bottom-right draggable">
           <ResizeTarget
             currentSize={windowSize}
-            setWindowSize={size => genWindowSizeChanged(windowId, size)}
+            setWindowSize={size => setGenWindowSize(windowId, size)}
             id={"gen-resize-target"}
           />
         </div>
@@ -105,12 +101,8 @@ const mapStateToProps = (state, ownProps) => ({
 const mapDispatchToProps = {
   setFocus: windowId => ({ type: SET_FOCUSED_WINDOW, window: windowId }),
   close: windowId => ({ type: CLOSE_GEN_WINDOW, windowId }),
-  scrollVolume,
-  genWindowSizeChanged: (windowId, size) => ({
-    type: GEN_WINDOW_SIZE_CHANGED,
-    windowId,
-    size
-  })
+  setGenWindowSize: setWindowSize,
+  scrollVolume
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(GenWindow);

js/components/PlaylistWindow/PlaylistResizeTarget.js

@@ -1,12 +1,15 @@
 import { connect } from "react-redux";
 import ResizeTarget from "../ResizeTarget";
-import { setPlaylistSize } from "../../actionCreators";
+import { setWindowSize } from "../../actionCreators";
+import { getWindowSize } from "../../selectors";
 
 const mapStateToProps = state => ({
-  currentSize: state.display.playlistSize,
+  currentSize: getWindowSize(state, "playlist"),
   id: "playlist-resize-target"
 });
 
-const mapDispatchToProps = { setWindowSize: setPlaylistSize };
+const mapDispatchToProps = {
+  setWindowSize: size => setWindowSize("playlist", size)
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(ResizeTarget);

js/components/PlaylistWindow/index.js

@@ -12,7 +12,11 @@ import {
   togglePlaylistShadeMode,
   scrollVolume
 } from "../../actionCreators";
-import { getScrollOffset, getPlaylistWindowPixelSize } from "../../selectors";
+import {
+  getScrollOffset,
+  getPlaylistWindowPixelSize,
+  getWindowSize
+} from "../../selectors";
 
 import { clamp } from "../../utils";
 import DropTarget from "../DropTarget";
@@ -162,7 +166,7 @@ const mapDispatchToProps = {
 const mapStateToProps = state => {
   const {
     windows: { focused },
-    display: { skinPlaylistStyle, playlistSize, playlistShade },
+    display: { skinPlaylistStyle, playlistShade },
     media: { duration },
     playlist: { trackOrder }
   } = state;
@@ -173,7 +177,7 @@ const mapStateToProps = state => {
     playlistWindowPixelSize: getPlaylistWindowPixelSize(state),
     focused,
     skinPlaylistStyle,
-    playlistSize,
+    playlistSize: getWindowSize(state, "playlist"),
     playlistShade,
     duration
   };

js/reducers/display.js

@@ -10,8 +10,7 @@ import {
   TOGGLE_EQUALIZER_SHADE_MODE,
   TOGGLE_PLAYLIST_SHADE_MODE,
   TOGGLE_VISUALIZER_STYLE,
-  SET_PLAYLIST_SCROLL_POSITION,
-  PLAYLIST_SIZE_CHANGED
+  SET_PLAYLIST_SCROLL_POSITION
 } from "../actionTypes";
 
 const defaultDisplayState = {
@@ -30,8 +29,7 @@ const defaultDisplayState = {
   skinPlaylistStyle: {},
   skinRegion: {},
   visualizerStyle: 2,
-  playlistScrollPosition: 0,
-  playlistSize: [0, 0]
+  playlistScrollPosition: 0
 };
 
 const display = (state = defaultDisplayState, action) => {
@@ -70,8 +68,6 @@ const display = (state = defaultDisplayState, action) => {
       return { ...state, visualizerStyle: (state.visualizerStyle + 1) % 3 };
     case SET_PLAYLIST_SCROLL_POSITION:
       return { ...state, playlistScrollPosition: action.position };
-    case PLAYLIST_SIZE_CHANGED:
-      return { ...state, playlistSize: action.size };
     default:
       return state;
   }

js/reducers/windows.js

@@ -10,7 +10,7 @@ import {
   OPEN_GEN_WINDOW,
   ADD_GEN_WINDOW,
   UPDATE_WINDOW_POSITIONS,
-  GEN_WINDOW_SIZE_CHANGED
+  WINDOW_SIZE_CHANGED
 } from "../actionTypes";
 
 const defaultWindowsState = {
@@ -18,7 +18,11 @@ const defaultWindowsState = {
   mainWindow: true,
   equalizer: true,
   playlist: true,
-  genWindows: {},
+  genWindows: {
+    playlist: {
+      size: [0, 0]
+    }
+  },
   positions: {}
 };
 
@@ -75,7 +79,7 @@ const windows = (state = defaultWindowsState, action) => {
           }
         }
       };
-    case GEN_WINDOW_SIZE_CHANGED:
+    case WINDOW_SIZE_CHANGED:
       return {
         ...state,
         genWindows: {

js/selectors.js

@@ -125,7 +125,7 @@ export const nextTrack = (state, n = 1) => {
 
 const BASE_WINDOW_HEIGHT = 58;
 export const getNumberOfVisibleTracks = state => {
-  const { playlistSize } = state.display;
+  const playlistSize = getWindowSize(state, "playlist", state);
   return Math.floor(
     (BASE_WINDOW_HEIGHT + WINDOW_RESIZE_SEGMENT_HEIGHT * playlistSize[1]) /
       TRACK_HEIGHT
@@ -265,8 +265,12 @@ export function getWindowPixelSize([width, height]) {
   };
 }
 
+export function getWindowSize(state, windowId) {
+  return state.windows.genWindows[windowId].size;
+}
+
 export function getPlaylistWindowPixelSize(state) {
-  return getWindowPixelSize(state.display.playlistSize);
+  return getWindowPixelSize(getWindowSize(state, "playlist"));
 }
 
 function getGenericWindowSize(size, shade, doubled) {