secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Revising search sorting backend; Polishing context menu on mobile

Browse Source
This commit is contained in:
James Barnsley
2017-12-30 22:43:05 +13:00
parent 5d696055b1
commit d16729880d
5 changed files with 106 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/js/helpers.js
View File

@ -595,55 +595,76 @@ export let createRange = function (indexes){
* @param array = array to sort
* @param property = string to sort by
* @param reverse = boolean
* @param sort_map = array of value ordering (rather than alphabetical, numerical, etc)
* @return array
**/
export let sortItems = function (array, property, reverse = false){
export let sortItems = function (array, property, reverse = false, sort_map = null){
function compare(a,b){
var a_value = a
var a_property_split = property.split('.')
var a_value = a;
var a_property_split = property.split('.');
for (var i = 0; i < a_property_split.length; i++){
if (typeof(a_value[a_property_split[i]]) === 'undefined'){
a_value = false
break
a_value = false;
break;
} else {
a_value = a_value[a_property_split[i]]
a_value = a_value[a_property_split[i]];
}
}
var b_value = b
var b_property_split = property.split('.')
for(var i = 0; i < b_property_split.length; i++){
var b_value = b;
var b_property_split = property.split('.');
for (var i = 0; i < b_property_split.length; i++){
if (typeof(b_value[b_property_split[i]]) === 'undefined'){
b_value = false
break
b_value = false;
break;
} else {
b_value = b_value[b_property_split[i]]
b_value = b_value[b_property_split[i]];
}
}
if (typeof(a_value) === 'boolean'){
if (a_value && !b_value) return -1
if (!a_value && b_value) return 1
// Sorting by URI as a reference for sorting by uri source (first component of URI)
if (property == 'uri'){
a_value = uriSource(a_value);
b_value = uriSource(b_value);
}
// Map sorting
// Use the index of the string as a sorting mechanism
if (sort_map){
var a_index = sort_map.indexOf(a_value+':');
var b_index = sort_map.indexOf(b_value+':');
if (a_index < b_index) return 1;
if (a_index > b_index) return -1;
// Boolean sorting
} else if (typeof(a_value) === 'boolean'){
if (a_value && !b_value) return -1;
if (!a_value && b_value) return 1;
return 0
}else if (typeof(a_value) === 'string'){
if (!a_value || !b_value ) return 0
if (a_value.toLowerCase() > b_value.toLowerCase()) return 1
if (a_value.toLowerCase() < b_value.toLowerCase()) return -1
// Alphabetic sorting
} else if (typeof(a_value) === 'string'){
if (!a_value || !b_value ) return 0;
if (a_value.toLowerCase() > b_value.toLowerCase()) return 1;
if (a_value.toLowerCase() < b_value.toLowerCase()) return -1;
return 0
// Numeric sorting
} else {
if (parseInt(a_value) > parseInt(b_value)) return 1
if (parseInt(a_value) < parseInt(b_value)) return -1
if (parseInt(a_value) > parseInt(b_value)) return 1;
if (parseInt(a_value) < parseInt(b_value)) return -1;
return 0
}
}
var sorted = Object.assign([], array.sort(compare))
if (reverse ) sorted.reverse()
return sorted
var sorted = Object.assign([], array.sort(compare));
if (reverse){
sorted.reverse();
}
return sorted;
}
/**

54
src/js/views/Search.js
View File

@ -85,44 +85,50 @@ class Search extends React.Component{
}
renderResults(){
var spotify_search_enabled = (this.props.search_settings && this.props.search_settings.spotify)
var spotify_search_enabled = (this.props.search_settings && this.props.search_settings.spotify);
var artists = []
if (this.props.sort == 'uri'){
var sort_map = this.props.search_uri_schemes;
} else {
var sort_map = null;
}
var artists = [];
if (this.props.mopidy_search_results.artists){
artists = [...artists, ...helpers.getIndexedRecords(this.props.artists,this.props.mopidy_search_results.artists)]
artists = [...artists, ...helpers.getIndexedRecords(this.props.artists,this.props.mopidy_search_results.artists)];
}
if (this.props.spotify_search_results.artists){
artists = [...artists, ...helpers.getIndexedRecords(this.props.artists,this.props.spotify_search_results.artists)]
artists = [...artists, ...helpers.getIndexedRecords(this.props.artists,this.props.spotify_search_results.artists)];
}
artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse);
artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse, sort_map);
var albums = []
var albums = [];
if (this.props.mopidy_search_results.albums){
albums = [...albums, ...helpers.getIndexedRecords(this.props.albums,this.props.mopidy_search_results.albums)];
}
if (this.props.spotify_search_results.albums){
albums = [...albums, ...helpers.getIndexedRecords(this.props.albums,this.props.spotify_search_results.albums)]
}
albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse, sort_map);
var playlists = []
if (this.props.mopidy_search_results.playlists){
playlists = [...playlists, ...helpers.getIndexedRecords(this.props.playlists,this.props.mopidy_search_results.playlists)]
playlists = [...playlists, ...helpers.getIndexedRecords(this.props.playlists,this.props.mopidy_search_results.playlists)];
}
if (this.props.spotify_search_results.playlists){
playlists = [...playlists, ...helpers.getIndexedRecords(this.props.playlists,this.props.spotify_search_results.playlists)]
playlists = [...playlists, ...helpers.getIndexedRecords(this.props.playlists,this.props.spotify_search_results.playlists)];
}
playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse);
playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse, sort_map);
var tracks = []
var tracks = [];
if (this.props.mopidy_search_results.tracks){
tracks = [...tracks, ...this.props.mopidy_search_results.tracks]
tracks = [...tracks, ...this.props.mopidy_search_results.tracks];
}
if (this.props.spotify_search_results.tracks){
tracks = [...tracks, ...this.props.spotify_search_results.tracks]
tracks = [...tracks, ...this.props.spotify_search_results.tracks];
}
tracks = helpers.sortItems(tracks, this.props.sort, this.props.sort_reverse);
tracks = helpers.sortItems(tracks, this.props.sort, this.props.sort_reverse, sort_map);
switch (this.props.view){
case 'artists':
@ -134,7 +140,7 @@ class Search extends React.Component{
</section>
</div>
)
break
break;
case 'albums':
return (
@ -145,7 +151,7 @@ class Search extends React.Component{
</section>
</div>
)
break
break;
case 'playlists':
return (
@ -156,7 +162,7 @@ class Search extends React.Component{
</section>
</div>
)
break
break;
case 'tracks':
return (
@ -167,7 +173,7 @@ class Search extends React.Component{
</section>
</div>
)
break
break;
default:
@ -181,7 +187,7 @@ class Search extends React.Component{
</section>
)
} else {
var artists_section = null
var artists_section = null;
}
if (albums.length > 0){
@ -194,7 +200,7 @@ class Search extends React.Component{
</section>
)
} else {
var albums_section = null
var albums_section = null;
}
if (playlists.length > 0){
@ -207,7 +213,7 @@ class Search extends React.Component{
</section>
)
} else {
var playlists_section = null
var playlists_section = null;
}
if (tracks.length > 0){
@ -219,7 +225,7 @@ class Search extends React.Component{
</section>
)
} else {
var tracks_section = null
var tracks_section = null;
}
return (
@ -273,7 +279,7 @@ class Search extends React.Component{
label: 'Duration'
},
{
value: 'source',
value: 'uri',
label: 'Source'
}
]

28
src/scss/components/_context-menu.scss
View File

@ -144,18 +144,18 @@
height: 1px;
padding: 0;
margin: 0;
background: lighten($grey, 8%);
background: lighten($grey, 5%);
}
& > span {
display: block;
margin-bottom: -1px;
button,
.button,
.dropdown-field {
text-decoration: none;
display: block;
border: 0;
margin: 0;
min-width: 100% !important;
max-width: 100% !important;
@ -165,10 +165,7 @@
text-transform: none;
font-weight: 300;
color: inherit;
&:not(:first-child):not(.dropdown-field){
border-top: 1px solid lighten($dark_grey, 8%);
}
border-bottom: 1px solid lighten($grey, 5%) !important;
.fa {
display: none;
@ -187,29 +184,34 @@
}
.dropdown-field {
padding: 0;
box-shadow: none;
padding: 16px 20px;
.label {
padding: 16px 20px;
padding: 0 0 3px 0;
font-weight: 800;
}
.options {
display: block;
position: static;
background: $darkest_grey;
background: transparent;
border-radius: 0;
border: 0;
color: $white !important;
box-shadow: none;
.option {
padding: 12px 20px 12px 50px;
display: inline-block;
padding: 3px 5px;
border-radius: 0;
opacity: 0.6;
.fa {
display: inline-block;
left: 25px;
top: 14px;
position: relative;
padding-right: 5px;
top: auto;
left: auto;
}
}

11
src/scss/components/_filter-field.scss
View File

@ -44,6 +44,7 @@
#context-menu {
.filter-field {
display: block;
border-bottom: 1px solid lighten($grey, 5%);
.fa {
top: 17px;
@ -51,10 +52,14 @@
color: $white !important;
}
input {
padding: 14px 18px 14px 42px;
form {
width: 100%;
box-sizing: border-box;
input {
padding: 14px 18px 14px 42px;
width: 100%;
box-sizing: border-box;
}
}
}
}

10
src/scss/components/_modal.scss
View File

@ -153,7 +153,7 @@
}
&.draggable {
padding-left: 35px;
padding-left: 35px !important;
.drag-handle {
position: absolute;
@ -341,9 +341,15 @@
border-top: 0;
width: auto !important;
margin: 0;
&.draggable {
.drag-handle {
padding-top: 14px;
padding-bottom: 14px;
}
}
}
}
}
}
}