Experimenting to persistant index store

mopidy_iris/static/app.css

@@ -2601,6 +2601,11 @@ h4 {
   h4 .dropdown-field {
     margin-left: 10px; }
 
+h5 {
+  font-size: 1rem;
+  margin-bottom: 4px;
+  font-weight: 700; }
+
 p a {
   color: inherit; }
   p a:hover {
@@ -5736,6 +5741,10 @@ main header {
   pointer-events: none;
   width: 220px;
   max-width: 98vw; }
+  .debug-info-section {
+    padding-top: 14px; }
+    .debug-info-section:first-child {
+      padding-top: 0; }
 
 .has-tooltip {
   position: relative; }

mopidy_iris/static/app.js

@@ -61265,6 +61265,32 @@ var localstorageMiddleware = function () {
                             session: null
                         });
                         break;
+
+                    /**
+                     * Experimental saving of stores to localStorage
+                     * This uses way too much storage space (ie 10MB+) so won't work. We need
+                     * to use the IndexedDB engine instead for storing this quantity of data
+                      case 'UPDATE_TRACKS_INDEX':
+                        helpers.setStorage('core', {tracks: action.tracks});
+                        next(action);
+                        break;
+                    case 'UPDATE_ALBUMS_INDEX':
+                        helpers.setStorage('core', {albums: action.albums});
+                        next(action);
+                        break;
+                    case 'UPDATE_ARTISTS_INDEX':
+                        helpers.setStorage('core', {artists: action.artists});
+                        next(action);
+                        break;
+                    case 'UPDATE_PLAYLISTS_INDEX':
+                        helpers.setStorage('core', {playlists: action.playlists});
+                        next(action);
+                        break;
+                    case 'UPDATE_USERS_INDEX':
+                        helpers.setStorage('core', {users: action.users});
+                        next(action);
+                        break;
+                     */
                 }
             };
         };
@@ -64865,6 +64891,28 @@ var DebugInfo = function (_React$Component) {
 	}
 
 	_createClass(DebugInfo, [{
+		key: 'localStorageSize',
+		value: function localStorageSize() {
+			var data = '';
+
+			for (var key in window.localStorage) {
+				if (window.localStorage.hasOwnProperty(key)) {
+					data += window.localStorage[key];
+				}
+			}
+
+			var used = 0;
+			var total = 5000;
+			if (data !== '') {
+				used = (data.length * 16 / (8 * 1024)).toFixed(2);
+			}
+
+			return {
+				used: used,
+				percent: (used / total * 100).toFixed(2)
+			};
+		}
+	}, {
 		key: 'renderLoadQueue',
 		value: function renderLoadQueue() {
 			if (!this.props.ui.load_queue) {
@@ -64876,7 +64924,7 @@ var DebugInfo = function (_React$Component) {
 
 			return _react2.default.createElement(
 				'div',
-				{ className: 'item' },
+				{ className: 'debug-info-item' },
 				queue
 			);
 		}
@@ -64884,7 +64932,11 @@ var DebugInfo = function (_React$Component) {
 		key: 'renderLoadQueue',
 		value: function renderLoadQueue() {
 			if (!this.props.ui.load_queue) {
-				return null;
+				return _react2.default.createElement(
+					'div',
+					{ className: 'debug-info-item grey-text' },
+					'Nothing loading'
+				);
 			}
 
 			var load_queue = this.props.ui.load_queue;
@@ -64902,102 +64954,137 @@ var DebugInfo = function (_React$Component) {
 			if (queue.length > 0) {
 				return _react2.default.createElement(
 					'div',
-					{ className: 'item' },
+					{ className: 'debug-info-item' },
-					_react2.default.createElement('br', null),
 					queue
 				);
 			} else {
-				return null;
+				return _react2.default.createElement(
+					'div',
+					{ className: 'debug-info-item grey-text' },
+					'Nothing loading'
+				);
 			}
 		}
 	}, {
 		key: 'render',
 		value: function render() {
+			var localStorageUsage = this.localStorageSize();
+
 			return _react2.default.createElement(
 				'div',
 				{ className: 'debug-info' },
 				_react2.default.createElement(
 					'div',
-					{ className: 'item' },
+					{ className: 'debug-info-section' },
-					'Albums: ',
+					_react2.default.createElement(
-					this.props.core.albums ? Object.keys(this.props.core.albums).length : '0'
+						'h5',
+						null,
+						'Indexes (',
+						localStorageUsage.percent,
+						'%, ',
+						localStorageUsage.used,
+						'KB)'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Albums: ',
+						this.props.core.albums ? Object.keys(this.props.core.albums).length : '0'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Artists: ',
+						this.props.core.artists ? Object.keys(this.props.core.artists).length : '0'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Playlists: ',
+						this.props.core.playlists ? Object.keys(this.props.core.playlists).length : '0'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Tracks: ',
+						this.props.core.tracks ? Object.keys(this.props.core.tracks).length : '0'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Users: ',
+						this.props.core.users ? Object.keys(this.props.core.users).length : '0'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Notifications: ',
+						this.props.ui.notifications ? Object.keys(this.props.ui.notifications).length : '0'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Processes: ',
+						this.props.ui.processes ? Object.keys(this.props.ui.processes).length : '0'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Enqueue batches: ',
+						this.props.mopidy.enqueue_uris_batches ? this.props.mopidy.enqueue_uris_batches.length : '0'
+					)
 				),
 				_react2.default.createElement(
 					'div',
-					{ className: 'item' },
+					{ className: 'debug-info-section' },
-					'Artists: ',
+					_react2.default.createElement(
-					this.props.core.artists ? Object.keys(this.props.core.artists).length : '0'
+						'h5',
+						null,
+						'Config'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Slim mode: ',
+						this.props.ui.slim_mode ? 'on' : 'off'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Test mode: ',
+						this.props.ui.test_mode ? 'on' : 'off'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Touch: ',
+						helpers.isTouchDevice() ? 'on' : 'off'
+					),
+					_react2.default.createElement(
+						'div',
+						{ className: 'debug-info-item' },
+						'Selected tracks: ',
+						this.props.ui.selected_tracks.length,
+						_react2.default.createElement('br', null),
+						this.props.ui.selected_tracks.map(function (track_key, index) {
+							return _react2.default.createElement(
+								'div',
+								{ key: track_key + '_' + index },
+								track_key
+							);
+						})
+					)
 				),
 				_react2.default.createElement(
 					'div',
-					{ className: 'item' },
+					{ className: 'debug-info-section' },
-					'Playlists: ',
+					_react2.default.createElement(
-					this.props.core.playlists ? Object.keys(this.props.core.playlists).length : '0'
+						'h5',
-				),
+						null,
-				_react2.default.createElement(
+						'Load queue'
-					'div',
+					),
-					{ className: 'item' },
+					this.renderLoadQueue()
-					'Tracks: ',
+				)
-					this.props.core.tracks ? Object.keys(this.props.core.tracks).length : '0'
-				),
-				_react2.default.createElement(
-					'div',
-					{ className: 'item' },
-					'Users: ',
-					this.props.core.users ? Object.keys(this.props.core.users).length : '0'
-				),
-				_react2.default.createElement(
-					'div',
-					{ className: 'item' },
-					'Notifications: ',
-					this.props.ui.notifications ? Object.keys(this.props.ui.notifications).length : '0'
-				),
-				_react2.default.createElement(
-					'div',
-					{ className: 'item' },
-					'Processes: ',
-					this.props.ui.processes ? Object.keys(this.props.ui.processes).length : '0'
-				),
-				_react2.default.createElement(
-					'div',
-					{ className: 'item' },
-					'Enqueue batches: ',
-					this.props.mopidy.enqueue_uris_batches ? this.props.mopidy.enqueue_uris_batches.length : '0'
-				),
-				_react2.default.createElement('br', null),
-				_react2.default.createElement(
-					'div',
-					{ className: 'item' },
-					'Slim mode: ',
-					this.props.ui.slim_mode ? 'on' : 'off'
-				),
-				_react2.default.createElement(
-					'div',
-					{ className: 'item' },
-					'Test mode: ',
-					this.props.ui.test_mode ? 'on' : 'off'
-				),
-				_react2.default.createElement(
-					'div',
-					{ className: 'item' },
-					'Touch: ',
-					helpers.isTouchDevice() ? 'on' : 'off'
-				),
-				_react2.default.createElement(
-					'div',
-					{ className: 'item' },
-					'Selected tracks: ',
-					this.props.ui.selected_tracks.length,
-					_react2.default.createElement('br', null),
-					this.props.ui.selected_tracks.map(function (track_key, index) {
-						return _react2.default.createElement(
-							'div',
-							{ key: track_key + '_' + index },
-							track_key
-						);
-					})
-				),
-				this.renderLoadQueue()
 			);
 		}
 	}]);

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1533153076";
+	var build = "1533153578";
 	var version = "3.23.0";
 
 	// Construct the script tag

src/js/components/DebugInfo.js

@@ -13,16 +13,37 @@ class DebugInfo extends React.Component{
 		super(props);
 	}
 
+	localStorageSize(){
+		var data = '';
+	
+		for (var key in window.localStorage){
+			if(window.localStorage.hasOwnProperty(key)){
+				data += window.localStorage[key];
+			}
+		}
+
+		var used = 0;
+		var total = 5000;
+		if (data !== ''){
+			used = ((data.length * 16)/(8 * 1024)).toFixed(2);
+		}
+		
+		return {
+			used: used,
+			percent: (used / total * 100).toFixed(2)
+		};
+	}
+
 	renderLoadQueue(){
 		if (!this.props.ui.load_queue){
 			return null
 		}
 
-		var load_queue = this.props.ui.load_queue
+		var load_queue = this.props.ui.load_queue;
-		var queue = []
+		var queue = [];
 
 		return (
-			<div className="item">
+			<div className="debug-info-item">
 				{queue}
 			</div>
 		)
@@ -30,7 +51,7 @@ class DebugInfo extends React.Component{
 
 	renderLoadQueue(){
 		if (!this.props.ui.load_queue){
-			return null
+			return <div className="debug-info-item grey-text">Nothing loading</div>;
 		}
 
 		var load_queue = this.props.ui.load_queue
@@ -43,64 +64,77 @@ class DebugInfo extends React.Component{
 
 		if (queue.length > 0){
 			return (
-				<div className="item">
+				<div className="debug-info-item">
-					<br />
 					{queue}
 				</div>
 			)
 		} else {
-			return null
+			return <div className="debug-info-item grey-text">Nothing loading</div>;
 		}
 	}
 
 	render(){
+		var localStorageUsage = this.localStorageSize();
+
 		return (
 			<div className="debug-info">
-				<div className="item">
+
-					Albums: {this.props.core.albums ? Object.keys(this.props.core.albums).length : '0'}
+				<div className="debug-info-section">
+					<h5>Indexes ({localStorageUsage.percent}%, {localStorageUsage.used}KB)</h5>
+					<div className="debug-info-item">
+						Albums: {this.props.core.albums ? Object.keys(this.props.core.albums).length : '0'}
+					</div>
+					<div className="debug-info-item">
+						Artists: {this.props.core.artists ? Object.keys(this.props.core.artists).length : '0'}
+					</div>
+					<div className="debug-info-item">
+						Playlists: {this.props.core.playlists ? Object.keys(this.props.core.playlists).length : '0'}
+					</div>
+					<div className="debug-info-item">
+						Tracks: {this.props.core.tracks ? Object.keys(this.props.core.tracks).length : '0'}
+					</div>
+					<div className="debug-info-item">
+						Users: {this.props.core.users ? Object.keys(this.props.core.users).length : '0'}
+					</div>
+					<div className="debug-info-item">
+						Notifications: {this.props.ui.notifications ? Object.keys(this.props.ui.notifications).length : '0'}
+					</div>
+					<div className="debug-info-item">
+						Processes: {this.props.ui.processes ? Object.keys(this.props.ui.processes).length : '0'}
+					</div>
+					<div className="debug-info-item">
+						Enqueue batches: {this.props.mopidy.enqueue_uris_batches ? this.props.mopidy.enqueue_uris_batches.length : '0'}
+					</div>
 				</div>
-				<div className="item">
+
-					Artists: {this.props.core.artists ? Object.keys(this.props.core.artists).length : '0'}
+				<div className="debug-info-section">
+					<h5>Config</h5>
+					<div className="debug-info-item">
+						Slim mode: {this.props.ui.slim_mode ? 'on' : 'off'}
+					</div>
+					<div className="debug-info-item">
+						Test mode: {this.props.ui.test_mode ? 'on' : 'off'}
+					</div>
+					<div className="debug-info-item">
+						Touch: {helpers.isTouchDevice() ? 'on' : 'off'}
+					</div>
+					<div className="debug-info-item">
+						Selected tracks: {this.props.ui.selected_tracks.length}<br />
+						{
+							this.props.ui.selected_tracks.map((track_key, index) => {
+								return (
+									<div key={track_key+'_'+index}>{track_key}</div>
+								)
+							})
+						}
+					</div>
 				</div>
-				<div className="item">
+
-					Playlists: {this.props.core.playlists ? Object.keys(this.props.core.playlists).length : '0'}
+				<div className="debug-info-section">
+					<h5>Load queue</h5>
+					{this.renderLoadQueue()}
 				</div>
-				<div className="item">
+
-					Tracks: {this.props.core.tracks ? Object.keys(this.props.core.tracks).length : '0'}
-				</div>
-				<div className="item">
-					Users: {this.props.core.users ? Object.keys(this.props.core.users).length : '0'}
-				</div>
-				<div className="item">
-					Notifications: {this.props.ui.notifications ? Object.keys(this.props.ui.notifications).length : '0'}
-				</div>
-				<div className="item">
-					Processes: {this.props.ui.processes ? Object.keys(this.props.ui.processes).length : '0'}
-				</div>
-				<div className="item">
-					Enqueue batches: {this.props.mopidy.enqueue_uris_batches ? this.props.mopidy.enqueue_uris_batches.length : '0'}
-				</div>
-				<br />
-				<div className="item">
-					Slim mode: {this.props.ui.slim_mode ? 'on' : 'off'}
-				</div>
-				<div className="item">
-					Test mode: {this.props.ui.test_mode ? 'on' : 'off'}
-				</div>
-				<div className="item">
-					Touch: {helpers.isTouchDevice() ? 'on' : 'off'}
-				</div>
-				<div className="item">
-					Selected tracks: {this.props.ui.selected_tracks.length}<br />
-					{
-						this.props.ui.selected_tracks.map((track_key, index) => {
-							return (
-								<div key={track_key+'_'+index}>{track_key}</div>
-							)
-						})
-					}
-				</div>
-				{this.renderLoadQueue()}
 			</div>
 		);
 	}

src/js/services/localstorage/middleware.js

@@ -180,6 +180,33 @@ const localstorageMiddleware = (function(){
                     }
                 );
                 break;
+            
+            /**
+             * Experimental saving of stores to localStorage
+             * This uses way too much storage space (ie 10MB+) so won't work. We need
+             * to use the IndexedDB engine instead for storing this quantity of data
+
+            case 'UPDATE_TRACKS_INDEX':
+                helpers.setStorage('core', {tracks: action.tracks});
+                next(action);
+                break;
+            case 'UPDATE_ALBUMS_INDEX':
+                helpers.setStorage('core', {albums: action.albums});
+                next(action);
+                break;
+            case 'UPDATE_ARTISTS_INDEX':
+                helpers.setStorage('core', {artists: action.artists});
+                next(action);
+                break;
+            case 'UPDATE_PLAYLISTS_INDEX':
+                helpers.setStorage('core', {playlists: action.playlists});
+                next(action);
+                break;
+            case 'UPDATE_USERS_INDEX':
+                helpers.setStorage('core', {users: action.users});
+                next(action);
+                break;
+             */
         }
     }
 

src/scss/components/_debug.scss

@@ -12,4 +12,12 @@
 	pointer-events: none;
 	width: 220px;
 	max-width: 98vw;
+
+	&-section {
+		padding-top: 14px;
+
+		&:first-child {
+			padding-top: 0;
+		}
+	}
 }

src/scss/global/_core.scss

@@ -197,6 +197,12 @@ h4 {
 	}
 }
 
+h5 {
+	font-size: 1rem;
+	margin-bottom: 4px;
+	font-weight: 700;
+}
+
 p {
 	a {
 		color: inherit;