webamp/js/MainWindow.jsx

import React from 'react';
import {connect} from 'react-redux';
import classnames from 'classnames';

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 Shade from './Shade.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 = (props) => {
  const {status} = props.media;
  const {loading, doubled, shade, closed, llama} = props.display;

  const className = classnames({
    // TODO: Handle these status changes in the individual components
    play: status === 'PLAYING',
    stop: status === 'STOPPED',
    pause: status === 'PAUSED',
    loading,
    doubled,
    llama,
    shade,
    closed
  });
  return <div id='main-window' className={className}>
    <div id='loading'>Loading...</div>
    <div id='title-bar' className='selected'>
      <ContextMenu mediaPlayer={props.mediaPlayer} winamp={props.winamp} />
      <ShadeTime />
      <div id='minimize'></div>
      <Shade />
      <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' className={props.display.doubled ? 'selected' : ''}></div>
        <div id='button-v'></div>
      </div>
      <div id='play-pause'></div>
      <div id='work-indicator' className={props.display.working ? 'selected' : ''}></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 mediaPlayer={props.mediaPlayer} />
    <Actions mediaPlayer={props.mediaPlayer} />
    <Eject />
    <div className='shuffle-repeat'>
      <Shuffle />
      <Repeat />
    </div>
    <a id='about' target='blank' href= 'https://github.com/captbaritone/winamp2-js'></a>
  </div>;
};

module.exports = connect(state => state)(MainWindow);