display Internet radio stream title

mopidy_iris/static/index.html

@@ -106,7 +106,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1596615555";
+	var build = "1597898076";
 	var version = "3.51.0";
 
 	// Construct the script tag

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) => ({

src/js/services/core/actions.js

@@ -257,6 +257,20 @@ export function removeFromIndex(index_name, key, new_key = null) {
   };
 }
 
+export function streamTitleLoaded(stream_title) {
+  return {
+    type: 'STREAM_TITLE_LOADED',
+    stream_title,
+  };
+}
+
+export function streamTitleChanged(stream_title) {
+  return {
+    type: 'STREAM_TITLE_CHANGED',
+    stream_title,
+  };
+}
+
 export function viewDataLoaded(data) {
   return {
     type: 'VIEW_DATA_LOADED',
@@ -264,7 +278,6 @@ export function viewDataLoaded(data) {
   };
 }
 
-
 /**
  * Playlist manipulation
  * */

src/js/services/core/reducer.js

@@ -26,6 +26,7 @@ export default function reducer(core = {}, action) {
         ...core,
         current_track: null,
         current_track_uri: null,
+        stream_title: null,
       };
 
     case 'NEXT_TRACK_LOADED':
@@ -49,6 +50,10 @@ export default function reducer(core = {}, action) {
       }
       return { ...core, current_tracklist: tracklist, queue_metadata: action.queue_metadata };
 
+    case 'STREAM_TITLE_CHANGED':
+    case 'STREAM_TITLE_LOADED':
+      return { ...core, stream_title: action.stream_title };
+
     case 'PUSHER_RADIO_LOADED':
     case 'PUSHER_RADIO_STARTED':
     case 'PUSHER_RADIO_CHANGED':

src/js/services/mopidy/actions.js

@@ -271,6 +271,12 @@ export function getCurrentTrack() {
   };
 }
 
+export function getStreamTitle() {
+  return {
+    type: 'MOPIDY_GET_STREAM_TITLE',
+  };
+}
+
 export function currentTrackLoaded(tl_track) {
   return {
     type: 'MOPIDY_CURRENT_TRACK_LOADED',

src/js/services/mopidy/middleware.js

@@ -63,6 +63,7 @@ const MopidyMiddleware = (function () {
         store.dispatch(mopidyActions.getCurrentTrack());
         store.dispatch(mopidyActions.getTimePosition());
         store.dispatch(mopidyActions.getUriSchemes());
+        store.dispatch(mopidyActions.getStreamTitle());
 
         // Every 1s update our play position (when playing)
         progress_interval = setInterval(() => {
@@ -154,6 +155,10 @@ const MopidyMiddleware = (function () {
         store.dispatch(mopidyActions.getRepeat());
         break;
 
+      case 'event:streamTitleChanged':
+        store.dispatch(coreActions.streamTitleChanged(data.title));
+        break;
+
       default:
       // console.log('MopidyService: Unhandled message', type, message );
     }
@@ -329,6 +334,7 @@ const MopidyMiddleware = (function () {
           store.dispatch(mopidyActions.getRandom());
           store.dispatch(mopidyActions.getRepeat());
           store.dispatch(mopidyActions.getCurrentTrack());
+          store.dispatch(mopidyActions.getStreamTitle());
           store.dispatch(mopidyActions.getTimePosition());
         }
         break;
@@ -2326,6 +2332,17 @@ const MopidyMiddleware = (function () {
           );
         break;
 
+      case 'MOPIDY_GET_STREAM_TITLE':
+        request(socket, store, 'playback.getStreamTitle')
+          .then(
+            (stream_title) => {
+              if (stream_title) {
+                store.dispatch(coreActions.streamTitleLoaded(stream_title));
+              }
+            }
+          );
+        break;
+
       case 'VIEW__GET_RANDOM_TRACKS':
         request(socket, store, 'library.browse', { uri: 'local:directory?type=track' })
           .then(
@@ -2357,7 +2374,6 @@ const MopidyMiddleware = (function () {
           );
         break;
 
-
       /**
            * =============================================================== IMAGES ===============
            * ======================================================================================

src/js/views/Queue.js

@@ -218,6 +218,7 @@ class Queue extends React.Component {
     const {
       current_track,
       queue_tracks,
+      stream_title,
       theme,
       current_track_uri,
     } = this.props;
@@ -275,14 +276,18 @@ class Queue extends React.Component {
                 )}
               </div>
 
-              {current_track ? (
-                <LinksSentence
-                  className="current-track__artists"
-                  items={current_track.artists}
-                />
-              ) : (
-                <LinksSentence className="current-track__artists" />
-              )}
+              {
+                (current_track && current_track.artists && (
+                  <LinksSentence
+                    className="current-track__artists"
+                    items={current_track.artists}
+                  />
+                ))
+                || (stream_title && (
+                  <span className="current-track__artists links-sentence">{stream_title}</span>
+                ))
+                || <LinksSentence className="current-track__artists" />
+              }
 
               {this.renderAddedFrom()}
 
@@ -341,7 +346,7 @@ class Queue extends React.Component {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  let { current_track } = state.core;
+  let { current_track, stream_title } = state.core;
   const queue_tracks = [];
 
   if (state.core.queue && state.core.tracks) {
@@ -395,6 +400,7 @@ const mapStateToProps = (state, ownProps) => {
       current_track && current_track.added_from
         ? current_track.added_from
         : null,
+    stream_title,
   };
 };