From 1853bf0352bd216c5332fb9719be3b02cd51711b Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 27 Jul 2016 22:33:34 -0700
Subject: [PATCH] Render the main window DOM with React (#163)

Because we pass it no props, we can safely manipulate it's DOM state, content
that it won't get rerndered out from underneath us.
---
 css/main-window.css   | 10 +++----
 js/MainWindow.jsx     | 67 +++++++++++++++++++++++++++++++++++++++++++
 js/Marquee.jsx        |  2 +-
 js/main-window-dom.js | 66 ------------------------------------------
 js/main-window.js     | 33 ---------------------
 js/main.js            | 32 +++++++++------------
 6 files changed, 86 insertions(+), 124 deletions(-)
 create mode 100644 js/MainWindow.jsx
 delete mode 100644 js/main-window-dom.js

diff --git a/css/main-window.css b/css/main-window.css
index 69a5206b..f3ee730d 100755
--- a/css/main-window.css
+++ b/css/main-window.css
@@ -31,7 +31,7 @@
     background-color: #FFFFFF;
     border: 2px solid #dddddd;
 }
-/* Hide everything whil we are loading */
+/* Hide everything while we are loading */
 #winamp2-js #main-window.loading * {
     display: none;
 }
@@ -213,16 +213,16 @@
 
 
 #winamp2-js .text {
+    display: none;
+}
+
+#winamp2-js #marquee {
     position: absolute;
     left: 112px;
     top: 27px;
     width: 152px;
     height: 6px;
     overflow: hidden;
-    display: none;
-}
-
-#winamp2-js #song-title {
     display: block;
 }
 
diff --git a/js/MainWindow.jsx b/js/MainWindow.jsx
new file mode 100644
index 00000000..6c1f1160
--- /dev/null
+++ b/js/MainWindow.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import Actions from './Actions.jsx';
+import Balance from './Balance.jsx';
+import Close from './Close.jsx';
+import ContextMenu from './ContextMenu.jsx';
+import Eject from './Eject.jsx';
+import Kbps from './Kbps.jsx';
+import Khz from './Khz.jsx';
+import Marquee from './Marquee.jsx';
+import MonoStereo from './MonoStereo.jsx';
+import Position from './Position.jsx';
+import Repeat from './Repeat.jsx';
+import ShadeTime from './ShadeTime.jsx';
+import Shuffle from './Shuffle.jsx';
+import Time from './Time.jsx';
+import Volume from './Volume.jsx';
+
+import '../css/main-window.css';
+
+const MainWindow = () => {
+  return <div id='main-window' className='loading stop'>
+    <div id='loading'>Loading...</div>
+    <div id='title-bar' className='selected'>
+      <ContextMenu />
+      <ShadeTime />
+      <div id='minimize'></div>
+      <div id='shade'></div>
+      <Close />
+    </div>
+    <div className='status'>
+      <div id='clutter-bar'>
+        <div id='button-o'></div>
+        <div id='button-a'></div>
+        <div id='button-i'></div>
+        <div id='button-d'></div>
+        <div id='button-v'></div>
+      </div>
+      <div id='play-pause'></div>
+      <div id='work-indicator'></div>
+      <Time />
+      <canvas id='visualizer' width='152' height='32'></canvas>
+    </div>
+    <div className='media-info'>
+      <Marquee />
+      <Kbps />
+      <Khz />
+      <MonoStereo />
+    </div>
+    <Volume />
+    <Balance />
+    <div className='windows'>
+      <div id='equalizer-button'></div>
+      <div id='playlist-button'></div>
+    </div>
+    <Position />
+    <Actions />
+    <Eject />
+    <div className='shuffle-repeat'>
+      <Shuffle />
+      <Repeat />
+    </div>
+    <a id='about' target='blank' href= 'https://github.com/captbaritone/winamp2-js'></a>
+  </div>;
+};
+
+module.exports = MainWindow;
diff --git a/js/Marquee.jsx b/js/Marquee.jsx
index 55a7635a..92727062 100644
--- a/js/Marquee.jsx
+++ b/js/Marquee.jsx
@@ -92,7 +92,7 @@ class Marquee extends React.Component {
 
   render() {
     const text = wrapForMarquee(this.getText(), this.props.display.marqueeStep);
-    return <CharacterString onMouseDown={this.handleMouseDown}>
+    return <CharacterString id='marquee' className='text' onMouseDown={this.handleMouseDown}>
       {text}
     </CharacterString>;
   }
diff --git a/js/main-window-dom.js b/js/main-window-dom.js
deleted file mode 100644
index d8d581c3..00000000
--- a/js/main-window-dom.js
+++ /dev/null
@@ -1,66 +0,0 @@
-function el(tagName, attributes, content) {
-  tagName = tagName || 'div';
-  attributes = attributes || {};
-  content = content || [];
-  var tag = document.createElement(tagName);
-  if (typeof content === 'string') {
-    content = [content];
-  }
-  for (var attr in attributes) {
-    if (attributes.hasOwnProperty(attr)) {
-      tag.setAttribute(attr, attributes[attr]);
-    }
-  }
-  for (var i = 0; i < content.length; i++) {
-    if (typeof content[i] === 'string') {
-      tag.appendChild(document.createTextNode(content[i]));
-    } else {
-      tag.appendChild(content[i]);
-    }
-  }
-  return tag;
-}
-
-module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
-  el('div', {id: 'loading'}, 'Loading...'),
-  el('div', {id: 'title-bar', class: 'selected'}, [
-    el('div', {id: 'context-menu-holder'}),
-    el('div', {id: 'shade-time-holder'}),
-    el('div', {id: 'minimize'}),
-    el('div', {id: 'shade'}),
-    el('div', {id: 'close-holder'})
-  ]),
-  el('div', {class: 'status'}, [
-    el('div', {id: 'clutter-bar'}, [
-      el('div', {id: 'button-o'}),
-      el('div', {id: 'button-a'}),
-      el('div', {id: 'button-i'}),
-      el('div', {id: 'button-d'}),
-      el('div', {id: 'button-v'})
-    ]),
-    el('div', {id: 'play-pause'}),
-    el('div', {id: 'work-indicator'}),
-    el('div', {id: 'time-holder'}),
-    el('canvas', {id: 'visualizer', width: '152', height: '32'})
-  ]),
-  el('div', {class: 'media-info'}, [
-    el('div', {id: 'song-title', class: 'text'}),
-    el('div', {id: 'kbps-holder'}),
-    el('div', {id: 'khz-holder'}),
-    el('div', {id: 'mono-stereo-holder'})
-  ]),
-  el('div', {id: 'volume-holder'}),
-  el('div', {id: 'balance-holder'}),
-  el('div', {class: 'windows'}, [
-    el('div', {id: 'equalizer-button'}),
-    el('div', {id: 'playlist-button'})
-  ]),
-  el('div', {id: 'position-holder'}),
-  el('div', {id: 'actions-holder'}),
-  el('div', {id: 'eject-holder'}),
-  el('div', {class: 'shuffle-repeat'}, [
-    el('div', {id: 'shuffle-holder'}),
-    el('div', {id: 'repeat-holder'})
-  ]),
-  el('a', {id: 'about', target: 'blank', href: 'https://github.com/captbaritone/winamp2-js'})
-]);
diff --git a/js/main-window.js b/js/main-window.js
index 2fd00c55..800ed642 100644
--- a/js/main-window.js
+++ b/js/main-window.js
@@ -1,21 +1,3 @@
-import React from 'react';
-import Marquee from './Marquee.jsx';
-import Actions from './Actions.jsx';
-import Time from './Time.jsx';
-import ShadeTime from './ShadeTime.jsx';
-import Kbps from './Kbps.jsx';
-import Khz from './Khz.jsx';
-import Volume from './Volume.jsx';
-import Balance from './Balance.jsx';
-import Position from './Position.jsx';
-import MonoStereo from './MonoStereo.jsx';
-import Repeat from './Repeat.jsx';
-import Shuffle from './Shuffle.jsx';
-import Eject from './Eject.jsx';
-import Close from './Close.jsx';
-
-import '../css/main-window.css';
-
 module.exports = {
   init: function(winamp) {
     this.winamp = winamp;
@@ -30,21 +12,6 @@ module.exports = {
     this.handle = document.getElementById('title-bar');
     this.body = this.nodes.window;
 
-    this.winamp.renderTo(<Marquee />, document.getElementById('song-title'));
-    this.winamp.renderTo(<Actions />, document.getElementById('actions-holder'));
-    this.winamp.renderTo(<Time />, document.getElementById('time-holder'));
-    this.winamp.renderTo(<ShadeTime />, document.getElementById('shade-time-holder'));
-    this.winamp.renderTo(<Kbps />, document.getElementById('kbps-holder'));
-    this.winamp.renderTo(<Khz />, document.getElementById('khz-holder'));
-    this.winamp.renderTo(<Volume />, document.getElementById('volume-holder'));
-    this.winamp.renderTo(<Balance />, document.getElementById('balance-holder'));
-    this.winamp.renderTo(<Position />, document.getElementById('position-holder'));
-    this.winamp.renderTo(<MonoStereo />, document.getElementById('mono-stereo-holder'));
-    this.winamp.renderTo(<Repeat />, document.getElementById('repeat-holder'));
-    this.winamp.renderTo(<Shuffle />, document.getElementById('shuffle-holder'));
-    this.winamp.renderTo(<Eject />, document.getElementById('eject-holder'));
-    this.winamp.renderTo(<Close />, document.getElementById('close-holder'));
-
     this._registerListeners();
     return this;
   },
diff --git a/js/main.js b/js/main.js
index beb04016..0db50f5b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -6,28 +6,23 @@ import {createStore} from 'redux';
 import createReducer from './reducers';
 
 import Browser from './browser';
-import mainWindowDom from './main-window-dom';
+import MainWindow from './MainWindow.jsx';
 import Winamp from './winamp';
-import ContextMenu from './ContextMenu.jsx';
 import Hotkeys from './hotkeys';
 
 if (new Browser(window).isCompatible) {
-  var mainWindowElement = document.createElement('div');
-  mainWindowElement.appendChild(mainWindowDom);
-  document.getElementById('winamp2-js').appendChild(mainWindowElement);
-
   var winamp = Winamp;
-  let store = createStore(createReducer(winamp), window.devToolsExtension && window.devToolsExtension());
+  let store = createStore(
+    createReducer(winamp),
+    window.devToolsExtension && window.devToolsExtension()
+  );
 
-  // TODO: Remove this workaround
-  winamp.renderTo = (componant, node) => {
-    render(
-      <Provider store={store}>
-        {componant}
-      </Provider>,
-      node
-    );
-  };
+  render(
+    <Provider store={store}>
+      <MainWindow />
+    </Provider>,
+    document.getElementById('winamp2-js')
+  );
 
   winamp.dispatch = store.dispatch;
 
@@ -35,14 +30,13 @@ if (new Browser(window).isCompatible) {
     volume: 50,
     balance: 0,
     mediaFile: {
-      url: 'https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3',
+      url: process.env.NODE_ENV === 'production' ? 'https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3' : 'llama-2.91.mp3',
       name: "1. DJ Mike Llama - Llama Whippin' Intro"
     },
-    skinUrl: 'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz'
+    skinUrl: process.env.NODE_ENV === 'production' ? 'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz' : 'base-2.91.wsz'
   });
 
   new Hotkeys(winamp, store);
-  winamp.renderTo(<ContextMenu />, document.getElementById('context-menu-holder'));
 } else {
   document.getElementById('winamp').style.display = 'none';
   document.getElementById('browser-compatibility').style.display = 'block';