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

Fixing sort order for popularity, fixes #343;

Browse Source
This commit is contained in:
James Barnsley
2018-12-08 21:16:05 +13:00
parent 291b1ed39e
commit 657c060eb6
15 changed files with 95 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/components/AlbumGrid.js
View File

@ -28,9 +28,10 @@ class AlbumGrid extends React.Component{
render(){
if (this.props.albums){
var className = "grid grid--albums"
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' grid--single-row'
var className = "grid grid--albums";
if (this.props.className) className += ' '+this.props.className;
if (this.props.single_row) className += ' grid--single-row';
if (this.props.mini) className += ' grid--mini';
return (
<div className={className}>

7
src/js/components/ArtistGrid.js
View File

@ -36,9 +36,10 @@ class ArtistGrid extends React.Component{
render(){
if (this.props.artists){
var className = "grid grid--artists"
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' grid--single-row'
var className = "grid grid--artists";
if (this.props.className) className += ' '+this.props.className;
if (this.props.single_row) className += ' grid--single-row';
if (this.props.mini) className += ' grid--mini';
return (
<div className={className}>

6
src/js/components/CategoryGrid.js
View File

@ -13,8 +13,10 @@ export default class CategoryGrid extends React.Component{
render(){
if (!this.props.categories ) return null
var className = "grid grid--categories"
if (this.props.className ) className += ' '+this.props.className
var className = "grid grid--categories";
if (this.props.className) className += ' '+this.props.className;
if (this.props.mini) className += ' grid--mini';
return (
<div className={className}>
{

8
src/js/components/PlaylistGrid.js
View File

@ -29,9 +29,11 @@ class PlaylistGrid extends React.Component{
render(){
if (!this.props.playlists ) return null
var className = "grid grid--playlists"
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' grid--single-row'
var className = "grid grid--playlists";
if (this.props.className) className += ' '+this.props.className;
if (this.props.single_row) className += ' grid--single-row';
if (this.props.mini) className += ' grid--mini';
return (
<div className={className}>
{

7
src/js/helpers.js
View File

@ -1234,7 +1234,7 @@ export let sortItems = function (array, property, reverse = false, sort_map = nu
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;
a_value = null;
break;
} else {
a_value = a_value[a_property_split[i]];
@ -1245,7 +1245,7 @@ export let sortItems = function (array, property, reverse = false, sort_map = nu
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;
b_value = null;
break;
} else {
b_value = b_value[b_property_split[i]];
@ -1282,6 +1282,9 @@ export let sortItems = function (array, property, reverse = false, sort_map = nu
// Numeric sorting
} else {
if (a_value == null && b_value == null) return 0;
if (a_value == null) return -1;
if (b_value == null) return 1;
if (parseInt(a_value) > parseInt(b_value)) return 1;
if (parseInt(a_value) < parseInt(b_value)) return -1;
return 0

2
src/js/views/Album.js
View File

@ -141,7 +141,7 @@ class Album extends React.Component{
<h1>{album.name}</h1>
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(album.uri )} /><span className="tooltip__content">{helpers.uriSource(this.props.params.uri )} {album.type ? album.type : 'album'}</span></li> : null}
{!this.props.slim_mode ? <li><Icon type="fontawesome" name={helpers.sourceIcon(album.uri )} /></li> : null}
{album.artists && album.artists.length > 0 ? <li><ArtistSentence artists={album.artists} /></li> : null}
{album.release_date ? <li><Dater type="date" data={album.release_date} /></li> : null}
{!this.props.slim_mode ? <li>

2
src/js/views/Playlist.js
View File

@ -213,7 +213,7 @@ class Playlist extends React.Component{
{playlist.description ? <h2 className="description mid_grey-text" dangerouslySetInnerHTML={{__html: playlist.description}}></h2> : null }
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(playlist.uri)} /><span className="tooltip__content">{helpers.uriSource(playlist.uri)} playlist</span></li> : null }
{!this.props.slim_mode ? <li><Icon type="fontawesome" name={helpers.sourceIcon(playlist.uri)} /></li> : null }
<li>
{playlist.tracks_total ? playlist.tracks_total : (playlist.tracks ? playlist.tracks.length : '0')} tracks,&nbsp;
<Dater type="total-time" data={playlist.tracks} />

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

@ -126,7 +126,9 @@ class Search extends React.Component{
sort_map = this.props.uri_schemes_priority;
break;
case 'followers.total':
// Followers (aka popularlity works in reverse-numerical order)
// Ie "more popular" is a bigger number
case 'followers':
sort_reverse = !sort_reverse;
break;
}
@ -166,7 +168,7 @@ class Search extends React.Component{
tracks = [...tracks, ...this.props.spotify_search_results.tracks];
}
tracks = helpers.sortItems(tracks, (sort == 'followers.total' ? 'popularity' : sort), sort_reverse, sort_map);
tracks = helpers.sortItems(tracks, (sort == 'followers' ? 'popularity' : sort), sort_reverse, sort_map);
switch (this.state.type){
@ -252,8 +254,8 @@ class Search extends React.Component{
<URILink type="search" uri={"search:artist:"+this.state.term}>
<h4>Artists</h4>
</URILink>
<ArtistGrid show_source_icon artists={artists.slice(0,5)} />
{artists.length > 4 ? <URILink type="search" uri={"search:artist:"+this.state.term} className="button grey">
<ArtistGrid mini show_source_icon artists={artists.slice(0,6)} />
{artists.length >= 6 ? <URILink type="search" uri={"search:artist:"+this.state.term} className="button grey">
All artists ({artists.length})
</URILink> : null}
</div>
@ -270,8 +272,8 @@ class Search extends React.Component{
<URILink type="search" uri={"search:album:"+this.state.term}>
<h4>Albums</h4>
</URILink>
<AlbumGrid show_source_icon albums={albums.slice(0,5)} />
{albums.length > 4 ? <URILink type="search" uri={"search:album:"+this.state.term} className="button grey">
<AlbumGrid mini show_source_icon albums={albums.slice(0,6)} />
{albums.length >= 6 ? <URILink type="search" uri={"search:album:"+this.state.term} className="button grey">
All albums ({albums.length})
</URILink> : null}
</div>
@ -288,8 +290,8 @@ class Search extends React.Component{
<URILink type="search" uri={"search:playlist:"+this.state.term}>
<h4>Playlists</h4>
</URILink>
<PlaylistGrid show_source_icon playlists={playlists.slice(0,5)} />
{playlists.length > 4 ? <URILink type="search" uri={"search:playlist:"+this.state.term} className="button grey">
<PlaylistGrid mini show_source_icon playlists={playlists.slice(0,6)} />
{playlists.length >= 6 ? <URILink type="search" uri={"search:playlist:"+this.state.term} className="button grey">
All playlists ({playlists.length})
</URILink> : null}
</div>
@ -349,7 +351,7 @@ class Search extends React.Component{
var sort_options = [
{
value: 'followers.total',
value: 'followers',
label: 'Popularity'
},
{

2
src/js/views/Track.js
View File

@ -233,7 +233,7 @@ class Track extends React.Component{
</h2>
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(this.props.params.uri)} /><span className="tooltip__content">{helpers.uriSource(this.props.params.uri)} track</span></li> : null}
{!this.props.slim_mode ? <li><Icon type="fontawesome" name={helpers.sourceIcon(this.props.params.uri)} /></li> : null}
{track.date ? <li><Dater type="date" data={track.date} /></li> : null}
{track.explicit ? <li><span className="flag dark">EXPLICIT</span></li> : null}
<li>

4
src/scss/components/_grid.scss
View File

@ -73,7 +73,7 @@
}
}
@include responsive(null, 1900px){
@include responsive(null, $bp_huge){
&--mini {
.grid__item {
@include grid_item(3)
@ -96,7 +96,7 @@
}
}
@include responsive(1899px, 1200px){
@include responsive($bp_huge, 1200px){
&--mini {
.grid__item {
@include grid_item(2 )

1
src/scss/global/_variables.scss
View File

@ -1,4 +1,5 @@
$bp_huge: 1900px;
$bp_wide: 1000px;
$bp_medium: 800px;
$bp_small: 500px;

19
src/scss/views/_search.scss
View File

@ -44,18 +44,23 @@
margin-right: 0;
}
.grid-item {
@include grid_item(2);
.button {
margin-top: 10px;
}
}
}
@include responsive($bp_huge){
.search-result-sections {
.grid__item {
&:nth-child(1n+5){
display: none;
}
}
}
}
@include responsive($bp_medium){
.search-form {
top: 10px;
left: 40px;
@ -73,6 +78,12 @@
section {
width: auto;
float: none;
margin-right: 0;
padding-bottom: 20px;
.button {
display: none;
}
}
}
}