Removing slashes from URI links; Image modal for small screens

src/js/components/Modal/ImageZoomModal.js

@@ -22,10 +22,11 @@ class ImageZoomModal extends React.Component{
 	}
 
 	render(){
+		if (!this.props.data.url){
+			return null;
+		}
 		return (
-			<div className="image-zoom-modal">
-				{this.props.data.url ? <img src={this.props.data.url} /> : null }
-			</div>
+			<div className="image" style={{backgroundImage: "url("+this.props.data.url+")"}}></div>
 		)
 	}
 }

src/js/components/Thumbnail.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
-import LazyLoad from 'react-lazyload'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -44,15 +43,15 @@ class Thumbnail extends React.Component{
 	mapImageSizes(props = this.props){
 
 		// no images
-		if (!this.props.image && !this.props.images){
+		if (!this.props.image && (!this.props.images || this.props.images.length <= 0)){
 			return require('../../assets/no-image.svg')
 
 		// single image
-		}else if (this.props.image){
+		} else if (this.props.image){
 			return this.props.image
 
 		// multiple images
-		}else if (this.props.images && this.props.images.length > 0){
+		} else if (this.props.images && this.props.images.length > 0){
 			var images = helpers.sizedImages(this.props.images )
 			var size = 'medium'
 			if (this.props.size ) size = this.props.size
@@ -77,13 +76,6 @@ class Thumbnail extends React.Component{
 			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><FontAwesome name="search" /></span>
 		}
 
-		/*
-		// It's a great idea, but interferes with huge lists (like Albums library)
-		<LazyLoad height={600} placeholder={<div className="image"></div>}>
-			<div className="image loaded" style={{backgroundImage: 'url("'+image+'")'}}></div>
-		</LazyLoad>
-		*/
-
 		return (
 			<div className={class_name}>
 				<div className="image loaded" style={{backgroundImage: 'url("'+image+'")'}}></div>

src/js/views/Album.js

@@ -122,7 +122,7 @@ class Album extends React.Component{
 		return (
 			<div className="view album-view content-wrapper">
 				<div className="thumbnail-wrapper">
-					<Thumbnail size="large" canZoom images={ this.props.album.images } />
+					<Thumbnail size="large" canZoom images={this.props.album.images} />
 				</div>
 
 				<div className="title">

src/js/views/Queue.js

@@ -70,7 +70,7 @@ class Queue extends React.Component{
 
 		var link = null
 		if (this.props.current_track.album && this.props.current_track.album.uri){
-			link = '/album/'+this.props.current_track.album.uri;
+			link = '/album/'+this.props.current_track.album.uri.replace(/[/]/g,'%2F');
 		}
 		return (
 			<Link className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'} to={link}>

src/scss/components/_modal.scss

@@ -162,13 +162,17 @@
 
 	&.image_zoom {
 		.content {
-			text-align: center;
-			padding: 5vh 5%;
+			padding: 100px 5%;
 			width: 90%;
+			height: 100%;
+			box-sizing: border-box;
 
-			img {
-				max-height: 90vh;
-				max-width: 100%;
+			.image {
+				width: 100%;
+				height: 100%;
+				background-size: contain;
+				background-position: 50% 50%;
+				background-repeat: no-repeat;
 			}
 		}
 	}