diff --git a/js/components/App.js b/js/components/App.js index 2f939283..6e199f3c 100644 --- a/js/components/App.js +++ b/js/components/App.js @@ -13,7 +13,6 @@ import WindowManager from "./WindowManager"; import MainWindow from "./MainWindow"; import PlaylistWindow from "./PlaylistWindow"; import EqualizerWindow from "./EqualizerWindow"; -import GenWindow from "./GenWindow"; import Skin from "./Skin"; import "../../css/webamp.css"; @@ -123,23 +122,16 @@ class App extends React.Component { } const Component = genWindowComponents[id]; return ( - this._gotRef(id, component)} + this._gotRef(id, component)} title={w.title} windowId={id} - > - {({ height, width }) => ( - this._emitter.on(id, listener)} - analyser={media.getAnalyser()} - isEnabledVisualizer={this.props.visualizerStyle === id} - width={width} - height={height} - playing={this.props.status === "PLAYING"} - close={() => this.props.closeWindow(id)} - /> - )} - + onFocusedKeyDown={listener => this._emitter.on(id, listener)} + analyser={media.getAnalyser()} + isEnabledVisualizer={this.props.visualizerStyle === id} + playing={this.props.status === "PLAYING"} + close={() => this.props.closeWindow(id)} + /> ); } }); diff --git a/js/components/MilkdropWindow/MilkdropContextMenu.js b/js/components/MilkdropWindow/MilkdropContextMenu.js index 4746dc4c..159156c4 100644 --- a/js/components/MilkdropWindow/MilkdropContextMenu.js +++ b/js/components/MilkdropWindow/MilkdropContextMenu.js @@ -8,6 +8,7 @@ const MilkdropContextMenu = props => ( label="Fullscreen" hotkey="Alt+Enter" /> +
diff --git a/js/components/MilkdropWindow/index.js b/js/components/MilkdropWindow/index.js index 7769cbd8..22d13187 100644 --- a/js/components/MilkdropWindow/index.js +++ b/js/components/MilkdropWindow/index.js @@ -1,6 +1,7 @@ import React from "react"; import screenfull from "screenfull"; import ContextMenuWrapper from "../ContextMenuWrapper"; +import GenWindow from "../GenWindow"; import MilkdropContextMenu from "./MilkdropContextMenu"; import Desktop from "./Desktop"; @@ -12,7 +13,7 @@ import "../../../css/milkdrop-window.css"; // This component is just responsible for loading dependencies. // This simplifies the inner component, by allowing -// it to alwasy assume that it has it's dependencies. +// it to alwasy assume that it has its dependencies. export default class PresetsLoader extends React.Component { constructor() { super(); @@ -24,6 +25,7 @@ export default class PresetsLoader extends React.Component { }; this._handleFullscreenChange = this._handleFullscreenChange.bind(this); this._handleRequestFullsceen = this._handleRequestFullsceen.bind(this); + this._enableDesktop = this._enableDesktop.bind(this); } async componentDidMount() { @@ -52,6 +54,10 @@ export default class PresetsLoader extends React.Component { this.setState({ isFullscreen: screenfull.isFullscreen }); } + _enableDesktop() { + this.setState({ desktop: true }); + } + _handleRequestFullsceen() { if (screenfull.enabled) { if (!screenfull.isFullscreen) { @@ -62,42 +68,55 @@ export default class PresetsLoader extends React.Component { } } - render() { + _renderMilkdrop({ width, height }) { const { butterchurn, presets } = this.state; const loaded = butterchurn != null && presets != null; - - let size = { width: this.props.width, height: this.props.height }; - if (this.state.isFullscreen) { - size = { width: screen.width, height: screen.height }; - } else if (this.state.desktop) { - size = { width: window.innerWidth, height: window.innerHeight }; - } - - const milkdrop = loaded && ( - - ); - return ( - ( - (this._wrapperNode = node)}> + {loaded && ( + )} + + ); + } + + render() { + if (this.state.isFullscreen) { + const size = { width: screen.width, height: screen.height }; + return this._renderMilkdrop(size); + } else if (this.state.desktop) { + const size = { width: window.innerWidth, height: window.innerHeight }; + return {this._renderMilkdrop(size)}; + } + + return ( + - (this._wrapperNode = node)}> - {this.state.desktop ? {milkdrop} : milkdrop} - - + {({ height, width }) => ( + ( + + )} + > + {this._renderMilkdrop({ width, height })} + + )} + ); } }