getPlaylistWindowPixelSize

js/actionCreators.js

@@ -44,7 +44,6 @@ import {
   TOGGLE_SHUFFLE,
   SET_EQ_ON,
   SET_EQ_OFF,
-  TOGGLE_EQUALIZER_SHADE_MODE,
   REMOVE_TRACKS,
   REMOVE_ALL_TRACKS,
   PLAY,
@@ -59,15 +58,14 @@ import {
   DRAG_SELECTED,
   SET_MEDIA_TAGS,
   SET_MEDIA_DURATION,
-  TOGGLE_MAIN_SHADE_MODE,
-  TOGGLE_PLAYLIST_SHADE_MODE,
   MEDIA_TAG_REQUEST_INITIALIZED,
   MEDIA_TAG_REQUEST_FAILED,
   UPDATE_WINDOW_POSITIONS,
   TOGGLE_DOUBLESIZE_MODE,
   WINDOW_SIZE_CHANGED,
   TOGGLE_WINDOW,
-  CLOSE_WINDOW
+  CLOSE_WINDOW,
+  TOGGLE_WINDOW_SHADE_MODE
 } from "./actionTypes";
 
 import LoadQueue from "./loadQueue";
@@ -527,15 +525,24 @@ export function toggleDoubleSizeMode() {
 }
 
 export function toggleEqualizerShadeMode() {
-  return withWindowGraphIntegrity({ type: TOGGLE_EQUALIZER_SHADE_MODE });
+  return withWindowGraphIntegrity({
+    type: TOGGLE_WINDOW_SHADE_MODE,
+    windowId: "equalizer"
+  });
 }
 
 export function toggleMainWindowShadeMode() {
-  return withWindowGraphIntegrity({ type: TOGGLE_MAIN_SHADE_MODE });
+  return withWindowGraphIntegrity({
+    type: TOGGLE_WINDOW_SHADE_MODE,
+    windowId: "main"
+  });
 }
 
 export function togglePlaylistShadeMode() {
-  return withWindowGraphIntegrity({ type: TOGGLE_PLAYLIST_SHADE_MODE });
+  return withWindowGraphIntegrity({
+    type: TOGGLE_WINDOW_SHADE_MODE,
+    windowId: "playlist"
+  });
 }
 
 export function closeWindow(windowId) {

js/actionTypes.js

@@ -25,9 +25,6 @@ export const SET_EQ_ON = "SET_EQ_ON";
 export const SET_EQ_OFF = "SET_EQ_OFF";
 export const TOGGLE_LLAMA_MODE = "TOGGLE_LLAMA_MODE";
 export const TOGGLE_REPEAT = "TOGGLE_REPEAT";
-export const TOGGLE_MAIN_SHADE_MODE = "TOGGLE_MAIN_SHADE_MODE";
-export const TOGGLE_EQUALIZER_SHADE_MODE = "TOGGLE_EQUALIZER_SHADE_MODE";
-export const TOGGLE_PLAYLIST_SHADE_MODE = "TOGGLE_PLAYLIST_SHADE_MODE";
 export const TOGGLE_SHUFFLE = "TOGGLE_SHUFFLE";
 export const TOGGLE_TIME_MODE = "TOGGLE_TIME_MODE";
 export const TOGGLE_VISUALIZER_STYLE = "TOGGLE_VISUALIZER_STYLE";
@@ -65,3 +62,4 @@ export const NETWORK_DISCONNECTED = "NETWORK_DISCONNECTED";
 export const UPDATE_WINDOW_POSITIONS = "UPDATE_WINDOW_POSITIONS";
 export const CHANNEL_COUNT_CHANGED = "CHANNEL_COUNT_CHANGED";
 export const WINDOW_SIZE_CHANGED = "WINDOW_SIZE_CHANGED";
+export const TOGGLE_WINDOW_SHADE_MODE = "TOGGLE_WINDOW_SHADE_MODE";

js/components/EqualizerWindow/index.js

@@ -16,6 +16,7 @@ import {
 } from "../../actionCreators";
 
 import { SET_FOCUSED_WINDOW } from "../../actionTypes";
+import { getWindowShade } from "../../selectors";
 
 import Band from "./Band";
 import EqOn from "./EqOn";
@@ -104,7 +105,7 @@ const mapDispatchToProps = dispatch => ({
 const mapStateToProps = state => ({
   doubled: state.display.doubled,
   selected: state.windows.focused === WINDOWS.EQUALIZER,
-  shade: state.display.equalizerShade
+  shade: getWindowShade(state, "equalizer")
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(EqualizerWindow);

js/components/GenWindow/__snapshots__/index.test.js.snap

@@ -7,8 +7,8 @@ exports[`GenWindow renders to snapshot 1`] = `
   onWheel={[Function]}
   style={
     Object {
-      "height": 116,
-      "width": 275,
+      "height": undefined,
+      "width": undefined,
     }
   }
 >

js/components/MainWindow/EqToggleButton.js

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 
+import { getWindowOpen } from "../../selectors";
 import { toggleWindow } from "../../actionCreators";
 
 const EqToggleButton = props => (
@@ -14,7 +15,7 @@ const EqToggleButton = props => (
 );
 
 const mapStateToProps = state => ({
-  equalizer: state.windows.equalizer
+  equalizer: getWindowOpen(state, "equalizer")
 });
 
 const mapDispatchToProps = {

js/components/MainWindow/PlaylistToggleButton.js

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 
+import { getWindowOpen } from "../../selectors";
 import { toggleWindow } from "../../actionCreators";
 
 const PlaylistToggleButton = props => (
@@ -14,7 +15,7 @@ const PlaylistToggleButton = props => (
 );
 
 const mapStateToProps = state => ({
-  playlist: state.windows.playlist
+  playlist: getWindowOpen(state, "playlist")
 });
 
 const mapDispatchToProps = {

js/components/MainWindow/index.js

@@ -9,6 +9,7 @@ import {
   toggleMainWindowShadeMode,
   scrollVolume
 } from "../../actionCreators";
+import { getWindowShade } from "../../selectors";
 
 import DropTarget from "../DropTarget";
 import MiniTime from "../MiniTime";
@@ -147,10 +148,18 @@ export class MainWindow extends React.Component {
 const mapStateToProps = state => {
   const {
     media: { status },
-    display: { loading, doubled, mainShade, llama, working },
+    display: { loading, doubled, llama, working },
     windows: { focused }
   } = state;
-  return { status, loading, doubled, mainShade, llama, working, focused };
+  return {
+    mainShade: getWindowShade(state, "main"),
+    status,
+    loading,
+    doubled,
+    llama,
+    working,
+    focused
+  };
 };
 
 const mapDispatchToProps = {

js/components/PlaylistWindow/PlaylistShade.js

@@ -90,14 +90,13 @@ const mapDispatchToProps = dispatch => ({
 const mapStateToProps = state => {
   const {
     windows: { focused },
-    display: { skinPlaylistStyle, playlistShade },
+    display: { skinPlaylistStyle },
     media: { length }
   } = state;
   return {
     focused,
     skinPlaylistStyle,
     playlistSize: getWindowSize(state, "playlist"),
-    playlistShade,
     trackOrder: getOrderedTracks(state),
     length,
     name: getMinimalMediaText(state)

js/components/PlaylistWindow/index.js

@@ -15,8 +15,9 @@ import {
 } from "../../actionCreators";
 import {
   getScrollOffset,
-  getPlaylistWindowPixelSize,
-  getWindowSize
+  getWindowPixelSize,
+  getWindowSize,
+  getWindowShade
 } from "../../selectors";
 
 import { clamp } from "../../utils";
@@ -89,10 +90,7 @@ class PlaylistWindow extends React.Component {
         handleDrop={this._handleDrop}
         onWheel={this.props.scrollVolume}
       >
-        <div
-          className="playlist-top draggable"
-          onDoubleClick={this.props.togglePlaylistShadeMode}
-        >
+        <div className="playlist-top draggable" onDoubleClick={toggleShade}>
           <div className="playlist-top-left draggable" />
           {showSpacers && (
             <div className="playlist-top-left-spacer draggable" />
@@ -160,14 +158,13 @@ const mapDispatchToProps = {
   scrollDownFourTracks,
   loadFilesFromReferences: (e, startIndex) =>
     loadFilesFromReferences(e.dataTransfer.files, null, startIndex),
-  togglePlaylistShadeMode,
   scrollVolume
 };
 
 const mapStateToProps = state => {
   const {
     windows: { focused },
-    display: { skinPlaylistStyle, playlistShade },
+    display: { skinPlaylistStyle },
     media: { duration },
     playlist: { trackOrder }
   } = state;
@@ -175,11 +172,11 @@ const mapStateToProps = state => {
   return {
     offset: getScrollOffset(state),
     maxTrackIndex: trackOrder.length - 1,
-    playlistWindowPixelSize: getPlaylistWindowPixelSize(state),
+    playlistWindowPixelSize: getWindowPixelSize(state, "playlist"),
     focused,
     skinPlaylistStyle,
     playlistSize: getWindowSize(state, "playlist"),
-    playlistShade,
+    playlistShade: getWindowShade(state, "playlist"),
     duration
   };
 };

js/reducers/display.js

@@ -6,9 +6,6 @@ import {
   STOP_WORKING,
   TOGGLE_DOUBLESIZE_MODE,
   TOGGLE_LLAMA_MODE,
-  TOGGLE_MAIN_SHADE_MODE,
-  TOGGLE_EQUALIZER_SHADE_MODE,
-  TOGGLE_PLAYLIST_SHADE_MODE,
   TOGGLE_VISUALIZER_STYLE,
   SET_PLAYLIST_SCROLL_POSITION
 } from "../actionTypes";
@@ -19,9 +16,6 @@ const defaultDisplayState = {
   loading: true,
   llama: false,
   closed: false,
-  mainShade: false,
-  equalizerShade: false,
-  playlistShade: false,
   working: false,
   skinImages: {},
   skinColors: null,
@@ -36,12 +30,6 @@ const display = (state = defaultDisplayState, action) => {
   switch (action.type) {
     case TOGGLE_DOUBLESIZE_MODE:
       return { ...state, doubled: !state.doubled };
-    case TOGGLE_MAIN_SHADE_MODE:
-      return { ...state, mainShade: !state.mainShade };
-    case TOGGLE_EQUALIZER_SHADE_MODE:
-      return { ...state, equalizerShade: !state.equalizerShade };
-    case TOGGLE_PLAYLIST_SHADE_MODE:
-      return { ...state, playlistShade: !state.playlistShade };
     case TOGGLE_LLAMA_MODE:
       return { ...state, llama: !state.llama };
     case STEP_MARQUEE:

js/reducers/windows.js

@@ -5,7 +5,8 @@ import {
   CLOSE_WINDOW,
   ADD_GEN_WINDOW,
   UPDATE_WINDOW_POSITIONS,
-  WINDOW_SIZE_CHANGED
+  WINDOW_SIZE_CHANGED,
+  TOGGLE_WINDOW_SHADE_MODE
 } from "../actionTypes";
 
 const defaultWindowsState = {
@@ -47,6 +48,24 @@ const windows = (state = defaultWindowsState, action) => {
   switch (action.type) {
     case SET_FOCUSED_WINDOW:
       return { ...state, focused: action.window };
+    case TOGGLE_WINDOW_SHADE_MODE:
+      const { canShade } = state.genWindows[action.windowId];
+      if (!canShade) {
+        throw new Error(
+          "Tried to shade/unshade a window that cannot be shaded:",
+          action.windowId
+        );
+      }
+      return {
+        ...state,
+        genWindows: {
+          ...state.genWindows,
+          [action.windowId]: {
+            ...state.genWindows[action.windowId],
+            shade: !state.genWindows[action.windowId].shade
+          }
+        }
+      };
     case TOGGLE_WINDOW:
       return {
         ...state,

js/selectors.js

@@ -254,11 +254,9 @@ export function getWindowPositions(state) {
 const WINDOW_HEIGHT = 116;
 const SHADE_WINDOW_HEIGHT = 14;
 
-// TODO: Clean this up.
-export function getWindowPixelSize(state, windowId) {
-  const w = state.windows.genWindows[windowId];
+function getWPixelSize(w, doubled) {
   const [width, height] = w.size;
-  const doubledMultiplier = state.display.doubled && w.canDouble ? 2 : 1;
+  const doubledMultiplier = doubled && w.canDouble ? 2 : 1;
   const pix = {
     height: WINDOW_HEIGHT + height * WINDOW_RESIZE_SEGMENT_HEIGHT,
     width: WINDOW_WIDTH + width * WINDOW_RESIZE_SEGMENT_WIDTH
@@ -273,14 +271,34 @@ export function getWindowSize(state, windowId) {
   return state.windows.genWindows[windowId].size;
 }
 
-export function getPlaylistWindowPixelSize(state) {
-  return getWindowPixelSize(state, "playlist");
+export function getWindowOpen(state, windowId) {
+  return state.windows.genWindows[windowId].open;
 }
 
-export function getWindowSizes(state) {
-  return objectMap(state.windows.genWindows, (w, windowId) => {
-    return getWindowPixelSize(state, windowId);
-  });
+export function getWindowShade(state, windowId) {
+  return state.windows.genWindows[windowId].shade;
+}
+
+export const getGenWindows = state => {
+  return state.windows.genWindows;
+};
+
+export function getDoubled(state) {
+  return state.display.doubled;
+}
+
+export const getWindowSizes = createSelector(
+  getGenWindows,
+  getDoubled,
+  (windows, doubled) => {
+    return objectMap(windows, w => getWPixelSize(w, doubled));
+  }
+);
+
+export function getWindowPixelSize(state, windowId) {
+  // Rather than compute it directly, we go via `getWindowSizes`
+  // to take advantage of caching.
+  return getWindowSizes(state)[windowId];
 }
 
 export const getWindowsInfo = createSelector(
@@ -291,7 +309,3 @@ export const getWindowsInfo = createSelector(
 );
 
 export const getWindowGraph = createSelector(getWindowsInfo, generateGraph);
-
-export const getGenWindows = state => {
-  return state.windows.genWindows;
-};