Allow milkdrop to participate in visualizer cycling

js/actionTypes.js

@@ -64,3 +64,4 @@ export const CHANNEL_COUNT_CHANGED = "CHANNEL_COUNT_CHANGED";
 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";

js/components/App.js

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { objectMap } from "../utils";
 import Emitter from "../emitter";
 import { WINDOWS } from "../constants";
+import { getVisualizerStyle } from "../selectors";
 import ContextMenuWrapper from "./ContextMenuWrapper";
 import MainContextMenu from "./MainWindow/MainContextMenu";
 import WindowManager from "./WindowManager";
@@ -118,6 +119,7 @@ class App extends React.Component {
                 <Component
                   onFocusedKeyDown={listener => this._emitter.on(id, listener)}
                   analyser={media.getAnalyser()}
+                  isEnabledVisualizer={this.props.visualizerStyle === id}
                   width={width}
                   height={height}
                   playing={this.props.status === "PLAYING"}
@@ -155,6 +157,7 @@ App.propTypes = {
 };
 
 const mapStateToProps = state => ({
+  visualizerStyle: getVisualizerStyle(state),
   status: state.media.status,
   focused: state.windows.focused,
   closed: state.display.closed,

js/components/MilkdropWindow/Milkdrop.js

@@ -38,7 +38,7 @@ export default class Milkdrop extends React.Component {
 
     // Kick off the animation loop
     const loop = () => {
-      if (this.props.playing) {
+      if (this.props.playing && this.props.isEnabledVisualizer) {
         this.visualizer.render();
       }
       this._animationFrameRequest = window.requestAnimationFrame(loop);
@@ -194,7 +194,8 @@ export default class Milkdrop extends React.Component {
         <canvas
           style={{
             height: "100%",
-            width: "100%"
+            width: "100%",
+            display: this.props.isEnabledVisualizer ? "block" : "none"
           }}
           ref={node => (this._canvasNode = node)}
         />

js/components/Visualizer.js

@@ -2,8 +2,8 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { toggleVisualizerStyle } from "../actionCreators";
-import { getWindowShade } from "../selectors";
-import { VISUALIZER_ORDER, VISUALIZERS } from "../constants";
+import { getWindowShade, getVisualizerStyle } from "../selectors";
+import { VISUALIZERS } from "../constants";
 
 const PIXEL_DENSITY = 2;
 const BAR_WIDTH = 6;
@@ -228,7 +228,6 @@ class Visualizer extends React.Component {
   }
 
   render() {
-    console.log(this.props.style);
     const { width, height } = this.props;
     return (
       <canvas
@@ -245,7 +244,7 @@ class Visualizer extends React.Component {
 
 const mapStateToProps = state => ({
   colors: state.display.skinColors,
-  style: VISUALIZER_ORDER[state.display.visualizerStyle],
+  style: getVisualizerStyle(state),
   width: getWindowShade(state, "main") ? 38 : 76,
   height: getWindowShade(state, "main") ? 5 : 16,
   status: state.media.status,

js/index.js

@@ -117,6 +117,7 @@ Raven.context(() => {
     __extraWindows.push({
       id: "milkdrop",
       title: "Milkdrop",
+      isVisualizer: true,
       Component: MilkdropWindow
     });
     __initialWindowLayout = {

js/reducers/display.js

@@ -1,3 +1,5 @@
+import { createSelector } from "reselect";
+
 import {
   CLOSE_WINAMP,
   SET_SKIN_DATA,
@@ -8,10 +10,23 @@ import {
   TOGGLE_LLAMA_MODE,
   TOGGLE_VISUALIZER_STYLE,
   SET_PLAYLIST_SCROLL_POSITION,
-  LOADED
+  LOADED,
+  REGISTER_VISUALIZER
 } from "../actionTypes";
 import { DEFAULT_SKIN, VISUALIZER_ORDER } from "../constants";
 
+export const getVisualizationOrder = state => {
+  return [...state.additionalVisualizers, ...VISUALIZER_ORDER];
+};
+
+export const getVisualizerStyle = createSelector(
+  getVisualizationOrder,
+  state => state.visualizerStyle,
+  (visualizationOrder, visualizationStyle) => {
+    return visualizationOrder[visualizationStyle];
+  }
+);
+
 const defaultDisplayState = {
   doubled: false,
   marqueeStep: 0,
@@ -26,7 +41,8 @@ const defaultDisplayState = {
   skinRegion: {},
   visualizerStyle: 0, // Index into VISUALIZER_ORDER
   playlistScrollPosition: 0,
-  skinGenLetterWidths: null // TODO: Get the default value for this?
+  skinGenLetterWidths: null, // TODO: Get the default value for this?
+  additionalVisualizers: []
 };
 
 const display = (state = defaultDisplayState, action) => {
@@ -59,7 +75,13 @@ const display = (state = defaultDisplayState, action) => {
     case TOGGLE_VISUALIZER_STYLE:
       return {
         ...state,
-        visualizerStyle: (state.visualizerStyle + 1) % VISUALIZER_ORDER.length
+        visualizerStyle:
+          (state.visualizerStyle + 1) % getVisualizationOrder(state).length
+      };
+    case REGISTER_VISUALIZER:
+      return {
+        ...state,
+        additionalVisualizers: [action.id, ...state.additionalVisualizers]
       };
     case SET_PLAYLIST_SCROLL_POSITION:
       return { ...state, playlistScrollPosition: action.position };
@@ -67,5 +89,4 @@ const display = (state = defaultDisplayState, action) => {
       return state;
   }
 };
-
 export default display;

js/selectors.js

@@ -15,6 +15,7 @@ import {
 } from "./constants";
 import { createPlaylistURL } from "./playlistHtml";
 import * as fromPlaylist from "./reducers/playlist";
+import * as fromDisplay from "./reducers/display";
 import { generateGraph } from "./resizeUtils";
 
 export const getEqfData = state => {
@@ -320,3 +321,6 @@ export const getSkinPlaylistStyle = state => {
     }
   );
 };
+
+export const getVisualizerStyle = state =>
+  fromDisplay.getVisualizerStyle(state.display);

js/webamp.js

@@ -24,7 +24,8 @@ import {
   MINIMIZE_WINAMP,
   ADD_GEN_WINDOW,
   UPDATE_WINDOW_POSITIONS,
-  LOADED
+  LOADED,
+  REGISTER_VISUALIZER
 } from "./actionTypes";
 import Emitter from "./emitter";
 
@@ -98,6 +99,12 @@ class Winamp {
       }));
     }
 
+    __extraWindows.forEach(genWindow => {
+      if (genWindow.isVisualizer) {
+        this.store.dispatch({ type: REGISTER_VISUALIZER, id: genWindow.id });
+      }
+    });
+
     this.genWindows.forEach(genWindow => {
       this.store.dispatch({
         type: ADD_GEN_WINDOW,