Disabling touch_events in playbar, fixes #353

src/js/components/PlaybackControls.js

@@ -220,15 +220,18 @@ class PlaybackControls extends React.Component{
 	}
 
 	render(){
+		const { next_track, touch_enabled, time_position } = this.props;
+		const { current_track, expanded } = this.state;
+
 		var images = false
-		if (this.state.current_track && this.state.current_track.images){
-			images = this.state.current_track.images
+		if (current_track && current_track.images){
+			images = current_track.images
 		}
 
 		return (
-			<div className={(this.state.expanded ? "playback-controls--expanded playback-controls" : "playback-controls")}>
+			<div className={`playback-controls${expanded ? ' playback-controls--expanded' : ''}${touch_enabled ? ' playback-controls--touch-enabled' : ''}`}>
 
-				{this.props.next_track && this.props.next_track.images ? <Thumbnail className="hide" size="large" images={this.props.next_track.images} /> : null}
+				{next_track && next_track.images ? <Thumbnail className="hide" size="large" images={next_track.images} /> : null}
 				
 				{this.state.transition_track && this.state.transition_direction ? <div 
 					className={"current-track current-track__transition current-track__transition--"+this.state.transition_direction}>
@@ -244,18 +247,18 @@ class PlaybackControls extends React.Component{
 				
 				<div 
 					className={this.state.transition_track && this.state.transition_direction ? "current-track current-track--transitioning" : "current-track"}
-					onTouchStart={e => this.handleTouchStart(e)}
-					onTouchEnd={e => this.handleTouchEnd(e)}
+					onTouchStart={e => touch_enabled && this.handleTouchStart(e)}
+					onTouchEnd={e => touch_enabled && this.handleTouchEnd(e)}
 					tabIndex="-1">
 						<Link className="thumbnail-wrapper" to={'/kiosk-mode'} tabIndex="-1">
 							<Thumbnail size="small" images={images} />
 						</Link>
 						<div className="text">
 							<div className="title">
-								{this.state.current_track ? this.state.current_track.name : <span>-</span>}
+								{current_track ? current_track.name : <span>-</span>}
 							</div>
 							<div className="artist">
-								{this.state.current_track ? <ArtistSentence artists={this.state.current_track.artists} /> : <ArtistSentence />}
+								{current_track ? <ArtistSentence artists={current_track.artists} /> : <ArtistSentence />}
 							</div>
 						</div>
 				</div>
@@ -272,8 +275,8 @@ class PlaybackControls extends React.Component{
 
 				<section className="progress">
 					<ProgressSlider />
-					<span className="current">{ this.props.time_position ? <Dater type="length" data={this.props.time_position} /> : '-' }</span>
-					<span className="total">{ this.state.current_track ? <Dater type="length" data={this.state.current_track.duration} /> : '-' }</span>
+					<span className="current">{ time_position ? <Dater type="length" data={time_position} /> : '-' }</span>
+					<span className="total">{ current_track ? <Dater type="length" data={current_track.duration} /> : '-' }</span>
 				</section>
 
 				<section className="settings">
@@ -329,7 +332,8 @@ const mapStateToProps = (state, ownProps) => {
 		volume: state.mopidy.volume,
 		mute: state.mopidy.mute,
 		sidebar_open: state.ui.sidebar_open,
-		slim_mode: state.ui.slim_mode
+		slim_mode: state.ui.slim_mode,
+		touch_enabled: state.ui.playback_controls_touch_enabled
 	}
 }
 

src/js/store/index.js

@@ -46,6 +46,7 @@ let state = {
 		theme: 'dark',
 		smooth_scrolling_enabled: true,
 		hotkeys_enabled: true,
+		playback_controls_touch_enabled: true,
 		allow_reporting: true,
 		wide_scrollbar_enabled: false,
 		window_focus: true,

src/js/views/Settings.js

@@ -271,6 +271,17 @@ class Settings extends React.Component {
 									Enable smooth scrolling
 								</span>
 							</label>
+							<label>
+								<input 
+									type="checkbox"
+									name="playback_controls_touch_enabled"
+									checked={ this.props.ui.playback_controls_touch_enabled }
+									onChange={ e => this.props.uiActions.set({ playback_controls_touch_enabled: !this.props.ui.playback_controls_touch_enabled })} />
+								<span className="label tooltip">
+									Enable touch events on play controls
+									<span className="tooltip__content">Allows left- and right-swipe to change tracks</span>
+								</span>
+							</label>
 							<label>
 								<input 
 									type="checkbox"

src/scss/components/_grid.scss

@@ -37,7 +37,7 @@
 			}
 		}
 
-		&:hover {			
+		&:hover {
 			.thumbnail {
 				&__image {
 					transform: scale(1.01);
@@ -52,10 +52,14 @@
 
 		&:active,
 		&:focus {
-			@include noanimate();
-			-moz-transform: scale(0.98);
-			-webkit-transform: scale(0.98);
-			transform: scale(0.98);
+			.thumbnail {
+				&__image {
+					@include noanimate();
+					-moz-transform: scale(0.98);
+					-webkit-transform: scale(0.98);
+					transform: scale(0.98);
+				}
+			}
 		}
 	}
 

src/scss/components/_playback-controls.scss

@@ -265,6 +265,10 @@
 	@include responsive($bp_medium){
 		border-left: none;
 
+		&--touch-enabled .control.next {
+			display: none;
+		}
+
 		.current-track {
 			width: auto;
 			bottom: 0.65rem;
@@ -289,15 +293,14 @@
 
 			&.playback {
 				left: 0;
-				width: 40px;
+				width: 6rem;
 
 				.control {
 					&.play {
 						margin-bottom: -1rem;
 					}
 
-					&.previous,
-					&.next {
+					&.previous {
 						display: none;
 					}