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

Halfway, so just playback component

Browse Source
This commit is contained in:
James Barnsley
2017-06-16 15:40:39 +12:00
parent 1c1de75a6f
commit c206fe9b3a
6 changed files with 84 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { hashHistory } from 'react-router'
import { hashHistory, Link } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
@ -11,6 +11,7 @@ import Dater from '../components/Dater'
import SidebarToggleButton from '../components/SidebarToggleButton'
import FullPlayer from '../components/FullPlayer'
import ArtistSentence from '../components/ArtistSentence'
import Thumbnail from '../components/Thumbnail'
import Header from '../components/Header'
import * as uiActions from '../services/ui/actions'
@ -56,6 +57,34 @@ class Queue extends React.Component{
)
}
renderArtwork(){
if(
!this.props.current_track ||
!this.props.current_track.album ||
!this.props.current_track.album.images ){
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}
<Thumbnail size="huge" />
</span>
)
}
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 />
</Link>
)
}
render(){
var options = (
<span>
@ -82,7 +111,15 @@ class Queue extends React.Component{
return (
<div className="view queue-view">
<Header icon="play" title="Now playing" options={options} uiActions={this.props.uiActions} />
<FullPlayer />
{ this.renderArtwork() }
<div className="current-track">
<div className="title">
{this.props.current_track ? this.props.current_track.name : <span>-</span>}
</div>
{this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence />}
</div>
<section className="list-wrapper">
<TrackList
@ -111,7 +148,9 @@ class Queue extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
radio: state.ui.radio,
current_tracklist: state.ui.current_tracklist
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),
}
}