Merging with upstream

VERSION.md

@@ -1 +1 @@
-3.21.2
+3.21.3

mopidy_iris/__init__.py

@@ -12,7 +12,7 @@ from handlers import WebsocketHandler, HttpHandler
 from core import IrisCore
 
 logger = logging.getLogger(__name__)
-__version__ = '3.21.2'
+__version__ = '3.21.3'
 
 ##
 # Core extension class

mopidy_iris/static/app.css

@@ -4370,8 +4370,40 @@ input[type="submit"] {
     display: inline-block;
     vertical-align: bottom;
     opacity: 0.8; }
+    .playback-controls .control:not(.sidebar-toggle) {
+      position: relative; }
+
+@keyframes click_feedback {
+  0% {
+    top: 50%;
+    left: 0;
+    width: 100%;
+    padding-bottom: 100%;
+    opacity: 1; }
+  100% {
+    top: 25%;
+    left: -25%;
+    width: 150%;
+    padding-bottom: 150%;
+    opacity: 0; } }
+      .playback-controls .control:not(.sidebar-toggle):after {
+        content: '';
+        display: block;
+        position: absolute;
+        background: rgba(255, 255, 255, 0.5);
+        z-index: 1;
+        opacity: 0;
+        border-radius: 50%;
+        margin-top: -50%;
+        pointer-events: none; }
+      .playback-controls .control:not(.sidebar-toggle):focus:after, .playback-controls .control:not(.sidebar-toggle):active:after {
+        animation-name: click_feedback;
+        animation-duration: 0.2s;
+        animation-timing-function: ease-out;
+        animation-iteration-count: 1; }
     .playback-controls .control .icon {
-      font-size: 0.9em; }
+      font-size: 0.9em;
+      margin-bottom: 0; }
     .playback-controls .control.active {
       color: #08d58f !important; }
     .playback-controls .control:hover {

mopidy_iris/static/app.js

@@ -20719,7 +20719,7 @@ var DropdownField = function (_React$Component) {
 				className += ' ' + this.props.className;
 			}
 			var current_value = null;
-			if (this.props.value) {
+			if (this.props.value !== undefined) {
 				current_value = this.props.value;
 			} else if (this.props.options.length > 0) {
 				current_value = this.props.options[0].value;
@@ -20765,7 +20765,7 @@ var DropdownField = function (_React$Component) {
 							if (_this2.isMultiSelect()) {
 								var is_selected = current_value.indexOf(option.value) > -1;
 							} else {
-								var is_selected = current_value == option.value;
+								var is_selected = current_value === option.value;
 							}
 							return _react2.default.createElement(
 								'div',
@@ -65566,7 +65566,10 @@ var Artist = function (_React$Component) {
 						albums.push(this.props.albums[uri]);
 					}
 				}
-				albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
+
+				if (this.props.sort) {
+					albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
+				}
 
 				if (this.props.filter) {
 					albums = helpers.applyFilter('album_type', this.props.filter, albums);
@@ -65676,6 +65679,9 @@ var Artist = function (_React$Component) {
 				default:
 
 					var sort_options = [{
+						value: null,
+						label: 'Default'
+					}, {
 						value: 'name',
 						label: 'Name'
 					}, {
@@ -65767,7 +65773,7 @@ var Artist = function (_React$Component) {
 									name: 'Sort',
 									value: this.props.sort,
 									options: sort_options,
-									selected_icon: this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
+									selected_icon: this.props.sort ? this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : null,
 									handleChange: function handleChange(value) {
 										_this2.setSort(value);_this2.props.uiActions.hideContextMenu();
 									}
@@ -65890,7 +65896,7 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
 		local_library_artists: state.mopidy.library_artists,
 		albums: state.core.albums ? state.core.albums : [],
 		filter: state.ui.artist_albums_filter ? state.ui.artist_albums_filter : null,
-		sort: state.ui.artist_albums_sort ? state.ui.artist_albums_sort : 'name',
+		sort: state.ui.artist_albums_sort ? state.ui.artist_albums_sort : null,
 		sort_reverse: state.ui.artist_albums_sort_reverse ? true : false,
 		spotify_authorized: state.spotify.authorization,
 		mopidy_connected: state.mopidy.connected
@@ -77653,7 +77659,9 @@ var LibraryArtists = function (_React$Component) {
 				}
 			}
 
-			artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse);
+			if (this.props.sort) {
+				artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse);
+			}
 
 			if (this.state.filter !== '') {
 				artists = helpers.applyFilter('name', this.state.filter, artists);
@@ -77733,6 +77741,9 @@ var LibraryArtists = function (_React$Component) {
 			}];
 
 			var sort_options = [{
+				label: 'Default',
+				value: null
+			}, {
 				label: 'Name',
 				value: 'name'
 			}, {
@@ -77754,7 +77765,7 @@ var LibraryArtists = function (_React$Component) {
 					name: 'Sort',
 					value: this.props.sort,
 					options: sort_options,
-					selected_icon: this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
+					selected_icon: this.props.sort ? this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : null,
 					handleChange: function handleChange(value) {
 						_this3.setSort(value);_this3.props.uiActions.hideContextMenu();
 					}
@@ -77812,8 +77823,8 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
 		spotify_library_artists_status: state.ui.processes.SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR !== undefined ? state.ui.processes.SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR.status : null,
 		artists: state.core.artists,
 		source: state.ui.library_artists_source ? state.ui.library_artists_source : 'all',
-		sort: state.ui.library_artists_sort ? state.ui.library_artists_sort : 'name',
+		sort: state.ui.library_artists_sort ? state.ui.library_artists_sort : null,
-		sort_reverse: state.ui.library_artists_sort_reverse ? true : false,
+		sort_reverse: state.ui.library_artists_sort_reverse ? state.ui.library_artists_sort_reverse : false,
 		view: state.ui.library_artists_view
 	};
 };
@@ -78052,7 +78063,9 @@ var LibraryAlbums = function (_React$Component) {
 				}
 			}
 
-			albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
+			if (this.props.sort) {
+				albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
+			}
 
 			if (this.state.filter && this.state.filter !== '') {
 				albums = helpers.applyFilter('name', this.state.filter, albums);
@@ -78138,6 +78151,9 @@ var LibraryAlbums = function (_React$Component) {
 			}];
 
 			var sort_options = [{
+				value: null,
+				label: 'Default'
+			}, {
 				value: 'name',
 				label: 'Name'
 			}, {
@@ -78165,7 +78181,7 @@ var LibraryAlbums = function (_React$Component) {
 					name: 'Sort',
 					value: this.props.sort,
 					options: sort_options,
-					selected_icon: this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
+					selected_icon: this.props.sort ? this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : null,
 					handleChange: function handleChange(val) {
 						_this3.setSort(val);_this3.props.uiActions.hideContextMenu();
 					}
@@ -78225,8 +78241,8 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
 		spotify_library_albums_status: state.ui.processes.SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR !== undefined ? state.ui.processes.SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR.status : null,
 		view: state.ui.library_albums_view,
 		source: state.ui.library_albums_source ? state.ui.library_albums_source : 'all',
-		sort: state.ui.library_albums_sort ? state.ui.library_albums_sort : 'name',
+		sort: state.ui.library_albums_sort ? state.ui.library_albums_sort : null,
-		sort_reverse: state.ui.library_albums_sort_reverse ? true : false
+		sort_reverse: state.ui.library_albums_sort_reverse ? state.ui.library_albums_sort_reverse : false
 	};
 };
 
@@ -78606,7 +78622,9 @@ var LibraryPlaylists = function (_React$Component) {
 				}
 			}
 
-			playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse);
+			if (this.props.sort) {
+				playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse);
+			}
 			playlists = helpers.removeDuplicates(playlists);
 
 			if (this.state.filter !== '') {
@@ -78694,6 +78712,9 @@ var LibraryPlaylists = function (_React$Component) {
 			}];
 
 			var sort_options = [{
+				value: null,
+				label: 'Default'
+			}, {
 				value: 'name',
 				label: 'Name'
 			}, {
@@ -78723,7 +78744,7 @@ var LibraryPlaylists = function (_React$Component) {
 					name: 'Sort',
 					value: this.props.sort,
 					options: sort_options,
-					selected_icon: this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
+					selected_icon: this.props.sort ? this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : null,
 					handleChange: function handleChange(value) {
 						_this3.setSort(value);_this3.props.uiActions.hideContextMenu();
 					}
@@ -78792,8 +78813,8 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
 		me_id: state.spotify.me ? state.spotify.me.id : false,
 		view: state.ui.library_playlists_view,
 		source: state.ui.library_playlists_source ? state.ui.library_playlists_source : 'all',
-		sort: state.ui.library_playlists_sort ? state.ui.library_playlists_sort : 'name',
+		sort: state.ui.library_playlists_sort ? state.ui.library_playlists_sort : null,
-		sort_reverse: state.ui.library_playlists_sort_reverse ? true : false,
+		sort_reverse: state.ui.library_playlists_sort_reverse ? state.ui.library_playlists_sort_reverse : false,
 		playlists: state.core.playlists
 	};
 };

mopidy_iris/static/app.min.css

@@ -4370,8 +4370,40 @@ input[type="submit"] {
     display: inline-block;
     vertical-align: bottom;
     opacity: 0.8; }
+    .playback-controls .control:not(.sidebar-toggle) {
+      position: relative; }
+
+@keyframes click_feedback {
+  0% {
+    top: 50%;
+    left: 0;
+    width: 100%;
+    padding-bottom: 100%;
+    opacity: 1; }
+  100% {
+    top: 25%;
+    left: -25%;
+    width: 150%;
+    padding-bottom: 150%;
+    opacity: 0; } }
+      .playback-controls .control:not(.sidebar-toggle):after {
+        content: '';
+        display: block;
+        position: absolute;
+        background: rgba(255, 255, 255, 0.5);
+        z-index: 1;
+        opacity: 0;
+        border-radius: 50%;
+        margin-top: -50%;
+        pointer-events: none; }
+      .playback-controls .control:not(.sidebar-toggle):focus:after, .playback-controls .control:not(.sidebar-toggle):active:after {
+        animation-name: click_feedback;
+        animation-duration: 0.2s;
+        animation-timing-function: ease-out;
+        animation-iteration-count: 1; }
     .playback-controls .control .icon {
-      font-size: 0.9em; }
+      font-size: 0.9em;
+      margin-bottom: 0; }
     .playback-controls .control.active {
       color: #08d58f !important; }
     .playback-controls .control:hover {

mopidy_iris/static/index.html

@@ -77,8 +77,13 @@
 
 	// Release details
 	// These are automatically injected to built HTML
+<<<<<<< HEAD
 	var build = "1529975869";
 	var version = "3.21.2";
+=======
+	var build = "1529312086";
+	var version = "3.21.3";
+>>>>>>> 1300ae418803dd058d1050220f47bc64d3af2906
 
 	// Construct the script tag
     var js = document.createElement("script");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mopidy-iris",
-  "version": "3.21.2",
+  "version": "3.21.3",
   "description": "Mopidy HTTP interface",
   "repository": "https://github.com/jaedb/iris",
   "author": "James Barnsley <james@barnsley.nz>",

src/js/components/Fields/DropdownField.js

@@ -102,7 +102,7 @@ export default class DropdownField extends React.Component{
 			className += ' '+this.props.className;
 		}
 		var current_value = null;
-		if (this.props.value){
+		if (this.props.value !== undefined){
 			current_value = this.props.value;
 		} else if (this.props.options.length > 0){
 			current_value = this.props.options[0].value;
@@ -138,7 +138,7 @@ export default class DropdownField extends React.Component{
 								if (this.isMultiSelect()){
 									var is_selected = current_value.indexOf(option.value) > -1;
 								} else {
-									var is_selected = current_value == option.value;
+									var is_selected = current_value === option.value;
 								}
 								return (
 									<div className={"option "+(option.className ? option.className : '')} key={option.value} onClick={e => this.handleChange(option.value, is_selected)}>

src/js/views/Artist.js

@@ -141,7 +141,10 @@ class Artist extends React.Component{
 					albums.push(this.props.albums[uri]);
 				}
 			}
-			albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
+
+			if (this.props.sort){
+				albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
+			}
 
 			if (this.props.filter){
 				albums = helpers.applyFilter('album_type', this.props.filter, albums);
@@ -184,6 +187,10 @@ class Artist extends React.Component{
 			default:
 
 				var sort_options = [
+					{
+						value: null,
+						label: 'Default'
+					},
 					{
 						value: 'name',
 						label: 'Name'
@@ -257,7 +264,7 @@ class Artist extends React.Component{
 									name="Sort" 
 									value={this.props.sort} 
 									options={sort_options} 
-									selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} 
+									selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
 									handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }}
 								/>
 								<DropdownField 
@@ -351,7 +358,7 @@ const mapStateToProps = (state, ownProps) => {
 		local_library_artists: state.mopidy.library_artists,
 		albums: (state.core.albums ? state.core.albums : []),
 		filter: (state.ui.artist_albums_filter ? state.ui.artist_albums_filter : null),
-		sort: (state.ui.artist_albums_sort ? state.ui.artist_albums_sort : 'name'),
+		sort: (state.ui.artist_albums_sort ? state.ui.artist_albums_sort : null),
 		sort_reverse: (state.ui.artist_albums_sort_reverse ? true : false),
 		spotify_authorized: state.spotify.authorization,
 		mopidy_connected: state.mopidy.connected

src/js/views/library/LibraryAlbums.js

@@ -138,7 +138,9 @@ class LibraryAlbums extends React.Component{
 			}
 		}
 
-		albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse)
+		if (this.props.sort){
+			albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
+		}
 
 		if (this.state.filter && this.state.filter !== ''){
 			albums = helpers.applyFilter('name', this.state.filter, albums)
@@ -225,6 +227,10 @@ class LibraryAlbums extends React.Component{
 		]
 
 		var sort_options = [
+			{
+				value: null,
+				label: 'Default'
+			},
 			{
 				value: 'name',
 				label: 'Name'
@@ -255,7 +261,7 @@ class LibraryAlbums extends React.Component{
 					name="Sort"
 					value={this.props.sort} 
 					options={sort_options} 
-					selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} 
+					selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null} 
 					handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }}
 				/>
 				<DropdownField
@@ -306,8 +312,8 @@ const mapStateToProps = (state, ownProps) => {
 		spotify_library_albums_status: (state.ui.processes.SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR !== undefined ? state.ui.processes.SPOTIFY_GET_LIBRARY_ALBUMS_PROCESSOR.status : null),
 		view: state.ui.library_albums_view,
 		source: (state.ui.library_albums_source ? state.ui.library_albums_source : 'all'),
-		sort: (state.ui.library_albums_sort ? state.ui.library_albums_sort : 'name'),
+		sort: (state.ui.library_albums_sort ? state.ui.library_albums_sort : null),
-		sort_reverse: (state.ui.library_albums_sort_reverse ? true : false)
+		sort_reverse: (state.ui.library_albums_sort_reverse ? state.ui.library_albums_sort_reverse : false)
 	}
 }
 

src/js/views/library/LibraryArtists.js

@@ -122,7 +122,9 @@ class LibraryArtists extends React.Component{
 			}
 		}
 
-		artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse)
+		if (this.props.sort){
+			artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse);
+		}
 
 		if (this.state.filter !== ''){
 			artists = helpers.applyFilter('name', this.state.filter, artists)
@@ -201,6 +203,10 @@ class LibraryArtists extends React.Component{
 		];
 
 		var sort_options = [
+			{
+				label: 'Default',
+				value: null
+			},
 			{
 				label: 'Name',
 				value: 'name'
@@ -223,7 +229,7 @@ class LibraryArtists extends React.Component{
 					name="Sort"
 					value={this.props.sort}
 					options={sort_options}
-					selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} 
+					selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null} 
 					handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }} 
 				/>
 				<DropdownField
@@ -272,8 +278,8 @@ const mapStateToProps = (state, ownProps) => {
 		spotify_library_artists_status: (state.ui.processes.SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR !== undefined ? state.ui.processes.SPOTIFY_GET_LIBRARY_ARTISTS_PROCESSOR.status : null),
 		artists: state.core.artists,
 		source: (state.ui.library_artists_source ? state.ui.library_artists_source : 'all'),
-		sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : 'name'),
+		sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : null),
-		sort_reverse: (state.ui.library_artists_sort_reverse ? true : false),
+		sort_reverse: (state.ui.library_artists_sort_reverse ? state.ui.library_artists_sort_reverse : false),
 		view: state.ui.library_artists_view
 	}
 }

src/js/views/library/LibraryPlaylists.js

@@ -108,7 +108,9 @@ class LibraryPlaylists extends React.Component{
 			}
 		}
 
-		playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse);
+		if (this.props.sort){
+			playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse);
+		}
 		playlists = helpers.removeDuplicates(playlists);
 
 		if (this.state.filter !== ''){
@@ -197,6 +199,10 @@ class LibraryPlaylists extends React.Component{
 		];
 
 		var sort_options = [
+			{
+				value: null,
+				label: 'Default'
+			},
 			{
 				value: 'name',
 				label: 'Name'
@@ -229,7 +235,7 @@ class LibraryPlaylists extends React.Component{
 					name="Sort"
 					value={this.props.sort}
 					options={sort_options}
-					selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} 
+					selected_icon={this.props.sort ? (this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null} 
 					handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }}
 				/>
 				<DropdownField
@@ -284,8 +290,8 @@ const mapStateToProps = (state, ownProps) => {
 		me_id: (state.spotify.me ? state.spotify.me.id : false),
 		view: state.ui.library_playlists_view,
 		source: (state.ui.library_playlists_source ? state.ui.library_playlists_source : 'all'),
-		sort: (state.ui.library_playlists_sort ? state.ui.library_playlists_sort : 'name'),
+		sort: (state.ui.library_playlists_sort ? state.ui.library_playlists_sort : null),
-		sort_reverse: (state.ui.library_playlists_sort_reverse ? true : false),
+		sort_reverse: (state.ui.library_playlists_sort_reverse ? state.ui.library_playlists_sort_reverse : false),
 		playlists: state.core.playlists
 	}
 }

src/scss/components/_playback-controls.scss

@@ -91,8 +91,13 @@
 		vertical-align: bottom;
 		opacity: 0.8;
 
+		&:not(.sidebar-toggle){
+			@include click_feedback();
+		}
+
 		.icon {
 			font-size: 0.9em;
+			margin-bottom: 0;
 		}
 
 		&.active {

src/scss/global/_variables.scss

@@ -140,6 +140,49 @@ $bp_shallow: 650px;
     animation-iteration-count: 1;
 }
 
+@mixin click_feedback($duration: 0.2s, $easing: ease-out){
+	position: relative;
+
+	@keyframes click_feedback {
+	    0% {
+			top: 50%;
+			left: 0;
+			width: 100%;
+			padding-bottom: 100%;
+	    	opacity: 1;
+	    }
+	    100% {
+			top: 25%;
+			left: -25%;
+			width: 150%;
+			padding-bottom: 150%;
+	    	opacity: 0;
+	    }
+	}
+
+	&:after {
+		content: '';
+		display: block;
+		position: absolute;
+		background: rgba(255,255,255,0.5);
+		z-index: 1;
+		opacity: 0;
+		border-radius: 50%;
+		margin-top: -50%;
+		pointer-events: none;
+	}
+
+	&:focus,
+	&:active {
+		&:after {
+		    animation-name: click_feedback;
+		    animation-duration: $duration;
+		    animation-timing-function: $easing;
+		    animation-iteration-count: 1;
+		}
+	}
+}
+
 @keyframes slideloader {
     0% { 
     	left: 0%;