Adding more radio info to metadata for nicer experience

src/js/views/Queue.js

@@ -70,13 +70,13 @@ class Queue extends React.Component {
 
   loadMore() {
     const { limit, per_page } = this.state;
-    const { location } = this.props;
+    const { location, history } = this.props;
     const new_limit = limit + per_page;
 
     this.setState({ limit: new_limit });
 
     // Set our pagination to location state
-    const state = tlocation && location.state
+    const state = location && location.state
       ? location.state
       : {};
     state.limit = new_limit;
@@ -112,12 +112,11 @@ class Queue extends React.Component {
 
   renderQueueStats() {
     const { current_tracklist } = this.props;
-    const total_time = 0;
 
     return (
       <div className="queue-stats mid_grey-text">
         <span>
-          {`${current_tracklist.length} tracks`}
+          {`${current_tracklist.length || 0} tracks`}
         </span>
         &nbsp;&nbsp;|&nbsp;&nbsp;
         {current_tracklist.length > 0 ? (

src/js/views/Settings.js

@@ -59,6 +59,33 @@ class Settings extends React.Component {
     return false;
   }
 
+  resetServiceWorkerAndCache() {
+    if ('serviceWorker' in navigator) {
+
+      // Hose out all our caches
+      caches.keys().then(function(cacheNames) {
+        cacheNames.forEach(function(cacheName) {
+          caches.delete(cacheName);
+        });
+      });
+
+      // Unregister all service workers
+      // This forces our SW to bugger off and a new one is registered on refresh
+      navigator.serviceWorker.getRegistrations().then(
+        (registrations) => {
+          for (let registration of registrations) {  
+            registration.unregister();
+          }
+        }
+      );
+
+      window.location = '#';
+      window.location.reload(true);
+    } else {
+      this.props.coreActions.handleException('Service Worker not supported');
+    }
+  }
+
   setConfig(e) {
     this.setState({ input_in_focus: null });
     e.preventDefault();
@@ -455,9 +482,9 @@ installed
             />
             <button
               className="button button--destructive"
-              onClick={() => helpers.cache.clear()}
+              onClick={() => this.resetServiceWorkerAndCache()}
             >
-              Clear request cache
+              Reset cache
             </button>
           </div>
 

src/js/views/Track.js

@@ -228,11 +228,10 @@ Could not find track with URI "
 
           <h1>{track.name}</h1>
           <h2>
-            {track.album && track.album.uri ? <Link to={`/album/${track.album.uri}`}>{track.album.name}</Link> : null}
+            {track.album && track.album.uri && <Link to={`/album/${track.album.uri}`}>{track.album.name}</Link>}
             {track.album && !track.album.uri ? track.album.name : null}
             {!track.album ? 'Unknown album' : null}
-						&nbsp;by
-            {' '}
+            {' by '}
             <ArtistSentence artists={track.artists} />
           </h2>
 
@@ -241,27 +240,12 @@ Could not find track with URI "
             {track.date ? <li><Dater type="date" data={track.date} /></li> : null}
             {track.explicit ? <li><span className="flag dark">EXPLICIT</span></li> : null}
             <li>
-              {track.disc_number ? (
-                <span>
-Disc
-                  {track.disc_number}
-                </span>
-              ) : null}
-              {track.disc_number && track.track_number ? <span>, </span> : null}
-              {track.track_number ? (
-                <span>
-Track
-                  {track.track_number}
-                </span>
-              ) : null}
+              {track.disc_number > 0 && <span>Disc {track.disc_number}</span>}
+              {track.disc_number > 0 && track.track_number > 0 && <span>,&nbsp;</span>}
+              {track.track_number && <span>Track {track.track_number}</span>}
             </li>
-            {track.duration ? <li><Dater type="length" data={track.duration} /></li> : null}
-            {track.popularity ? (
-              <li>
-                {track.popularity}
-% popularity
-              </li>
-            ) : null}
+            {track.duration && <li><Dater type="length" data={track.duration} /></li>}
+            {track.popularity && <li>{`${track.popularity}% popularity`}</li>}
           </ul>
         </div>
 
@@ -315,8 +299,6 @@ const mapStateToProps = (state, ownProps) => {
   let uri = decodeURIComponent(ownProps.match.params.uri);
   uri = rebuildUri(uri);
 
-  console.log(uri);
-
   return {
     uri,
     slim_mode: state.ui.slim_mode,