Padding on bottom and auto-scrolling commands; Fixing Spotify artists library process
This commit is contained in:
@ -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){
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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];
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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))
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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(){
|
||||
|
||||
Reference in New Issue
Block a user