Cleaning up localstorage

This commit is contained in:
James Barnsley
2017-11-23 17:43:29 +13:00
parent faadd3ea05
commit 668f8c9d28
5 changed files with 164 additions and 110 deletions

42
src/js/bootstrap.js vendored
View File

@ -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)

View File

@ -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{
</span>
)
var go_to_album = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.goToAlbum(e)}>
<span className="label">Go to album</span>
</a>
</span>
)
var go_to_user = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.goToUser(e)}>
@ -591,10 +608,11 @@ class ContextMenu extends React.Component{
{play_uris}
{play_uris_next}
{add_to_queue}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
<div className="divider" />
{go_to_artist}
{copy_uris}
{this.canBeInLibrary() ? toggle_in_library : null}
</div>
)
break
@ -604,11 +622,11 @@ class ContextMenu extends React.Component{
<div>
{context.source == 'spotify' ? play_artist_top_tracks : null}
{context.source == 'spotify' ? start_radio : null}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
<div className="divider" />
{context.source == 'spotify' ? go_to_recommendations : null}
{copy_uris}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
</div>
)
break
@ -617,11 +635,11 @@ class ContextMenu extends React.Component{
return (
<div>
{play_playlist}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
<div className="divider" />
{context.source == 'spotify' ? go_to_user : null}
{copy_uris}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
</div>
)
break
@ -630,11 +648,12 @@ class ContextMenu extends React.Component{
return (
<div>
{play_playlist}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
<div className="divider" />
{context.source == 'spotify' ? go_to_user : null}
{copy_uris}
<div className="divider" />
{this.canBeInLibrary() ? toggle_in_library : null}
{delete_playlist}
</div>
)
@ -644,13 +663,14 @@ class ContextMenu extends React.Component{
return (
<div>
{context.items_count == 1 ? play_queue_item : null}
{context.items_count == 1 ? <div className="divider" /> : null}
<div className="divider" />
{add_to_playlist}
{context.items_count == 1 ? toggle_loved : null}
{toggle_loved}
<div className="divider" />
{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null}
{context.items_count == 1 ? go_to_track : null}
<div className="divider" />
{copy_uris}
<div className="divider" />
{remove_from_queue}
</div>
)
@ -665,11 +685,12 @@ class ContextMenu extends React.Component{
{context.source == 'spotify' && context.items_count == 1 ? start_radio : null}
<div className="divider" />
{add_to_playlist}
{context.items_count == 1 ? toggle_loved : null}
{toggle_loved}
<div className="divider" />
{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null}
{context.items_count == 1 ? go_to_track : null}
<div className="divider" />
{copy_uris}
<div className="divider" />
{remove_from_playlist}
</div>
)
@ -684,8 +705,10 @@ class ContextMenu extends React.Component{
{context.source == 'spotify' && context.items_count == 1 ? start_radio : null}
<div className="divider" />
{add_to_playlist}
{context.items_count == 1 ? toggle_loved : null}
{toggle_loved}
<div className="divider" />
{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}
<div className="divider" />
{copy_uris}

View File

@ -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 = {

View File

@ -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;
}
}

View File

@ -175,6 +175,11 @@
}
&.queue-track-list {
.list-item {
.liner {
padding-right: 60px;
}
}
.col {
&.name,
&.artists,