Support ctrl click on tracks

.eslintrc

@@ -47,13 +47,6 @@
     "eol-last": "error",
     "eqeqeq": ["error", "smart"],
     "guard-for-in": "error",
-    "indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1
-      }
-    ],
     "jsx-quotes": ["error", "prefer-double"],
     "key-spacing": "warn",
     "keyword-spacing": "error",

js/actionTypes.js

@@ -41,3 +41,4 @@ export const SET_USER_MESSAGE = "SET_USER_MESSAGE";
 export const UNSET_USER_MESSAGE = "UNSET_USER_MESSAGE";
 export const SET_PLAYLIST_SCROLL_POSITION = "SET_PLAYLIST_SCROLL_POSITION";
 export const CLICKED_TRACK = "CLICKED_TRACK";
+export const CTRL_CLICKED_TRACK = "CTRL_CLICKED_TRACK";

js/components/PlaylistWindow/Track.js

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 import { getTimeStr } from "../../utils";
-import { CLICKED_TRACK } from "../../actionTypes";
+import { CLICKED_TRACK, CTRL_CLICKED_TRACK } from "../../actionTypes";
 
 const Track = props => {
   const {
@@ -12,7 +12,8 @@ const Track = props => {
     title,
     number,
     duration,
-    selectTrack
+    clickTrack,
+    ctrlClickTrack
   } = props;
   const style = {
     backgroundColor: selected ? skinPlaylistStyle.SelectedBG : null,
@@ -22,7 +23,8 @@ const Track = props => {
     <div
       className={classnames("playlist-track", { selected, current })}
       style={style}
-      onClick={selectTrack}
+      onClick={clickTrack}
+      onContextMenu={ctrlClickTrack}
     >
       <div className="playlist-track-number">{number}.</div>
       <div className="playlist-track-title">
@@ -50,7 +52,14 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  selectTrack: () => dispatch({ type: CLICKED_TRACK, id: ownProps.id })
+  clickTrack: () => dispatch({ type: CLICKED_TRACK, id: ownProps.id }),
+  ctrlClickTrack: e => {
+    if (e.ctrlKey) {
+      e.preventDefault();
+      return dispatch({ type: CTRL_CLICKED_TRACK, id: ownProps.id });
+    }
+    // TODO: We need to spawn our own context menu
+  }
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Track);

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

@@ -48,6 +48,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           <div
             className="playlist-track selected"
             onClick={[Function]}
+            onContextMenu={[Function]}
             style={
               Object {
                 "backgroundColor": undefined,
@@ -77,6 +78,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           <div
             className="playlist-track"
             onClick={[Function]}
+            onContextMenu={[Function]}
             style={
               Object {
                 "backgroundColor": null,
@@ -106,6 +108,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           <div
             className="playlist-track selected current"
             onClick={[Function]}
+            onContextMenu={[Function]}
             style={
               Object {
                 "backgroundColor": undefined,
@@ -135,6 +138,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           <div
             className="playlist-track"
             onClick={[Function]}
+            onContextMenu={[Function]}
             style={
               Object {
                 "backgroundColor": null,
@@ -164,6 +168,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           <div
             className="playlist-track"
             onClick={[Function]}
+            onContextMenu={[Function]}
             style={
               Object {
                 "backgroundColor": null,
@@ -193,6 +198,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           <div
             className="playlist-track"
             onClick={[Function]}
+            onContextMenu={[Function]}
             style={
               Object {
                 "backgroundColor": null,
@@ -222,6 +228,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           <div
             className="playlist-track"
             onClick={[Function]}
+            onContextMenu={[Function]}
             style={
               Object {
                 "backgroundColor": null,

js/reducers.js

@@ -34,7 +34,8 @@ import {
   SET_USER_MESSAGE,
   UNSET_USER_MESSAGE,
   SET_PLAYLIST_SCROLL_POSITION,
-  CLICKED_TRACK
+  CLICKED_TRACK,
+  CTRL_CLICKED_TRACK
 } from "./actionTypes";
 import { playlistEnabled } from "./config";
 
@@ -225,6 +226,10 @@ const tracks = (state = defaultTracksState, action) => {
         newTracks[id] = { ...state[id], selected: id === String(action.id) };
         return newTracks;
       }, {});
+    case CTRL_CLICKED_TRACK:
+      const track = state[action.id];
+      const newTrack = { ...track, selected: !track.selected };
+      return { ...state, [action.id]: newTrack };
     default:
       return state;
   }