summaryrefslogtreecommitdiffstats
path: root/assets/js/views/sample-editor.js
blob: 831bf182eebcb19a4c9e6af00eb0ae9e6a03deb8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
var SampleEditor = SampleEditor || {};

(function($) {
	SampleEditor = function() {
		this.player = null;
		
		
		this.initialize = function() {
			var $clip_line = $('.js-clip-line');
			
			$clip_line.draggable({
				axis: 'x',
				handle: '.js-drag-handle',
				scroll: false,
				containment: $clip_line.parents('.progress-bar')
			});
			
			$clip_line.on('drag', this.on_clip_drag_stop);
			
			
			this.player = new OP.Player($('#single-video-lets-see-if-we-can-get-this-to-work').get(0));
		};
		
		
		// percentage_progress
		//
		// Get a percentage value from a clip-line that represents its 
		// position within the progress bar.
		//
		this.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
		// });
		//
		this.seek_point = function(options) {
			var options = options || {};
			
			var progress = this.percentage_progress(options.$el);
			
			return (progress * options.video_length) / 100;
		};
		
		
		this.on_clip_drag_stop = function(e, ui) {
			
		};
		
		
		return this;
	};
})(jQuery);



// --------------------------------------------------------
ClipPlay.Views.SampleEditor = Marionette.CollectionView.extend({
	itemView: ClipPlay.Views.Sample,
	
	onRender: function() {
		this.sample_add_view = new ClipPlay.Views.SampleAddView({
			el: $('#add-sample')
		});
	}
});