adding bounds for samples programmatically

4 files changed, 51 insertions, 41 deletions

diff --git a/assets/js/app.js b/assets/js/app.js
index bf8f375..1c425a5 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -14,7 +14,7 @@ ClipPlay.App.addInitializer(function(options) {
     //just to have something loaded for debugging
     ClipPlay.Config = {};
     ClipPlay.Config['key_defaults'] = ['a','s','d','f','g','h','j','k','l'];
-    samples_collection.add({url:"https://vimeo.com/18150336"});
+    samples_collection.add({url:"https://vimeo.com/18150336", start : 20, stop: 22});
 });
 
 
diff --git a/assets/js/models/sample.js b/assets/js/models/sample.js
index c85a008..9174e63 100644
--- a/assets/js/models/sample.js
+++ b/assets/js/models/sample.js
@@ -1,8 +1,8 @@
 ClipPlay.Models.Sample = Backbone.Model.extend({
 	defaults: {
 		'url': '',
-		'start': '3',
-		'stop': '4',
+		'start': 3,
+		'stop': 4,
 		'duration': '',
 		'key': '',
 		'player': '',
diff --git a/assets/js/views/clip-line.js b/assets/js/views/clip-line.js
index 2c06c48..5201cb2 100644
--- a/assets/js/views/clip-line.js
+++ b/assets/js/views/clip-line.js
@@ -1,22 +1,24 @@
 ClipPlay.Views.ClipLine = Marionette.View.extend({
 	type: '', // 'start' or 'stop'
-	
+
 	initialize: function(options) {
 		this.setElement(options.el);
-		
+
 		this.type = options.type;
-		
+
 		this.sample_view = options.sample_view;
-		
+
 		this.listenTo(this.model, 'change:duration', this.on_duration_change);
 		var start_or_stop = this.type;
 		this.listenTo(this.model, 'change:' + start_or_stop, this.on_start_or_stop_change);
 		this.listenTo(this.sample_view, 'change:position:selected-bar', this.on_selected_bar_position_change);
-		
+
 		this.initialize_drag_handles();
+        this.on_start_or_stop_change();
+        this.initialize_bounds();
 	},
-	
-	
+
+
 	initialize_drag_handles: function() {
 		this.$el.draggable({
 			axis: 'x',
@@ -24,21 +26,29 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 			scroll: false,
 			containment: 'parent'
 		});
-		
+
 		var that = this;
-		
+
 		this.$el.on('drag', function(e, ui) {
 			that.on_clip_drag(e, ui);
 		});
 	},
-	
-	
+
+
 	initialize_time_values: function() {
 		this.set_seek_point();
 		this.render_time();
 	},
-	
-	
+
+    initialize_bounds: function(){
+		if (this.type === 'start') {
+          this.$el.css('left', this.model.get('start') + 'px');
+        }
+		if (this.type === 'stop') {
+		  this.$el.css('left', this.model.get('stop') + 'px');
+        }
+    },
+
 	render_time: function() {
 		var time;
 		if (this.type === 'start') {
@@ -47,61 +57,61 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 		else if (this.type === 'stop') {
 			time = this.model.stop_in_minutes_and_seconds();
 		}
-		
+
 		var time_string = time.minutes + ':' + time.seconds;
 		this.$('.js-time').text(time_string);
 	},
-	
-	
+
+
 	// percentage_progress
 	//
-	// Get a percentage value from a clip-line that represents its 
+	// Get a percentage value from a clip-line that represents its
 	// position within the progress bar.
 	//
 	percentage_progress: function() {
 		var container = this.$el.parents('.progress-bar');
 		var position_in_pixels = this.$el.position().left;
-		
+
 		var percentage = (position_in_pixels / container.width()) * 100;
-		
+
 		return percentage;
 	},
-	
-	
+
+
 	// seek_point
 	//
-	// Get the number of seconds after the start of the video that is 
+	// Get the number of seconds after the start of the video that is
 	// represented by this clip line.
 	//
 	seek_point: function() {
 		var progress = this.percentage_progress();
-		
+
 		return (progress * this.model.get('duration')) / 100;
 	},
-	
-	
+
+
 	set_seek_point: function() {
 		this.model.set(this.type, this.seek_point());
 	},
-	
-	
+
+
 	on_clip_drag: function(e, ui) {
 		this.set_seek_point();
 	},
-	
-	
+
+
 	on_duration_change: function() {
 		this.initialize_time_values();
 		this.trigger_seek_point_change();
 	},
-	
-	
+
+
 	on_start_or_stop_change: function() {
 		this.render_time();
 		this.trigger_seek_point_change();
 	},
-	
-	
+
+
 	on_selected_bar_position_change: function(params) {
 		if (this.type === 'start') {
 			this.$el.css('left', params.position + 'px');
@@ -111,12 +121,12 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 			this.$el.css('left', left_position + 'px');
 		}
 	},
-	
-	
+
+
 	trigger_seek_point_change: function() {
 		var start_or_stop = this.type;
 		this.sample_view.trigger('change:seek:clip-line-' + start_or_stop, {
 			position: this.$el.position().left
 		});
 	}
-});
\ No newline at end of file
+});
diff --git a/index.html b/index.html
index 0b19b20..6479aa7 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
 
 		<div id="video"></div>
 	</div>
-	
+
 	<footer>
 		Made by <a href="https://github.com/whichlight/">Kawandeep Virdee</a> &amp; <a href="https://github.com/teddywing">Teddy Wing</a> at <a href="http://boston.musichackday.org/">Music Hack Day Boston 2013</a>
 	</footer>
@@ -50,7 +50,7 @@
 	<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 clip-line-start js-clip-line js-start-position">
 					<div class="drag-handle start-drag-handle js-drag-handle">