Oversimplifying queue made identifying current track impossible; Reinstated queue as object list, merged with index for max data

This commit is contained in:
James Barnsley
2017-11-17 20:25:43 +13:00
parent fd3e1ce55d
commit 7aca106c74
11 changed files with 65 additions and 77 deletions

1
src/js/bootstrap.js vendored
View File

@ -35,7 +35,6 @@ var initialState = {
queue: [],
queue_metadata: {},
current_track_uri: null,
current_track_tlid: null,
albums: {},
artists: {},
playlists: {},

View File

@ -16,10 +16,9 @@ export default class AddToQueueModal extends React.Component{
}
handleSubmit(e){
var uris = this.state.uris.split(',')
console.log(this.state)
this.props.mopidyActions.enqueueURIs(uris, null, this.state.next)
this.props.uiActions.closeModal()
var uris = this.state.uris.split(',');
this.props.mopidyActions.enqueueURIs(uris, null, this.state.next);
this.props.uiActions.closeModal();
}
render(){

View File

@ -145,7 +145,7 @@ class Modal extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
current_track: (state.core.tracks[state.core.current_track_uri] !== undefined ? state.core.tracks[state.core.current_track_uri] : null),
current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : []),
search_uri_schemes: (state.ui.search_uri_schemes ? state.ui.search_uri_schemes : []),
volume: state.mopidy.volume,

View File

@ -135,7 +135,7 @@ class PlaybackControls extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
current_track: (state.core.tracks[state.core.current_track_uri] !== undefined ? state.core.tracks[state.core.current_track_uri] : null),
current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
radio_enabled: (state.ui.radio && state.ui.radio.enabled ? true : false),
play_state: state.mopidy.play_state,
time_position: state.mopidy.time_position,

View File

@ -54,7 +54,7 @@ class ProgressSlider extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
current_track: (state.core.tracks[state.core.current_track_uri] !== undefined ? state.core.tracks[state.core.current_track_uri] : null),
current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
connected: state.mopidy.connected,
time_position: state.mopidy.time_position,
play_state: state.mopidy.play_state

View File

@ -269,7 +269,7 @@ export default class Track extends React.Component{
onMouseUp={e => this.handleMouseUp(e)} // End of click, or potentially a dragging drop event
onDoubleClick={e => this.props.handleDoubleClick(e)}
onContextMenu={e => {this.handleContextMenu(e)}}>
{ track_columns }
{track_columns}
</div>
)
}

View File

@ -412,7 +412,8 @@ class TrackList extends React.Component{
{
this.props.tracks.map(
(track, index) => {
let track_key = this.buildTrackKey(track, index)
let track_key = this.buildTrackKey(track, index);
track.key = track_key;
return (
<Track
show_source_icon={this.props.show_source_icon}

View File

@ -317,6 +317,7 @@ const CoreMiddleware = (function(){
type: 'TRACKS_LOADED',
tracks: [action.current_track]
});
next(action);
break;
@ -325,8 +326,7 @@ const CoreMiddleware = (function(){
type: 'TRACKS_LOADED',
tracks: action.tracks
});
action.tracks_uris = helpers.arrayOf('uri',action.tracks);
next(action);
break;

View File

@ -13,13 +13,13 @@ export default function reducer(core = {}, action){
case 'CURRENT_TRACK_LOADED':
return Object.assign({}, core, {
current_track_tlid: action.current_track_tlid,
current_track: action.current_track,
current_track_uri: action.current_track_uri
});
case 'QUEUE_LOADED':
return Object.assign({}, core, {
queue: action.tracks_uris
queue: action.tracks
});
case 'PUSHER_QUEUE_METADATA':

View File

@ -412,12 +412,12 @@ const MopidyMiddleware = (function(){
}
var current_track = store.getState().core.current_track
var current_tracklist = store.getState().core.current_tracklist
var queue = store.getState().core.queue
var current_track_index = -1
if (current_track !== undefined){
for(var i = 0; i < current_tracklist.length; i++){
if (current_tracklist[i].tlid == current_track.tlid){
for(var i = 0; i < queue.length; i++){
if (queue[i].tlid == current_track.tlid){
current_track_index = i
break
}
@ -1706,28 +1706,6 @@ const MopidyMiddleware = (function(){
**/
case 'MOPIDY_TLTRACKS':
/**
* TODO: Merge TLIDs into an array of TLIDS
var tracks = helpers.formatTracks(action.data);
var unique_tracks = [];
for (var i = 0; i < tracks.length; i++){
var track = {};
if (unique_tracks[tracks[i].uri] !== undefined){
var track = unique_tracks[tracks[i].uri];
if (existing_track.tlids !== undefined){
var tlids = existing_track.tlids;
} else {
var tlids = [];
}
} else {
unique_tracks[tracks[i].uri] = tracks[i];
}
}
**/
store.dispatch({
type: 'QUEUE_LOADED',
tracks: helpers.formatTracks(action.data)
@ -1751,9 +1729,7 @@ const MopidyMiddleware = (function(){
helpers.setWindowTitle(track, store.getState().mopidy.play_state);
store.dispatch({
type: 'CURRENT_TRACK_LOADED',
current_track: track,
current_track_tlid: track.tlid,
current_track_uri: track.uri
current_track: track
});
}
break;
@ -1765,9 +1741,8 @@ const MopidyMiddleware = (function(){
if (response.length > 0){
var track = Object.assign({}, response[0]);
store.dispatch({
type: 'TRACK_LOADED',
key: track.uri,
track: track
type: 'TRACKS_LOADED',
tracks: [track]
});
}
},

View File

@ -27,12 +27,11 @@ class Queue extends React.Component{
}
removeTracks(track_indexes){
var tlids = [];
for (var i = 0; i < track_indexes.length; i++){
var uri = this.props.queue[track_indexes[i]];
if (this.props.tracks[uri] !== undefined){
tlids.push(this.props.tracks[uri].tlid);
var track = this.props.queue[track_indexes[i]];
if (track.tlid !== undefined){
tlids.push(track.tlid);
}
}
@ -91,36 +90,52 @@ class Queue extends React.Component{
}
render(){
var image = null
if (this.props.current_track){
if (this.props.current_track.images !== undefined && this.props.current_track.images){
image = helpers.sizedImages(this.props.current_track.images)
image = image.large
}
}
var current_track = null;
var tracks = [];
if (this.props.queue && this.props.tracks){
for (var i = 0; i < this.props.queue.length; i++){
var uri = this.props.queue[i];
if (this.props.tracks.hasOwnProperty(uri)){
var track = this.props.tracks[uri];
track.playing = (track.uri == this.props.current_track_uri && track.tlid == this.props.current_track_tlid);
tracks.push(track);
var track = this.props.queue[i];
// If we have the track in our index, merge it in.
// We prioritise queue track over index track as queue has unique data, like which track
// is playing and tlids.
if (this.props.tracks.hasOwnProperty(track.uri)){
track = Object.assign(
{},
this.props.tracks[track.uri],
track
);
}
// Now merge in our queue metadata
if (this.props.queue_metadata["tlid_"+track.tlid] !== undefined){
track = Object.assign(
{},
track,
this.props.queue_metadata["tlid_"+track.tlid],
{
playing: (track.tlid == this.props.current_track.tlid)
}
);
tracks[i] = track;
}
// Siphon off this track if it's a full representation of our current track (by tlid)
if (this.props.current_track && this.props.current_track.uri == track.uri){
current_track = track;
}
// Now add our compiled track for our tracklist
tracks.push(track);
}
}
// Merge our metadata with each track
for (var i = 0; i < tracks.length; i++){
var track = tracks[i];
if (this.props.queue_metadata["tlid_"+track.tlid] !== undefined){
track = Object.assign(
{},
track,
this.props.queue_metadata["tlid_"+track.tlid]
);
tracks[i] = track;
var image = null
if (current_track){
if (current_track.images !== undefined && current_track.images){
image = helpers.sizedImages(current_track.images)
image = image.large
}
}
@ -153,11 +168,11 @@ class Queue extends React.Component{
<div className="content-wrapper">
<div className="current-track">
{ this.renderArtwork(image) }
{this.renderArtwork(image)}
<div className="title">
{this.props.current_track ? <URILink type="track" uri={this.props.current_track.uri}>{this.props.current_track.name}</URILink> : <span>-</span>}
{current_track ? <URILink type="track" uri={current_track.uri}>{current_track.name}</URILink> : <span>-</span>}
</div>
{this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence />}
{current_track ? <ArtistSentence artists={current_track.artists} /> : <ArtistSentence />}
</div>
<section className="list-wrapper">
@ -192,10 +207,9 @@ const mapStateToProps = (state, ownProps) => {
radio_enabled: (state.core.radio && state.core.radio.enabled ? true : false),
tracks: state.core.tracks,
queue: state.core.queue,
queue_tlids: state.core.queue_tlids,
queue_metadata: state.core.queue_metadata,
current_track_tlid: state.core.current_track_tlid,
current_track_uri: state.core.current_track_uri,
current_track: (state.core.tracks[state.core.current_track_uri] !== undefined ? state.core.tracks[state.core.current_track_uri] : null)
current_track: state.core.current_track
}
}