diff options
Diffstat (limited to 'assets/js')
| -rw-r--r-- | assets/js/app.js | 2 | ||||
| -rw-r--r-- | assets/js/models/sample.js | 4 | ||||
| -rw-r--r-- | assets/js/views/clip-line.js | 82 |
3 files changed, 49 insertions, 39 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 +}); |