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

Auto eslint fix

Browse Source
This commit is contained in:
James Barnsley
2019-09-05 15:36:11 +12:00
parent 4513a0d109
commit e4d53a2d35
126 changed files with 23283 additions and 23573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

418
src/js/views/modals/EditPlaylist.js
View File

@ -1,242 +1,236 @@
import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Link from '../../components/Link'
import ReactGA from 'react-ga'
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Link from '../../components/Link';
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 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 EditPlaylist extends React.Component{
class EditPlaylist extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
name: '',
description: '',
image: null,
public: false,
collaborative: false,
};
}
constructor(props){
super(props)
this.state = {
error: null,
name: '',
description: '',
image: null,
public: false,
collaborative: false
}
}
componentDidMount() {
this.props.uiActions.setWindowTitle('Edit playlist');
componentDidMount(){
if (this.props.playlist) {
this.setState({
name: this.props.playlist.name,
description: this.props.playlist.description,
public: (this.props.playlist.public == true),
collaborative: (this.props.playlist.collaborative == true),
});
} else {
switch (helpers.uriSource(this.props.uri)) {
case 'spotify':
this.props.spotifyActions.getPlaylist(this.props.uri);
this.props.spotifyActions.following(this.props.uri);
break;
this.props.uiActions.setWindowTitle("Edit playlist");
default:
if (this.props.mopidy_connected) {
this.props.mopidyActions.getPlaylist(this.props.uri);
}
break;
}
}
}
if (this.props.playlist){
this.setState({
name: this.props.playlist.name,
description: this.props.playlist.description,
public: (this.props.playlist.public == true),
collaborative: (this.props.playlist.collaborative == true)
});
} else {
switch (helpers.uriSource(this.props.uri)){
componentWillReceiveProps(nextProps) {
// Playlist just loaded
if (!this.props.playlist && nextProps.playlist) {
this.setState({
name: nextProps.playlist.name,
description: nextProps.playlist.description,
public: (nextProps.playlist.public == true),
collaborative: (nextProps.playlist.collaborative == true),
});
case 'spotify':
this.props.spotifyActions.getPlaylist(this.props.uri);
this.props.spotifyActions.following(this.props.uri);
break
// Mopidy just connected, and we don't have the playlist yet
} else if (this.props.mopidy_connected != nextProps.mopidy_connected && !nextProps.playlist) {
this.props.mopidyActions.getPlaylist(this.props.uri);
}
}
default:
if (this.props.mopidy_connected){
this.props.mopidyActions.getPlaylist(this.props.uri);
}
break
}
}
}
savePlaylist(e) {
e.preventDefault();
componentWillReceiveProps(nextProps){
if (!this.state.name || this.state.name == '') {
this.setState({ error: 'Name is required' });
return false;
}
this.props.coreActions.savePlaylist(
this.props.uri,
this.state.name,
this.state.description,
this.state.public,
this.state.collaborative,
this.state.image,
);
window.history.back();
return false;
}
// Playlist just loaded
if (!this.props.playlist && nextProps.playlist){
this.setState({
name: nextProps.playlist.name,
description: nextProps.playlist.description,
public: (nextProps.playlist.public == true),
collaborative: (nextProps.playlist.collaborative == true)
});
setImage(e) {
const self = this;
// Mopidy just connected, and we don't have the playlist yet
} else if (this.props.mopidy_connected != nextProps.mopidy_connected && !nextProps.playlist){
this.props.mopidyActions.getPlaylist(this.props.uri);
}
}
// Create a file-reader to import the selected image as a base64 string
const file_reader = new FileReader();
savePlaylist(e){
e.preventDefault();
if (!this.state.name || this.state.name == ''){
this.setState({error: 'Name is required'})
return false
} else {
this.props.coreActions.savePlaylist(
this.props.uri,
this.state.name,
this.state.description,
this.state.public,
this.state.collaborative,
this.state.image
);
window.history.back();
return false;
}
}
setImage(e){
var self = this;
// Create a file-reader to import the selected image as a base64 string
var file_reader = new FileReader();
// Once the image is loaded, convert the result
file_reader.addEventListener("load", function(e){
var image_base64 = e.target.result.replace('data:image/jpeg;base64,','');
self.setState({image: image_base64});
});
// This calls the filereader to load the file
file_reader.readAsDataURL(e.target.files[0]);
}
file_reader.addEventListener('load', (e) => {
const image_base64 = e.target.result.replace('data:image/jpeg;base64,', '');
self.setState({ image: image_base64 });
});
renderFields(){
switch (helpers.uriSource(this.props.uri)){
// This calls the filereader to load the file
file_reader.readAsDataURL(e.target.files[0]);
}
case 'spotify':
return (
<div>
<div className="field text">
<div className="name">Name</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name }
/>
</div>
</div>
<div className="field text">
<div className="name">Description</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description }
/>
</div>
</div>
<div className="field file">
<div className="name">Cover image</div>
<div className="input">
<input
type="file"
placeholder="Leave empty to keep existing image"
onChange={e => this.setImage(e)}
/>
<div className="description">
renderFields() {
switch (helpers.uriSource(this.props.uri)) {
case 'spotify':
return (
<div>
<div className="field text">
<div className="name">Name</div>
<div className="input">
<input
type="text"
onChange={(e) => this.setState({ name: e.target.value })}
value={this.state.name}
/>
</div>
</div>
<div className="field text">
<div className="name">Description</div>
<div className="input">
<input
type="text"
onChange={(e) => this.setState({ description: e.target.value })}
value={this.state.description}
/>
</div>
</div>
<div className="field file">
<div className="name">Cover image</div>
<div className="input">
<input
type="file"
placeholder="Leave empty to keep existing image"
onChange={(e) => this.setImage(e)}
/>
<div className="description">
JPEG only, 256kB max. Leave empty to keep cover image unchanged.
</div>
</div>
</div>
<div className="field checkbox white">
<div className="name">
</div>
</div>
</div>
<div className="field checkbox white">
<div className="name">
Options
</div>
<div className="input">
<label>
<input
type="checkbox"
name="playlist_private"
checked={ this.state.public }
onChange={ e => this.setState({ public: !this.state.public })} />
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="collaborative"
checked={ this.state.collaborative }
onChange={ e => this.setState({ collaborative: !this.state.collaborative })} />
<span className="label">Collaborative</span>
</label>
</div>
</div>
</div>
)
break
</div>
<div className="input">
<label>
<input
type="checkbox"
name="playlist_private"
checked={this.state.public}
onChange={(e) => this.setState({ public: !this.state.public })}
/>
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="collaborative"
checked={this.state.collaborative}
onChange={(e) => this.setState({ collaborative: !this.state.collaborative })}
/>
<span className="label">Collaborative</span>
</label>
</div>
</div>
</div>
);
break;
default:
return (
<div>
<div className="field text">
<div className="name">Name</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
</div>
</div>
)
}
}
default:
return (
<div>
<div className="field text">
<div className="name">Name</div>
<div className="input">
<input
type="text"
onChange={(e) => this.setState({ name: e.target.value })}
value={this.state.name}
/>
</div>
</div>
</div>
);
}
}
render(){
return (
<Modal className="modal--edit-playlist">
<h1>Edit playlist</h1>
{this.state.error ? <h3 className="red-text">{this.state.error}</h3> : null}
<form onSubmit={(e) => this.savePlaylist(e)}>
render() {
return (
<Modal className="modal--edit-playlist">
<h1>Edit playlist</h1>
{this.state.error ? <h3 className="red-text">{this.state.error}</h3> : null}
<form onSubmit={(e) => this.savePlaylist(e)}>
{this.renderFields()}
{this.renderFields()}
<div className="actions centered-text">
<button type="submit" className="button button--primary button--large">Save</button>
</div>
</form>
</Modal>
)
}
<div className="actions centered-text">
<button type="submit" className="button button--primary button--large">Save</button>
</div>
</form>
</Modal>
);
}
}
const mapStateToProps = (state, ownProps) => {
const mapStateToProps = (state, ownProps) => {
// Decode the URI, and then re-encode selected characters
// This is needed as Mopidy encodes *some* characters in playlist URIs (but not other characters)
// We need to retain ":" because this a reserved URI separator
let uri = decodeURIComponent(ownProps.match.params.uri);
uri = uri.replace(/\s/g, '%20'); // space
uri = uri.replace(/\[/g, '%5B'); // [
uri = uri.replace(/\]/g, '%5D'); // ]
uri = uri.replace(/\(/g, '%28'); // (
uri = uri.replace(/\)/g, '%29'); // )
uri = uri.replace(/\#/g, '%23'); // #
// Decode the URI, and then re-encode selected characters
// This is needed as Mopidy encodes *some* characters in playlist URIs (but not other characters)
// We need to retain ":" because this a reserved URI separator
var uri = decodeURIComponent(ownProps.match.params.uri);
uri = uri.replace(/\s/g, '%20'); // space
uri = uri.replace(/\[/g, '%5B'); // [
uri = uri.replace(/\]/g, '%5D'); // ]
uri = uri.replace(/\(/g, '%28'); // (
uri = uri.replace(/\)/g, '%29'); // )
uri = uri.replace(/\#/g, '%23'); // #
return {
uri: uri,
mopidy_connected: state.mopidy.connected,
playlist: (state.core.playlists[uri] !== undefined ? state.core.playlists[uri] : null),
playlists: state.core.playlists
}
}
return {
uri,
mopidy_connected: state.mopidy.connected,
playlist: (state.core.playlists[uri] !== undefined ? state.core.playlists[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)
}
}
const mapDispatchToProps = (dispatch) => ({
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(EditPlaylist)
export default connect(mapStateToProps, mapDispatchToProps)(EditPlaylist);