Add thumbnail preview to Metadata Editor

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -11,20 +11,27 @@ const MetadataEditor = createClass({
 	getDefaultProps : function() {
 		return {
 			metadata : {
-				editId      : null,
-				title       : '',
-				description : '',
-				tags        : '',
-				published   : false,
-				authors     : [],
-				systems     : [],
-				renderer    : 'legacy',
-				thumbnail   : ''
+				editId        : null,
+				title         : '',
+				description   : '',
+				tags          : '',
+				published     : false,
+				authors       : [],
+				systems       : [],
+				renderer      : 'legacy',
+				thumbnail     : '',
+				showThumbnail : false
 			},
 			onChange : ()=>{}
 		};
 	},
 
+	getInitialState : function(){
+		return {
+			showThumbnail : false
+		};
+	},
+
 	handleFieldChange : function(name, e){
 		this.props.onChange(_.merge({}, this.props.metadata, {
 			[name] : e.target.value
@@ -66,6 +73,17 @@ const MetadataEditor = createClass({
 			});
 	},
 
+	toggleThumbnailDisplay : function(){
+		this.setState({
+			showThumbnail : !this.state.showThumbnail
+		});
+	},
+
+	renderThumbnail : function(){
+		if(!this.state.showThumbnail) return;
+		return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || 'https://i.imgur.com/FwRuhv7.png'}></img>;
+	},
+
 	renderSystems : function(){
 		return _.map(SYSTEMS, (val)=>{
 			return <label key={val}>
@@ -166,7 +184,12 @@ const MetadataEditor = createClass({
 				<label>thumbnail URL</label>
 				<textarea value={this.props.metadata.thumbnail} className='value'
 					onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
+				<button className='display' onClick={this.toggleThumbnailDisplay}>
+					<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
+				</button>
+				{this.renderThumbnail()}
 			</div>
+
 			{/*}
 			<div className='field tags'>
 				<label>tags</label>