Buildout

src/js/components/Fields/OutputControl.js

@@ -28,11 +28,11 @@ class OutputControl extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    // When force expanded triggered
-    if (!this.props.force_expanded && nextProps.force_expanded) {
-      this.setExpanded(true, nextProps);
-    }
+  componentDidUpdate = ({
+    force_expanded: prev_force_expanded,
+  }) => {
+    const { force_expanded } = this.props;
+    if (!prev_force_expanded && force_expanded) this.setExpanded(true);
   }
 
   setExpanded(expanded = !this.state.expanded, props = this.props) {

src/js/components/Parallax.js

@@ -21,10 +21,10 @@ export default class Parallax extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.image !== this.state.url) {
-      this.loadImage(nextProps.image);
-    }
+  componentDidUpdate = () => {
+    const { image } = this.props;
+    const { url } = this.state;
+    if (image !== url) this.loadImage(image);
   }
 
   loadImage(url) {

src/js/components/PlaybackControls.js

@@ -59,55 +59,50 @@ class PlaybackControls extends React.Component {
     console.log(`Playing stream: ${this.stream.src}`);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate = ({
+    http_streaming_cachebuster: prev_http_streaming_cachebuster,
+    http_streaming_enabled: prev_http_streaming_enabled,
+    http_streaming_mute: prev_http_streaming_mute,
+    http_streaming_volume: prev_http_streaming_volume,
+  }) => {
+    const {
+      http_streaming_cachebuster,
+      http_streaming_enabled,
+      http_streaming_mute,
+      http_streaming_volume,
+    } = this.props;
+
     // Cachebuster changed
     // This happens when playback changes, so that the stream is "new", rather
     // than the original stream. This prevents the browser cache from starting
     // the stream right from the beginning (which could be hours of continuous playback).
-    if (this.props.http_streaming_cachebuster !== nextProps.http_streaming_cachebuster) {
-      this.playStream(nextProps);
-    }
+    if (prev_http_streaming_cachebuster !== http_streaming_cachebuster) this.playStream();
 
     // Just been enabled
-    if (!this.props.http_streaming_enabled && nextProps.http_streaming_enabled) {
-      this.playStream(nextProps);
-    }
+    if (!prev_http_streaming_enabled && http_streaming_enabled) this.playStream();
 
     if (this.stream) {
-      // Just been muted
-      if (this.props.http_streaming_mute !== nextProps.http_streaming_mute) {
-        this.stream.muted = nextProps.http_streaming_mute;
+      if (http_streaming_mute !== prev_http_streaming_mute) {
+        this.stream.muted = http_streaming_mute;
       }
 
       // Just had volume changed
-      if (this.props.http_streaming_volume !== nextProps.http_streaming_volume) {
-        this.stream.volume = nextProps.http_streaming_volume / 100;
+      if (http_streaming_volume !== prev_http_streaming_volume) {
+        this.stream.volume = http_streaming_volume / 100;
       }
 
       // Just been disabled
-      if (!nextProps.http_streaming_enabled) {
+      if (!http_streaming_enabled) {
         this.stream = null;
       }
     }
+  }
 
-    // Started a track or changed to no track
-    if ((!this.props.current_track && nextProps.current_track) || (this.props.current_track && !nextProps.current_track)) {
-      this.setState({ current_track: nextProps.current_track });
-    }
-
-    // Direct swap-out of a track (with no 'null' intermediate state)
-    // This is precautionary and I've never been able to trigger it, but it's a good safety
-    if (this.props.current_track && nextProps.current_track && this.props.current_track.uri !== nextProps.current_track.uri) {
-      this.setState({ current_track: nextProps.current_track });
-    }
-
-    // Images have just loaded
-    // A bit niggly to have to deeply check this...
-    if (this.props.current_track && nextProps.current_track) {
-      if ((this.props.current_track.images && !nextProps.current_track.images) || (!this.props.current_track.images && nextProps.current_track.images)) {
-        this.setState({ current_track: nextProps.current_track });
-      }
-    }
+  static getDerivedStateFromProps({ current_track }, state) {
+    return {
+      ...state,
+      current_track,
+    };
   }
 
   handleTouchStart(e) {

src/js/views/Queue.js

@@ -50,7 +50,14 @@ class Queue extends React.Component {
   componentDidUpdate = ({
     added_from_uri: prev_added_from_uri,
   }) => {
-    const { coreActions: { loadPlaylist }, added_from_uri } = this.props;
+    const {
+      coreActions: {
+        loadAlbum,
+        loadArtist,
+        loadPlaylist,
+      },
+      added_from_uri,
+    } = this.props;
 
     if (added_from_uri && added_from_uri !== prev_added_from_uri) {
       const item_type = uriType(added_from_uri);