Working through each Modal and updating; Addingng ErrorMessage and 'asset not found' messages

This commit is contained in:
James Barnsley
2019-01-22 21:46:56 +13:00
parent 4d7f81b685
commit 1fbd2c36a9
25 changed files with 13470 additions and 18914 deletions

View File

@ -62,8 +62,8 @@ class AddToPlaylist extends React.Component{
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">
<h4 className="list__item__name">{ playlist.name }</h4>
<ul className="list__item__details details">
<li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
<li>{ playlist.tracks_total ? <span className="mid_grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }</li>
</ul>

View File

@ -1,14 +1,15 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Link from '../../components/Link'
import ReactGA from 'react-ga'
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Modal from './Modal';
import Link from '../../components/Link';
import Icon from '../../components/Icon';
import ColourField from '../../components/Fields/ColourField';
import IconField from '../../components/Fields/IconField';
import * as pusherActions from '../../services/pusher/actions';
import * as uiActions from '../../services/ui/actions';
import * as helpers from '../../helpers';
@ -176,6 +177,7 @@ class EditCommand extends React.Component{
const mapStateToProps = (state, ownProps) => {
var id = ownProps.params.id;
return {
id: id,
command: (id && state.pusher.commands && state.pusher.commands[id] !== undefined ? state.pusher.commands[id] : null)
}
}

View File

@ -39,16 +39,16 @@ class EditPlaylist extends React.Component{
collaborative: (this.props.playlist.collaborative == true)
});
} else {
switch (helpers.uriSource(this.props.match.params.uri)){
switch (helpers.uriSource(this.props.uri)){
case 'spotify':
this.props.spotifyActions.getPlaylist(this.props.match.params.uri);
this.props.spotifyActions.following(this.props.match.params.uri);
this.props.spotifyActions.getPlaylist(this.props.uri);
this.props.spotifyActions.following(this.props.uri);
break
default:
if (props.mopidy_connected){
this.props.mopidyActions.getPlaylist(this.props.match.params.uri);
if (this.props.mopidy_connected){
this.props.mopidyActions.getPlaylist(this.props.uri);
}
break
}
@ -74,7 +74,7 @@ class EditPlaylist extends React.Component{
return false
} else {
this.props.coreActions.savePlaylist(
this.props.match.params.uri,
this.props.uri,
this.state.name,
this.state.description,
this.state.public,
@ -103,7 +103,7 @@ class EditPlaylist extends React.Component{
}
renderFields(){
switch (helpers.uriSource(this.props.match.params.uri)){
switch (helpers.uriSource(this.props.uri)){
case 'spotify':
return (
@ -204,9 +204,11 @@ class EditPlaylist extends React.Component{
}
const mapStateToProps = (state, ownProps) => {
var uri = decodeURIComponent(ownProps.match.params.uri);
return {
uri: uri,
mopidy_connected: state.mopidy.connected,
playlist: (state.core.playlists[ownProps.match.params.uri] !== undefined ? state.core.playlists[ownProps.match.params.uri] : null),
playlist: (state.core.playlists[uri] !== undefined ? state.core.playlists[uri] : null),
playlists: state.core.playlists
}
}

View File

@ -190,7 +190,7 @@ class EditRadio extends React.Component{
return (
<div className="list__item" key={seed.uri}>
{seed.unresolved ? <span className="mid_grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
{!seed.unresolved ? <span className="mid_grey-text">&nbsp;({seed.type})</span> : null}
{!seed.unresolved ? <span className="mid_grey-text">&nbsp;({helpers.uriType(seed.uri)})</span> : null}
<span className="button discrete remove-uri no-hover" onClick={e => this.removeSeed(seed.uri)}>
<Icon name="delete" />Remove
</span>

View File

@ -22,7 +22,7 @@ class ImageZoom extends React.Component{
render(){
return (
<Modal className="modal--image-zoom">
<img src={this.props.location.query.url} />
<img src={this.props.location.search.replace("?url=","")} />
</Modal>
)
}

View File

@ -100,11 +100,10 @@ class ShareConfiguration extends React.Component {
onChange={e => this.toggleRecipient(connection.connection_id)}
/>
<span className="label">
{ connection.username }
&nbsp;
<span className="mid_grey-text">
<div className="title">{ connection.username }</div>
<div className="description mid_grey-text">
({ connection.ip })
</span>
</div>
</span>
</label>
);
@ -123,7 +122,7 @@ class ShareConfiguration extends React.Component {
}
return (
<Modal className="modal--share-authorization">
<Modal className="modal--share-configuration">
<h1>Share configuration</h1>
<form onSubmit={e => this.handleSubmit(e)}>
<div className="field checkbox white">
@ -141,7 +140,7 @@ class ShareConfiguration extends React.Component {
checked={ this.state.ui }
onChange={ e => this.setState({ ui: !this.state.ui })} />
<span className="label">
UI customisation (theme, sorting, filters)
<span className="title">UI customisation (theme, sorting, filters)</span>
</span>
</label>
@ -152,7 +151,8 @@ class ShareConfiguration extends React.Component {
checked={this.state.spotify}
onChange={ e => this.setState({ spotify: !this.state.spotify })} />
<span className="label">
Spotify authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.spotify_me.name}</span>
<div className="title">Spotify authorization</div>
<div className="description mid_grey-text">Logged in as {this.props.spotify_me.name}</div>
</span>
</label> : null}
@ -163,7 +163,8 @@ class ShareConfiguration extends React.Component {
checked={this.state.lastfm}
onChange={ e => this.setState({ lastfm: !this.state.lastfm })} />
<span className="label">
LastFM authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.lastfm_me.name}</span>
<div className="title">LastFM authorization</div>
<div className="description mid_grey-text">Logged in as {this.props.lastfm_me.name}</div>
</span>
</label> : null}
@ -174,7 +175,8 @@ class ShareConfiguration extends React.Component {
checked={this.state.genius}
onChange={ e => this.setState({ genius: !this.state.genius })} />
<span className="label">
Genius authorization <span className="mid_grey-text">&nbsp;Logged in as {this.props.genius_me.name}</span>
<div className="title">Genius authorization</div>
<div className="description mid_grey-text">Logged in as {this.props.genius_me.name}</div>
</span>
</label> : null}
</div>