Move Milkdrop desktop mode to Redux

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

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

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 (
         <ContextMenuWrapper
@@ -124,8 +113,8 @@ class PresetsLoader extends React.Component {
             <MilkdropContextMenu
               close={this.props.closeWindow}
               toggleFullscreen={this._handleRequestFullsceen}
-              desktopMode={this.state.desktop}
-              toggleDesktop={this._toggleDesktop}
+              desktopMode={this.props.desktop}
+              toggleDesktop={this.props.toggleDesktop}
             />
           )}
         >
@@ -143,8 +132,8 @@ class PresetsLoader extends React.Component {
               <MilkdropContextMenu
                 close={this.props.closeWindow}
                 toggleFullscreen={this._handleRequestFullsceen}
-                desktopMode={this.state.desktop}
-                toggleDesktop={this._toggleDesktop}
+                desktopMode={this.props.desktop}
+                toggleDesktop={this.props.toggleDesktop}
               />
             )}
           >
@@ -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(

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<AppState, Action>({
   userInput,
@@ -20,7 +21,8 @@ const reducer = combineReducers<AppState, Action>({
   playlist,
   media,
   network,
-  tracks
+  tracks,
+  milkdrop
 });
 
 export default reducer;

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;

js/selectors.ts

@@ -602,3 +602,7 @@ export function getDebugData(state: AppState) {
     }
   };
 }
+
+export function getMilkdropDesktopEnabled(state: AppState): boolean {
+  return state.milkdrop.desktop;
+}

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