Hoist fullscreen up a level

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 (
-      <Background
-        innerRef={node => (this._wrapperNode = node)}
-        onDoubleClick={() => this._handleRequestFullsceen()}
-      >
+      <React.Fragment>
         {this.state.presetOverlay && (
           <PresetOverlay
-            width={width}
-            height={height}
+            width={this.props.width}
+            height={this.props.height}
             presetKeys={this.props.presets.getKeys()}
             currentPreset={this.state.currentPreset}
             onFocusedKeyDown={listener => this.props.onFocusedKeyDown(listener)}
@@ -192,6 +151,8 @@ export default class Milkdrop extends React.Component {
           />
         )}
         <canvas
+          height={this.props.height}
+          width={this.props.width}
           style={{
             height: "100%",
             width: "100%",
@@ -199,7 +160,7 @@ export default class Milkdrop extends React.Component {
           }}
           ref={node => (this._canvasNode = node)}
         />
-      </Background>
+      </React.Fragment>
     );
   }
 }

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 => (
   <React.Fragment>
-    {/*
-    <Node onClick={props.fullscreen} label="Fullscreen" />
+    <Node
+      onClick={props.toggleFullscreen}
+      label="Fullscreen"
+      hotkey="Alt+Enter"
+    />
     <Hr />
-      */}
     <Node onClick={props.close} label="Quit" />
   </React.Fragment>
 );

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 (
       <ContextMenuWrapper
-        renderContents={() => <MilkdropContextMenu close={this.props.close} />}
-      >
-        {loaded ? (
-          <Milkdrop
-            {...this.props}
-            presets={presets}
-            butterchurn={butterchurn}
+        onDoubleClick={this._handleRequestFullsceen}
+        renderContents={() => (
+          <MilkdropContextMenu
+            close={this.props.close}
+            toggleFullscreen={this._handleRequestFullsceen}
           />
-        ) : (
-          <Background />
         )}
+      >
+        <Background innerRef={node => (this._wrapperNode = node)}>
+          {loaded && (
+            <Milkdrop
+              {...this.props}
+              width={width}
+              height={height}
+              isFullscreen={this.state.isFullscreen}
+              presets={presets}
+              butterchurn={butterchurn}
+            />
+          )}
+        </Background>
       </ContextMenuWrapper>
     );
   }