From 12774d6cf97a223864abbb58735167bb5282eac1 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Fri, 11 May 2018 21:55:52 -0700 Subject: [PATCH] getPlaylistWindowPixelSize --- js/actionCreators.js | 21 ++++++---- js/actionTypes.js | 4 +- js/components/EqualizerWindow/index.js | 3 +- .../__snapshots__/index.test.js.snap | 4 +- js/components/MainWindow/EqToggleButton.js | 3 +- .../MainWindow/PlaylistToggleButton.js | 3 +- js/components/MainWindow/index.js | 13 +++++- js/components/PlaylistWindow/PlaylistShade.js | 3 +- js/components/PlaylistWindow/index.js | 17 ++++---- js/reducers/display.js | 12 ------ js/reducers/windows.js | 21 +++++++++- js/selectors.js | 42 ++++++++++++------- 12 files changed, 90 insertions(+), 56 deletions(-) diff --git a/js/actionCreators.js b/js/actionCreators.js index cd6bd022..11ac2e00 100644 --- a/js/actionCreators.js +++ b/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) { diff --git a/js/actionTypes.js b/js/actionTypes.js index bbf1f175..e4a49ef0 100644 --- a/js/actionTypes.js +++ b/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"; diff --git a/js/components/EqualizerWindow/index.js b/js/components/EqualizerWindow/index.js index a8970283..5016eb11 100644 --- a/js/components/EqualizerWindow/index.js +++ b/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); diff --git a/js/components/GenWindow/__snapshots__/index.test.js.snap b/js/components/GenWindow/__snapshots__/index.test.js.snap index 95a1e0e4..2311cd6d 100644 --- a/js/components/GenWindow/__snapshots__/index.test.js.snap +++ b/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, } } > diff --git a/js/components/MainWindow/EqToggleButton.js b/js/components/MainWindow/EqToggleButton.js index e0e36b76..98e5c119 100644 --- a/js/components/MainWindow/EqToggleButton.js +++ b/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 = { diff --git a/js/components/MainWindow/PlaylistToggleButton.js b/js/components/MainWindow/PlaylistToggleButton.js index fd943386..8edcc3de 100644 --- a/js/components/MainWindow/PlaylistToggleButton.js +++ b/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 = { diff --git a/js/components/MainWindow/index.js b/js/components/MainWindow/index.js index 958467b4..d8564847 100644 --- a/js/components/MainWindow/index.js +++ b/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 = { diff --git a/js/components/PlaylistWindow/PlaylistShade.js b/js/components/PlaylistWindow/PlaylistShade.js index fae97e20..15e69cc3 100644 --- a/js/components/PlaylistWindow/PlaylistShade.js +++ b/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) diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js index 2ebd84c8..5fbb2f8c 100644 --- a/js/components/PlaylistWindow/index.js +++ b/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} > -
+
{showSpacers && (
@@ -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 }; }; diff --git a/js/reducers/display.js b/js/reducers/display.js index f7467541..9adc139e 100644 --- a/js/reducers/display.js +++ b/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: diff --git a/js/reducers/windows.js b/js/reducers/windows.js index 190bac3f..8de1f470 100644 --- a/js/reducers/windows.js +++ b/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, diff --git a/js/selectors.js b/js/selectors.js index 035a6d24..92d91345 100644 --- a/js/selectors.js +++ b/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; -};