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
+
Loading...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
;
+};
+
+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
+ return
{text}
;
}
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(, document.getElementById('song-title'));
- this.winamp.renderTo(, document.getElementById('actions-holder'));
- this.winamp.renderTo(, document.getElementById('time-holder'));
- this.winamp.renderTo(, document.getElementById('shade-time-holder'));
- this.winamp.renderTo(, document.getElementById('kbps-holder'));
- this.winamp.renderTo(, document.getElementById('khz-holder'));
- this.winamp.renderTo(, document.getElementById('volume-holder'));
- this.winamp.renderTo(, document.getElementById('balance-holder'));
- this.winamp.renderTo(, document.getElementById('position-holder'));
- this.winamp.renderTo(, document.getElementById('mono-stereo-holder'));
- this.winamp.renderTo(, document.getElementById('repeat-holder'));
- this.winamp.renderTo(, document.getElementById('shuffle-holder'));
- this.winamp.renderTo(, document.getElementById('eject-holder'));
- this.winamp.renderTo(, 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(
-
- {componant}
- ,
- node
- );
- };
+ render(
+
+
+ ,
+ 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(, document.getElementById('context-menu-holder'));
} else {
document.getElementById('winamp').style.display = 'none';
document.getElementById('browser-compatibility').style.display = 'block';