From 07a2d8bd152fc1433fa7b5fc81b9fa36e7095e63 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Sun, 10 Nov 2013 11:24:11 -0500
Subject: Move initialize above onRender method

---
 assets/js/views/sample.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index aa07acd..de9e967 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -5,12 +5,6 @@ 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;
 
@@ -18,6 +12,12 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
         this.key_bind();
     },
 
+	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){
-- 
cgit v1.2.3


From b5a05962d07325d31f37bedc38cc309980f91da7 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Sun, 10 Nov 2013 11:40:59 -0500
Subject: Add thumbnail to sample editor

---
 assets/css/sample-editor.css | 9 ++++++++-
 assets/js/views/sample.js    | 5 +++++
 index.html                   | 2 ++
 3 files changed, 15 insertions(+), 1 deletion(-)

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">
-- 
cgit v1.2.3


From 87c690f48ba179a4822a99e51f52baafccc83fad Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Sun, 10 Nov 2013 11:45:52 -0500
Subject: Move the clip lines to the right on initial load

Moves the clip lines farther into the progress bar such that the drag
handles appear inside the progress bar. This ensures that the
thumbnail is not covered by the left drag handle.
---
 assets/css/sample-editor.css | 8 ++++++++
 index.html                   | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index d905fb1..bb10484 100644
--- a/assets/css/sample-editor.css
+++ b/assets/css/sample-editor.css
@@ -30,6 +30,14 @@
 	background-color: #797979;
 }
 
+.clip-line-start {
+	left: 55px;
+}
+
+.clip-line-stop {
+	left: 58px;
+}
+
 .drag-handle {
 	width: 2em;
 	height: 1em;
diff --git a/index.html b/index.html
index 4d76559..0c9425d 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,7 @@
 			<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>
@@ -54,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>
-- 
cgit v1.2.3


From 50dcbc710a065cef782d9b11bc9d15fea4f0d71b Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Sun, 10 Nov 2013 12:20:07 -0500
Subject: Add new samples when pressing the enter key in the add form

---
 assets/js/views/sample-add-view.js | 9 ++++++++-
 index.html                         | 6 ++++--
 2 files changed, 12 insertions(+), 3 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/index.html b/index.html
index 0c9425d..2b1d35c 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,10 @@
 
 	<div role="main">
 		<div id="add-sample">
-			<input type="text" class="url-input js-sample-url" placeholder="http://www.youtube.com/watch?v=_JGaQ3g8WU4" />
-			<button type="button" class="button green large js-create-sample">+</button>
+			<form action="" method="get" class="js-add-sample-form">
+				<input type="text" class="url-input js-sample-url" placeholder="http://www.youtube.com/watch?v=_JGaQ3g8WU4" />
+				<button type="button" class="button green large js-create-sample">+</button>
+			</form>
 		</div>
 
 		<div id="samples"></div>
-- 
cgit v1.2.3