Move presets to state

js/actionCreators/index.ts

@@ -94,6 +94,7 @@ export {
   scrollDownFourTracks,
   dragSelected
 } from "./playlist";
+export { initializePresets } from "./milkdrop";
 
 import * as Selectors from "../selectors";
 

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 };
+}

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";

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 (
       <DropTarget id="milkdrop-window" handleDrop={e => 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);

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(

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;
   }

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;
+}

js/types.ts

@@ -439,6 +439,10 @@ export type Action =
   | {
       type: "SET_MILKDROP_DESKTOP";
       enabled: boolean;
+    }
+  | {
+      type: "INITIALIZE_PRESETS";
+      presets: any;
     };
 
 export type MediaTagRequestStatus =