diff --git a/js/components/MilkdropWindow/Milkdrop.js b/js/components/MilkdropWindow/Milkdrop.js index df6dcb8c..aac00ce9 100644 --- a/js/components/MilkdropWindow/Milkdrop.js +++ b/js/components/MilkdropWindow/Milkdrop.js @@ -1,7 +1,5 @@ import React from "react"; -import screenfull from "screenfull"; import PresetOverlay from "./PresetOverlay"; -import Background from "./Background"; const USER_PRESET_TRANSITION_SECONDS = 5.7; const PRESET_TRANSITION_SECONDS = 2.7; @@ -17,7 +15,6 @@ export default class Milkdrop extends React.Component { this._handleFocusedKeyboardInput = this._handleFocusedKeyboardInput.bind( this ); - this._handleFullscreenChange = this._handleFullscreenChange.bind(this); } async componentDidMount() { @@ -30,8 +27,6 @@ export default class Milkdrop extends React.Component { pixelRatio: window.devicePixelRatio || 1 } ); - this._setRendererSize(this.props.width, this.props.height); - this.visualizer.connectAudio(this.props.analyser); this.presetCycle = true; this.selectPreset(this.props.presets.getCurrent(), 0); @@ -48,7 +43,6 @@ export default class Milkdrop extends React.Component { this._unsubscribeFocusedKeyDown = this.props.onFocusedKeyDown( this._handleFocusedKeyboardInput ); - screenfull.onchange(this._handleFullscreenChange); } componentWillUnmount() { @@ -57,7 +51,6 @@ export default class Milkdrop extends React.Component { if (this._unsubscribeFocusedKeyDown) { this._unsubscribeFocusedKeyDown(); } - screenfull.off("change", this._handleFullscreenChange); } componentDidUpdate(prevProps) { @@ -65,7 +58,7 @@ export default class Milkdrop extends React.Component { this.props.width !== prevProps.width || this.props.height !== prevProps.height ) { - this._setRendererSize(this.props.width, this.props.height); + this.visualizer.setRendererSize(this.props.width, this.props.height); } } @@ -93,31 +86,6 @@ export default class Milkdrop extends React.Component { } } - _setRendererSize(width, height) { - this._canvasNode.width = width; - this._canvasNode.height = height; - this.visualizer.setRendererSize(width, height); - } - - _handleFullscreenChange() { - if (screenfull.isFullscreen) { - this._setRendererSize(window.innerWidth, window.innerHeight); - } else { - this._setRendererSize(this.props.width, this.props.height); - } - this.setState({ isFullscreen: screenfull.isFullscreen }); - } - - _handleRequestFullsceen() { - if (screenfull.enabled) { - if (!screenfull.isFullscreen) { - screenfull.request(this._wrapperNode); - } else { - screenfull.exit(); - } - } - } - _handleFocusedKeyboardInput(e) { switch (e.keyCode) { case 32: // spacebar @@ -167,21 +135,12 @@ export default class Milkdrop extends React.Component { } render() { - const width = this.state.isFullscreen - ? window.innerWidth - : this.props.width; - const height = this.state.isFullscreen - ? window.innerHeight - : this.props.height; return ( - (this._wrapperNode = node)} - onDoubleClick={() => this._handleRequestFullsceen()} - > + {this.state.presetOverlay && ( this.props.onFocusedKeyDown(listener)} @@ -192,6 +151,8 @@ export default class Milkdrop extends React.Component { /> )} (this._canvasNode = node)} /> - + ); } } diff --git a/js/components/MilkdropWindow/MilkdropContextMenu.js b/js/components/MilkdropWindow/MilkdropContextMenu.js index af0ac59c..4746dc4c 100644 --- a/js/components/MilkdropWindow/MilkdropContextMenu.js +++ b/js/components/MilkdropWindow/MilkdropContextMenu.js @@ -1,12 +1,14 @@ import React from "react"; -import { /*Hr, */ Node } from "../ContextMenu"; +import { Hr, Node } from "../ContextMenu"; const MilkdropContextMenu = props => ( - {/* - +
- */}
); diff --git a/js/components/MilkdropWindow/index.js b/js/components/MilkdropWindow/index.js index 8c4e5fd3..18c1e391 100644 --- a/js/components/MilkdropWindow/index.js +++ b/js/components/MilkdropWindow/index.js @@ -1,6 +1,8 @@ import React from "react"; +import screenfull from "screenfull"; import ContextMenuWrapper from "../ContextMenuWrapper"; import MilkdropContextMenu from "./MilkdropContextMenu"; + import Presets from "./Presets"; import Milkdrop from "./Milkdrop"; import Background from "./Background"; @@ -11,7 +13,9 @@ import Background from "./Background"; export default class PresetsLoader extends React.Component { constructor() { super(); - this.state = { presets: null, butterchurn: null }; + this.state = { presets: null, butterchurn: null, isFullscreen: false }; + this._handleFullscreenChange = this._handleFullscreenChange.bind(this); + this._handleRequestFullsceen = this._handleRequestFullsceen.bind(this); } async componentDidMount() { @@ -29,24 +33,61 @@ export default class PresetsLoader extends React.Component { getRest: loadNonMinimalPresets }) }); + screenfull.onchange(this._handleFullscreenChange); + } + + componentWillUnmount() { + screenfull.off("change", this._handleFullscreenChange); + } + + _handleFullscreenChange() { + this.setState({ isFullscreen: screenfull.isFullscreen }); + } + + _handleRequestFullsceen() { + if (screenfull.enabled) { + if (!screenfull.isFullscreen) { + screenfull.request(this._wrapperNode); + } else { + screenfull.exit(); + } + } } render() { const { butterchurn, presets } = this.state; const loaded = butterchurn != null && presets != null; + + const width = this.state.isFullscreen + ? window.innerWidth + : this.props.width; + + const height = this.state.isFullscreen + ? window.innerHeight + : this.props.height; + return ( } - > - {loaded ? ( - ( + - ) : ( - )} + > + (this._wrapperNode = node)}> + {loaded && ( + + )} + ); }