Add thumbnail to sample editor

3 files changed, 15 insertions, 1 deletions

diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index 20ebd90..d905fb1 100644
--- a/assets/css/sample-editor.css
+++ b/assets/css/sample-editor.css
@@ -13,7 +13,7 @@
 
 .progress-bar {
 	border: 1px solid #b9b9b9;
-	width: 90%;
+	width: 80%;
 	height: 3em;
 	position: relative;
 	background-color: #ddd;
@@ -102,3 +102,10 @@
 .edit-sample .key-input {
 	margin-top: 0.1em;
 }
+
+
+/* Thumbnail */
+.thumbnail-image {
+	height: 3em;
+	vertical-align: middle;
+}
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index de9e967..3122641 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -10,6 +10,7 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 
         this.listenTo(this.model, 'change:key', this.key_bind);
         this.key_bind();
+        this.listenTo(this.model, 'change:thumbnail', this.render_thumbnail);
     },
 
 	onRender: function() {
@@ -77,6 +78,10 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 		});
 	},
 
+	render_thumbnail: function() {
+		this.$('.js-thumbnail').html('<img src="' + this.model.get('thumbnail') + '" alt="thumbnail" class="thumbnail-image" />');
+	},
+
     on_keyboard_change: function(){
       var keyval = this.$('.js-keyboard-key').val();
       if (keyval != this.model.get('key')){
diff --git a/index.html b/index.html
index 27d6463..4d76559 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,8 @@
 
 	<script type="text/html" id="sample-view-template">
 		<div class="edit-sample js-edit-sample">
+			<div class="thumbnail js-thumbnail"></div>
+			
 			<div class="progress-bar">
 				<div class="clip-line js-clip-line js-start-position">
 					<div class="drag-handle start-drag-handle js-drag-handle">