diff options
| -rw-r--r-- | assets/js/collections/samples.js | 38 | ||||
| -rw-r--r-- | assets/js/views/clip-line.js | 51 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 31 | ||||
| -rw-r--r-- | index.html | 1 |
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 + }); } }); @@ -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> |