Add windows to context menu

css/context-menu.css

@@ -34,6 +34,13 @@
     display: block;
 }
 
+#context-menu li.checked:before {
+    float: left;
+    /* TODO: Use an image */
+    content: "\2713";
+    margin-left: -12px;
+}
+
 #context-menu li.parent:after {
     float: right;
     content: "\25b8";

js/actionTypes.js

@@ -21,6 +21,7 @@ export const STEP_MARQUEE = "STEP_MARQUEE";
 export const STOP = "STOP";
 export const STOP_WORKING = "STOP_WORKING";
 export const TOGGLE_DOUBLESIZE_MODE = "TOGGLE_DOUBLESIZE_MODE";
+export const TOGGLE_MAIN_WINDOW = "TOGGLE_MAIN_WINDOW";
 export const TOGGLE_EQUALIZER_WINDOW = "TOGGLE_EQUALIZER_WINDOW";
 export const TOGGLE_PLAYLIST_WINDOW = "TOGGLE_PLAYLIST_WINDOW";
 export const SET_EQ_AUTO = "SET_EQ_AUTO";

js/components/App.js

@@ -13,6 +13,7 @@ import "../../css/webamp.css";
 const App = ({
   media,
   closed,
+  mainWindow,
   equalizer,
   playlist,
   openWindows,
@@ -24,7 +25,9 @@ const App = ({
     return null;
   }
   const windows = {
-    main: <MainWindow mediaPlayer={media} filePickers={filePickers} />,
+    main: mainWindow && (
+      <MainWindow mediaPlayer={media} filePickers={filePickers} />
+    ),
     equalizer: equalizer && <EqualizerWindow />,
     playlist: playlist && <PlaylistWindow />
   };
@@ -46,7 +49,7 @@ const App = ({
     }
   });
   return (
-    <div role="application" id="webamp">
+    <div role="application" id="webamp" onContextMenu={() => alert("context")}>
       <Skin />
       <WindowManager windows={windows} container={container} />
     </div>
@@ -59,6 +62,7 @@ App.propTypes = {
 
 const mapStateToProps = state => ({
   closed: state.display.closed,
+  mainWindow: state.windows.mainWindow,
   equalizer: state.windows.equalizer,
   playlist: state.windows.playlist,
   openWindows: new Set(state.windows.openGenWindows)

js/components/ContextMenu.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { createPortal } from "react-dom";
 import PropTypes from "prop-types";
-
 import classnames from "classnames";
 
 import "../../css/context-menu.css";
@@ -54,7 +53,14 @@ LinkNode.propTypes = {
   href: PropTypes.string.isRequired
 };
 
-export const Node = props => <li {...props}>{props.label}</li>;
+export const Node = props => {
+  const { label, checked, className = "", ...passThroughProps } = props;
+  return (
+    <li className={classnames(className, { checked })} {...passThroughProps}>
+      {label}
+    </li>
+  );
+};
 
 Node.propTypes = {
   label: PropTypes.string.isRequired

js/components/MainWindow/MainContextMenu.js

@@ -8,6 +8,11 @@ import {
   loadMediaFiles,
   openSkinFileDialog
 } from "../../actionCreators";
+import {
+  TOGGLE_MAIN_WINDOW,
+  TOGGLE_EQUALIZER_WINDOW,
+  TOGGLE_PLAYLIST_WINDOW
+} from "../../actionTypes";
 import { LOAD_STYLE } from "../../constants";
 import { ContextMenu, Hr, Node, Parent, LinkNode } from "../ContextMenu";
 
@@ -20,7 +25,7 @@ const MainContextMenu = props => (
     <LinkNode
       href="https://github.com/captbaritone/webamp"
       target="_blank"
-      label="Webamp"
+      label="Webamp..."
     />
     <Hr />
     <Parent label="Play">
@@ -45,6 +50,23 @@ const MainContextMenu = props => (
             )
         )}
     </Parent>
+    <Hr />
+    <Node
+      label="Main Window"
+      checked={props.mainWindowOpen}
+      onClick={props.toggleMainWindow}
+    />
+    <Node
+      label="Playlist Editor"
+      checked={props.playlistOpen}
+      onClick={props.togglePlaylist}
+    />
+    <Node
+      label="Equalizer"
+      checked={props.equalizerOpen}
+      onClick={props.toggleEqualizer}
+    />
+    <Hr />
     <Parent label="Skins">
       <Node onClick={props.openSkinFileDialog} label="Load Skin..." />
       {!!props.availableSkins.length && <Hr />}
@@ -63,7 +85,10 @@ const MainContextMenu = props => (
 
 const mapStateToProps = state => ({
   availableSkins: state.settings.availableSkins,
-  networkConnected: state.network.connected
+  networkConnected: state.network.connected,
+  mainWindowOpen: state.windows.mainWindow, // For now you can't close the main window without closing all of Webamp
+  playlistOpen: state.windows.playlist,
+  equalizerOpen: state.windows.equalizer
 });
 
 const mapDispatchToProps = {
@@ -71,7 +96,10 @@ const mapDispatchToProps = {
   openSkinFileDialog,
   openMediaFileDialog,
   loadMediaFiles,
-  setSkin: setSkinFromUrl
+  setSkin: setSkinFromUrl,
+  toggleMainWindow: () => ({ type: TOGGLE_MAIN_WINDOW }),
+  togglePlaylist: () => ({ type: TOGGLE_PLAYLIST_WINDOW }),
+  toggleEqualizer: () => ({ type: TOGGLE_EQUALIZER_WINDOW })
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(MainContextMenu);

js/reducers/windows.js

@@ -1,6 +1,7 @@
 import { WINDOWS } from "../constants";
 import {
   SET_FOCUSED_WINDOW,
+  TOGGLE_MAIN_WINDOW,
   TOGGLE_EQUALIZER_WINDOW,
   CLOSE_EQUALIZER_WINDOW,
   TOGGLE_PLAYLIST_WINDOW,
@@ -14,6 +15,7 @@ import { arrayWith, arrayWithout } from "../utils";
 
 const defaultWindowsState = {
   focused: WINDOWS.MAIN,
+  mainWindow: true,
   equalizer: true,
   playlist: true,
   openGenWindows: [],
@@ -25,6 +27,8 @@ const windows = (state = defaultWindowsState, action) => {
   switch (action.type) {
     case SET_FOCUSED_WINDOW:
       return { ...state, focused: action.window };
+    case TOGGLE_MAIN_WINDOW:
+      return { ...state, mainWindow: !state.mainWindow };
     case TOGGLE_EQUALIZER_WINDOW:
       return { ...state, equalizer: !state.equalizer };
     case CLOSE_EQUALIZER_WINDOW:

js/selectors.js

@@ -298,3 +298,7 @@ export const getWindowGraph = createSelector(
     return generateGraph(windowData);
   }
 );
+
+export const getGenWindows = state => {
+  return state.windows.genWindows;
+};