From bbfb69c95db5bda39196582450d1053424e229da Mon Sep 17 00:00:00 2001
From: Kawandeep Virdee
Date: Sun, 10 Nov 2013 14:02:19 -0500
Subject: adding bounds for samples programmatically
---
assets/js/app.js | 2 +-
assets/js/models/sample.js | 4 +--
assets/js/views/clip-line.js | 82 +++++++++++++++++++++++++-------------------
index.html | 4 +--
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 @@
-
+
@@ -50,7 +50,7 @@