({
- selected: state.windows.focused === ownProps.windowId,
- windowSize: state.windows.genWindows[ownProps.windowId].size
-});
+const mapStateToProps = (state, ownProps) => {
+ const { width, height } = getWindowPixelSize(state, ownProps.windowId);
+ return {
+ width,
+ height,
+ selected: state.windows.focused === ownProps.windowId,
+ windowSize: state.windows.genWindows[ownProps.windowId].size
+ };
+};
const mapDispatchToProps = {
setFocus: windowId => ({ type: SET_FOCUSED_WINDOW, window: windowId }),
- close: windowId => ({ type: CLOSE_GEN_WINDOW, windowId }),
+ close: windowId => closeWindow(windowId),
setGenWindowSize: setWindowSize,
scrollVolume
};
diff --git a/js/components/MainWindow/EqToggleButton.js b/js/components/MainWindow/EqToggleButton.js
index efeed9e6..e0e36b76 100644
--- a/js/components/MainWindow/EqToggleButton.js
+++ b/js/components/MainWindow/EqToggleButton.js
@@ -2,7 +2,7 @@ import React from "react";
import { connect } from "react-redux";
import classnames from "classnames";
-import { TOGGLE_EQUALIZER_WINDOW } from "../../actionTypes";
+import { toggleWindow } from "../../actionCreators";
const EqToggleButton = props => (
({
equalizer: state.windows.equalizer
});
-const mapDispatchToProps = dispatch => ({
- handleClick: () => dispatch({ type: TOGGLE_EQUALIZER_WINDOW })
-});
+const mapDispatchToProps = {
+ handleClick: () => toggleWindow("equalizer")
+};
export default connect(mapStateToProps, mapDispatchToProps)(EqToggleButton);
diff --git a/js/components/MainWindow/MainContextMenu.js b/js/components/MainWindow/MainContextMenu.js
index 32da991c..a6c8bb3c 100644
--- a/js/components/MainWindow/MainContextMenu.js
+++ b/js/components/MainWindow/MainContextMenu.js
@@ -3,14 +3,9 @@ import { connect } from "react-redux";
import {
close,
openMediaFileDialog,
- loadMediaFiles
+ loadMediaFiles,
+ toggleWindow
} from "../../actionCreators";
-import {
- TOGGLE_MAIN_WINDOW,
- TOGGLE_EQUALIZER_WINDOW,
- TOGGLE_PLAYLIST_WINDOW,
- TOGGLE_GEN_WINDOW
-} from "../../actionTypes";
import { getGenWindows } from "../../selectors";
import { LOAD_STYLE } from "../../constants";
import { Hr, Node, Parent, LinkNode } from "../ContextMenu";
@@ -97,10 +92,10 @@ const mapDispatchToProps = {
close,
openMediaFileDialog,
loadMediaFiles,
- toggleMainWindow: () => ({ type: TOGGLE_MAIN_WINDOW }),
- togglePlaylist: () => ({ type: TOGGLE_PLAYLIST_WINDOW }),
- toggleEqualizer: () => ({ type: TOGGLE_EQUALIZER_WINDOW }),
- toggleGenWindow: windowId => ({ type: TOGGLE_GEN_WINDOW, windowId })
+ toggleMainWindow: () => toggleWindow("main"),
+ togglePlaylist: () => toggleWindow("playlist"),
+ toggleEqualizer: () => toggleWindow("equalizer"),
+ toggleGenWindow: toggleWindow
};
export default connect(mapStateToProps, mapDispatchToProps)(MainContextMenu);
diff --git a/js/components/MainWindow/PlaylistToggleButton.js b/js/components/MainWindow/PlaylistToggleButton.js
index b4165200..fd943386 100644
--- a/js/components/MainWindow/PlaylistToggleButton.js
+++ b/js/components/MainWindow/PlaylistToggleButton.js
@@ -2,7 +2,7 @@ import React from "react";
import { connect } from "react-redux";
import classnames from "classnames";
-import { TOGGLE_PLAYLIST_WINDOW } from "../../actionTypes";
+import { toggleWindow } from "../../actionCreators";
const PlaylistToggleButton = props => (
({
});
const mapDispatchToProps = {
- handleClick: () => ({ type: TOGGLE_PLAYLIST_WINDOW })
+ handleClick: () => toggleWindow("playlist")
};
export default connect(mapStateToProps, mapDispatchToProps)(
diff --git a/js/components/PlaylistWindow/PlaylistShade.js b/js/components/PlaylistWindow/PlaylistShade.js
index 69c39a7c..fae97e20 100644
--- a/js/components/PlaylistWindow/PlaylistShade.js
+++ b/js/components/PlaylistWindow/PlaylistShade.js
@@ -1,9 +1,13 @@
import React from "react";
import { connect } from "react-redux";
import classnames from "classnames";
-import { getOrderedTracks, getMinimalMediaText } from "../../selectors";
+import {
+ getOrderedTracks,
+ getMinimalMediaText,
+ getWindowSize
+} from "../../selectors";
import { getTimeStr } from "../../utils";
-import { TOGGLE_PLAYLIST_WINDOW, SET_FOCUSED_WINDOW } from "../../actionTypes";
+import { SET_FOCUSED_WINDOW } from "../../actionTypes";
import {
WINDOWS,
@@ -12,7 +16,7 @@ import {
CHARACTER_WIDTH,
UTF8_ELLIPSIS
} from "../../constants";
-import { togglePlaylistShadeMode } from "../../actionCreators";
+import { togglePlaylistShadeMode, closeWindow } from "../../actionCreators";
import CharacterString from "../CharacterString";
import PlaylistResizeTarget from "./PlaylistResizeTarget";
@@ -79,20 +83,20 @@ class PlaylistShade extends React.Component {
const mapDispatchToProps = dispatch => ({
focusPlaylist: () =>
dispatch({ type: SET_FOCUSED_WINDOW, window: WINDOWS.PLAYLIST }),
- close: () => dispatch({ type: TOGGLE_PLAYLIST_WINDOW }),
+ close: () => closeWindow("playlist"),
toggleShade: () => dispatch(togglePlaylistShadeMode())
});
const mapStateToProps = state => {
const {
windows: { focused },
- display: { skinPlaylistStyle, playlistSize, playlistShade },
+ display: { skinPlaylistStyle, playlistShade },
media: { length }
} = state;
return {
focused,
skinPlaylistStyle,
- playlistSize,
+ playlistSize: getWindowSize(state, "playlist"),
playlistShade,
trackOrder: getOrderedTracks(state),
length,
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 82678bf9..2ebd84c8 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -3,14 +3,15 @@ import { connect } from "react-redux";
import classnames from "classnames";
import { WINDOWS, TRACK_HEIGHT } from "../../constants";
-import { TOGGLE_PLAYLIST_WINDOW, SET_FOCUSED_WINDOW } from "../../actionTypes";
+import { SET_FOCUSED_WINDOW } from "../../actionTypes";
import {
toggleVisualizerStyle,
scrollUpFourTracks,
scrollDownFourTracks,
loadFilesFromReferences,
togglePlaylistShadeMode,
- scrollVolume
+ scrollVolume,
+ closeWindow
} from "../../actionCreators";
import {
getScrollOffset,
@@ -152,7 +153,7 @@ const mapDispatchToProps = {
type: SET_FOCUSED_WINDOW,
window: WINDOWS.PLAYLIST
}),
- close: () => ({ type: TOGGLE_PLAYLIST_WINDOW }),
+ close: () => closeWindow("playlist"),
toggleShade: togglePlaylistShadeMode,
toggleVisualizerStyle,
scrollUpFourTracks,
diff --git a/js/hotkeys.js b/js/hotkeys.js
index 9b86799f..d75de377 100644
--- a/js/hotkeys.js
+++ b/js/hotkeys.js
@@ -12,16 +12,11 @@ import {
nextN,
next,
previous,
- toggleDoubleSizeMode
+ toggleDoubleSizeMode,
+ toggleWindow
} from "./actionCreators";
-import {
- TOGGLE_TIME_MODE,
- TOGGLE_LLAMA_MODE,
- TOGGLE_MAIN_WINDOW,
- TOGGLE_PLAYLIST_WINDOW,
- TOGGLE_EQUALIZER_WINDOW
-} from "./actionTypes";
+import { TOGGLE_TIME_MODE, TOGGLE_LLAMA_MODE } from "./actionTypes";
import { arraysAreEqual } from "./utils";
@@ -56,13 +51,13 @@ export default function(dispatch) {
} else if (e.altKey) {
switch (e.keyCode) {
case 87: // ALT+W
- dispatch({ type: TOGGLE_MAIN_WINDOW });
+ dispatch(toggleWindow("main"));
break;
case 69: // ALT+E
- dispatch({ type: TOGGLE_PLAYLIST_WINDOW });
+ dispatch(toggleWindow("playlist"));
break;
case 71: // ALT+G
- dispatch({ type: TOGGLE_EQUALIZER_WINDOW });
+ dispatch(toggleWindow("equalizer"));
break;
}
} else {
diff --git a/js/reducers/windows.js b/js/reducers/windows.js
index af4863a9..190bac3f 100644
--- a/js/reducers/windows.js
+++ b/js/reducers/windows.js
@@ -1,13 +1,8 @@
import { WINDOWS } from "../constants";
import {
SET_FOCUSED_WINDOW,
- TOGGLE_MAIN_WINDOW,
- TOGGLE_EQUALIZER_WINDOW,
- CLOSE_EQUALIZER_WINDOW,
- TOGGLE_PLAYLIST_WINDOW,
- TOGGLE_GEN_WINDOW,
- CLOSE_GEN_WINDOW,
- OPEN_GEN_WINDOW,
+ TOGGLE_WINDOW,
+ CLOSE_WINDOW,
ADD_GEN_WINDOW,
UPDATE_WINDOW_POSITIONS,
WINDOW_SIZE_CHANGED
@@ -15,12 +10,34 @@ import {
const defaultWindowsState = {
focused: WINDOWS.MAIN,
- mainWindow: true,
- equalizer: true,
- playlist: true,
genWindows: {
+ // TODO: Remove static capabilites and derive them from ids/generic
+ main: {
+ size: [0, 0],
+ open: true,
+ shade: false,
+ canResize: false,
+ canShade: true,
+ canDouble: true,
+ generic: false
+ },
+ equalizer: {
+ size: [0, 0],
+ open: true,
+ shade: false,
+ canResize: false,
+ canShade: true,
+ canDouble: true,
+ generic: false
+ },
playlist: {
- size: [0, 0]
+ size: [0, 0],
+ open: true,
+ shade: false,
+ canResize: true,
+ canShade: true,
+ canDouble: false,
+ generic: false
}
},
positions: {}
@@ -30,15 +47,7 @@ const windows = (state = defaultWindowsState, action) => {
switch (action.type) {
case SET_FOCUSED_WINDOW:
return { ...state, focused: action.window };
- case TOGGLE_MAIN_WINDOW:
- return { ...state, mainWindow: !state.mainWindow };
- case TOGGLE_EQUALIZER_WINDOW:
- return { ...state, equalizer: !state.equalizer };
- case CLOSE_EQUALIZER_WINDOW:
- return { ...state, equalizer: false };
- case TOGGLE_PLAYLIST_WINDOW:
- return { ...state, playlist: !state.playlist };
- case TOGGLE_GEN_WINDOW:
+ case TOGGLE_WINDOW:
return {
...state,
genWindows: {
@@ -49,7 +58,7 @@ const windows = (state = defaultWindowsState, action) => {
}
}
};
- case CLOSE_GEN_WINDOW:
+ case CLOSE_WINDOW:
return {
...state,
genWindows: {
@@ -61,25 +70,29 @@ const windows = (state = defaultWindowsState, action) => {
}
};
case ADD_GEN_WINDOW:
- return {
- ...state,
- genWindows: {
- ...state.genWindows,
- [action.windowId]: { title: action.title, open: true, size: [0, 0] }
- }
- };
- case OPEN_GEN_WINDOW:
return {
...state,
genWindows: {
...state.genWindows,
[action.windowId]: {
- ...state.genWindows[action.windowId],
- open: true
+ title: action.title,
+ open: true,
+ size: [0, 0],
+ canShade: false,
+ canResize: true,
+ canDouble: false,
+ generic: true
}
}
};
case WINDOW_SIZE_CHANGED:
+ const { canResize } = state.genWindows[action.windowId];
+ if (!canResize) {
+ throw new Error(
+ "Tried to resize a window that cannot be resized:",
+ action.windowId
+ );
+ }
return {
...state,
genWindows: {
diff --git a/js/selectors.js b/js/selectors.js
index 8af0ae8b..035a6d24 100644
--- a/js/selectors.js
+++ b/js/selectors.js
@@ -125,7 +125,7 @@ export const nextTrack = (state, n = 1) => {
const BASE_WINDOW_HEIGHT = 58;
export const getNumberOfVisibleTracks = state => {
- const playlistSize = getWindowSize(state, "playlist", state);
+ const playlistSize = getWindowSize(state, "playlist");
return Math.floor(
(BASE_WINDOW_HEIGHT + WINDOW_RESIZE_SEGMENT_HEIGHT * playlistSize[1]) /
TRACK_HEIGHT
@@ -252,17 +252,21 @@ export function getWindowPositions(state) {
}
const WINDOW_HEIGHT = 116;
-const DEFAUT_WINDOW_SIZE = {
- height: WINDOW_HEIGHT,
- width: WINDOW_WIDTH
-};
const SHADE_WINDOW_HEIGHT = 14;
-export function getWindowPixelSize([width, height]) {
- return {
+// TODO: Clean this up.
+export function getWindowPixelSize(state, windowId) {
+ const w = state.windows.genWindows[windowId];
+ const [width, height] = w.size;
+ const doubledMultiplier = state.display.doubled && w.canDouble ? 2 : 1;
+ const pix = {
height: WINDOW_HEIGHT + height * WINDOW_RESIZE_SEGMENT_HEIGHT,
width: WINDOW_WIDTH + width * WINDOW_RESIZE_SEGMENT_WIDTH
};
+ return {
+ height: (w.shade ? SHADE_WINDOW_HEIGHT : pix.height) * doubledMultiplier,
+ width: pix.width * doubledMultiplier
+ };
}
export function getWindowSize(state, windowId) {
@@ -270,34 +274,13 @@ export function getWindowSize(state, windowId) {
}
export function getPlaylistWindowPixelSize(state) {
- return getWindowPixelSize(getWindowSize(state, "playlist"));
-}
-
-function getGenericWindowSize(size, shade, doubled) {
- const doubledMultiplier = doubled ? 2 : 1;
- return {
- height: (shade ? SHADE_WINDOW_HEIGHT : size.height) * doubledMultiplier,
- width: size.width * doubledMultiplier
- };
+ return getWindowPixelSize(state, "playlist");
}
export function getWindowSizes(state) {
- const { doubled, mainShade, equalizerShade, playlistShade } = state.display;
- const main = getGenericWindowSize(DEFAUT_WINDOW_SIZE, mainShade, doubled);
- const equalizer = getGenericWindowSize(
- DEFAUT_WINDOW_SIZE,
- equalizerShade,
- doubled
- );
- const playlist = getGenericWindowSize(
- getPlaylistWindowPixelSize(state),
- playlistShade,
- false // The playlist cannot be doubled
- );
- const genWindowSizes = objectMap(state.windows.genWindows, genWindow =>
- getWindowPixelSize(genWindow.size)
- );
- return { main, equalizer, playlist, ...genWindowSizes };
+ return objectMap(state.windows.genWindows, (w, windowId) => {
+ return getWindowPixelSize(state, windowId);
+ });
}
export const getWindowsInfo = createSelector(