Add context-menu-ability to currently playing track, fixes #566

src/js/components/ContextMenu.js

@@ -1140,6 +1140,18 @@ class ContextMenu extends React.Component {
             )}
           </div>
         );
+      case 'current-track':
+        return (
+          <div>
+            {add_to_playlist}
+            {this.canBeInLibrary() && toggle_in_library}
+            {toggle_loved}
+            <div className="context-menu__divider" />
+            {context.source === 'spotify' && context.items_count <= 5 && go_to_recommendations}
+            {context.items_count === 1 && go_to_track}
+            {copy_uris}
+          </div>
+        );
       case 'queue-track':
         return (
           <div>

src/js/components/PlaybackControls.js

@@ -37,6 +37,42 @@ class PlaybackControls extends React.Component {
     };
   }
 
+  setTransition(direction) {
+    this.setState({
+      transition_track: this.state.current_track,
+      transition_direction: direction,
+    });
+
+    // Allow time for the animation to complete, then remove
+    // the transitioning track from state
+    setTimeout(() => {
+      this.setState({
+        transition_track: null,
+      });
+    },
+    250);
+  }
+
+  handleContextMenu = (e) => {
+    const {
+      current_track,
+    } = this.state;
+    const {
+      uiActions: {
+        showContextMenu,
+      },
+    } = this.props;
+
+    e.preventDefault();
+
+    showContextMenu({
+      e,
+      context: 'current-track',
+      items: [current_track],
+      uris: [current_track.uri],
+    });
+  }
+
   handleTouchStart = (e) => {
     const { touch_enabled } = this.props;
     if (!touch_enabled) return;
@@ -92,22 +128,6 @@ class PlaybackControls extends React.Component {
     e.preventDefault();
   }
 
-  setTransition(direction) {
-    this.setState({
-      transition_track: this.state.current_track,
-      transition_direction: direction,
-    });
-
-    // Allow time for the animation to complete, then remove
-    // the transitioning track from state
-    setTimeout(() => {
-      this.setState({
-        transition_track: null,
-      });
-    },
-    250);
-  }
-
   renderPlayButton() {
     let button = <button className="control play" onClick={() => this.props.mopidyActions.play()}><Icon name="play_circle_filled" type="material" /></button>;
     if (this.props.play_state == 'playing') {
@@ -225,6 +245,7 @@ class PlaybackControls extends React.Component {
               className="current-track current-track__incoming"
               onTouchStart={this.handleTouchStart}
               onTouchEnd={this.handleTouchEnd}
+              onContextMenu={this.handleContextMenu}
               tabIndex="-1"
               key={current_track.tlid}
             >