Save start-stop seconds values in the model

Save values on drag-stop of the clip handles.

2 files changed, 13 insertions, 6 deletions

diff --git a/assets/js/views/clip-line.js b/assets/js/views/clip-line.js
index 93fd22e..208c927 100644
--- a/assets/js/views/clip-line.js
+++ b/assets/js/views/clip-line.js
@@ -1,7 +1,11 @@
 ClipPlay.Views.ClipLine = Marionette.View.extend({
+	type: '', // 'start' or 'stop'
+	
 	initialize: function(options) {
 		this.setElement(options.el);
 		
+		this.type = options.type;
+		
 		this.initialize_drag_handles();
 	},
 	
@@ -14,7 +18,10 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 			containment: this.$el.parents('.progress-bar')
 		});
 		
-		this.$el.on('dragstop', this.on_clip_drag_stop);
+		var that = this;
+		this.$el.on('dragstop', function(e, ui) {
+			that.on_clip_drag_stop(e, ui);
+		});
 	},
 	
 	
@@ -25,7 +32,7 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 	//
 	percentage_progress: function() {
 		var container = this.$el.parents('.progress-bar');
-		var position_in_pixels = this.$el.css('left');
+		var position_in_pixels = this.$el.position().left;
 		
 		var percentage = (position_in_pixels / container.width()) * 100;
 		
@@ -38,7 +45,7 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 	// Get the number of seconds after the start of the video that is 
 	// represented by this clip line.
 	//
-	seek_point: function(options) {
+	seek_point: function() {
 		var progress = this.percentage_progress();
 		
 		return (progress * this.model.get('duration')) / 100;
@@ -46,6 +53,6 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 	
 	
 	on_clip_drag_stop: function(e, ui) {
-		console.log('booyakacha');
+		this.model.set(this.type, this.seek_point());
 	}
 });
\ No newline at end of file
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index 74da663..0cc576a 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -25,8 +25,6 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 			that.model.set('player', player);
 			that.model.set('iframe', iframe);
 
-			// Trying to get the duration but this returns 0 for some reason
-			// on the YouTube video I'm testing with
 			player.getDuration(function(value) {
 				that.model.set('duration', value);
 			});
@@ -35,11 +33,13 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 
 	initialize_clip_lines: function() {
 		this.start_clip_line = new ClipPlay.Views.ClipLine({
+			type: 'start',
 			el: this.$('.js-start-position'),
 			model: this.model
 		});
 
 		this.end_clip_line = new ClipPlay.Views.ClipLine({
+			type: 'stop',
 			el: this.$('.js-end-position'),
 			model: this.model
 		});