From c8b3dcc05a24ca8f94ddd2438c7ec6a09bfa90c8 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sun, 20 Jan 2019 13:29:10 -0800 Subject: [PATCH] Move presets to state --- js/actionCreators/index.ts | 1 + js/actionCreators/milkdrop.ts | 6 ++++++ js/actionTypes.ts | 1 + js/components/MilkdropWindow/Milkdrop.js | 8 ++++++-- js/components/MilkdropWindow/index.js | 13 ++++++------- js/reducers/milkdrop.ts | 9 +++++++-- js/selectors.ts | 4 ++++ js/types.ts | 4 ++++ 8 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 js/actionCreators/milkdrop.ts diff --git a/js/actionCreators/index.ts b/js/actionCreators/index.ts index 0899619c..edad6e15 100644 --- a/js/actionCreators/index.ts +++ b/js/actionCreators/index.ts @@ -94,6 +94,7 @@ export { scrollDownFourTracks, dragSelected } from "./playlist"; +export { initializePresets } from "./milkdrop"; import * as Selectors from "../selectors"; diff --git a/js/actionCreators/milkdrop.ts b/js/actionCreators/milkdrop.ts new file mode 100644 index 00000000..b4bfa4de --- /dev/null +++ b/js/actionCreators/milkdrop.ts @@ -0,0 +1,6 @@ +import { INITIALIZE_PRESETS } from "../actionTypes"; +import { Dispatchable } from "../types"; + +export function initializePresets(presets: any): Dispatchable { + return { type: INITIALIZE_PRESETS, presets }; +} diff --git a/js/actionTypes.ts b/js/actionTypes.ts index 3e4eb7cd..66abdd6b 100644 --- a/js/actionTypes.ts +++ b/js/actionTypes.ts @@ -77,3 +77,4 @@ export const ENABLE_MEDIA_LIBRARY = "ENABLE_MEDIA_LIBRARY"; export const ENABLE_MILKDROP = "ENABLE_MILKDROP"; export const SET_MILKDROP_DESKTOP = "SET_MILKDROP_DESKTOP"; export const SET_VISUALIZER_STYLE = "SET_VISUALIZER_STYLE"; +export const INITIALIZE_PRESETS = "INITIALIZE_PRESETS"; diff --git a/js/components/MilkdropWindow/Milkdrop.js b/js/components/MilkdropWindow/Milkdrop.js index 4cb65200..f6eececc 100644 --- a/js/components/MilkdropWindow/Milkdrop.js +++ b/js/components/MilkdropWindow/Milkdrop.js @@ -1,6 +1,6 @@ import React from "react"; import { connect } from "react-redux"; -import { getCurrentTrackDisplayName } from "../../selectors"; +import * as Selectors from "../../selectors"; import DropTarget from "../DropTarget"; import PresetOverlay from "./PresetOverlay"; @@ -239,6 +239,9 @@ class Milkdrop extends React.Component { } render() { + if (this.props.presets == null) { + return null; + } return ( this._handleDrop(e)}> {this.state.presetOverlay && ( @@ -271,7 +274,8 @@ class Milkdrop extends React.Component { } const mapStateToProps = state => ({ - trackTitle: getCurrentTrackDisplayName(state) + trackTitle: Selectors.getCurrentTrackDisplayName(state), + presets: Selectors.getPresets(state) }); export default connect(mapStateToProps)(Milkdrop); diff --git a/js/components/MilkdropWindow/index.js b/js/components/MilkdropWindow/index.js index fab40756..bd8442d8 100644 --- a/js/components/MilkdropWindow/index.js +++ b/js/components/MilkdropWindow/index.js @@ -23,7 +23,6 @@ class PresetsLoader extends React.Component { super(props); this.options = props.options; this.state = { - presets: null, initialPreset: null, butterchurn: null, isFullscreen: false @@ -50,11 +49,11 @@ class PresetsLoader extends React.Component { presetConverterEndpoint: this.options.presetConverterEndpoint, loadConvertPreset: this.options.loadConvertPreset }); + this.props.initializePresets(presets); this.setState({ butterchurn, - initialPreset, - presets + initialPreset }); screenfull.onchange(this._handleFullscreenChange); } @@ -78,8 +77,8 @@ class PresetsLoader extends React.Component { }; _renderMilkdrop(size) { - const { butterchurn, presets, initialPreset } = this.state; - const loaded = butterchurn != null && presets != null; + const { butterchurn, initialPreset } = this.state; + const loaded = butterchurn != null; const { width, height } = this.state.isFullscreen ? { width: screen.width, height: screen.height } : size; @@ -94,7 +93,6 @@ class PresetsLoader extends React.Component { width={width} height={height} isFullscreen={this.state.isFullscreen} - presets={presets} initialPreset={initialPreset} butterchurn={butterchurn} /> @@ -208,7 +206,8 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ closeWindow: () => dispatch(Actions.closeWindow(WINDOWS.MILKDROP)), - toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()) + toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()), + initializePresets: presets => dispatch(Actions.initializePresets(presets)) }); export default connect( diff --git a/js/reducers/milkdrop.ts b/js/reducers/milkdrop.ts index f30e6590..bfa477c5 100644 --- a/js/reducers/milkdrop.ts +++ b/js/reducers/milkdrop.ts @@ -1,12 +1,15 @@ import { Action } from "../types"; -import { SET_MILKDROP_DESKTOP } from "../actionTypes"; +import { SET_MILKDROP_DESKTOP, INITIALIZE_PRESETS } from "../actionTypes"; +import { bindActionCreators } from "redux"; export interface MilkdropState { desktop: boolean; + presets: any; } const defaultMilkdropState = { - desktop: false + desktop: false, + presets: null }; export const milkdrop = ( @@ -16,6 +19,8 @@ export const milkdrop = ( switch (action.type) { case SET_MILKDROP_DESKTOP: return { ...state, desktop: action.enabled }; + case INITIALIZE_PRESETS: + return { ...state, presets: action.presets }; default: return state; } diff --git a/js/selectors.ts b/js/selectors.ts index f688ed33..38e49963 100644 --- a/js/selectors.ts +++ b/js/selectors.ts @@ -612,3 +612,7 @@ export function getDebugData(state: AppState) { export function getMilkdropDesktopEnabled(state: AppState): boolean { return state.milkdrop.desktop; } + +export function getPresets(state: AppState): any { + return state.milkdrop.presets; +} diff --git a/js/types.ts b/js/types.ts index ef9d765e..88eb8c67 100644 --- a/js/types.ts +++ b/js/types.ts @@ -439,6 +439,10 @@ export type Action = | { type: "SET_MILKDROP_DESKTOP"; enabled: boolean; + } + | { + type: "INITIALIZE_PRESETS"; + presets: any; }; export type MediaTagRequestStatus =