Enable Butterchurn!

js/components/MainWindow/EqToggleButton.js

@@ -8,14 +8,14 @@ import { toggleWindow } from "../../actionCreators";
 const EqToggleButton = props => (
   <div
     id="equalizer-button"
-    className={classnames({ selected: props.equalizer })}
+    className={classnames({ selected: props.getWindowOpen("equalizer") })}
     onClick={props.handleClick}
     title="Toggle Graphical Equalizer"
   />
 );
 
 const mapStateToProps = state => ({
-  equalizer: getWindowOpen(state, "equalizer")
+  getWindowOpen: getWindowOpen(state)
 });
 
 const mapDispatchToProps = {

js/components/MainWindow/PlaylistToggleButton.js

@@ -8,14 +8,14 @@ import { toggleWindow } from "../../actionCreators";
 const PlaylistToggleButton = props => (
   <div
     id="playlist-button"
-    className={classnames({ selected: props.playlist })}
+    className={classnames({ selected: props.getWindowOpen("playlist") })}
     onClick={props.handleClick}
     title="Toggle Playlist Editor"
   />
 );
 
 const mapStateToProps = state => ({
-  playlist: getWindowOpen(state, "playlist")
+  getWindowOpen: getWindowOpen(state)
 });
 
 const mapDispatchToProps = {

js/components/WindowManager.js

@@ -11,7 +11,7 @@ import {
   applyDiff,
   applyMultipleDiffs
 } from "../snapUtils";
-import { getWindowsInfo, getWindowHidden } from "../selectors";
+import { getWindowsInfo, getWindowHidden, getWindowOpen } from "../selectors";
 import { updateWindowPositions } from "../actionCreators";
 import { WINDOW_HEIGHT, WINDOW_WIDTH } from "../constants";
 import { calculateBoundingBox } from "../utils";
@@ -61,9 +61,9 @@ class WindowManager extends React.Component {
     } else {
       // A layout has been suplied. We will compute the bounding box and
       // center the given layout.
-      const info = this.props.windowsInfo;
-
-      const bounding = calculateBoundingBox(info);
+      const bounding = calculateBoundingBox(
+        this.props.windowsInfo.filter(w => this.props.getWindowOpen(w.key))
+      );
 
       const boxHeight = bounding.bottom - bounding.top;
       const boxWidth = bounding.right - bounding.left;
@@ -73,7 +73,7 @@ class WindowManager extends React.Component {
         y: offsetTop + (height - boxHeight) / 2
       };
 
-      const newPositions = info.reduce(
+      const newPositions = this.props.windowsInfo.reduce(
         (pos, w) => ({ ...pos, [w.key]: { x: move.x + w.x, y: move.y + w.y } }),
         {}
       );
@@ -216,7 +216,8 @@ WindowManager.propTypes = {
 
 const mapStateToProps = state => ({
   windowsInfo: getWindowsInfo(state),
-  getWindowHidden: getWindowHidden(state)
+  getWindowHidden: getWindowHidden(state),
+  getWindowOpen: getWindowOpen(state)
 });
 
 const mapDispatchToProps = {

js/config.js

@@ -134,4 +134,3 @@ export const initialTracks = config.initialTracks || [
 
 export const disableMarquee = config.disableMarquee || false;
 export const initialState = config.initialState || undefined;
-export const milkdrop = config.milkdrop || false;

js/index.js

@@ -32,7 +32,6 @@ import {
   skinUrl as configSkinUrl,
   initialTracks,
   initialState,
-  milkdrop,
   disableMarquee
 } from "./config";
 
@@ -45,6 +44,8 @@ const NOISY_ACTION_TYPES = new Set([
   SET_BAND_VALUE
 ]);
 
+const MIN_MILKDROP_WIDTH = 725;
+
 let screenshot = false;
 let skinUrl = configSkinUrl;
 if ("URLSearchParams" in window) {
@@ -128,20 +129,36 @@ Raven.context(() => {
   }
   const __extraWindows = [];
   let __initialWindowLayout = {};
-  if (milkdrop && isButterchurnSupported()) {
+
+  if (isButterchurnSupported()) {
+    const startWithMilkdropHidden =
+      document.body.clientWidth < MIN_MILKDROP_WIDTH ||
+      skinUrl != null ||
+      screenshot;
+
     __extraWindows.push({
       id: "milkdrop",
       title: "Milkdrop",
       isVisualizer: true,
-      Component: MilkdropWindow
+      Component: MilkdropWindow,
+      open: !startWithMilkdropHidden
     });
-    // TODO: Pick a layout dependent upon the window size.
-    __initialWindowLayout = {
-      main: { position: { x: 0, y: 0 } },
-      equalizer: { position: { x: 0, y: 116 } },
-      playlist: { position: { x: 0, y: 232 }, size: [0, 4] },
-      milkdrop: { position: { x: 275, y: 0 }, size: [7, 12] }
-    };
+
+    if (startWithMilkdropHidden) {
+      __initialWindowLayout = {
+        main: { position: { x: 0, y: 0 } },
+        equalizer: { position: { x: 0, y: 116 } },
+        playlist: { position: { x: 0, y: 232 }, size: [0, 0] },
+        milkdrop: { position: { x: 0, y: 348 }, size: [0, 0] }
+      };
+    } else {
+      __initialWindowLayout = {
+        main: { position: { x: 0, y: 0 } },
+        equalizer: { position: { x: 0, y: 116 } },
+        playlist: { position: { x: 0, y: 232 }, size: [0, 4] },
+        milkdrop: { position: { x: 275, y: 0 }, size: [7, 12] }
+      };
+    }
 
     document.getElementById("butterchurn-share").style.display = "flex";
   }

js/reducers/windows.js

@@ -116,7 +116,7 @@ const windows = (state = defaultWindowsState, action) => {
           ...state.genWindows,
           [action.windowId]: {
             title: action.title,
-            open: true,
+            open: action.open,
             hidden: false,
             size: [0, 0],
             canShade: false,

js/selectors.js

@@ -271,8 +271,8 @@ export function getWindowSize(state, windowId) {
   return state.windows.genWindows[windowId].size;
 }
 
-export function getWindowOpen(state, windowId) {
-  return state.windows.genWindows[windowId].open;
+export function getWindowOpen(state) {
+  return windowId => state.windows.genWindows[windowId].open;
 }
 
 export function getWindowShade(state, windowId) {

js/webamp.js

@@ -115,7 +115,8 @@ class Winamp {
       this.store.dispatch({
         type: ADD_GEN_WINDOW,
         windowId: genWindow.id,
-        title: genWindow.title
+        title: genWindow.title,
+        open: genWindow.open
       });
     });