display Internet radio stream title

src/js/components/PlaybackControls.js

@@ -25,15 +25,17 @@ class PlaybackControls extends React.Component {
     this.state = {
       expanded: false,
       current_track: null,
+      stream_title: null,
       transition_track: null,
       transition_direction: null,
     };
   }
 
-  static getDerivedStateFromProps({ current_track }, state) {
+  static getDerivedStateFromProps({ current_track, stream_title }, state) {
     return {
       ...state,
       current_track,
+      stream_title,
     };
   }
 
@@ -191,6 +193,7 @@ class PlaybackControls extends React.Component {
     const {
       current_track,
       expanded,
+      stream_title,
       transition_track,
       transition_direction,
     } = this.state;
@@ -236,7 +239,12 @@ class PlaybackControls extends React.Component {
                   {current_track ? current_track.name : <span>-</span>}
                 </div>
                 <div className="artist">
-                  {current_track ? <LinksSentence items={current_track.artists} /> : <LinksSentence />}
+                  {
+                    (current_track && current_track.artists
+                        && <LinksSentence items={current_track.artists} />)
+                    || (stream_title && <span className="links-sentence">{stream_title}</span>)
+                    || <LinksSentence />
+                  }
                 </div>
               </div>
             </div>
@@ -316,6 +324,7 @@ const mapStateToProps = (state) => ({
   snapcast_enabled: state.pusher.config.snapcast_enabled,
   current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
   next_track: (state.core.next_track_uri && state.core.tracks[state.core.next_track_uri] !== undefined ? state.core.tracks[state.core.next_track_uri] : null),
+  stream_title: state.core.stream_title,
   radio_enabled: (!!(state.ui.radio && state.ui.radio.enabled)),
   play_state: state.mopidy.play_state,
   time_position: state.mopidy.time_position,

src/js/components/Track.js

@@ -178,7 +178,7 @@ export default class Track extends React.Component {
       return null;
     }
 
-    const { track } = this.props;
+    const { track, stream_title } = this.props;
     let className = 'list__item list__item--track mouse-draggable mouse-selectable mouse-contextable';
     const track_details = [];
     const track_actions = [];
@@ -189,6 +189,12 @@ export default class Track extends React.Component {
           {track.artists ? <LinksSentence items={track.artists} /> : '-'}
         </li>,
       );
+    } else if (track.playing && stream_title) {
+      track_details.push(
+        <li className="details__item details__item--artists" key="stream_title">
+          <span className="links-sentence">{stream_title}</span>
+        </li>,
+      );
     }
 
     if (track.album) {

src/js/components/TrackList.js

@@ -403,6 +403,7 @@ class TrackList extends React.Component {
     mini_zones={this.props.slim_mode || isTouchDevice()}
     track={track}
     track_context={this.props.track_context}
+    stream_title={this.props.stream_title}
     can_sort={this.props.track_context == 'queue' || this.props.track_context == 'editable-playlist'}
     selected={this.props.selected_tracks.includes(track_key)}
     play_state={this.props.play_state}
@@ -432,6 +433,7 @@ const mapStateToProps = (state, ownProps) => ({
   dragger: state.ui.dragger,
   current_track: state.core.current_track,
   context_menu: state.ui.context_menu,
+  stream_title: state.core.stream_title,
 });
 
 const mapDispatchToProps = (dispatch) => ({