Merge branch 'add-thumbnail-to-sample'

3 files changed, 31 insertions, 9 deletions

diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index 20ebd90..bb10484 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;
@@ -30,6 +30,14 @@
 	background-color: #797979;
 }
 
+.clip-line-start {
+	left: 55px;
+}
+
+.clip-line-stop {
+	left: 58px;
+}
+
 .drag-handle {
 	width: 2em;
 	height: 1em;
@@ -102,3 +110,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 aa07acd..3122641 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -5,19 +5,20 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
         'click .js-remove-sample' : 'remove_sample'
 	},
 
-	onRender: function() {
-		this.initialize_player();
-		this.initialize_clip_lines();
-        this.$('.js-keyboard-key').val(this.model.get('key'));
-	},
-
     initialize: function(options){
         this.collection = options.collection;
 
         this.listenTo(this.model, 'change:key', this.key_bind);
         this.key_bind();
+        this.listenTo(this.model, 'change:thumbnail', this.render_thumbnail);
     },
 
+	onRender: function() {
+		this.initialize_player();
+		this.initialize_clip_lines();
+        this.$('.js-keyboard-key').val(this.model.get('key'));
+	},
+
 	initialize_player: function() {
 		var that = this;
 		$.embedly.oembed(this.model.get('url')).done(function(results){
@@ -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..0c9425d 100644
--- a/index.html
+++ b/index.html
@@ -43,8 +43,10 @@
 
 	<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="clip-line clip-line-start js-clip-line js-start-position">
 					<div class="drag-handle start-drag-handle js-drag-handle">
 						<span class="clip-time js-time"></span>
 					</div>
@@ -52,7 +54,7 @@
 
 				<div class="selected-bar js-selected-bar"></div>
 
-				<div class="clip-line js-clip-line js-end-position">
+				<div class="clip-line clip-line-stop js-clip-line js-end-position">
 					<div class="drag-handle stop-drag-handle js-drag-handle">
 						<span class="js-time"></span>
 					</div>