From 54a267efbd49932f00d35bf2a9ba30989f179b72 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Mon, 31 Dec 2018 15:12:48 -0800 Subject: [PATCH] Move Milkdrop desktop mode to Redux --- js/actionCreators/index.ts | 20 +++++++++++++++-- js/actionTypes.ts | 1 + js/components/MilkdropWindow/index.js | 31 +++++++++------------------ js/reducers/index.ts | 4 +++- js/reducers/milkdrop.ts | 24 +++++++++++++++++++++ js/selectors.ts | 4 ++++ js/types.ts | 8 ++++++- 7 files changed, 67 insertions(+), 25 deletions(-) create mode 100644 js/reducers/milkdrop.ts diff --git a/js/actionCreators/index.ts b/js/actionCreators/index.ts index f81b2273..e48a79d7 100644 --- a/js/actionCreators/index.ts +++ b/js/actionCreators/index.ts @@ -8,10 +8,12 @@ import { SET_FOCUS, UNSET_FOCUS, LOAD_SERIALIZED_STATE, - LOAD_DEFAULT_SKIN + LOAD_DEFAULT_SKIN, + SET_MILKDROP_DESKTOP } from "../actionTypes"; +import { WINDOWS } from "../constants"; import { Dispatchable } from "../types"; -import { ensureWindowsAreOnScreen } from "./windows"; +import { ensureWindowsAreOnScreen, showWindow, hideWindow } from "./windows"; import { SerializedStateV1 } from "../serializedStates/v1Types"; export { @@ -93,6 +95,8 @@ export { dragSelected } from "./playlist"; +import * as Selectors from "../selectors"; + export function close(): Dispatchable { return dispatch => { // TODO: This could probably be improved by adding a "PREVENT_CLOSE" action @@ -142,3 +146,15 @@ export function loadSerializedState( export function loadDefaultSkin() { return { type: LOAD_DEFAULT_SKIN }; } + +export function toggleMilkdropDesktop(): Dispatchable { + return (dispatch, getState) => { + if (Selectors.getMilkdropDesktopEnabled(getState())) { + dispatch(showWindow(WINDOWS.MILKDROP)); + dispatch({ type: SET_MILKDROP_DESKTOP, enabled: false }); + } else { + dispatch(hideWindow(WINDOWS.MILKDROP)); + dispatch({ type: SET_MILKDROP_DESKTOP, enabled: true }); + } + }; +} diff --git a/js/actionTypes.ts b/js/actionTypes.ts index 9783752f..4d93a3b7 100644 --- a/js/actionTypes.ts +++ b/js/actionTypes.ts @@ -76,3 +76,4 @@ export const BROWSER_WINDOW_SIZE_CHANGED = "BROWSER_WINDOW_SIZE_CHANGED"; export const LOAD_DEFAULT_SKIN = "LOAD_DEFAULT_SKIN"; export const ENABLE_MEDIA_LIBRARY = "ENABLE_MEDIA_LIBRARY"; export const ENABLE_MILKDROP = "ENABLE_MILKDROP"; +export const SET_MILKDROP_DESKTOP = "SET_MILKDROP_DESKTOP"; diff --git a/js/components/MilkdropWindow/index.js b/js/components/MilkdropWindow/index.js index 16e0b7f4..b17047e0 100644 --- a/js/components/MilkdropWindow/index.js +++ b/js/components/MilkdropWindow/index.js @@ -26,13 +26,12 @@ class PresetsLoader extends React.Component { presets: null, initialPreset: null, butterchurn: null, - isFullscreen: false, - desktop: false + isFullscren: false }; } isHidden() { - return this.state.desktop; + return this.props.desktop; } async componentDidMount() { @@ -68,16 +67,6 @@ class PresetsLoader extends React.Component { this.setState({ isFullscreen: screenfull.isFullscreen }); }; - _toggleDesktop = () => { - if (this.state.desktop) { - this.props.showWindow(); - this.setState({ desktop: false }); - } else { - this.props.hideWindow(); - this.setState({ desktop: true }); - } - }; - _handleRequestFullsceen = () => { if (screenfull.enabled) { if (!screenfull.isFullscreen) { @@ -115,7 +104,7 @@ class PresetsLoader extends React.Component { } render() { - if (this.state.desktop) { + if (this.props.desktop) { const size = { width: window.innerWidth, height: window.innerHeight }; return ( )} > @@ -143,8 +132,8 @@ class PresetsLoader extends React.Component { )} > @@ -212,13 +201,13 @@ async function fetchPreset(presetUrl, { isButterchurn }) { const mapStateToProps = state => ({ isEnabledVisualizer: Selectors.getVisualizerStyle(state) === WINDOWS.MILKDROP, - playing: Selectors.getMediaIsPlaying(state) + playing: Selectors.getMediaIsPlaying(state), + desktop: Selectors.getMilkdropDesktopEnabled(state) }); const mapDispatchToProps = dispatch => ({ closeWindow: () => dispatch(Actions.closeWindow(WINDOWS.MILKDROP)), - hideWindow: () => dispatch(Actions.hideWindow(WINDOWS.MILKDROP)), - showWindow: () => dispatch(Actions.showWindow(WINDOWS.MILKDROP)) + toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()) }); export default connect( diff --git a/js/reducers/index.ts b/js/reducers/index.ts index 86fd2118..ecefdae6 100644 --- a/js/reducers/index.ts +++ b/js/reducers/index.ts @@ -10,6 +10,7 @@ import equalizer from "./equalizer"; import network from "./network"; import settings from "./settings"; import tracks from "./tracks"; +import milkdrop from "./milkdrop"; const reducer = combineReducers({ userInput, @@ -20,7 +21,8 @@ const reducer = combineReducers({ playlist, media, network, - tracks + tracks, + milkdrop }); export default reducer; diff --git a/js/reducers/milkdrop.ts b/js/reducers/milkdrop.ts new file mode 100644 index 00000000..f30e6590 --- /dev/null +++ b/js/reducers/milkdrop.ts @@ -0,0 +1,24 @@ +import { Action } from "../types"; +import { SET_MILKDROP_DESKTOP } from "../actionTypes"; + +export interface MilkdropState { + desktop: boolean; +} + +const defaultMilkdropState = { + desktop: false +}; + +export const milkdrop = ( + state: MilkdropState = defaultMilkdropState, + action: Action +): MilkdropState => { + switch (action.type) { + case SET_MILKDROP_DESKTOP: + return { ...state, desktop: action.enabled }; + default: + return state; + } +}; + +export default milkdrop; diff --git a/js/selectors.ts b/js/selectors.ts index 6950f829..1fca5d6a 100644 --- a/js/selectors.ts +++ b/js/selectors.ts @@ -602,3 +602,7 @@ export function getDebugData(state: AppState) { } }; } + +export function getMilkdropDesktopEnabled(state: AppState): boolean { + return state.milkdrop.desktop; +} diff --git a/js/types.ts b/js/types.ts index fdc0b5af..f253607d 100644 --- a/js/types.ts +++ b/js/types.ts @@ -6,6 +6,7 @@ import { DisplayState } from "./reducers/display"; import { WindowsState, WindowPositions } from "./reducers/windows"; import { EqualizerState } from "./reducers/equalizer"; import { NetworkState } from "./reducers/network"; +import { MilkdropState } from "./reducers/milkdrop"; import { SerializedStateV1 } from "./serializedStates/v1Types"; import { TracksState } from "./reducers/tracks"; import { IAudioMetadata, IOptions } from "music-metadata-browser"; @@ -438,7 +439,11 @@ export type Action = | { type: "BROWSER_WINDOW_SIZE_CHANGED"; height: number; width: number } | { type: "LOAD_DEFAULT_SKIN" } | { type: "ENABLE_MEDIA_LIBRARY" } - | { type: "ENABLE_MILKDROP"; open: boolean }; + | { type: "ENABLE_MILKDROP"; open: boolean } + | { + type: "SET_MILKDROP_DESKTOP"; + enabled: boolean; + }; export type MediaTagRequestStatus = | "INITIALIZED" @@ -543,6 +548,7 @@ export interface AppState { media: MediaState; network: NetworkState; tracks: TracksState; + milkdrop: MilkdropState; } /**