diff --git a/js/components/MainWindow/EqToggleButton.js b/js/components/MainWindow/EqToggleButton.js index 9da65931..06b26633 100644 --- a/js/components/MainWindow/EqToggleButton.js +++ b/js/components/MainWindow/EqToggleButton.js @@ -8,14 +8,14 @@ import { toggleWindow } from "../../actionCreators"; const EqToggleButton = props => (
); const mapStateToProps = state => ({ - equalizer: getWindowOpen(state, "equalizer") + getWindowOpen: getWindowOpen(state) }); const mapDispatchToProps = { diff --git a/js/components/MainWindow/PlaylistToggleButton.js b/js/components/MainWindow/PlaylistToggleButton.js index 416780d6..60078cf2 100644 --- a/js/components/MainWindow/PlaylistToggleButton.js +++ b/js/components/MainWindow/PlaylistToggleButton.js @@ -8,14 +8,14 @@ import { toggleWindow } from "../../actionCreators"; const PlaylistToggleButton = props => (
); const mapStateToProps = state => ({ - playlist: getWindowOpen(state, "playlist") + getWindowOpen: getWindowOpen(state) }); const mapDispatchToProps = { diff --git a/js/components/WindowManager.js b/js/components/WindowManager.js index a8248cf5..3f6b8b90 100644 --- a/js/components/WindowManager.js +++ b/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 = { diff --git a/js/config.js b/js/config.js index 7cc4fa56..e60aea9b 100644 --- a/js/config.js +++ b/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; diff --git a/js/index.js b/js/index.js index 046d46d2..b1d210db 100644 --- a/js/index.js +++ b/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"; } diff --git a/js/reducers/windows.js b/js/reducers/windows.js index 6e0d1966..34a1376d 100644 --- a/js/reducers/windows.js +++ b/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, diff --git a/js/selectors.js b/js/selectors.js index 28146d1b..f9c1e253 100644 --- a/js/selectors.js +++ b/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) { diff --git a/js/webamp.js b/js/webamp.js index b53a9707..9b7471fa 100644 --- a/js/webamp.js +++ b/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 }); });