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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
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();
},
initialize_drag_handles: function() {
this.$el.draggable({
axis: 'x',
handle: '.js-drag-handle',
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();
},
render_time: function() {
var time;
if (this.type === 'start') {
time = this.model.start_in_minutes_and_seconds();
}
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
// 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
// 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');
}
else if (this.type === 'stop') {
var left_position = params.position + params.width;
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
});
}
});
|
