Search fully functional; Loading images properly, and dependent URIs

This commit is contained in:
James Barnsley
2020-10-14 21:19:21 +13:00
parent 73d24270a8
commit fdcd15fbd3
10 changed files with 374 additions and 442 deletions

View File

@ -55,6 +55,21 @@ class DebugInfo extends React.Component {
render = () => {
const localStorageUsage = this.localStorageSize();
const {
core: {
items = {},
},
ui: {
notifications = {},
processes = {},
slim_mode,
test_mode,
selected_tracks = [],
},
mopidy: {
enqueue_uris_batches = [],
},
} = this.props;
return (
<div className="debug-info">
@ -75,95 +90,45 @@ class DebugInfo extends React.Component {
<div className="debug-info-section">
<h5>State</h5>
<div className="debug-info-item">
Items:
{' '}
{this.props.core.items ? Object.keys(this.props.core.items).length : '0'}
{`Items: ${Object.keys(items).length}`}
</div>
<div className="debug-info-item">
Coldstore items:
{' '}
{this.state.localForageLength}
{`Coldstore items: ${this.state.localForageLength}`}
</div>
<div className="debug-info-item">
Albums:
{' '}
{this.props.core.albums ? Object.keys(this.props.core.albums).length : '0'}
{`Notifications: ${Object.keys(notifications).length}`}
</div>
<div className="debug-info-item">
Artists:
{' '}
{this.props.core.artists ? Object.keys(this.props.core.artists).length : '0'}
{`Processes: ${Object.keys(processes).length}`}
</div>
<div className="debug-info-item">
Playlists:
{' '}
{this.props.core.playlists ? Object.keys(this.props.core.playlists).length : '0'}
{`Enqueue batches: ${enqueue_uris_batches.length}`}
</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 className="debug-info-item">
Cached URLs:
{' '}
{Object.keys(getStorage('cache')).length}
{`Cached URLs: ${Object.keys(getStorage('cache')).length}`}
</div>
</div>
<div className="debug-info-section">
<h5>Config</h5>
<div className="debug-info-item">
Slim mode:
{' '}
{this.props.ui.slim_mode ? 'on' : 'off'}
{`Slim mode: ${slim_mode ? 'on' : 'off'}`}
</div>
<div className="debug-info-item">
Test mode:
{' '}
{this.props.ui.test_mode ? 'on' : 'off'}
{`Test mode: ${test_mode ? 'on' : 'off'}`}
</div>
<div className="debug-info-item">
Touch:
{' '}
{isTouchDevice() ? 'on' : 'off'}
{`Touch: ${isTouchDevice() ? 'on' : 'off'}`}
</div>
<div className="debug-info-item">
LocalStorage usage:
{' '}
{localStorageUsage.used}
kb (~
{localStorageUsage.percent}
%)
{`LocalStorage usage: ${localStorageUsage.used}kb (~${localStorageUsage.percent}%)`}
</div>
<div className="debug-info-item">
Selected tracks:
{' '}
{this.props.ui.selected_tracks.length}
{`Selected tracks: ${selected_tracks.length}`}
<br />
{
this.props.ui.selected_tracks.map((track_key, index) => (
<div key={`${track_key}_${index}`}>{track_key}</div>
selected_tracks.map((track_key, index) => (
<div key={`${track_key}_${index}`}>{track_key}</div>
))
}
</div>