From 730d676801f8ed71072dbbed92f174d0f88f52f2 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 21 Jun 2018 20:59:31 -0700
Subject: [PATCH] Center within the rendered node

---
 css/page.css                   |  8 ++++++++
 docs/usage.md                  | 16 +++++++++-------
 js/components/WindowManager.js | 27 ++++++---------------------
 js/webamp.js                   |  2 +-
 4 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/css/page.css b/css/page.css
index 4c69dca8..e7c1e17c 100644
--- a/css/page.css
+++ b/css/page.css
@@ -79,6 +79,14 @@ body {
     background-size: 100%; /* Image is 2x size for retina displays */
 }
 
+#app {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
 #app #loading {
     color: white;
     text-align: center;
diff --git a/docs/usage.md b/docs/usage.md
index f0b850f2..e8ea8e8e 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -6,8 +6,8 @@ Here's how to use Webamp in your own project. If you get stuck, or need help, pl
 
 If you would like to look as some examples check out the [examples directory](../examples/) were you will find:
 
-* [Minimal](../examples/minimal/) - An example that just uses a `<script>` tag that points to a CDN. No install required.
-* [Webpack](../examples/webpack/) - An example that installs Webamp via NPM, and bundles it into an applicaiton using Webpack.
+- [Minimal](../examples/minimal/) - An example that just uses a `<script>` tag that points to a CDN. No install required.
+- [Webpack](../examples/webpack/) - An example that installs Webamp via NPM, and bundles it into an applicaiton using Webpack.
 
 Each example has a README which explains it in more detail.
 
@@ -186,6 +186,8 @@ webamp.setTracksToPlay([
 
 Webamp will wait until it has fetch the skin and fully parsed it, and then render itself into the given container. A promise is returned which will resolve after the render is complete.
 
+**Note:** as of version 1.1.0, Webamp will attempt to center itself within this container.
+
 ```JavaScript
 const container = document.getElementById('winamp-container');
 webamp.renderWhenReady(container).then(() => {
@@ -221,11 +223,11 @@ unsubscribe();
 
 ## Notes
 
-* Internet Explorer is not supported.
-* Webamp injects CSS into the page. The CSS is namespaced (every CSS selector is prefixed with `#webamp`), so it should not interfere with anything on the host page.
-* Webamp HTML contains somewhat generic IDs and class names. If you have CSS on your page that is not namespaced, it may accidently be applied to Webamp. If this happens please reach out. I may be able to resolve it.
-* Skin and audio URLs are subject to [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). Please ensure they are either served from the same domain, or that the other domain is served with the correct headers.
-* Please reach out to me. I'd love to help you set it up, and understand how it's being used. I plan to expand this API as I learn how people want to use it.
+- Internet Explorer is not supported.
+- Webamp injects CSS into the page. The CSS is namespaced (every CSS selector is prefixed with `#webamp`), so it should not interfere with anything on the host page.
+- Webamp HTML contains somewhat generic IDs and class names. If you have CSS on your page that is not namespaced, it may accidently be applied to Webamp. If this happens please reach out. I may be able to resolve it.
+- Skin and audio URLs are subject to [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). Please ensure they are either served from the same domain, or that the other domain is served with the correct headers.
+- Please reach out to me. I'd love to help you set it up, and understand how it's being used. I plan to expand this API as I learn how people want to use it.
 
 ```
 
diff --git a/js/components/WindowManager.js b/js/components/WindowManager.js
index a0b16fbc..9a7bcae8 100644
--- a/js/components/WindowManager.js
+++ b/js/components/WindowManager.js
@@ -35,27 +35,12 @@ class WindowManager extends React.Component {
   }
 
   centerWindows() {
-    let offsetLeft = 0;
-    let offsetTop = 0;
-    // https://j11y.io/snippets/get-document-height-cross-browser/
-    let width = Math.max(
-      document.documentElement.scrollWidth,
-      document.documentElement.clientWidth,
-      document.documentElement.offsetWidth
-    );
-    let height = Math.max(
-      document.documentElement.scrollHeight,
-      document.documentElement.clientHeight,
-      document.documentElement.offsetHeight
-    );
-
     const { container } = this.props;
-    if (container != null) {
-      offsetLeft = container.offsetLeft;
-      offsetTop = container.offsetTop;
-      width = container.scrollWidth;
-      height = container.scrollHeight;
-    }
+
+    const offsetLeft = container.offsetLeft;
+    const offsetTop = container.offsetTop;
+    const width = container.scrollWidth;
+    const height = container.scrollHeight;
 
     if (this.props.windowsInfo.some(w => w.x == null || w.y == null)) {
       // Some windows do not have an initial position, so we'll come up
@@ -208,7 +193,7 @@ class WindowManager extends React.Component {
 
 WindowManager.propTypes = {
   windows: PropTypes.object.isRequired,
-  container: PropTypes.instanceOf(Element)
+  container: PropTypes.instanceOf(Element).isRequired
 };
 
 const mapStateToProps = state => ({
diff --git a/js/webamp.js b/js/webamp.js
index 561e4899..2fc6065b 100644
--- a/js/webamp.js
+++ b/js/webamp.js
@@ -189,7 +189,7 @@ class Winamp {
       <Provider store={this.store}>
         <App
           media={this.media}
-          container={this.options.container}
+          container={node}
           filePickers={this.options.filePickers}
           genWindowComponents={genWindowComponents}
         />