mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-21 00:59:29 +00:00
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.
This commit is contained in:
Jordan Eldredge
GitHub
parent
67995da4cf
commit
1853bf0352
6 changed files with 86 additions and 124 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
67
js/MainWindow.jsx
Normal file
67
js/MainWindow.jsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'})
|
||||
]);
|
||||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
32
js/main.js
32
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';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue