From 6125a0b5d4d678d6821655c96e44c1944112696c Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Fri, 11 May 2018 19:47:24 -0700 Subject: [PATCH] Make generic window size management include playlist --- js/actionCreators.js | 8 ++++---- js/actionTypes.js | 3 +-- js/components/GenWindow/index.js | 20 ++++++------------- .../PlaylistWindow/PlaylistResizeTarget.js | 9 ++++++--- js/components/PlaylistWindow/index.js | 10 +++++++--- js/reducers/display.js | 8 ++------ js/reducers/windows.js | 10 +++++++--- js/selectors.js | 8 ++++++-- 8 files changed, 39 insertions(+), 37 deletions(-) diff --git a/js/actionCreators.js b/js/actionCreators.js index acb2b6de..62dc1f09 100644 --- a/js/actionCreators.js +++ b/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) { diff --git a/js/actionTypes.js b/js/actionTypes.js index be4b44c9..6390eebc 100644 --- a/js/actionTypes.js +++ b/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"; diff --git a/js/components/GenWindow/index.js b/js/components/GenWindow/index.js index 803e67e9..4187b9fd 100644 --- a/js/components/GenWindow/index.js +++ b/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 = ({
genWindowSizeChanged(windowId, size)} + setWindowSize={size => setGenWindowSize(windowId, size)} id={"gen-resize-target"} />
@@ -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); diff --git a/js/components/PlaylistWindow/PlaylistResizeTarget.js b/js/components/PlaylistWindow/PlaylistResizeTarget.js index d5f313d8..920e3aad 100644 --- a/js/components/PlaylistWindow/PlaylistResizeTarget.js +++ b/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); diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js index 924b9bea..82678bf9 100644 --- a/js/components/PlaylistWindow/index.js +++ b/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 }; diff --git a/js/reducers/display.js b/js/reducers/display.js index f5ee340d..f7467541 100644 --- a/js/reducers/display.js +++ b/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; } diff --git a/js/reducers/windows.js b/js/reducers/windows.js index 4ddddacb..af4863a9 100644 --- a/js/reducers/windows.js +++ b/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: { diff --git a/js/selectors.js b/js/selectors.js index 03b32f2e..8af0ae8b 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 } = 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) {