Adding Queue modals
This commit is contained in:
James Barnsley
254
src/js/views/modals/EditRadio.js
Executable file
254
src/js/views/modals/EditRadio.js
Executable file
@ -0,0 +1,254 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { Link } from 'react-router'
|
||||
import ReactGA from 'react-ga'
|
||||
|
||||
import Modal from './Modal';
|
||||
import Icon from '../../components/Icon';
|
||||
import * as coreActions from '../../services/core/actions'
|
||||
import * as uiActions from '../../services/ui/actions'
|
||||
import * as mopidyActions from '../../services/mopidy/actions'
|
||||
import * as spotifyActions from '../../services/spotify/actions'
|
||||
import * as helpers from '../../helpers';
|
||||
|
||||
class EditRadio extends React.Component{
|
||||
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state = {
|
||||
enabled: false,
|
||||
seeds: [],
|
||||
uri: '',
|
||||
error_message: null
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
if (!this.props.radio || !this.props.radio.enabled) return null
|
||||
var seeds = [...this.props.radio.seed_tracks, ...this.props.radio.seed_artists, ...this.props.radio.seed_genres]
|
||||
this.setState({seeds: seeds, enabled: this.props.radio.enabled})
|
||||
|
||||
this.props.spotifyActions.resolveRadioSeeds(this.props.radio)
|
||||
}
|
||||
|
||||
handleStart(e){
|
||||
e.preventDefault();
|
||||
|
||||
var valid_seeds = true;
|
||||
var seeds = this.mapSeeds();
|
||||
for (var i = 0; i < seeds.length; i++){
|
||||
if (seeds[i].unresolved !== undefined){
|
||||
valid_seeds = false;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (valid_seeds){
|
||||
this.props.pusherActions.startRadio(this.state.seeds);
|
||||
this.props.uiActions.closeModal();
|
||||
} else {
|
||||
this.setState({error_message: "Invalid seed URI(s)"});
|
||||
}
|
||||
}
|
||||
|
||||
handleUpdate(e){
|
||||
e.preventDefault();
|
||||
|
||||
var valid_seeds = true;
|
||||
var seeds = this.mapSeeds();
|
||||
for (var i = 0; i < seeds.length; i++){
|
||||
if (seeds[i].unresolved !== undefined){
|
||||
valid_seeds = false;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (valid_seeds){
|
||||
this.props.pusherActions.updateRadio(this.state.seeds);
|
||||
this.props.uiActions.closeModal();
|
||||
} else {
|
||||
this.setState({error_message: "Invalid seed URI(s)"});
|
||||
}
|
||||
}
|
||||
|
||||
handleStop(e){
|
||||
e.preventDefault()
|
||||
this.props.pusherActions.stopRadio()
|
||||
this.props.uiActions.closeModal()
|
||||
}
|
||||
|
||||
addSeed(){
|
||||
if (this.state.uri == ''){
|
||||
this.setState({error_message: 'Cannot be empty'});
|
||||
return;
|
||||
}
|
||||
|
||||
var seeds = Object.assign([],this.state.seeds);
|
||||
var uris = this.state.uri.split(',');
|
||||
|
||||
for (var i = 0; i < uris.length; i++){
|
||||
if (helpers.uriSource(uris[i]) !== 'spotify'){
|
||||
this.setState({error_message: 'Non-Spotify URIs not supported'});
|
||||
return;
|
||||
}
|
||||
if (seeds.indexOf(uris[i]) > -1){
|
||||
this.setState({error_message: 'URI already added'});
|
||||
} else {
|
||||
seeds.push(uris[i]);
|
||||
this.setState({error_message: null});
|
||||
}
|
||||
|
||||
// Resolve
|
||||
switch (helpers.uriType(uris[i])){
|
||||
case 'track':
|
||||
this.props.spotifyActions.getTrack(uris[i]);
|
||||
break;
|
||||
|
||||
case 'artist':
|
||||
this.props.spotifyActions.getArtist(uris[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// commit to state
|
||||
this.setState({
|
||||
seeds: seeds,
|
||||
uri: ''
|
||||
})
|
||||
}
|
||||
|
||||
removeSeed(uri){
|
||||
var seeds = []
|
||||
for (var i = 0; i < this.state.seeds.length; i++){
|
||||
if (this.state.seeds[i] != uri){
|
||||
seeds.push(this.state.seeds[i])
|
||||
}
|
||||
}
|
||||
this.setState({seeds: seeds});
|
||||
}
|
||||
|
||||
mapSeeds(){
|
||||
var seeds = []
|
||||
|
||||
if (this.state.seeds){
|
||||
for (var i = 0; i < this.state.seeds.length; i++){
|
||||
var uri = this.state.seeds[i]
|
||||
if (uri){
|
||||
if (helpers.uriType(uri) == 'artist'){
|
||||
if (this.props.artists && this.props.artists.hasOwnProperty(uri)){
|
||||
seeds.push(this.props.artists[uri]);
|
||||
} else {
|
||||
seeds.push({
|
||||
unresolved: true,
|
||||
uri: uri
|
||||
})
|
||||
}
|
||||
} else if (helpers.uriType(uri) == 'track'){
|
||||
if (this.props.tracks && this.props.tracks.hasOwnProperty(uri)){
|
||||
seeds.push(this.props.tracks[uri]);
|
||||
} else {
|
||||
seeds.push({
|
||||
unresolved: true,
|
||||
uri: uri
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return seeds;
|
||||
}
|
||||
|
||||
renderSeeds(){
|
||||
var seeds = this.mapSeeds();
|
||||
|
||||
if (seeds.length > 0){
|
||||
return (
|
||||
<div>
|
||||
<div className="list">
|
||||
{
|
||||
seeds.map((seed,index) => {
|
||||
return (
|
||||
<div className="list-item" key={seed.uri}>
|
||||
{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
|
||||
{!seed.unresolved ? <span className="grey-text"> ({seed.type})</span> : null}
|
||||
<button className="discrete remove-uri no-hover" onClick={e => this.removeSeed(seed.uri)}>
|
||||
<Icon name="delete" />Remove
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<div className="list">
|
||||
<div className="list-item no-click">
|
||||
<span className="grey-text">No seeds</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<Modal className="edit-radio-modal">
|
||||
<h1>Radio</h1>
|
||||
<h2 className="grey-text">Add and remove seeds to shape the sound of your radio. Radio uses Spotify's recommendations engine to suggest tracks similar to your seeds.</h2>
|
||||
|
||||
<form onSubmit={e => this.addSeed()}>
|
||||
{this.renderSeeds()}
|
||||
|
||||
<div className="field text">
|
||||
<div className="name">URI(s)</div>
|
||||
<div className="input">
|
||||
<input
|
||||
type="text"
|
||||
onChange={e => this.setState({uri: e.target.value, error_message: null})}
|
||||
value={this.state.uri}
|
||||
/>
|
||||
<button type="submit" className="discrete add-uri no-hover">
|
||||
<Icon name="add" />Add
|
||||
</button>
|
||||
{this.state.error_message ? <span className="description error">{this.state.error_message}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form>
|
||||
<div className="actions centered-text">
|
||||
{this.state.enabled ? <button className="destructive large" onClick={e => this.handleStop(e)}>Stop</button> : null}
|
||||
{this.state.enabled ? <button className="primary large" onClick={e => this.handleUpdate(e)}>Save</button> : <button className="primary large" onClick={e => this.handleStart(e)}>Start</button>}
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
mopidy_connected: state.mopidy.connected,
|
||||
playlist: (state.core.playlists[ownProps.params.uri] !== undefined ? state.core.playlists[ownProps.params.uri] : null),
|
||||
playlists: state.core.playlists
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
coreActions: bindActionCreators(coreActions, dispatch),
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
mopidyActions: bindActionCreators(mopidyActions, dispatch),
|
||||
spotifyActions: bindActionCreators(spotifyActions, dispatch)
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(EditRadio)
|
||||
Reference in New Issue
Block a user