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>

src/scss/components/_context-menu.scss

@@ -50,4 +50,24 @@
 			}
 		}
 	}
+
+	@include responsive( $bp_medium ){
+		bottom: 0 !important;
+		left: 0 !important;
+		right: 0 !important;
+		top: auto !important;
+		background: $blue;
+
+		.menu-item {
+			display: inline-block;
+			width: auto;
+			height: auto;
+			border: 0 !important;
+
+			.fa,
+			.submenu {
+				display: none !important;
+			}
+		}
+	}
 }

src/scss/components/_player.scss

@@ -52,12 +52,13 @@
 		}
 	}
 
-	aside & {
+	&.mini-player {
 		position: absolute;
 		bottom: 0;
 		left: 0;
-		right: 0;
-		z-index: 2;
+		width: 200px;
+		box-sizing: border-box;
+		z-index: 97;
 		padding: 14px;
 		color: #FFFFFF;
 
@@ -67,9 +68,12 @@
 			}
 		}
 
-		@include responsive( null, $bp_medium, $bp_shallow ){
+		@include responsive( $bp_medium, null, $bp_shallow ){
 			position: fixed;
+			right: 0;
+			width: auto;
 			background: $dark_grey;
+			z-index: 99;
 
 			.controls {
 				position: absolute;

src/scss/components/_sidebar.scss

@@ -104,4 +104,7 @@ aside{
 		}
 
 	}
+
+	@include responsive( $bp_medium ){
+	}
 }