display Internet radio stream title

This commit is contained in:
Max Erenberg
2020-08-20 00:36:23 -04:00
parent f721a61809
commit ef45cad1a4
12 changed files with 202 additions and 45 deletions

View File

@ -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,

View File

@ -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) {

View File

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

View File

@ -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
* */

View File

@ -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':

View File

@ -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',

View File

@ -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 ===============
* ======================================================================================

View File

@ -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,
};
};