Padding on bottom and auto-scrolling commands; Fixing Spotify artists library process

This commit is contained in:
James Barnsley
2018-10-26 16:06:31 +13:00
parent f95651116a
commit 57c95adbc3
21 changed files with 14079 additions and 10744 deletions

View File

@ -125,6 +125,7 @@ class App extends React.Component{
}
}
/*
componentWillReceiveProps(nextProps){
// We've navigated to a new location
@ -137,6 +138,7 @@ class App extends React.Component{
}
}
}
*/
shouldTriggerShortcut(e){

View File

@ -27,7 +27,7 @@ export default class GridItem extends React.Component{
if (this.props.onClick && e.target.tagName.toLowerCase() !== 'a'){
// Scroll to the top
helpers.scrollToTop();
helpers.scrollTo();
// And then trigger the click event
this.props.onClick(e);

View File

@ -16,14 +16,7 @@ export default class extends React.Component{
handleClick(e){
if (!this.props.retainScroll){
if (this.props.scrollTo){
var element = document.getElementById(this.props.scrollTo);
if (element){
element.scrollIntoView();
}
} else {
helpers.scrollToTop();
}
helpers.scrollTo(this.props.scrollTo, (this.props.scrollTo));
}
}

View File

@ -389,11 +389,12 @@ export let formatAlbum = function(data){
'provider',
'name',
'type',
'artists_uris',
'tracks_uris',
'release_date',
'popularity',
'images'
'images',
'artists_uris',
'tracks_uris',
'artists' // Array of simple records
];
// Loop fields and import from data
@ -527,6 +528,10 @@ export let formatPlaylist = function(data){
playlist.followers = data.followers.total;
}
if (data.tracks && data.tracks.total !== undefined){
playlist.tracks_total = data.tracks.total;
}
if (data.owner){
playlist.owner = {
id: data.owner.id,
@ -537,9 +542,7 @@ export let formatPlaylist = function(data){
}
// Spotify upgraded their playlists URI to remove user component (Sept 2018)
if (playlist.uri.includes("spotify:user:")){
playlist.uri = playlist.uri.replace(/spotify:user:([^:]*?):/i, "spotify:");
}
playlist.uri = upgradeSpotifyPlaylistUri(playlist.uri);
if (playlist.provider === undefined && playlist.uri !== undefined){
playlist.provider = uriSource(playlist.uri);
@ -548,25 +551,6 @@ export let formatPlaylist = function(data){
return playlist;
}
/**
* Upgrade playlist uris to the new, simplified Spotify syntax (September 2018)
*
* @param uris = String or Array
* @return String or Array
**/
export let upgradePlaylistsUris = function(uris){
if (Array.isArray(uris)){
var upgraded = [];
for (var uri of uris){
upgraded.push(uri.replace(/spotify:user:([^:]*?):/i, "spotify:"));
}
} else {
var upgraded = uris = uris.replace(/spotify:user:([^:]*?):/i, "spotify:");
}
return upgraded;
}
/**
* Format a user objects into a universal format
@ -1413,8 +1397,8 @@ export let getIndexedRecords = function(index, uris){
/**
* Uppercase-ify the first character of a string
*
* @param string = string
* @return string
* @param string String
* @return String
**/
export let titleCase = function(string){
return string.charAt(0).toUpperCase() + string.slice(1)
@ -1425,16 +1409,55 @@ export let titleCase = function(string){
* Scroll to the top of the page
* Our 'content' is housed in the <main> DOM element
*
* @param target String (element ID, optional)
* @param smooth_scroll Boolean (optional)
**/
export let scrollToTop = function(){
export let scrollTo = function(target = null, smooth_scroll = false){
var main = document.getElementById('main');
// Remove our smooth-scroll class
main.classList.remove("smooth-scroll");
if (!smooth_scroll){
main.classList.remove("smooth-scroll");
}
// And now scroll it
main.scrollTo(0, 0);
// And now scroll to it
if (target){
document.getElementById(target).scrollIntoView();
} else {
main.scrollTo(0, 0);
}
// Now reinstate smooth scroll
main.classList.add("smooth-scroll");
}
if (!smooth_scroll){
main.classList.add("smooth-scroll");
}
}
/**
* Upgrade one or many Spotify Playlist URIs
* This is their new, simplified syntax (September 2018) but they haven't updated it everywhere
* So we need to manually strip user:abc to keep things consistent
*
* @param uris Array|String
* @return Array|String
**/
export let upgradeSpotifyPlaylistUris = function(uris){
var upgraded = [];
for (var uri of uris){
if (uri.includes("spotify:user:")){
uri = uri.replace(/spotify:user:([^:]*?):/i, "spotify:");
}
upgraded.push(uri);
}
return upgraded;
}
// As above, but for a single URI
export let upgradeSpotifyPlaylistUri = function(uri){
return upgradeSpotifyPlaylistUris([uri])[0];
}

View File

@ -759,32 +759,23 @@ const CoreMiddleware = (function(){
var records = action.records_data;
}
// TODO: To avoid double-looping, we could
// run a single loop to extract both the formatted record
// and the URI
switch (action.records_type){
case 'track':
records = helpers.formatTracks(records);
break;
case 'artist':
records = helpers.formatArtists(records);
break;
case 'album':
records = helpers.formatAlbums(records);
break;
case 'playlist':
records = helpers.formatPlaylists(records);
break;
case 'user':
records = helpers.formatUsers(records);
break;
// Pre-emptively format tracks
// Providers give us tracks in all kinds of structures, so this cleans things first
if (action.records_type == 'track'){
records = helpers.formatTracks(records);
}
var records_type_plural = action.records_type+'s';
var records_index = {};
var records_uris = helpers.arrayOf('uri', records);
// Append our records_uris array with our new records
// If we're a list of playlists, we need to manually filter Spotify's new URI structure
// Really poor form because they haven't updated it everywhere, yet
if (action.records_type == 'playlist'){
records_uris = helpers.upgradeSpotifyPlaylistUris(records_uris);
}
// Append our parent object's reference to these records
var uris = records_uris;
if (parent[records_type_plural+'_uris'] !== undefined){
uris = [...parent[records_type_plural+'_uris'], ...uris];
@ -808,9 +799,6 @@ const CoreMiddleware = (function(){
records_action[records_type_plural] = records;
store.dispatch(records_action);
//console.log(parent_action);
//console.log(records_action);
next(action);
break;

View File

@ -399,7 +399,7 @@ export function getFeaturedPlaylists(){
type: 'SPOTIFY_FEATURED_PLAYLISTS_LOADED',
data: {
message: response.message,
playlists: helpers.upgradePlaylistsUris(helpers.arrayOf('uri',response.playlists.items))
playlists: helpers.upgradeSpotifyPlaylistUris(helpers.arrayOf('uri',response.playlists.items))
}
});
},

View File

@ -197,7 +197,7 @@ const SpotifyMiddleware = (function(){
delete action.playlists;
// Upgrade our URIs
action.uris = helpers.upgradePlaylistsUris(action.uris);
action.uris = helpers.upgradeSpotifyPlaylistUris(action.uris);
next(action);
break;

View File

@ -366,7 +366,7 @@ class Settings extends React.Component {
</div>
</div>}
<div className="field commands-setup">
<div className="field commands-setup" id="commands-setup">
<div className="name">
Commands
</div>

View File

@ -73,10 +73,10 @@ class LibraryArtists extends React.Component{
}
}
if (newProps.spotify_enabled && (newProps.source == 'all' || newProps.source == 'spotify')){
if (newProps.spotify_enabled && (newProps.source == 'all' || newProps.source == 'spotify')){
// Filter changed, but we haven't got this provider's library yet
if (!newProps.spotify_library_artists_status != 'finished' && newProps.spotify_library_artists_status != 'started'){
if (newProps.spotify_library_artists_status != 'finished' && newProps.spotify_library_artists_status != 'started'){
this.props.spotifyActions.getLibraryArtists();
}
}

View File

@ -46,12 +46,28 @@ class EditCommand extends React.Component{
window.history.back();
// A bit hacky, but wait for a moment to allow the back navigation
// and then scroll down to our commands list
setTimeout(() => {
helpers.scrollTo("commands-setup");
},
10
);
return false;
}
handleDelete(e){
this.props.pusherActions.removeCommand(this.state.id);
window.history.back();
// A bit hacky, but wait for a moment to allow the back navigation
// and then scroll down to our commands list
setTimeout(() => {
helpers.scrollTo("commands-setup");
},
10
);
}
render(){