secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refining icons; Queue parallax; Forms

Browse Source
This commit is contained in:
James Barnsley
2017-07-26 15:24:18 +12:00
parent 0c38bdd8b8
commit e3a5316bac
19 changed files with 102 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/components/PlaybackControls.js
View File

@ -71,7 +71,7 @@ class PlaybackControls extends React.Component{
return (
<div className={(this.state.expanded ? "expanded playback-controls" : "playback-controls")}>
<Link className="current-track" to={(this.props.current_track && this.props.current_track.album ? global.baseURL+'album/'+this.props.current_track.album.uri : null)}>
<div className="current-track">
<div className="thumbnail-wrapper" onClick={e => this.handleThumbnailClick(e)}>
<Thumbnail size="small" images={images} />
</div>
@ -79,9 +79,9 @@ class PlaybackControls extends React.Component{
{ this.props.current_track ? this.props.current_track.name : <span>-</span> }
</div>
<div className="artist">
{ this.props.current_track ? <ArtistSentence nolinks artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
</div>
</Link>
</div>
<section className="playback">
<a className="control previous" onClick={() => this.props.mopidyActions.previous()}>

10
src/js/components/TrackList.js
View File

@ -155,11 +155,11 @@ class TrackList extends React.Component{
this.playTracks()
}
handleContextMenu(e,track_key){
handleContextMenu(e,track_key = null){
let selected_tracks = this.props.selected_tracks
// Not already selected, so select it prior to triggering menu
if (!selected_tracks.includes(track_key)){
if (track_key && !selected_tracks.includes(track_key)){
selected_tracks = [track_key]
this.props.uiActions.setSelectedTracks(selected_tracks)
}
@ -204,14 +204,14 @@ class TrackList extends React.Component{
// We've selected a track further down the list,
// so proceed normally
if (last_selected_track_index < newly_selected_track_index){
var start = last_selected_track_index
var start = last_selected_track_index+1
var end = newly_selected_track_index
// Selected a track up the list, so
// our last selected is the END of our range
} else {
var start = newly_selected_track_index
var end = last_selected_track_index
var end = last_selected_track_index-1
}
if (start !== false && start >= 0 && end !== false && end >= 0){
@ -403,7 +403,7 @@ class TrackList extends React.Component{
}
)
}
{this.digestTracksKeys() ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, false)} /> : null}
{this.props.selected_tracks.length > 0 ? <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e, false)} /> : null}
</div>
);
}

29
src/js/views/Queue.js
View File

@ -5,6 +5,7 @@ import { hashHistory, Link } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import Parallax from '../components/Parallax'
import TrackList from '../components/TrackList'
import Track from '../components/Track'
import Dater from '../components/Dater'
@ -14,6 +15,7 @@ import ArtistSentence from '../components/ArtistSentence'
import Thumbnail from '../components/Thumbnail'
import Header from '../components/Header'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
import * as pusherActions from '../services/pusher/actions'
import * as spotifyActions from '../services/spotify/actions'
@ -57,11 +59,8 @@ class Queue extends React.Component{
)
}
renderArtwork(){
if(
!this.props.current_track ||
!this.props.current_track.album ||
!this.props.current_track.album.images ){
renderArtwork(image){
if (!image){
return (
<span className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'}>
{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
@ -70,22 +69,22 @@ class Queue extends React.Component{
)
}
var images = []
if (this.props.current_track && this.props.current_track.album && this.props.current_track.album.images){
images = this.props.current_track.album.images
}
var link = null
if( this.props.current_track.album.uri ) link = '/album/'+this.props.current_track.album.uri
return (
<Link className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'} to={link} onContextMenu={e => this.handleContextMenu(e,this.props.current_track.album)}>
{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
<Thumbnail size="huge" images={images} canZoom />
<Thumbnail size="huge" image={image} canZoom />
</Link>
)
}
render(){
var image = null
if (this.props.current_track && this.props.current_track.album !== undefined && this.props.current_track.album.images){
image = helpers.sizedImages(this.props.current_track.album.images).huge
}
var options = (
<span>
<button className="no-hover" onClick={e => this.props.uiActions.openModal('edit_radio')}>
@ -110,12 +109,14 @@ class Queue extends React.Component{
return (
<div className="view queue-view">
<Header icon="play" title="Now playing" options={options} uiActions={this.props.uiActions} />
<Header icon="play" className="overlay" title="Now playing" options={options} uiActions={this.props.uiActions} />
<Parallax blur image={image} />
<div className="content-wrapper">
<div className="current-track">
{ this.renderArtwork() }
{ this.renderArtwork(image) }
<div className="title">
{this.props.current_track ? this.props.current_track.name : <span>-</span>}
</div>
@ -152,7 +153,7 @@ const mapStateToProps = (state, ownProps) => {
radio: state.ui.radio,
radio_enabled: (state.ui.radio && state.ui.radio.enabled ? true : false),
current_tracklist: state.ui.current_tracklist,
current_track: (typeof(state.ui.current_track) !== 'undefined' && typeof(state.ui.tracks) !== 'undefined' && typeof(state.ui.tracks[state.ui.current_track.uri]) !== 'undefined' ? state.ui.tracks[state.ui.current_track.uri] : null),
current_track: (state.ui.current_track !== undefined && state.ui.tracks !== undefined && state.ui.tracks[state.ui.current_track.uri] !== undefined ? state.ui.tracks[state.ui.current_track.uri] : null)
}
}