Storing next track and pre-fetching artwork for snappier UI

This commit is contained in:
James Barnsley
2018-04-12 15:55:39 +12:00
parent 4736f85ff2
commit cd4451f69c
13 changed files with 220 additions and 68 deletions

View File

@ -11,7 +11,7 @@ export default class ArtistSentence extends React.Component{
render(){
if (!this.props.artists){
return <span>-</span>;
return <span className={this.props.className ? this.props.className+" artist-sentence" : "artist-sentence" }>-</span>;
}
return (

View File

@ -12,6 +12,7 @@ import ArtistSentence from './ArtistSentence'
import Thumbnail from './Thumbnail'
import Icon from './Icon'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
import * as coreActions from '../services/core/actions'
import * as mopidyActions from '../services/mopidy/actions'
@ -75,6 +76,8 @@ class PlaybackControls extends React.Component{
{this.props.http_streaming_enabled && this.props.http_streaming_active && this.props.play_state == 'playing' ? <audio id="http-streamer" autoPlay preload="none">
<source src={this.props.http_streaming_url} type={"audio/"+this.props.http_streaming_encoding} />
</audio> : null}
{this.props.next_track && this.props.next_track.images ? <Thumbnail className="hide" size="large" images={this.props.next_track.images} /> : null}
<div className="current-track">
<div className="thumbnail-wrapper" onClick={e => this.handleThumbnailClick(e)}>
@ -150,6 +153,7 @@ const mapStateToProps = (state, ownProps) => {
http_streaming_encoding: state.core.http_streaming_encoding,
http_streaming_url: state.core.http_streaming_url,
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),
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

@ -44,24 +44,29 @@ class Thumbnail extends React.Component{
// no images
if (!this.props.image && (!this.props.images || this.props.images.length <= 0)){
return require('../../assets/no-image.svg')
return require('../../assets/no-image.svg');
// single image
} else if (this.props.image){
return this.props.image
return this.props.image;
// multiple images
} else if (this.props.images && this.props.images.length > 0){
var images = helpers.sizedImages(this.props.images )
var size = 'medium'
if (this.props.size ) size = this.props.size
return images[size]
var images = helpers.sizedImages(this.props.images);
// Default to medium-sized image, but accept size property as override
var size = 'medium';
if (this.props.size){
size = this.props.size;
}
return images[size];
}
}
zoom(e, image){
e.preventDefault()
this.props.uiActions.openModal('image_zoom', {url: image} )
e.preventDefault();
this.props.uiActions.openModal('image_zoom', {url: image});
}
render(){