Kiosk mode; Placeholder for unloaded albums/artists/playlists; Gmusic integration part 1

src/js/components/Modal/KioskModeModal.js

@@ -0,0 +1,62 @@
+
+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'
+
+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.album && this.props.current_track.album.images){
+			var images = this.props.current_track.album.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 artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
+					</div>
+				</div>
+			</div>
+		)
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		current_track: state.ui.current_track
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(KioskModeModal)

src/js/components/Modal/Modal.js

@@ -11,6 +11,7 @@ import EditPlaylistModal from './EditPlaylistModal'
 import SendAuthorizationModal from './SendAuthorizationModal'
 import EditRadioModal from './EditRadioModal'
 import ImageZoomModal from './ImageZoomModal'
+import KioskModeModal from './KioskModeModal'
 
 import * as uiActions from '../../services/ui/actions'
 import * as mopidyActions from '../../services/mopidy/actions'
@@ -39,6 +40,7 @@ class Modal extends React.Component{
 					{ this.props.modal.name == 'send_authorization' ? <SendAuthorizationModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} data={this.props.modal.data} /> : null }
 					{ this.props.modal.name == 'edit_radio' ? <EditRadioModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} radio={this.props.radio} artists={this.props.artists} tracks={this.props.tracks} /> : null }
 					{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
+					{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 
 				</div>
 			</div>

src/js/components/Thumbnail.js

@@ -68,6 +68,7 @@ class Thumbnail extends React.Component{
 		var style = { backgroundImage: 'url("'+image+'")' }
 		var class_name = 'thumbnail '+this.props.size;
 		if( this.props.circle ) class_name += ' circle';
+		if( this.props.className ) class_name += ' '+this.props.className;
 		
 		var zoom_icon = null
 		if (this.props.canZoom){