Storing next track and pre-fetching artwork for snappier UI
This commit is contained in:
@ -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 (
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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(){
|
||||
|
||||
Reference in New Issue
Block a user