diff --git a/js/actionTypes.ts b/js/actionTypes.ts index 4d93a3b7..3e4eb7cd 100644 --- a/js/actionTypes.ts +++ b/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"; diff --git a/js/components/MilkdropWindow/index.js b/js/components/MilkdropWindow/index.js index 1cc89556..fab40756 100644 --- a/js/components/MilkdropWindow/index.js +++ b/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) }); diff --git a/js/constants.ts b/js/constants.ts index 4683db7a..7cef74da 100644 --- a/js/constants.ts +++ b/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 = [ diff --git a/js/reducers/display.ts b/js/reducers/display.ts index 09726e27..835d9daa 100644 --- a/js/reducers/display.ts +++ b/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; 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 => { - 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]; } ); diff --git a/js/selectors.ts b/js/selectors.ts index 1fca5d6a..b9ff0c04 100644 --- a/js/selectors.ts +++ b/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; diff --git a/js/types.ts b/js/types.ts index f253607d..18df674e 100644 --- a/js/types.ts +++ b/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; diff --git a/js/webampLazy.tsx b/js/webampLazy.tsx index 67ba33d7..13769964 100644 --- a/js/webampLazy.tsx +++ b/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