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 {
/>
)}
+
);
}
}
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 && (
+
+ )}
+
);
}