diff --git a/js/actionTypes.js b/js/actionTypes.js index b99df36c..87f62420 100644 --- a/js/actionTypes.js +++ b/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"; diff --git a/js/components/App.js b/js/components/App.js index 15195835..80bfaa61 100644 --- a/js/components/App.js +++ b/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 { 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, diff --git a/js/components/MilkdropWindow/Milkdrop.js b/js/components/MilkdropWindow/Milkdrop.js index 49fad48c..df6dcb8c 100644 --- a/js/components/MilkdropWindow/Milkdrop.js +++ b/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 { (this._canvasNode = node)} /> diff --git a/js/components/Visualizer.js b/js/components/Visualizer.js index 5e5a274d..a9ba2de2 100644 --- a/js/components/Visualizer.js +++ b/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 ( ({ 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, diff --git a/js/index.js b/js/index.js index 8689af2c..ed3d03f3 100644 --- a/js/index.js +++ b/js/index.js @@ -117,6 +117,7 @@ Raven.context(() => { __extraWindows.push({ id: "milkdrop", title: "Milkdrop", + isVisualizer: true, Component: MilkdropWindow }); __initialWindowLayout = { diff --git a/js/reducers/display.js b/js/reducers/display.js index 4aebc95f..d1332310 100644 --- a/js/reducers/display.js +++ b/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; diff --git a/js/selectors.js b/js/selectors.js index 205aa275..9d733fbc 100644 --- a/js/selectors.js +++ b/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); diff --git a/js/webamp.js b/js/webamp.js index 7bd20896..561e4899 100644 --- a/js/webamp.js +++ b/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,