2 files changed, 19 insertions, 7 deletions
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')){