Add time values to the drag handles

Time in mm:ss appears on the drag handles. Drag them around and the
time changes accordingly.

NOTE: this version is kind of borked because for some reason in my
      testing the start of the video displayed as 24 seconds.

5 files changed, 66 insertions, 8 deletions

diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index b497b86..a577c7c 100644
--- a/assets/css/sample-editor.css
+++ b/assets/css/sample-editor.css
@@ -21,10 +21,10 @@
 }
 
 .drag-handle {
-	width: 1em;
+	width: 2em;
 	height: 1em;
 	position: relative;
 	top: 0.5em;
-	left: -0.5em;
+	left: -1em;
 	background-color: yellow;
 }
\ No newline at end of file
diff --git a/assets/js/models/sample.js b/assets/js/models/sample.js
index 79cbace..d059f6b 100644
--- a/assets/js/models/sample.js
+++ b/assets/js/models/sample.js
@@ -10,6 +10,30 @@ ClipPlay.Models.Sample = Backbone.Model.extend({
 	},
 	
 	
+	in_minutes_and_seconds: function(seconds) {
+		var minutes = Math.floor(seconds / 60);
+		seconds = Math.floor(seconds);
+		var seconds = seconds - minutes * 60;
+		
+		if (seconds < 10) {
+			seconds = '0' + seconds;
+		}
+		console.log(minutes + ':' + seconds);
+		return {
+			minutes: minutes,
+			seconds: seconds
+		};
+	},
+	
+	start_in_minutes_and_seconds: function() {
+		return this.in_minutes_and_seconds(this.get('start'));
+	},
+	
+	stop_in_minutes_and_seconds: function() {
+		return this.in_minutes_and_seconds(this.get('stop'));
+	},
+	
+	
 	play: function() {
 		
 	}
diff --git a/assets/js/views/clip-line.js b/assets/js/views/clip-line.js
index 208c927..2760d5b 100644
--- a/assets/js/views/clip-line.js
+++ b/assets/js/views/clip-line.js
@@ -6,6 +6,10 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 		
 		this.type = options.type;
 		
+		this.listenTo(this.model, 'change:duration', this.initialize_time_values);
+		var start_or_stop = this.type;
+		this.listenTo(this.model, 'change:' + start_or_stop, this.render_time);
+		
 		this.initialize_drag_handles();
 	},
 	
@@ -19,12 +23,33 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 		});
 		
 		var that = this;
-		this.$el.on('dragstop', function(e, ui) {
-			that.on_clip_drag_stop(e, ui);
+		
+		this.$el.on('drag', function(e, ui) {
+			that.on_clip_drag(e, ui);
 		});
 	},
 	
 	
+	initialize_time_values: function() {
+		this.set_seek_point();
+		this.render_time();
+	},
+	
+	
+	render_time: function() {
+		var time;
+		if (this.type === 'start') {
+			time = this.model.start_in_minutes_and_seconds();
+		}
+		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 
@@ -52,7 +77,12 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 	},
 	
 	
-	on_clip_drag_stop: function(e, ui) {
+	set_seek_point: function() {
 		this.model.set(this.type, this.seek_point());
+	},
+	
+	
+	on_clip_drag: function(e, ui) {
+		this.set_seek_point();
 	}
 });
\ No newline at end of file
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index 0cc576a..2ddc6f9 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -38,7 +38,7 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 			model: this.model
 		});
 
-		this.end_clip_line = new ClipPlay.Views.ClipLine({
+		this.stop_clip_line = new ClipPlay.Views.ClipLine({
 			type: 'stop',
 			el: this.$('.js-end-position'),
 			model: this.model
diff --git a/index.html b/index.html
index 59c26ec..33fd5f7 100644
--- a/index.html
+++ b/index.html
@@ -41,11 +41,15 @@
 		<div class="edit-sample js-edit-sample">
 			<div class="progress-bar">
 				<div class="clip-line js-clip-line js-start-position">
-					<div class="drag-handle js-drag-handle"></div>
+					<div class="drag-handle js-drag-handle">
+						<span class="js-time"></span>
+					</div>
 				</div>
 
 				<div class="clip-line js-clip-line js-end-position">
-					<div class="drag-handle js-drag-handle"></div>
+					<div class="drag-handle js-drag-handle">
+						<span class="js-time"></span>
+					</div>
 				</div>
 			</div>