diff options
| -rw-r--r-- | assets/js/views/clip-line.js | 15 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 4 |
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 250e1e0..5159350 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 }); |