Merge branch 'master' of github.com:whichlight/clip-play

4 files changed, 43 insertions, 12 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')){
diff --git a/index.html b/index.html
index 6a2991a..8573c4c 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,10 @@
     <div class="overlay"></div>
 	<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>
@@ -43,8 +45,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 +56,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>