From 668f8c9d2857bb4256af9a6c7e1afb5ca7736136 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Thu, 23 Nov 2017 17:43:29 +1300 Subject: [PATCH] Cleaning up localstorage --- src/js/bootstrap.js | 42 ++------ src/js/components/ContextMenu.js | 47 +++++--- src/js/helpers.js | 60 +++++++++++ src/js/services/localstorage/middleware.js | 120 ++++++++++----------- src/scss/components/_lists.scss | 5 + 5 files changed, 164 insertions(+), 110 deletions(-) diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js index 537b1f98..997f60c3 100755 --- a/src/js/bootstrap.js +++ b/src/js/bootstrap.js @@ -80,41 +80,13 @@ var initialState = { } }; -// if we've got a stored version of spotify state, load and merge -if (localStorage.getItem('core')){ - var storedCore = JSON.parse(localStorage.getItem('core') ); - initialState.core = Object.assign(initialState.core, storedCore ); -} - -// if we've got a stored version of spotify state, load and merge -if (localStorage.getItem('ui')){ - var storedUi = JSON.parse(localStorage.getItem('ui') ); - initialState.ui = Object.assign(initialState.ui, storedUi ); -} - -// if we've got a stored version of mopidy state, load and merge -if (localStorage.getItem('mopidy')){ - var storedMopidy = JSON.parse(localStorage.getItem('mopidy') ); - initialState.mopidy = Object.assign(initialState.mopidy, storedMopidy ); -} - -// if we've got a stored version of pusher state, load and merge -if (localStorage.getItem('pusher')){ - var storedPusher = JSON.parse(localStorage.getItem('pusher') ); - initialState.pusher = Object.assign(initialState.pusher, storedPusher ); -} - -// if we've got a stored version of spotify state, load and merge -if (localStorage.getItem('spotify')){ - var storedSpotify = JSON.parse(localStorage.getItem('spotify') ); - initialState.spotify = Object.assign(initialState.spotify, storedSpotify ); -} - -// if we've got a stored version of lastfm state, load and merge -if (localStorage.getItem('lastfm')){ - var storedLastfm = JSON.parse(localStorage.getItem('lastfm') ); - initialState.lastfm = Object.assign(initialState.lastfm, storedLastfm ); -} +// load all our stored values from LocalStorage +initialState.core = Object.assign({}, initialState.core, helpers.getStorage('core')); +initialState.ui = Object.assign({}, initialState.ui, helpers.getStorage('ui')); +initialState.mopidy = Object.assign({}, initialState.mopidy, helpers.getStorage('mopidy')); +initialState.pusher = Object.assign({}, initialState.pusher, helpers.getStorage('pusher')); +initialState.spotify = Object.assign({}, initialState.spotify, helpers.getStorage('spotify')); +initialState.lastfm = Object.assign({}, initialState.lastfm, helpers.getStorage('lastfm')); console.log('Bootstrapping', initialState) diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 6ba2a926..81d61d58 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -262,6 +262,15 @@ class ContextMenu extends React.Component{ } } + goToAlbum(e){ + if (!this.props.menu.items || this.props.menu.items.length <= 0 || !this.props.menu.items[0].album){ + return null + } else { + this.props.uiActions.hideContextMenu() + hashHistory.push(global.baseURL +'album/'+ this.props.menu.items[0].album.uri ) + } + } + goToUser(e){ if (!this.props.menu.items || this.props.menu.items.length <= 0){ return null @@ -519,6 +528,14 @@ class ContextMenu extends React.Component{ ) + var go_to_album = ( + + this.goToAlbum(e)}> + Go to album + + + ) + var go_to_user = ( this.goToUser(e)}> @@ -591,10 +608,11 @@ class ContextMenu extends React.Component{ {play_uris} {play_uris_next} {add_to_queue} + {this.canBeInLibrary() ?
: null} + {this.canBeInLibrary() ? toggle_in_library : null}
{go_to_artist} {copy_uris} - {this.canBeInLibrary() ? toggle_in_library : null}
) break @@ -604,11 +622,11 @@ class ContextMenu extends React.Component{
{context.source == 'spotify' ? play_artist_top_tracks : null} {context.source == 'spotify' ? start_radio : null} + {this.canBeInLibrary() ?
: null} + {this.canBeInLibrary() ? toggle_in_library : null}
{context.source == 'spotify' ? go_to_recommendations : null} {copy_uris} - {this.canBeInLibrary() ?
: null} - {this.canBeInLibrary() ? toggle_in_library : null}
) break @@ -617,11 +635,11 @@ class ContextMenu extends React.Component{ return (
{play_playlist} + {this.canBeInLibrary() ?
: null} + {this.canBeInLibrary() ? toggle_in_library : null}
{context.source == 'spotify' ? go_to_user : null} {copy_uris} - {this.canBeInLibrary() ?
: null} - {this.canBeInLibrary() ? toggle_in_library : null}
) break @@ -630,11 +648,12 @@ class ContextMenu extends React.Component{ return (
{play_playlist} + {this.canBeInLibrary() ?
: null} + {this.canBeInLibrary() ? toggle_in_library : null}
{context.source == 'spotify' ? go_to_user : null} {copy_uris}
- {this.canBeInLibrary() ? toggle_in_library : null} {delete_playlist}
) @@ -644,13 +663,14 @@ class ContextMenu extends React.Component{ return (
{context.items_count == 1 ? play_queue_item : null} - {context.items_count == 1 ?
: null} +
{add_to_playlist} - {context.items_count == 1 ? toggle_loved : null} + {toggle_loved} +
{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null} {context.items_count == 1 ? go_to_track : null} -
{copy_uris} +
{remove_from_queue}
) @@ -665,11 +685,12 @@ class ContextMenu extends React.Component{ {context.source == 'spotify' && context.items_count == 1 ? start_radio : null}
{add_to_playlist} - {context.items_count == 1 ? toggle_loved : null} + {toggle_loved} +
{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null} {context.items_count == 1 ? go_to_track : null} -
{copy_uris} +
{remove_from_playlist}
) @@ -684,8 +705,10 @@ class ContextMenu extends React.Component{ {context.source == 'spotify' && context.items_count == 1 ? start_radio : null}
{add_to_playlist} - {context.items_count == 1 ? toggle_loved : null} + {toggle_loved} +
{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null} + {context.items_count == 1 ? go_to_album : null} {context.items_count == 1 ? go_to_track : null}
{copy_uris} diff --git a/src/js/helpers.js b/src/js/helpers.js index d82be975..87572a9c 100755 --- a/src/js/helpers.js +++ b/src/js/helpers.js @@ -4,6 +4,66 @@ export let isTouchDevice = function(){ return 'ontouchstart' in document.documentElement } + +/** + * Storage handler + * All localStorage tasks are handled below. This means we can detect for localStorage issues in one place + **/ + +var storage = (function() { + var uid = new Date; + var storage; + var result; + try { + (storage = window.localStorage).setItem(uid, uid); + result = storage.getItem(uid) == uid; + storage.removeItem(uid); + return result && storage; + } catch (exception) {} +}()); + +export let getStorage = function(key, default_value = {}){ + if (storage){ + value = storage.getItem(key); + if (value){ + return JSON.parse(value); + } else { + return default_value; + } + + } else { + alert("Local storage not available"); + return default_value; + } +} + +export let setStorage = function(key, value){ + if (storage){ + var stored_value = storage.getItem(key); + if (stored_value){ + var new_value = Object.assign( + {}, + JSON.parse(stored_value), + value + ); + } else { + var new_value = value; + } + storage.setItem(key, JSON.stringify(new_value)); + } else { + alert("Local storage not available"); + return false; + } +} + + +/** + * Image sizing + * We digest all our known image source formats into a universal small,medium,large,huge object + * + * @param images = array + * @return obj + **/ export let sizedImages = function(images){ var sizes = { diff --git a/src/js/services/localstorage/middleware.js b/src/js/services/localstorage/middleware.js index 6149da5b..b61a5903 100755 --- a/src/js/services/localstorage/middleware.js +++ b/src/js/services/localstorage/middleware.js @@ -1,4 +1,6 @@ +var helpers = require('../../helpers.js') + const localstorageMiddleware = (function(){ /** @@ -30,55 +32,60 @@ const localstorageMiddleware = (function(){ switch(action.type){ case 'PUSHER_CONNECTED': - var pusher = JSON.parse(localStorage.getItem('pusher') ); - if (!pusher ) pusher = {}; - Object.assign( - pusher,{ + helpers.setStorage( + 'pusher', + { connection_id: action.connection_id } ); - localStorage.setItem('pusher', JSON.stringify(pusher)); break; case 'PUSHER_SET_PORT': - var pusher = JSON.parse(localStorage.getItem('pusher') ); - if (!pusher ) pusher = {}; - Object.assign(pusher, { port: action.port } ); - localStorage.setItem('pusher', JSON.stringify(pusher)); + helpers.setStorage( + 'pusher', + { + port: action.port + } + ); break; case 'PUSHER_USERNAME_CHANGED': - var stored_pusher = JSON.parse(localStorage.getItem('pusher') ) - var pusher = Object.assign({}, stored_pusher, { username: action.username }) - localStorage.setItem('pusher', JSON.stringify(pusher)) + helpers.setStorage( + 'pusher', + { + username: action.username + } + ); break; case 'MOPIDY_SET_CONFIG': - var mopidy = { - host: action.config.host, - port: action.config.port - }; - localStorage.setItem('mopidy', JSON.stringify(mopidy)); + helpers.setStorage( + 'mopidy', + { + host: action.config.host, + port: action.config.port + } + ); break; case 'MOPIDY_URISCHEMES_FILTERED': - var mopidy = JSON.parse(localStorage.getItem('mopidy') ); - if (!mopidy ) mopidy = {}; - Object.assign(mopidy, { uri_schemes: action.data }); - localStorage.setItem('mopidy', JSON.stringify(mopidy)); + helpers.setStorage( + 'mopidy', + { + uri_schemes: action.data + } + ); break; case 'SPOTIFY_SET_CONFIG': - var spotify = JSON.parse(localStorage.getItem('spotify') ); - if (!spotify ) spotify = {}; - Object.assign( - spotify,{ + helpers.setStorage( + 'spotify', + { authentication_provider: action.config.authentication_provider, country: action.config.country, locale: action.config.locale } ); - localStorage.setItem('spotify', JSON.stringify(spotify)); break; case 'SPOTIFY_IMPORT_AUTHORIZATION': @@ -88,10 +95,8 @@ const localstorageMiddleware = (function(){ } else if (action.data){ var authorization = action.data; } - var spotify = JSON.parse(localStorage.getItem('spotify') ); - spotify = Object.assign( - {}, - (spotify ? spotify : {}), + helpers.setStorage( + 'spotify', { authorization: authorization, access_token: authorization.access_token, @@ -99,14 +104,11 @@ const localstorageMiddleware = (function(){ token_expiry: authorization.token_expiry } ); - localStorage.setItem('spotify', JSON.stringify(spotify)); break; case 'SPOTIFY_AUTHORIZATION_REVOKED': - var spotify = JSON.parse(localStorage.getItem('spotify') ); - spotify = Object.assign( - {}, - (spotify ? spotify : {}), + helpers.setStorage( + 'spotify', { authorization: false, access_token: false, @@ -114,44 +116,40 @@ const localstorageMiddleware = (function(){ token_expiry: false } ); - localStorage.setItem('spotify', JSON.stringify(spotify)); break; case 'SPOTIFY_TOKEN_REFRESHED': - var spotify = JSON.parse(localStorage.getItem('spotify') ); - if (!spotify ) spotify = {}; - Object.assign( - spotify,{ + helpers.setStorage( + 'spotify', + { access_token: action.data.access_token, token_expiry: action.data.token_expiry, provider: action.provider } ); - localStorage.setItem('spotify', JSON.stringify(spotify)); break; case 'SPOTIFY_ME_LOADED': - var spotify = JSON.parse(localStorage.getItem('spotify') ); - if (!spotify ) spotify = {}; - Object.assign( - spotify, - { me: action.data } + helpers.setStorage( + 'spotify', + { + me: action.data + } ); - localStorage.setItem('spotify', JSON.stringify(spotify)); break; case 'CORE_SET': - var core = JSON.parse(localStorage.getItem('core') ); - if (!core ) core = {}; - Object.assign(core, action.data ); - localStorage.setItem('core', JSON.stringify(core)); + helpers.setStorage( + 'core', + action.data + ); break case 'UI_SET': - var ui = JSON.parse(localStorage.getItem('ui') ); - if (!ui ) ui = {}; - Object.assign(ui, action.data ); - localStorage.setItem('ui', JSON.stringify(ui)); + helpers.setStorage( + 'ui', + action.data + ); break case 'SUPPRESS_BROADCAST': @@ -169,25 +167,21 @@ const localstorageMiddleware = (function(){ break case 'LASTFM_AUTHORIZATION_GRANTED': - var lastfm = JSON.parse(localStorage.getItem('lastfm') ); - lastfm = Object.assign( - {}, + helpers.setStorage( + 'lastfm', { session: action.data.session } ); - localStorage.setItem('lastfm', JSON.stringify(lastfm)); break; case 'LASTFM_AUTHORIZATION_REVOKED': - var lastfm = JSON.parse(localStorage.getItem('lastfm') ); - lastfm = Object.assign( - {}, + helpers.setStorage( + 'lastfm', { session: null } ); - localStorage.setItem('lastfm', JSON.stringify(lastfm)); break; } } diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 65ba7b96..bca4d6e3 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -175,6 +175,11 @@ } &.queue-track-list { + .list-item { + .liner { + padding-right: 60px; + } + } .col { &.name, &.artists,