Parallax disabling for low-powered devices

src/js/views/Artist.js

@@ -294,7 +294,7 @@ class Artist extends React.Component{
 			<div className="view artist-view">
 				<div className="intro">
 
-					<Parallax image={image} theme={this.props.theme} />
+					<Parallax image={image} theme={this.props.theme} disabled={this.props.disable_parallax} />
 
 					<div className="liner">
 						<h1>{this.props.artist ? this.props.artist.name : null}</h1>
@@ -324,6 +324,7 @@ class Artist extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	var uri = ownProps.params.uri;
 	return {
+		disable_parallax: state.ui.disable_parallax,
 		theme: state.ui.theme,
 		slim_mode: state.ui.slim_mode,
 		load_queue: state.ui.load_queue,

src/js/views/Queue.js

@@ -165,7 +165,7 @@ class Queue extends React.Component{
 					<Icon name="play_arrow" type="material" />
 					Now playing
 				</Header>
-				<Parallax blur image={current_track_image} theme={this.props.theme} />
+				<Parallax blur image={current_track_image} theme={this.props.theme} disabled={this.props.disable_parallax} />
 				<div className="content-wrapper">
 				
 					<div className="current-track">
@@ -204,6 +204,7 @@ class Queue extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		disable_parallax: state.ui.disable_parallax,
 		theme: state.ui.theme,
 		spotify_enabled: state.spotify.enabled,
 		radio: state.core.radio,

src/js/views/Settings.js

@@ -320,6 +320,17 @@ class Settings extends React.Component {
 									Enable shortkeys
 								</span>
 							</label>
+							<label>
+								<input 
+									type="checkbox"
+									name="shortkeys_enabled"
+									checked={ this.props.ui.disable_parallax }
+									onChange={ e => this.props.uiActions.set({ disable_parallax: !this.props.ui.disable_parallax })} />
+								<span className="label has-tooltip">
+									Disable parallax
+									<span className="tooltip">Improves scroll performance on low-powered devices</span>
+								</span>
+							</label>
 						</div>
 					</div>
 

src/js/views/User.js

@@ -90,7 +90,7 @@ class User extends React.Component{
 		return (
 			<div className="view user-view">
 				<div className="intro">
-					<Parallax image={image} theme={this.props.theme} />
+					<Parallax image={image} theme={this.props.theme} disabled={this.props.disable_parallax} />
 					<div className="liner">
 						<h1>{user.name}</h1>
 						<h2>
@@ -127,6 +127,7 @@ const mapStateToProps = (state, ownProps) => {
 	return {
 		me: state.spotify.me,
 		theme: state.ui.theme,
+		disable_parallax: state.ui.disable_parallax,
 		load_queue: state.ui.load_queue,
 		spotify_authorized: state.spotify.authorization,
 		playlists: state.core.playlists,

src/js/views/discover/DiscoverFeatured.js

@@ -47,7 +47,7 @@ class DiscoverFeatured extends React.Component{
 		if (playlist){
 			return (
 				<div className="intro">
-					<Parallax image={playlist.images ? playlist.images.large : null} blur theme={this.props.theme} />
+					<Parallax image={playlist.images ? playlist.images.large : null} blur theme={this.props.theme} disabled={this.props.disable_parallax} />
 					<div className="content cf">
 						<Link 
 							to={global.baseURL+'playlist/'+playlist.uri}
@@ -67,7 +67,7 @@ class DiscoverFeatured extends React.Component{
 		} else {
 			return (
 				<div className="intro">
-					<Parallax />
+					<Parallax disabled={this.props.disable_parallax} />
 				</div>
 			)
 		}
@@ -134,6 +134,7 @@ class DiscoverFeatured extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		disable_parallax: state.ui.disable_parallax,
 		theme: state.ui.theme,
 		load_queue: state.ui.load_queue,
 		featured_playlists: state.spotify.featured_playlists,

src/js/views/discover/DiscoverNewReleases.js

@@ -60,7 +60,7 @@ class DiscoverNewReleases extends React.Component{
 		if (album){
 			return (
 				<div className="intro">
-					<Parallax image={album.images ? album.images.large : null} blur theme={this.props.theme} />
+					<Parallax image={album.images ? album.images.large : null} blur theme={this.props.theme} disabled={this.props.disable_parallax} />
 					<div className="content cf">
 						<Link 
 							to={global.baseURL+'album/'+album.uri}
@@ -84,7 +84,7 @@ class DiscoverNewReleases extends React.Component{
 		} else {
 			return (
 				<div className="intro">
-					<Parallax />
+					<Parallax disabled={this.props.disable_parallax} />
 				</div>
 			)
 		}
@@ -155,6 +155,7 @@ class DiscoverNewReleases extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		disable_parallax: state.ui.disable_parallax,
 		theme: state.ui.theme,
 		load_queue: state.ui.load_queue,
 		artists: state.core.artists,

src/js/views/discover/DiscoverRecommendations.js

@@ -503,7 +503,7 @@ class Discover extends React.Component{
 			<div className="view discover-view">
 				<div className="intro">
 
-					<Parallax image="assets/backgrounds/discover.jpg" theme={this.props.theme} />
+					<Parallax image="assets/backgrounds/discover.jpg" theme={this.props.theme} disabled={this.props.disable_parallax} />
 
 					<div className="liner">
 						<h1>Explore new music</h1>
@@ -547,6 +547,7 @@ class Discover extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		disable_parallax: state.ui.disable_parallax,
 		theme: state.ui.theme,
 		albums: state.core.albums,
 		artists: state.core.artists,