3 files changed, 35 insertions, 8 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-add-view.js b/assets/js/views/sample-add-view.js
index 8be2fb8..6fea239 100644
--- a/assets/js/views/sample-add-view.js
+++ b/assets/js/views/sample-add-view.js
@@ -4,7 +4,8 @@ ClipPlay.Views.SampleAddView = Marionette.View.extend({
 	url_matcher: /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/,
 	
 	events: {
-		'click .js-create-sample': 'on_sample_add'
+		'click .js-create-sample': 'on_sample_add',
+		'submit .js-add-sample-form': 'hijack_form'
 	},
 	
 	initialize: function(options) {
@@ -12,6 +13,12 @@ ClipPlay.Views.SampleAddView = Marionette.View.extend({
 		this.$input = this.$('.js-sample-url');
 	},
 	
+	hijack_form: function() {
+		this.on_sample_add();
+		
+		return false;
+	},
+	
 	add_sample_to_collection: function() {
 		this.collection.add({
 			url: this.$input.val()
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index 21e0806..6d1f95a 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.listenTo(this.model, 'change:playing', this.show_clip);
         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){
@@ -76,6 +77,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')){