52 lines
1.6 KiB
JavaScript
Executable File
52 lines
1.6 KiB
JavaScript
Executable File
|
|
import React, { PropTypes } from 'react'
|
|
import FontAwesome from 'react-fontawesome'
|
|
|
|
import Icon from '../Icon'
|
|
import Thumbnail from '../Thumbnail'
|
|
import * as helpers from '../../helpers'
|
|
|
|
export default class AddToPlaylistModal extends React.Component{
|
|
|
|
constructor(props){
|
|
super(props)
|
|
}
|
|
|
|
playlistSelected( playlist_uri ){
|
|
this.props.uiActions.addTracksToPlaylist( playlist_uri, this.props.tracks_uris )
|
|
this.props.uiActions.closeModal()
|
|
}
|
|
|
|
render(){
|
|
if( !this.props.playlists ) return <div className="empty">No editable playlists</div>
|
|
var playlists = []
|
|
for (var uri in this.props.playlists){
|
|
if( this.props.playlists[uri].can_edit ) playlists.push( this.props.playlists[uri] )
|
|
}
|
|
|
|
playlists = helpers.sortItems(playlists, 'name')
|
|
|
|
return (
|
|
<div>
|
|
<h1>Add to playlist</h1>
|
|
<h2 className="grey-text">Select playlist to add {this.props.tracks_uris.length} track{this.props.tracks_uris.length>1?'s':null} to</h2>
|
|
<div className="list small playlists">
|
|
{
|
|
playlists.map( playlist => {
|
|
return (
|
|
<div className="list-item" key={playlist.uri} onClick={ () => this.playlistSelected(playlist.uri) }>
|
|
<Thumbnail images={playlist.images} size="small" />
|
|
<h3 className="name">{ playlist.name }</h3>
|
|
<ul className="details">
|
|
<li><FontAwesome className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
|
|
<li>{ playlist.tracks_total ? <span className="grey-text"> { playlist.tracks_total } tracks</span> : null }</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
} |