merge

4 files changed, 68 insertions, 53 deletions

diff --git a/assets/js/collections/samples.js b/assets/js/collections/samples.js
index 5965dbd..bd0b926 100644
--- a/assets/js/collections/samples.js
+++ b/assets/js/collections/samples.js
@@ -1,39 +1,3 @@
 ClipPlay.Collections.Samples = Backbone.Collection.extend({
-	model: ClipPlay.Models.Sample,
-	
-	// -----------------------------------------------------------------------
-	// What follows is WRONG. Change so that the following functions don't use 
-	// any DOM elements
-	// -----------------------------------------------------------------------
-	
-	// percentage_progress
-	//
-	// Get a percentage value from a clip-line that represents its 
-	// position within the progress bar.
-	//
-	percentage_progress: function($el) {
-		var container = $el.parents('.progress-bar');
-		var position_in_pixels = $el.css('left');
-		
-		var percentage = (position_in_pixels / container.width()) * 100;
-		
-		return percentage;
-	},
-	
-	
-	// seek_point
-	//
-	// Example:
-	// sample_editor.seek_point({
-	// 	$el: $('.clip-line'),
-	// 	video_length: 586
-	// });
-	//
-	seek_point: function(options) {
-		var options = options || {};
-		
-		var progress = this.percentage_progress(options.$el);
-		
-		return (progress * options.video_length) / 100;
-	}
+	model: ClipPlay.Models.Sample
 });
\ No newline at end of file
diff --git a/assets/js/views/clip-line.js b/assets/js/views/clip-line.js
new file mode 100644
index 0000000..93fd22e
--- /dev/null
+++ b/assets/js/views/clip-line.js
@@ -0,0 +1,51 @@
+ClipPlay.Views.ClipLine = Marionette.View.extend({
+	initialize: function(options) {
+		this.setElement(options.el);
+		
+		this.initialize_drag_handles();
+	},
+	
+	
+	initialize_drag_handles: function() {
+		this.$el.draggable({
+			axis: 'x',
+			handle: '.js-drag-handle',
+			scroll: false,
+			containment: this.$el.parents('.progress-bar')
+		});
+		
+		this.$el.on('dragstop', this.on_clip_drag_stop);
+	},
+	
+	
+	// percentage_progress
+	//
+	// 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.css('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 
+	// represented by this clip line.
+	//
+	seek_point: function(options) {
+		var progress = this.percentage_progress();
+		
+		return (progress * this.model.get('duration')) / 100;
+	},
+	
+	
+	on_clip_drag_stop: function(e, ui) {
+		console.log('booyakacha');
+	}
+});
\ No newline at end of file
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index ef1d681..7aab111 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -3,7 +3,7 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 
 	onRender: function() {
 		this.initialize_player();
-		this.initialize_clip_drag_handles();
+		this.initialize_clip_lines();
 	},
 
 
@@ -25,25 +25,24 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 			var player = new OP.Player(iframe[0]);
 			that.model.set('player', player);
 			that.model.set('iframe', iframe);
-		});
-	},
-
-
-	initialize_clip_drag_handles: function() {
-		var $clip_line = this.$('.js-clip-line');
 
-		$clip_line.draggable({
-			axis: 'x',
-			handle: '.js-drag-handle',
-			scroll: false,
-			containment: $clip_line.parents('.progress-bar')
+			// 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);
+			});
 		});
-
-		$clip_line.on('dragstop', this.on_clip_drag_stop);
 	},
 
+	initialize_clip_lines: function() {
+		this.start_clip_line = new ClipPlay.Views.ClipLine({
+			el: this.$('.js-start-position'),
+			model: this.model
+		});
 
-	on_clip_drag_stop: function(e, ui) {
-		console.log('booyakacha');
+		this.end_clip_line = new ClipPlay.Views.ClipLine({
+			el: this.$('.js-end-position'),
+			model: this.model
+		});
 	}
 });
diff --git a/index.html b/index.html
index 717dcf8..510a437 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,7 @@
 	<script src="/assets/js/models/sample.js"></script>
 	<script src="/assets/js/collections/samples.js"></script>
 	<script src="/assets/js/views/sample-add-view.js"></script>
+	<script src="/assets/js/views/clip-line.js"></script>
 	<script src="/assets/js/views/sample.js"></script>
 	<script src="/assets/js/views/sample-editor.js"></script>
 	<script src="/assets/js/app.js"></script>