@checksub_team/peaks_timeline 1.4.35 → 1.4.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COPYING +165 -165
- package/package.json +88 -88
- package/peaks.js +307 -490
- package/src/data-retriever.js +89 -89
- package/src/default-segment-marker.js +132 -132
- package/src/invoker.js +81 -81
- package/src/keyboard-handler.js +112 -112
- package/src/line-indicator.js +377 -377
- package/src/line.js +678 -678
- package/src/lines.js +427 -427
- package/src/main.js +702 -702
- package/src/mode-layer.js +391 -391
- package/src/player.js +178 -178
- package/src/playhead-layer.js +423 -423
- package/src/segment-shape.js +354 -354
- package/src/segment.js +263 -263
- package/src/segments-group.js +765 -765
- package/src/source-group.js +987 -987
- package/src/source.js +688 -688
- package/src/sources-layer.js +592 -592
- package/src/timeline-axis.js +238 -238
- package/src/timeline-segments.js +395 -395
- package/src/timeline-sources.js +431 -431
- package/src/timeline-zoomview.js +880 -880
- package/src/utils.js +339 -339
- package/src/waveform-shape.js +216 -216
package/src/player.js
CHANGED
|
@@ -1,178 +1,178 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
*
|
|
4
|
-
* Defines the {@link Player} class.
|
|
5
|
-
*
|
|
6
|
-
* @module player
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
define([
|
|
10
|
-
'./utils'
|
|
11
|
-
], function(Utils) {
|
|
12
|
-
'use strict';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* A wrapper for interfacing with the HTML5 media element API.
|
|
16
|
-
* Initializes the player for a given media element.
|
|
17
|
-
*
|
|
18
|
-
* @class
|
|
19
|
-
* @alias Player
|
|
20
|
-
*
|
|
21
|
-
* @param {Peaks} peaks The parent {@link Peaks} object.
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
function Player(peaks) {
|
|
25
|
-
var self = this;
|
|
26
|
-
|
|
27
|
-
self._peaks = peaks;
|
|
28
|
-
self._currentTime = 0;
|
|
29
|
-
self._isPlaying = false;
|
|
30
|
-
|
|
31
|
-
self._speed = 1;
|
|
32
|
-
|
|
33
|
-
self._segmentPlayInterval = null;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Set the playing speed.
|
|
38
|
-
*
|
|
39
|
-
* @param {Number} newSpeed The new speed, 1.0 is the normal (and default) speed.
|
|
40
|
-
*/
|
|
41
|
-
|
|
42
|
-
Player.prototype.setSpeed = function(newSpeed) {
|
|
43
|
-
this._speed = newSpeed;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* Cleans up the player object, removing all event listeners from the
|
|
48
|
-
* associated media element.
|
|
49
|
-
*/
|
|
50
|
-
|
|
51
|
-
Player.prototype.destroy = function() {
|
|
52
|
-
if (this._segmentPlayInterval !== null) {
|
|
53
|
-
clearInterval(this._segmentPlayInterval);
|
|
54
|
-
this._segmentPlayInterval = null;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
if (this._playInterval !== null) {
|
|
58
|
-
clearInterval(this._playInterval);
|
|
59
|
-
this._playInterval = null;
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* Starts playback.
|
|
65
|
-
*/
|
|
66
|
-
|
|
67
|
-
Player.prototype.play = function() {
|
|
68
|
-
if (!this._playInterval) {
|
|
69
|
-
var prevTime = performance.now();
|
|
70
|
-
var time;
|
|
71
|
-
var self = this;
|
|
72
|
-
|
|
73
|
-
this._isPlaying = true;
|
|
74
|
-
|
|
75
|
-
this._peaks.overrideInteractions(true, false);
|
|
76
|
-
|
|
77
|
-
this._playInterval = setInterval(function() {
|
|
78
|
-
time = performance.now();
|
|
79
|
-
self._currentTime += ((time - prevTime) / 1000) * self._speed;
|
|
80
|
-
prevTime = time;
|
|
81
|
-
self._peaks.emit('timeline.update', self._currentTime);
|
|
82
|
-
}, 20);
|
|
83
|
-
|
|
84
|
-
this._peaks.emit('timeline.play', this._currentTime);
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* Pauses playback.
|
|
90
|
-
*/
|
|
91
|
-
|
|
92
|
-
Player.prototype.pause = function() {
|
|
93
|
-
if (this._playInterval) {
|
|
94
|
-
this._isPlaying = false;
|
|
95
|
-
|
|
96
|
-
clearInterval(this._playInterval);
|
|
97
|
-
this._playInterval = null;
|
|
98
|
-
|
|
99
|
-
this._peaks.overrideInteractions(false);
|
|
100
|
-
|
|
101
|
-
this._peaks.emit('timeline.pause', this._currentTime);
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
/**
|
|
106
|
-
* @returns {Boolean} <code>true</code> if playing, <code>false</code>
|
|
107
|
-
* otherwise.
|
|
108
|
-
*/
|
|
109
|
-
|
|
110
|
-
Player.prototype.isPlaying = function() {
|
|
111
|
-
return this._isPlaying;
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
/**
|
|
115
|
-
* Returns the current playback time position, in seconds.
|
|
116
|
-
*
|
|
117
|
-
* @returns {Number}
|
|
118
|
-
*/
|
|
119
|
-
|
|
120
|
-
Player.prototype.getCurrentTime = function() {
|
|
121
|
-
return this._currentTime;
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* Seeks to a given time position within the media.
|
|
126
|
-
*
|
|
127
|
-
* @param {Number} time The time position, in seconds.
|
|
128
|
-
*/
|
|
129
|
-
|
|
130
|
-
Player.prototype.seek = function(time) {
|
|
131
|
-
if (!Utils.isValidTime(time)) {
|
|
132
|
-
this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
|
|
133
|
-
return;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
this._currentTime = Math.max(0, time);
|
|
137
|
-
|
|
138
|
-
this._peaks.emit('timeline.seek', this._currentTime);
|
|
139
|
-
this._peaks.emit('timeline.update', this._currentTime);
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Plays the given segment.
|
|
144
|
-
*
|
|
145
|
-
* @param {Segment} segment The segment denoting the time region to play.
|
|
146
|
-
*/
|
|
147
|
-
|
|
148
|
-
Player.prototype.playSegment = function(segment) {
|
|
149
|
-
var self = this;
|
|
150
|
-
|
|
151
|
-
if (!segment ||
|
|
152
|
-
!Utils.isValidTime(segment.startTime) ||
|
|
153
|
-
!Utils.isValidTime(segment.endTime)) {
|
|
154
|
-
self._peaks.logger('peaks.player.playSegment(): parameter must be a segment object');
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
clearInterval(self._segmentPlayInterval);
|
|
159
|
-
self._segmentPlayInterval = null;
|
|
160
|
-
|
|
161
|
-
// Set time to segment start time
|
|
162
|
-
self.seek(segment.startTime);
|
|
163
|
-
|
|
164
|
-
// Start playing
|
|
165
|
-
self.play();
|
|
166
|
-
|
|
167
|
-
self._segmentPlayInterval = setInterval(function() {
|
|
168
|
-
if (self.getCurrentTime() >= segment.endTime || !self._isPlaying) {
|
|
169
|
-
clearInterval(self._segmentPlayInterval);
|
|
170
|
-
self._segmentPlayInterval = null;
|
|
171
|
-
self.pause();
|
|
172
|
-
// self.seek(segment.endTime);
|
|
173
|
-
}
|
|
174
|
-
}, 10);
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
return Player;
|
|
178
|
-
});
|
|
1
|
+
/**
|
|
2
|
+
* @file
|
|
3
|
+
*
|
|
4
|
+
* Defines the {@link Player} class.
|
|
5
|
+
*
|
|
6
|
+
* @module player
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
define([
|
|
10
|
+
'./utils'
|
|
11
|
+
], function(Utils) {
|
|
12
|
+
'use strict';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* A wrapper for interfacing with the HTML5 media element API.
|
|
16
|
+
* Initializes the player for a given media element.
|
|
17
|
+
*
|
|
18
|
+
* @class
|
|
19
|
+
* @alias Player
|
|
20
|
+
*
|
|
21
|
+
* @param {Peaks} peaks The parent {@link Peaks} object.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
function Player(peaks) {
|
|
25
|
+
var self = this;
|
|
26
|
+
|
|
27
|
+
self._peaks = peaks;
|
|
28
|
+
self._currentTime = 0;
|
|
29
|
+
self._isPlaying = false;
|
|
30
|
+
|
|
31
|
+
self._speed = 1;
|
|
32
|
+
|
|
33
|
+
self._segmentPlayInterval = null;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Set the playing speed.
|
|
38
|
+
*
|
|
39
|
+
* @param {Number} newSpeed The new speed, 1.0 is the normal (and default) speed.
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
Player.prototype.setSpeed = function(newSpeed) {
|
|
43
|
+
this._speed = newSpeed;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Cleans up the player object, removing all event listeners from the
|
|
48
|
+
* associated media element.
|
|
49
|
+
*/
|
|
50
|
+
|
|
51
|
+
Player.prototype.destroy = function() {
|
|
52
|
+
if (this._segmentPlayInterval !== null) {
|
|
53
|
+
clearInterval(this._segmentPlayInterval);
|
|
54
|
+
this._segmentPlayInterval = null;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
if (this._playInterval !== null) {
|
|
58
|
+
clearInterval(this._playInterval);
|
|
59
|
+
this._playInterval = null;
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Starts playback.
|
|
65
|
+
*/
|
|
66
|
+
|
|
67
|
+
Player.prototype.play = function() {
|
|
68
|
+
if (!this._playInterval) {
|
|
69
|
+
var prevTime = performance.now();
|
|
70
|
+
var time;
|
|
71
|
+
var self = this;
|
|
72
|
+
|
|
73
|
+
this._isPlaying = true;
|
|
74
|
+
|
|
75
|
+
this._peaks.overrideInteractions(true, false);
|
|
76
|
+
|
|
77
|
+
this._playInterval = setInterval(function() {
|
|
78
|
+
time = performance.now();
|
|
79
|
+
self._currentTime += ((time - prevTime) / 1000) * self._speed;
|
|
80
|
+
prevTime = time;
|
|
81
|
+
self._peaks.emit('timeline.update', self._currentTime);
|
|
82
|
+
}, 20);
|
|
83
|
+
|
|
84
|
+
this._peaks.emit('timeline.play', this._currentTime);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Pauses playback.
|
|
90
|
+
*/
|
|
91
|
+
|
|
92
|
+
Player.prototype.pause = function() {
|
|
93
|
+
if (this._playInterval) {
|
|
94
|
+
this._isPlaying = false;
|
|
95
|
+
|
|
96
|
+
clearInterval(this._playInterval);
|
|
97
|
+
this._playInterval = null;
|
|
98
|
+
|
|
99
|
+
this._peaks.overrideInteractions(false);
|
|
100
|
+
|
|
101
|
+
this._peaks.emit('timeline.pause', this._currentTime);
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* @returns {Boolean} <code>true</code> if playing, <code>false</code>
|
|
107
|
+
* otherwise.
|
|
108
|
+
*/
|
|
109
|
+
|
|
110
|
+
Player.prototype.isPlaying = function() {
|
|
111
|
+
return this._isPlaying;
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Returns the current playback time position, in seconds.
|
|
116
|
+
*
|
|
117
|
+
* @returns {Number}
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
Player.prototype.getCurrentTime = function() {
|
|
121
|
+
return this._currentTime;
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Seeks to a given time position within the media.
|
|
126
|
+
*
|
|
127
|
+
* @param {Number} time The time position, in seconds.
|
|
128
|
+
*/
|
|
129
|
+
|
|
130
|
+
Player.prototype.seek = function(time) {
|
|
131
|
+
if (!Utils.isValidTime(time)) {
|
|
132
|
+
this._peaks.logger('peaks.player.seek(): parameter must be a valid time, in seconds');
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
this._currentTime = Math.max(0, time);
|
|
137
|
+
|
|
138
|
+
this._peaks.emit('timeline.seek', this._currentTime);
|
|
139
|
+
this._peaks.emit('timeline.update', this._currentTime);
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* Plays the given segment.
|
|
144
|
+
*
|
|
145
|
+
* @param {Segment} segment The segment denoting the time region to play.
|
|
146
|
+
*/
|
|
147
|
+
|
|
148
|
+
Player.prototype.playSegment = function(segment) {
|
|
149
|
+
var self = this;
|
|
150
|
+
|
|
151
|
+
if (!segment ||
|
|
152
|
+
!Utils.isValidTime(segment.startTime) ||
|
|
153
|
+
!Utils.isValidTime(segment.endTime)) {
|
|
154
|
+
self._peaks.logger('peaks.player.playSegment(): parameter must be a segment object');
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
clearInterval(self._segmentPlayInterval);
|
|
159
|
+
self._segmentPlayInterval = null;
|
|
160
|
+
|
|
161
|
+
// Set time to segment start time
|
|
162
|
+
self.seek(segment.startTime);
|
|
163
|
+
|
|
164
|
+
// Start playing
|
|
165
|
+
self.play();
|
|
166
|
+
|
|
167
|
+
self._segmentPlayInterval = setInterval(function() {
|
|
168
|
+
if (self.getCurrentTime() >= segment.endTime || !self._isPlaying) {
|
|
169
|
+
clearInterval(self._segmentPlayInterval);
|
|
170
|
+
self._segmentPlayInterval = null;
|
|
171
|
+
self.pause();
|
|
172
|
+
// self.seek(segment.endTime);
|
|
173
|
+
}
|
|
174
|
+
}, 10);
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
return Player;
|
|
178
|
+
});
|