Zoomable thumbnails

src/js/components/FullPlayer.js

@@ -66,7 +66,7 @@ class FullPlayer extends React.Component{
 		if( this.props.current_track.album.uri ) link = '/album/'+this.props.current_track.album.uri
 		return (
 			<Link className="artwork" to={link}>
-				<Thumbnail size="huge" images={this.props.current_track.album.images} />
+				<Thumbnail size="huge" images={this.props.current_track.album.images} canZoom />
 			</Link>
 		)
 	}

src/js/components/Modal/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 * as uiActions from '../../services/ui/actions'
+import * as helpers from '../../helpers'
+
+import Icon from '../Icon'
+
+class ImageZoomModal extends React.Component{
+
+	constructor(props){
+		super(props)
+	}
+
+	handleClick(e, connectionid){		
+		e.preventDefault()
+		this.props.uiActions.closeModal()
+		return false;
+	}
+
+	render(){
+		return (
+			<div className="image-zoom-modal">
+				{this.props.data.url ? <img src={this.props.data.url} /> : null }
+			</div>
+		)
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ImageZoomModal)

src/js/components/Modal/Modal.js

@@ -9,6 +9,7 @@ import AddToPlaylistModal from './AddToPlaylistModal'
 import CreatePlaylistModal from './CreatePlaylistModal'
 import EditPlaylistModal from './EditPlaylistModal'
 import SendAuthorizationModal from './SendAuthorizationModal'
+import ImageZoomModal from './ImageZoomModal'
 
 import * as uiActions from '../../services/ui/actions'
 import * as mopidyActions from '../../services/mopidy/actions'
@@ -25,7 +26,7 @@ class Modal extends React.Component{
 		if( !this.props.modal ) return null;
 
 		return (
-			<div className="modal">
+			<div className={this.props.modal.name+" modal"}>
 				<div className="close-modal" onClick={ () => this.props.uiActions.closeModal() }>
 					<Icon name="close" className="white" />
 				</div>
@@ -35,6 +36,7 @@ class Modal extends React.Component{
 					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} /> : null }
 					{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 					{ 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 == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 
 				</div>
 			</div>

src/js/components/Thumbnail.js

@@ -1,8 +1,13 @@
 
 import React, { PropTypes } from 'react'
-import * as helpers from '../helpers'
+import { connect } from 'react-redux'
+import { createStore, bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
 
-export default class Thumbnail extends React.Component{
+import * as helpers from '../helpers'
+import * as uiActions from '../services/ui/actions'
+
+class Thumbnail extends React.Component{
 
 	constructor(props) {
 		super(props);
@@ -53,16 +58,39 @@ export default class Thumbnail extends React.Component{
 		}
 	}
 
+	zoom(e, image){
+		e.preventDefault()
+		this.props.uiActions.openModal('image_zoom', {url: image} )
+	}
+
 	render(){
 		var image = this.mapImageSizes()
 		var style = { backgroundImage: 'url("'+image+'")' }
-		var className = 'thumbnail '+this.props.size;
-		if( this.props.circle ) className += ' circle';
+		var class_name = 'thumbnail '+this.props.size;
+		if( this.props.circle ) class_name += ' circle';
 		
+		var zoom_icon = null
+		if (this.props.canZoom){
+			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><FontAwesome name="search-plus" /></span>
+		}
+
 		return (
-			<div className={className}>
+			<div className={class_name}>
 				<div className="image" style={style}></div>
+				{zoom_icon}
 			</div>
 		);
 	}
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Thumbnail)

src/js/views/Album.js

@@ -92,7 +92,7 @@ class Album extends React.Component{
 			<div className="view album-view">
 		        <SidebarToggleButton />
 				<div className="intro">
-					<Thumbnail size="large" images={ this.props.album.images } />
+					<Thumbnail size="large" canZoom images={ this.props.album.images } />
 					<ArtistGrid artists={artists} />
 
 					<div className="actions">

src/js/views/Artist.js

@@ -184,7 +184,7 @@ class Artist extends React.Component{
 
 				<div className="intro">
 
-					<Thumbnail image={ image } />
+					<Thumbnail canZoom image={ image } />
 					<Parallax image={ image } />
 
 					<div className="heading-wrapper">

src/js/views/Playlist.js

@@ -126,7 +126,7 @@ class Playlist extends React.Component{
 
 				<div className="intro">
 
-					<Thumbnail size="large" images={ this.props.playlist.images } />
+					<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
 
 					<div className="actions">
 						<button className="large primary" onClick={ e => this.play() }>Play</button>

src/scss/components/_images.scss

@@ -4,6 +4,7 @@
 	width: 100%;
 	max-width: 300px;
 	overflow: hidden;
+	position: relative;
 	
 	.image {
 		width: 100%;
@@ -15,6 +16,20 @@
 		background-size: cover;
 	}
 
+	.zoom {
+		@include animate();
+		display: none;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		z-index: 1;
+		padding: 10px;
+		background: rgba(0,0,0,0.2);
+		font-size: 12px;
+		cursor: pointer;
+		color: #FFFFFF;
+	}
+
 	&.small {
 		max-width: 50px;
 	}
@@ -22,6 +37,12 @@
 	&.circle {
 		border-radius: 50%;
 	}
+
+	&:hover {
+		.zoom {
+			display: block;
+		}
+	}
 }
 
 .parallax {

src/scss/components/_modal.scss

@@ -37,6 +37,13 @@
 			padding-bottom: 40px;
 		}
 
+		.image-zoom-modal {
+			img {
+				max-height: 100%;
+				max-width: 100%;
+			}
+		}
+
 		form {
 			.field {
 				padding-bottom: 20px;