Edit playlist as route

src/js/views/modals/AddToPlaylistModal.js

@@ -0,0 +1,70 @@
+
+import React, { PropTypes } from 'react';;
+
+import Icon from '../Icon';
+import Thumbnail from '../Thumbnail';
+import * as helpers from '../../helpers';
+
+export default class AddToPlaylistModal extends React.Component{
+
+	constructor(props){
+		super(props)
+
+		if (!this.props.spotify_library_playlists){
+			this.props.spotifyActions.getLibraryPlaylists()
+		}
+		
+		if (!this.props.mopidy_library_playlists){
+			this.props.mopidyActions.getLibraryPlaylists()
+		}
+	}
+
+	playlistSelected(playlist_uri){
+		this.props.coreActions.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')
+
+		var loader = null
+		if (this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR && this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status == 'running'){
+			loader = (
+				<div className='lazy-loader body-loader loading'>
+					<div className="loader"></div>
+				</div>
+			)
+		}
+
+		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>
+				{playlists.length <= 0 ? <div className="no-results">No playlists available</div> : null}
+				<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><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
+										<li>{ playlist.tracks_total ? <span className="grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }</li>
+									</ul>
+								</div>
+							)
+						})
+					}
+				</div>
+				{loader}
+			</div>
+		)
+	}
+}

src/js/views/modals/AddToQueueModal.js

@@ -0,0 +1,71 @@
+
+import React, { PropTypes } from 'react';;
+
+import Icon from '../Icon';
+import * as helpers from '../../helpers';
+
+export default class AddToQueueModal extends React.Component{
+
+	constructor(props){
+		super(props)
+		this.state = {
+			uris: '',
+			next: false
+		}
+	}
+
+	handleSubmit(e){
+		var uris = this.state.uris.split(',');
+		this.props.mopidyActions.enqueueURIs(uris, null, this.state.next);
+		this.props.uiActions.closeModal();
+	}
+
+	render(){
+		return (
+			<div>
+				<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">
+						<div className="name">URI(s)</div>
+						<div className="input">
+							<input 
+								type="text"
+								onChange={e => this.setState({uris: e.target.value})} 
+								value={this.state.uris} />
+						</div>
+					</div>
+
+					<div className="field radio white">
+						<div className="name">
+							Position
+						</div>
+						<div className="input">
+							<label>
+								<input 
+									type="radio"
+									name="next"
+									checked={!this.state.next}
+									onChange={e => this.setState({next: false})} />
+								<span className="label">End</span>
+							</label>
+							<label>
+								<input 
+									type="radio"
+									name="next"
+									checked={this.state.next}
+									onChange={e => this.setState({next: true})} />
+								<span className="label">After current track</span>
+							</label>
+						</div>
+					</div>
+
+					<div className="actions centered-text">
+						<button type="submit" className="primary large">Add</button>
+					</div>
+				</form>
+			</div>
+		)
+	}
+}

src/js/views/modals/AuthorizationModal_Receive.js

@@ -0,0 +1,53 @@
+
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import { createStore, bindActionCreators } from 'redux';
+
+import * as uiActions from '../../services/ui/actions'
+import * as helpers from '../../helpers'
+
+import Icon from '../Icon'
+import Thumbnail from '../Thumbnail'
+
+export default class extends React.Component{
+
+	constructor(props){
+		super(props)
+	}
+
+	handleImport(e){
+		this.props.spotifyActions.importAuthorization(this.props.data)
+		this.props.uiActions.closeModal()
+	}
+
+	render(){
+		console.log(this.props.data)
+		if (!this.props.data || !this.props.data.user || !this.props.data.authorization){
+			return null
+		}
+
+		var user = this.props.data.user
+
+		return (
+			<div>
+				<h1>Spotify authorization received</h1>
+				<h2 className="grey-text">{user.display_name ? user.display_name : user.id} has shared their Spotify authorization with you. Importing this will overwrite your existing Spotify Authorization.</h2>
+				
+				<div className="user-details">
+					<Thumbnail images={user.images} circle />
+					<h2>{user.display_name ? user.display_name : user.id}</h2>
+					<ul className="details">
+						<li>{user.id}</li>
+						<li>{user.followers.total} followers</li>
+					</ul>
+				</div>
+
+				<div className="actions centered-text">
+					<button className="large" onClick={e => this.props.uiActions.closeModal()}>Ignore</button>
+					<button className="primary large" onClick={e => this.handleImport(e)}>Import authorization</button>
+				</div>
+			</div>
+		)
+	}
+}

src/js/views/modals/AuthorizationModal_Send.js

@@ -0,0 +1,87 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import { createStore, bindActionCreators } from 'redux'
+
+import * as uiActions from '../../services/ui/actions'
+import * as helpers from '../../helpers'
+
+import Icon from '../Icon'
+
+class AuthorizationModal_Send extends React.Component{
+
+	constructor(props){
+		super(props)
+	}
+
+	handleClick(e, connection_id){		
+		e.preventDefault()
+		this.props.pusherActions.deliverMessage(
+			connection_id,
+			'spotify_authorization_received',
+			{
+				authorization: this.props.authorization, 
+				user: this.props.me
+			}
+		);
+		this.props.uiActions.closeModal()
+		return false;
+	}
+
+	renderConnectionsList(){
+		var connections = []
+		for (var connection_id in this.props.connections){
+			if (this.props.connections.hasOwnProperty(connection_id) && connection_id !== this.props.connection_id){
+				connections.push(this.props.connections[connection_id])
+			}
+		}
+
+		if (connections.length <= 0){
+			return <div className="no-results">No peer connections available</div>
+		} else {
+			return (
+				<div className="list small pusher-connection-list">
+					{
+						connections.map((connection, index) => {
+							return (
+								<div className='list-item connection' key={connection.connection_id} onClick={ e => this.handleClick(e, connection.connection_id) }>
+									{ connection.username }
+									&nbsp;
+									<span className="grey-text">({ connection.ip })</span>
+								</div>
+							);
+						})
+					}
+				</div>
+			)
+		}
+	}
+
+	render(){
+		return (
+			<div>
+				<h1>Share Spotify authentication</h1>
+				<h2 className="grey-text">Send your authentication tokens to another client. When the recipient client imports this, their Iris will have full access to your Spotify account ({this.props.me.id}).</h2>
+				{this.renderConnectionsList()}
+			</div>
+		)
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		me: state.spotify.me,
+		authorization: state.spotify.authorization,
+		connection_id: state.pusher.connection_id,
+		connections: state.pusher.connections
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AuthorizationModal_Send)

src/js/views/modals/CreatePlaylistModal.js

@@ -0,0 +1,146 @@
+
+import React, { PropTypes } from 'react';;
+
+import Icon from '../Icon';
+import * as helpers from '../../helpers';
+
+export default class CreatePlaylistModal extends React.Component{
+
+	constructor(props){
+		super(props)
+		this.state = {
+			name: '',
+			description: '',
+			scheme: 'spotify',
+			is_public: true,
+			is_collaborative: false
+		}
+	}
+
+	createPlaylist(e){		
+		e.preventDefault();	
+
+		if (!this.state.name || this.state.name == ''){
+			this.setState({error: 'Name is required'})
+			return false
+		} else {	
+			this.props.coreActions.createPlaylist(this.state.scheme, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative )
+			this.props.uiActions.closeModal()
+		}
+
+		return false
+	}
+
+	renderFields(){
+		switch (this.state.scheme){
+
+			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 checkbox white">
+							<div className="name">
+								Options
+							</div>
+							<div className="input">
+								<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>
+					</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 (
+			<div>
+				<h1>Create playlist</h1>
+				<form onSubmit={(e) => this.createPlaylist(e)}>
+
+					<div className="field radio white">
+						<div className="name">
+							Provider
+						</div>
+						<div className="input">
+							<label>
+								<input 
+									type="radio"
+									name="scheme"
+									value="spotify"
+									checked={ this.state.scheme == 'spotify' }
+									onChange={ e => this.setState({ scheme: e.target.value })} />
+								<span className="label">Spotify</span>
+							</label>
+							<label>
+								<input 
+									type="radio"
+									name="scheme"
+									value="m3u"
+									checked={ this.state.scheme == 'm3u' }
+									onChange={ e => this.setState({ scheme: e.target.value })} />
+								<span className="label">Mopidy</span>
+							</label>
+						</div>
+					</div>
+					
+					{this.renderFields()}
+
+					<div className="actions centered-text">
+						<button type="submit" className="primary large">Create playlist</button>
+					</div>
+
+				</form>
+			</div>
+		)
+	}
+}

src/js/views/modals/EditPlaylist.js

@@ -0,0 +1,213 @@
+
+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 EditPlaylist extends React.Component{
+
+	constructor(props){
+		super(props)
+		this.state = {
+			error: null,
+			name: '',
+			description: '',
+			image: null,
+			public: false,
+			collaborative: false
+		}
+	}
+
+	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.params.uri)){
+
+				case 'spotify':
+					this.props.spotifyActions.getPlaylist(this.props.params.uri);
+					this.props.spotifyActions.following(this.props.params.uri);
+					break
+
+				default:
+					if (props.mopidy_connected){
+						this.props.mopidyActions.getPlaylist(this.props.params.uri);
+					}
+					break
+			}
+		}
+	}
+
+	componentWillReceiveProps(nextProps){
+		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)
+			});
+		}
+	}
+
+	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.params.uri, this.state.name, this.state.description, this.state.public, this.state.collaborative, this.state.image);
+			this.props.uiActions.closeModal();
+			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]);
+	}
+
+	renderFields(){
+		switch (helpers.uriSource(this.props.params.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">
+								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
+
+			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="edit-playlist-modal">
+				<h1>Edit playlist</h1>
+				{this.state.error ? <h3 className="red-text">{this.state.error}</h3> : null}
+				<form onSubmit={(e) => this.savePlaylist(e)}>
+
+					{this.renderFields()}
+
+					<div className="actions centered-text">
+						<button type="submit" className="primary large">Save</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)(EditPlaylist)

src/js/views/modals/EditRadioModal.js

@@ -0,0 +1,226 @@
+
+import React, { PropTypes } from 'react';;
+
+import Icon from '../Icon';
+import * as helpers from '../../helpers';
+
+export default class EditRadioModal 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">&nbsp;({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 (
+			<div>
+				<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>
+			</div>
+		)
+	}
+}

src/js/views/modals/ImageZoomModal.js

@@ -0,0 +1,43 @@
+
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import { createStore, bindActionCreators } from 'redux';
+
+import Icon from '../Icon';
+import * as uiActions from '../../services/ui/actions';
+import * as helpers from '../../helpers';
+
+class ImageZoomModal extends React.Component{
+
+	constructor(props){
+		super(props)
+	}
+
+	handleClick(e, connectionid){		
+		e.preventDefault()
+		this.props.uiActions.closeModal()
+		return false;
+	}
+
+	render(){
+		if (!this.props.data.url){
+			return null;
+		}
+		return (
+			<div className="image" style={{backgroundImage: "url("+this.props.data.url+")"}}></div>
+		)
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ImageZoomModal)

src/js/views/modals/InitialSetupModal.js

@@ -0,0 +1,141 @@
+
+import React, { PropTypes } from 'react'
+
+import Icon from '../Icon'
+import SpotifyAuthenticationFrame from '../Fields/SpotifyAuthenticationFrame'
+import LastfmAuthenticationFrame from '../Fields/LastfmAuthenticationFrame'
+
+import * as helpers from '../../helpers'
+
+export default class InitialSetupModal extends React.Component{
+	constructor(props){
+		super(props);
+
+		this.state = {
+			username: 'Anonymous',
+			allow_reporting: this.props.allow_reporting,
+			host: this.props.host,
+			port: this.props.port,
+			ssl: this.props.ssl
+		}
+	}
+
+	handleSubmit(e){
+		e.preventDefault();
+		var self = this;
+
+		// Force local username change, even if remote connection absent/failed
+		this.props.pusherActions.setUsername(this.state.username, true);
+
+		this.props.uiActions.set({
+			initial_setup_complete: true,
+			allow_reporting: this.state.allow_reporting
+		});
+		this.props.mopidyActions.set({
+			host: this.state.host,
+			port: this.state.port,
+			ssl: this.state.ssl
+		});
+
+		this.setState({saving: true});
+
+		// Wait a second to allow changes to apply to store
+		setTimeout(function(){
+
+			// We've changed a connection setting, so need to reload
+			if (self.state.host !== self.props.host || self.state.port !== self.props.port || self.state.ssl !== self.props.ssl){
+
+				window.location.reload(true);
+
+			// Safe to just close modal
+			} else {
+				self.props.uiActions.closeModal();
+			}
+		}, 1000);
+
+		return false;
+	}
+
+	render(){
+		return (
+			<div>
+				<h1>Get started</h1>
+				<form onSubmit={(e) => this.handleSubmit(e)}>
+
+					<div className="field text">
+						<div className="name">
+							Username
+						</div>
+						<div className="input">
+							<input 
+								type="text"
+								onChange={e => this.setState({username: e.target.value.replace(/\W/g, '')})}
+								value={this.state.username } />
+							<div className="description">
+								A non-unique string used to identify this client (no special characters)
+							</div>
+						</div>
+					</div>
+
+					<div className="field">
+						<div className="name">Host</div>
+						<div className="input">
+							<input 
+								type="text"
+								onChange={ e => this.setState({host: e.target.value})}
+								value={ this.state.host } />
+						</div>
+					</div>
+					<div className="field">
+						<div className="name">Port</div>
+						<div className="input">
+							<input 
+								type="text"
+								onChange={ e => this.setState({port: e.target.value})}
+								value={ this.state.port } />
+						</div>
+					</div>
+					<div className="field checkbox">
+						<div className="input">
+							<label>
+								<input 
+									type="checkbox"
+									name="ssl"
+									checked={this.state.ssl}
+									onChange={e => this.setState({ssl: !this.state.ssl})} />
+								<span className="label has-tooltip">
+									Enable SSL
+									<span className="tooltip">Requires SSL proxy</span>
+								</span>
+							</label>
+						</div>
+					</div>
+					
+					{helpers.isHosted() ? null : <div className="field checkbox">
+						<div className="input">
+							<label>
+								<input 
+									type="checkbox"
+									name="allow_reporting"
+									checked={ this.state.allow_reporting }
+									onChange={ e => this.setState({ allow_reporting: !this.state.allow_reporting })} />
+								<span className="label">
+									Allow reporting of anonymous usage statistics
+								</span>
+							</label>
+						</div>
+					</div>}
+
+					{!this.state.allow_reporting ? <p className="description">This anonymous usage data is important in identifying errors and potential features that make Iris better for everyone. Want to know more? Read the <a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank">privacy policy</a>.</p> : null}
+
+					<div className="actions centered-text">
+						<button className={"primary large"+(this.state.saving ? " working" : "")} onClick={e => this.handleSubmit(e)}>
+							{this.state.saving ? "Saving" : "Save"}
+						</button>
+					</div>
+
+				</form>
+			</div>
+		)
+	}
+}

src/js/views/modals/KioskModeModal.js

@@ -0,0 +1,48 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import { createStore, bindActionCreators } from 'redux'
+
+import * as uiActions from '../../services/ui/actions'
+import * as helpers from '../../helpers'
+
+import Icon from '../Icon'
+import Thumbnail from '../Thumbnail'
+import ArtistSentence from '../ArtistSentence'
+
+export default class KioskModeModal extends React.Component{
+
+	constructor(props){
+		super(props)
+	}
+
+	handleClick(e, connectionid){		
+		e.preventDefault()
+		this.props.uiActions.closeModal()
+		return false;
+	}
+
+	render(){
+		if (this.props.current_track && this.props.current_track.images){
+			var images = this.props.current_track.images
+		} else {
+			var images = []
+		}
+
+		return (
+			<div className="kisk-mode-modal">
+			
+				<Thumbnail className="background" images={images} />
+				<Thumbnail className="foreground" images={images} />
+
+				<div className="player">
+					<div className="current-track">
+						<div className="title">{ this.props.current_track ? this.props.current_track.name : <span>-</span> }</div>
+						{ this.props.current_track ? <ArtistSentence nolinks artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
+					</div>
+				</div>
+			</div>
+		)
+	}
+}

src/js/views/modals/Modal.js

@@ -0,0 +1,66 @@
+
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as helpers from '../../helpers'
+import Icon from '../../components/Icon'
+
+class Modal extends React.Component{
+
+	constructor(props){
+		super(props);
+		this.handleKeyUp = this.handleKeyUp.bind(this);
+	}
+
+	componentWillMount(){
+		$('body').addClass('no-scrollbars');
+		window.addEventListener("keyup", this.handleKeyUp, false);
+	}
+
+	componentWillUnmount(){
+		$('body').removeClass('no-scrollbars');
+		window.removeEventListener("keyup", this.handleKeyUp, false);
+	}
+
+	handleKeyUp(e){
+		if (this.props.shortkeys_enabled && e.keyCode == 27){ // esc
+			window.history.back();
+		}
+	}
+
+	render(){
+
+		var className = "modal";
+		if (this.props.className){
+			className += " "+this.props.className;
+		}
+
+		return (
+			<div className={className}>
+
+				<div className="controls">
+					<div className="control close" onClick={e => window.history.back()}>
+						<Icon name="close" className="white" />
+					</div>
+				</div>
+
+				<div className="content">
+					{this.props.children}
+				</div>
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		shortkeys_enabled: state.ui.shortkeys_enabled
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Modal)