Change how Milkdrop fits into visualization optionsNow: If the Milkdrop window is open, it's always enabled. Otherwise, the current value in the cycle is used.

js/actionTypes.ts

@@ -63,7 +63,6 @@ export const UPDATE_WINDOW_POSITIONS = "UPDATE_WINDOW_POSITIONS";
 export const WINDOW_SIZE_CHANGED = "WINDOW_SIZE_CHANGED";
 export const TOGGLE_WINDOW_SHADE_MODE = "TOGGLE_WINDOW_SHADE_MODE";
 export const LOADED = "LOADED";
-export const REGISTER_VISUALIZER = "REGISTER_VISUALIZER";
 export const SET_Z_INDEX = "SET_Z_INDEX";
 export const DISABLE_MARQUEE = "DISABLE_MARQUEE";
 export const SET_DUMMY_VIZ_DATA = "SET_DUMMY_VIZ_DATA";
@@ -77,3 +76,4 @@ 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";
+export const SET_VISUALIZER_STYLE = "SET_VISUALIZER_STYLE";

js/components/MilkdropWindow/index.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import screenfull from "screenfull";
 import ContextMenuWrapper from "../ContextMenuWrapper";
 import GenWindow from "../GenWindow";
-import { WINDOWS } from "../../constants";
+import { WINDOWS, VISUALIZERS } from "../../constants";
 import * as Selectors from "../../selectors";
 import * as Actions from "../../actionCreators";
 import MilkdropContextMenu from "./MilkdropContextMenu";
@@ -200,7 +200,8 @@ async function fetchPreset(presetUrl, { isButterchurn }) {
 }
 
 const mapStateToProps = state => ({
-  isEnabledVisualizer: Selectors.getVisualizerStyle(state) === WINDOWS.MILKDROP,
+  isEnabledVisualizer:
+    Selectors.getVisualizerStyle(state) === VISUALIZERS.MILKDROP,
   playing: Selectors.getMediaIsPlaying(state),
   desktop: Selectors.getMilkdropDesktopEnabled(state)
 });

js/constants.ts

@@ -58,7 +58,8 @@ export const DEFAULT_SKIN = baseSkin;
 export const VISUALIZERS = {
   OSCILLOSCOPE: "OSCILLOSCOPE",
   BAR: "BAR",
-  NONE: "NONE"
+  NONE: "NONE",
+  MILKDROP: "MILKDROP"
 };
 
 export const VISUALIZER_ORDER = [

js/reducers/display.ts

@@ -22,7 +22,6 @@ import {
   TOGGLE_VISUALIZER_STYLE,
   SET_PLAYLIST_SCROLL_POSITION,
   LOADED,
-  REGISTER_VISUALIZER,
   SET_Z_INDEX,
   DISABLE_MARQUEE,
   SET_DUMMY_VIZ_DATA,
@@ -34,7 +33,6 @@ import { DEFAULT_SKIN, VISUALIZER_ORDER } from "../constants";
 import { DisplaySerializedStateV1 } from "../serializedStates/v1Types";
 
 export interface DisplayState {
-  additionalVisualizers: Array<string>;
   visualizerStyle: number;
   doubled: boolean;
   llama: boolean;
@@ -166,13 +164,7 @@ const display = (
     case TOGGLE_VISUALIZER_STYLE:
       return {
         ...state,
-        visualizerStyle:
-          (state.visualizerStyle + 1) % getVisualizationOrder(state).length
-      };
-    case REGISTER_VISUALIZER:
-      return {
-        ...state,
-        additionalVisualizers: [action.id, ...state.additionalVisualizers]
+        visualizerStyle: (state.visualizerStyle + 1) % VISUALIZER_ORDER.length
       };
     case SET_PLAYLIST_SCROLL_POSITION:
       return { ...state, playlistScrollPosition: action.position };
@@ -218,14 +210,9 @@ export const getSerializedState = (
   };
 };
 
-export const getVisualizationOrder = (state: DisplayState): Array<string> => {
-  return [...state.additionalVisualizers, ...VISUALIZER_ORDER];
-};
-
 export const getVisualizerStyle = createSelector(
-  getVisualizationOrder,
-  state => state.visualizerStyle,
-  (visualizationOrder, visualizationStyle): string => {
-    return visualizationOrder[visualizationStyle];
+  (state: DisplayState) => state.visualizerStyle,
+  (visualizationStyle): string => {
+    return VISUALIZER_ORDER[visualizationStyle];
   }
 );

js/selectors.ts

@@ -17,7 +17,9 @@ import {
   WINDOW_RESIZE_SEGMENT_HEIGHT,
   WINDOW_WIDTH,
   MEDIA_STATUS,
-  MEDIA_TAG_REQUEST_STATUS
+  MEDIA_TAG_REQUEST_STATUS,
+  WINDOWS,
+  VISUALIZERS
 } from "./constants";
 import { createPlaylistURL } from "./playlistHtml";
 import * as fromTracks from "./reducers/tracks";
@@ -464,8 +466,13 @@ export const getSkinGenExColors = (state: AppState) => {
   return state.display.skinGenExColors;
 };
 
-export const getVisualizerStyle = (state: AppState) =>
-  fromDisplay.getVisualizerStyle(state.display);
+export const getVisualizerStyle = (state: AppState): string => {
+  const milkdrop = state.windows.genWindows[WINDOWS.MILKDROP];
+  if (milkdrop != null && milkdrop.open) {
+    return VISUALIZERS.MILKDROP;
+  }
+  return fromDisplay.getVisualizerStyle(state.display);
+};
 
 export const getVolume = (state: AppState) => state.media.volume;
 export const getBalance = (state: AppState) => state.media.balance;

js/types.ts

@@ -272,10 +272,6 @@ export type Action =
   | {
       type: "TOGGLE_VISUALIZER_STYLE";
     }
-  | {
-      type: "REGISTER_VISUALIZER";
-      id: string;
-    }
   | {
       type: "SET_PLAYLIST_SCROLL_POSITION";
       position: number;

js/webampLazy.tsx

@@ -17,7 +17,7 @@ import Media from "./media";
 import * as Selectors from "./selectors";
 import * as Actions from "./actionCreators";
 
-import { WINDOWS, LOAD_STYLE } from "./constants";
+import { LOAD_STYLE } from "./constants";
 import * as Utils from "./utils";
 
 import {
@@ -27,7 +27,6 @@ import {
   CLOSE_WINAMP,
   MINIMIZE_WINAMP,
   LOADED,
-  REGISTER_VISUALIZER,
   SET_Z_INDEX,
   CLOSE_REQUESTED,
   ENABLE_MEDIA_LIBRARY,
@@ -196,7 +195,6 @@ class Winamp {
     }
 
     if (options.__butterchurnOptions) {
-      this.store.dispatch({ type: REGISTER_VISUALIZER, id: WINDOWS.MILKDROP });
       this.store.dispatch({
         type: ENABLE_MILKDROP,
         open: options.__butterchurnOptions.butterchurnOpen