Responsive player + sidebar; Touch-sensitive context menu

src/js/components/MiniPlayer.js

@@ -28,7 +28,7 @@ class MiniPlayer extends React.Component{
 
 	render(){
 		return (
-			<div className="player">
+			<div className="player mini-player">
 
 				<div className="current-track">
 					<div className="title">{ this.props.current_track ? this.props.current_track.name : <span>-</span> }</div>

src/js/components/Sidebar.js

@@ -4,7 +4,6 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
 
-import MiniPlayer from './MiniPlayer'
 import Icon from './Icon'
 import Thumbnail from './Thumbnail'
 import SearchForm from './SearchForm'
@@ -95,7 +94,6 @@ class Sidebar extends React.Component{
 			    </div>
 
 		       	<Dropzones />
-		        <MiniPlayer />
 
 			</aside>
 		);

src/js/components/TrackList.js

@@ -60,13 +60,31 @@ class TrackList extends React.Component{
 	handleTouchEnd(e, index){
 		var pageX = Math.round(e.changedTouches[0].pageX)
 		var pageY = Math.round(e.changedTouches[0].pageY)
+
+		// make sure our touch was within the threshold of the touch start
+		// this helps us differentiate between taps and drags but doesn't consider
+		// multi-finger touches
 		if( this._touch_x < ( pageX + this._touch_threshold ) &&
 			this._touch_x > ( pageX - this._touch_threshold ) &&
 			this._touch_y < ( pageY + this._touch_threshold ) &&
 			this._touch_y > ( pageY - this._touch_threshold ) ){
+
+				// toggle selection
 				var tracks = this.state.tracks
 				tracks[index].selected = !tracks[index].selected
 				this.setState({ tracks: tracks, lastSelectedTrack: index })
+
+				// update our context menu to hide/show
+				var selected_tracks = this.selectedTracks()
+				if( selected_tracks.length > 0 ){
+					var data = {
+						selected_tracks: selected_tracks,
+						selected_tracks_indexes: this.tracksIndexes( selected_tracks )
+					}
+					this.props.uiActions.showContextMenu( e, this.props.context, data )
+				}else{
+					this.props.uiActions.hideContextMenu()
+				}
 		}
 
 		e.preventDefault()

src/js/views/App.js

@@ -6,6 +6,7 @@ import { browserHistory, Link } from 'react-router'
 import { connect } from 'react-redux'
 
 import Sidebar from '../components/Sidebar'
+import MiniPlayer from '../components/MiniPlayer'
 import SidebarToggleButton from '../components/SidebarToggleButton'
 import ContextMenu from '../components/ContextMenu'
 import Dragger from '../components/Dragger'
@@ -119,7 +120,8 @@ class App extends React.Component{
 
 		return (
 			<div className={className}>
-		        <Sidebar />
+		        <Sidebar />		        
+		        <MiniPlayer />
 		        <main>
 		      		{this.props.children}
 		        </main>