From 748cd7052029a2e1fb511a3e285f58f562815256 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 18 Jun 2018 22:14:44 -0700
Subject: [PATCH] Add portal for Milkdrop Desktop mode

---
 css/milkdrop-window.css                 |  8 +++++
 js/components/MilkdropWindow/Desktop.js | 22 ++++++++++++++
 js/components/MilkdropWindow/index.js   | 39 ++++++++++++++++---------
 3 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 css/milkdrop-window.css
 create mode 100644 js/components/MilkdropWindow/Desktop.js

diff --git a/css/milkdrop-window.css b/css/milkdrop-window.css
new file mode 100644
index 00000000..f5638501
--- /dev/null
+++ b/css/milkdrop-window.css
@@ -0,0 +1,8 @@
+.webamp-desktop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+}
diff --git a/js/components/MilkdropWindow/Desktop.js b/js/components/MilkdropWindow/Desktop.js
new file mode 100644
index 00000000..ee5a1c71
--- /dev/null
+++ b/js/components/MilkdropWindow/Desktop.js
@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+export default class Desktop extends React.Component {
+  componentWillUnmount() {
+    document.body.removeChild(this._desktopNode);
+    this._desktopNode = null;
+  }
+
+  _getNode() {
+    if (this._desktopNode == null) {
+      this._desktopNode = document.createElement("div");
+      this._desktopNode.classList.add("webamp-desktop");
+      document.body.appendChild(this._desktopNode);
+    }
+    return this._desktopNode;
+  }
+
+  render() {
+    return ReactDOM.createPortal(this.props.children, this._getNode());
+  }
+}
diff --git a/js/components/MilkdropWindow/index.js b/js/components/MilkdropWindow/index.js
index 9d902454..7769cbd8 100644
--- a/js/components/MilkdropWindow/index.js
+++ b/js/components/MilkdropWindow/index.js
@@ -2,18 +2,26 @@ import React from "react";
 import screenfull from "screenfull";
 import ContextMenuWrapper from "../ContextMenuWrapper";
 import MilkdropContextMenu from "./MilkdropContextMenu";
+import Desktop from "./Desktop";
 
 import Presets from "./Presets";
 import Milkdrop from "./Milkdrop";
 import Background from "./Background";
 
+import "../../../css/milkdrop-window.css";
+
 // This component is just responsible for loading dependencies.
 // This simplifies the inner <Milkdrop /> component, by allowing
 // it to alwasy assume that it has it's dependencies.
 export default class PresetsLoader extends React.Component {
   constructor() {
     super();
-    this.state = { presets: null, butterchurn: null, isFullscreen: false };
+    this.state = {
+      presets: null,
+      butterchurn: null,
+      isFullscreen: false,
+      desktop: false
+    };
     this._handleFullscreenChange = this._handleFullscreenChange.bind(this);
     this._handleRequestFullsceen = this._handleRequestFullsceen.bind(this);
   }
@@ -58,9 +66,23 @@ export default class PresetsLoader extends React.Component {
     const { butterchurn, presets } = this.state;
     const loaded = butterchurn != null && presets != null;
 
-    const width = this.state.isFullscreen ? screen.width : this.props.width;
+    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 height = this.state.isFullscreen ? screen.height : this.props.height;
+    const milkdrop = loaded && (
+      <Milkdrop
+        {...this.props}
+        width={size.width}
+        height={size.height}
+        isFullscreen={this.state.isFullscreen}
+        presets={presets}
+        butterchurn={butterchurn}
+      />
+    );
 
     return (
       <ContextMenuWrapper
@@ -73,16 +95,7 @@ export default class PresetsLoader extends React.Component {
         )}
       >
         <Background innerRef={node => (this._wrapperNode = node)}>
-          {loaded && (
-            <Milkdrop
-              {...this.props}
-              width={width}
-              height={height}
-              isFullscreen={this.state.isFullscreen}
-              presets={presets}
-              butterchurn={butterchurn}
-            />
-          )}
+          {this.state.desktop ? <Desktop>{milkdrop}</Desktop> : milkdrop}
         </Background>
       </ContextMenuWrapper>
     );