Add custom user message for playlist

js/actionTypes.js

@@ -37,3 +37,5 @@ export const TOGGLE_TIME_MODE = "TOGGLE_TIME_MODE";
 export const TOGGLE_VISUALIZER_STYLE = "TOGGLE_VISUALIZER_STYLE";
 export const UNSET_FOCUS = "UNSET_FOCUS";
 export const UPDATE_TIME_ELAPSED = "UPDATE_TIME_ELAPSED";
+export const SET_USER_MESSAGE = "SET_USER_MESSAGE";
+export const UNSET_USER_MESSAGE = "UNSET_USER_MESSAGE";

js/components/MainWindow/Marquee.js

@@ -100,6 +100,9 @@ class Marquee extends React.Component {
   }
 
   getText() {
+    if (this.props.userInput.userMessage != null) {
+      return this.props.userInput.userMessage;
+    }
     switch (this.props.userInput.focus) {
       case "balance":
         return getBalanceText(this.props.media.balance);

js/components/MainWindow/PlaylistToggleButton.js

@@ -2,13 +2,19 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 
-import { TOGGLE_PLAYLIST_WINDOW } from "../../actionTypes";
+import {
+  TOGGLE_PLAYLIST_WINDOW,
+  SET_USER_MESSAGE,
+  UNSET_USER_MESSAGE
+} from "../../actionTypes";
 
 const PlaylistToggleButton = props => (
   <div
     id="playlist-button"
     className={classnames({ selected: props.playlist })}
     onClick={props.handleClick}
+    onMouseDown={props.handleMouseDown}
+    onMouseUp={props.handleMouseUp}
     title="Toggle Playlist Editor"
   />
 );
@@ -17,9 +23,16 @@ const mapStateToProps = state => ({
   playlist: state.windows.playlist
 });
 
-const mapDispatchToProps = dispatch => ({
-  handleClick: () => dispatch({ type: TOGGLE_PLAYLIST_WINDOW })
-});
+const mapDispatchToProps = {
+  handleClick: () => ({ type: TOGGLE_PLAYLIST_WINDOW }),
+  handleMouseDown: () => ({
+    type: SET_USER_MESSAGE,
+    message: "Playlist not yet implemented"
+  }),
+  handleMouseUp: () => ({
+    type: UNSET_USER_MESSAGE
+  })
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(
   PlaylistToggleButton

js/components/MainWindow/__snapshots__/index.test.js.snap

@@ -294,6 +294,8 @@ exports[`MainWindow renders to snapshot 1`] = `
       className=""
       id="playlist-button"
       onClick={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
       title="Toggle Playlist Editor"
     />
   </div>

js/reducers.js

@@ -30,14 +30,17 @@ import {
   TOGGLE_TIME_MODE,
   TOGGLE_VISUALIZER_STYLE,
   UNSET_FOCUS,
-  UPDATE_TIME_ELAPSED
+  UPDATE_TIME_ELAPSED,
+  SET_USER_MESSAGE,
+  UNSET_USER_MESSAGE
 } from "./actionTypes";
 import { equalizerEnabled, playlistEnabled } from "./config";
 
 const defaultUserInput = {
   focus: null,
   bandFocused: null,
-  scrubPosition: 0
+  scrubPosition: 0,
+  userMessage: null
 };
 
 export const userInput = (state = defaultUserInput, action) => {
@@ -50,6 +53,10 @@ export const userInput = (state = defaultUserInput, action) => {
       return { ...state, focus: null, bandFocused: null };
     case SET_SCRUB_POSITION:
       return { ...state, scrubPosition: action.position };
+    case SET_USER_MESSAGE:
+      return { ...state, userMessage: action.message };
+    case UNSET_USER_MESSAGE:
+      return { ...state, userMessage: null };
     default:
       return state;
   }

js/reducers.test.js

@@ -4,18 +4,25 @@ import { SET_FOCUS, SET_SCRUB_POSITION, UNSET_FOCUS } from "./actionTypes";
 describe("userInput reducer", () => {
   const state = userInput(undefined, { type: "@@INIT" });
   it("has sensible defaults", () => {
-    expect(state).toEqual({ focus: null, scrubPosition: 0, bandFocused: null });
+    expect(state).toEqual({
+      focus: null,
+      scrubPosition: 0,
+      bandFocused: null,
+      userMessage: null
+    });
   });
   it("can set focus", () => {
     const newState = userInput(state, {
       type: SET_FOCUS,
       input: "foo",
-      bandFocused: null
+      bandFocused: null,
+      userMessage: null
     });
     expect(newState).toEqual({
       focus: "foo",
       scrubPosition: 0,
-      bandFocused: null
+      bandFocused: null,
+      userMessage: null
     });
   });
   it("can unset focus", () => {
@@ -26,19 +33,22 @@ describe("userInput reducer", () => {
     expect(newState).toEqual({
       focus: null,
       scrubPosition: 0,
-      bandFocused: null
+      bandFocused: null,
+      userMessage: null
     });
   });
   it("can set scrub position", () => {
     const newState = userInput(state, {
       type: SET_SCRUB_POSITION,
       position: 5,
-      bandFocused: null
+      bandFocused: null,
+      userMessage: null
     });
     expect(newState).toEqual({
       focus: null,
       scrubPosition: 5,
-      bandFocused: null
+      bandFocused: null,
+      userMessage: null
     });
   });
 });