From 0028599bbaaea7932aab04e960cf1de2dd63a626 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 14 Jul 2017 08:57:53 +1200
Subject: [PATCH] Playlist editing; Description field polish, fixes #138

---
 .gitignore                                    |  2 +
 src/js/components/Modal/AddToQueueModal.js    | 10 +-
 .../components/Modal/CreatePlaylistModal.js   | 99 ++++++++++++-------
 src/scss/components/_modal.scss               | 11 +--
 4 files changed, 74 insertions(+), 48 deletions(-)

diff --git a/.gitignore b/.gitignore
index 7a45a8d4..3ea67959 100755
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,5 @@ public_html
 *.orig
 Thumbs.db
 *.pyc
+package-lock.json
+
diff --git a/src/js/components/Modal/AddToQueueModal.js b/src/js/components/Modal/AddToQueueModal.js
index 94bf33ed..569baaeb 100755
--- a/src/js/components/Modal/AddToQueueModal.js
+++ b/src/js/components/Modal/AddToQueueModal.js
@@ -25,25 +25,27 @@ export default class AddToQueueModal extends React.Component{
 	render(){
 		return (
 			<div>
-				<h1>Add URI(s) to queue</h1>
+				<h1>Add to queue</h1>
+				<h2 className="grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>
 
 				<form onSubmit={e => this.handleSubmit(e)}>
 					<div className="field text">
+						<span className="label">URI(s)</span>
 						<input 
 							type="text"
-							placeholder="Comma-separated URIs"
 							onChange={e => this.setState({uris: e.target.value})} 
 							value={this.state.uris} />
 					</div>
 
 					<div className="field radio white">
+						<span className="label">Position</span>
 						<label>
 							<input 
 								type="radio"
 								name="next"
 								checked={!this.state.next}
 								onChange={e => this.setState({next: false})} />
-							<span className="label">Add to end</span>
+							<span className="label">End</span>
 						</label>
 						<label>
 							<input 
@@ -51,7 +53,7 @@ export default class AddToQueueModal extends React.Component{
 								name="next"
 								checked={this.state.next}
 								onChange={e => this.setState({next: true})} />
-							<span className="label">Add after current track</span>
+							<span className="label">After current track</span>
 						</label>
 					</div>
 
diff --git a/src/js/components/Modal/CreatePlaylistModal.js b/src/js/components/Modal/CreatePlaylistModal.js
index ee8d0181..d56eeaf3 100755
--- a/src/js/components/Modal/CreatePlaylistModal.js
+++ b/src/js/components/Modal/CreatePlaylistModal.js
@@ -31,28 +31,72 @@ export default class CreatePlaylistModal extends React.Component{
 		return false
 	}
 
+	renderFields(){
+		switch (this.state.scheme){
+
+			case 'spotify':
+				return (
+					<div>
+						<div className="field text">
+							<span className="label">Name</span>
+							<input 
+								type="text"
+								onChange={ e => this.setState({ name: e.target.value })} 
+								value={ this.state.name } />
+						</div>
+
+						<div className="field text">
+							<span className="label">Description</span>
+							<input 
+								type="text"
+								onChange={ e => this.setState({ description: e.target.value })} 
+								
+								value={ this.state.description } />
+						</div>
+
+						<div className="field checkbox white">
+							<span className="label">Options</span>
+							<label>
+								<input 
+									type="checkbox"
+									name="is_public"
+									checked={ this.state.is_public }
+									onChange={ e => this.setState({ is_public: !this.state.is_public })} />
+								<span className="label">Public</span>
+							</label>
+							<label>
+								<input 
+									type="checkbox"
+									name="is_collaborative"
+									checked={ this.state.is_collaborative }
+									onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
+								<span className="label">Collaborative</span>
+							</label>
+						</div>
+					</div>
+				)
+
+			default:
+				return (
+					<div>
+						<div className="field text">
+							<span className="label">Name</span>
+							<input 
+								type="text"
+								onChange={ e => this.setState({ name: e.target.value })} 
+								value={ this.state.name } />
+						</div>
+					</div>
+				)
+		}
+	}
+
 	render(){
 		return (
 			<div>
 				<h1>Create playlist</h1>
 				<form onSubmit={(e) => this.createPlaylist(e)}>
 
-					<div className="field text">
-						<span className="label">Name</span>
-						<input 
-							type="text"
-							onChange={ e => this.setState({ name: e.target.value })} 
-							value={ this.state.name } />
-					</div>
-
-					<div className="field text">
-						<span className="label">Description</span>
-						<input 
-							type="text"
-							onChange={ e => this.setState({ description: e.target.value })} 
-							
-							value={ this.state.description } />
-					</div>
 					<div className="field radio white">
 						<span className="label">Provider</span>
 						<label>
@@ -74,28 +118,13 @@ export default class CreatePlaylistModal extends React.Component{
 							<span className="label">Mopidy</span>
 						</label>
 					</div>
-					<div className="field checkbox white">
-						<span className="label">Options</span>
-						<label>
-							<input 
-								type="checkbox"
-								name="is_public"
-								checked={ this.state.is_public }
-								onChange={ e => this.setState({ is_public: !this.state.is_public })} />
-							<span className="label">Public</span>
-						</label>
-						<label>
-							<input 
-								type="checkbox"
-								name="is_collaborative"
-								checked={ this.state.is_collaborative }
-								onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
-							<span className="label">Collaborative</span>
-						</label>
-					</div>
+					
+					{this.renderFields()}
+
 					<div className="actions centered-text">
 						<button type="submit" className="primary wide">Create</button>
 					</div>
+
 				</form>
 			</div>
 		)
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index be077d6e..65007981 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -35,7 +35,7 @@
 	}
 
 	.content {
-		padding: 100px 25%;
+		padding: 10vh 25%;
 		margin: 0 auto;
 		width: 50%;
 		color: $white;
@@ -44,7 +44,7 @@
 			padding-top: 50px;
 
 			.field {
-				padding-bottom: 40px;
+				padding-bottom: 30px;
 				position: relative;
 
 				.label {
@@ -145,13 +145,6 @@
 		}
 	}
 
-	&.add_to_queue,
-	&.create_playlist {
-		h1 {
-			padding-bottom: 50px;
-		}
-	}
-
 	&.image_zoom {
 		.content {
 			text-align: center;