webamp/js/components/App.js

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { objectMap } from "../utils";
import ContextMenuWrapper from "./ContextMenuWrapper";
import MainContextMenu from "./MainWindow/MainContextMenu";
import WindowManager from "./WindowManager";
import MainWindow from "./MainWindow";
import PlaylistWindow from "./PlaylistWindow";
import EqualizerWindow from "./EqualizerWindow";
import GenWindow from "./GenWindow";
import Skin from "./Skin";

import "../../css/webamp.css";

const App = ({
  media,
  closed,
  genWindowsInfo,
  container,
  filePickers,
  genWindows = []
}) => {
  if (closed) {
    return null;
  }

  // Index genWindows by id
  const genWindowComponents = genWindows.reduce(
    (comps, gen) => ({ ...comps, [gen.id]: gen }),
    {}
  );

  const windows = objectMap(genWindowsInfo, (w, id) => {
    switch (id) {
      case "main":
        return (
          w.open && <MainWindow mediaPlayer={media} filePickers={filePickers} />
        );
      case "equalizer":
        return w.open && <EqualizerWindow />;
      case "playlist":
        return w.open && <PlaylistWindow />;
      default:
        if (!w.generic) {
          throw new Error("Tried to render an unknown window:", id);
        }
        const { Component, title } = genWindowComponents[id];
        return (
          w.open && (
            <GenWindow title={title} windowId={id}>
              {({ height, width }) => (
                <Component
                  analyser={media._analyser}
                  width={width}
                  height={height}
                />
              )}
            </GenWindow>
          )
        );
    }
  });

  return (
    <div role="application" id="webamp">
      <Skin />
      <ContextMenuWrapper
        renderContents={() => <MainContextMenu filePickers={filePickers} />}
      >
        <WindowManager windows={windows} container={container} />
      </ContextMenuWrapper>
    </div>
  );
};

App.propTypes = {
  container: PropTypes.instanceOf(Element)
};

const mapStateToProps = state => ({
  closed: state.display.closed,
  mainWindow: state.windows.mainWindow,
  equalizer: state.windows.equalizer,
  genWindowsInfo: state.windows.genWindows
});

export default connect(mapStateToProps)(App);