@gcorevideo/player 0.0.1

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.
Files changed (192) hide show
  1. package/assets/icons/new/arrow-left.svg +5 -0
  2. package/assets/icons/new/arrow-right.svg +5 -0
  3. package/assets/icons/new/check.svg +5 -0
  4. package/assets/icons/new/close.svg +12 -0
  5. package/assets/icons/new/full.svg +8 -0
  6. package/assets/icons/new/fullscreen-off.svg +14 -0
  7. package/assets/icons/new/fullscreen-on.svg +14 -0
  8. package/assets/icons/new/gear-hd.svg +16 -0
  9. package/assets/icons/new/gear.svg +12 -0
  10. package/assets/icons/new/hd.svg +8 -0
  11. package/assets/icons/new/pause.svg +5 -0
  12. package/assets/icons/new/pip.svg +5 -0
  13. package/assets/icons/new/play.svg +10 -0
  14. package/assets/icons/new/replayleft.svg +5 -0
  15. package/assets/icons/new/replayright.svg +5 -0
  16. package/assets/icons/new/speed.svg +5 -0
  17. package/assets/icons/new/stats.svg +3 -0
  18. package/assets/icons/new/stop.svg +3 -0
  19. package/assets/icons/new/subtitles-off.svg +5 -0
  20. package/assets/icons/new/subtitles-on.svg +6 -0
  21. package/assets/icons/new/volume-max.svg +5 -0
  22. package/assets/icons/new/volume-min.svg +5 -0
  23. package/assets/icons/new/volume-off.svg +5 -0
  24. package/assets/icons/old/cardboard.svg +4 -0
  25. package/assets/icons/old/close-share.svg +13 -0
  26. package/assets/icons/old/close.svg +13 -0
  27. package/assets/icons/old/fb.svg +13 -0
  28. package/assets/icons/old/fullscreen.svg +12 -0
  29. package/assets/icons/old/language.svg +1 -0
  30. package/assets/icons/old/pause.svg +12 -0
  31. package/assets/icons/old/play.svg +12 -0
  32. package/assets/icons/old/quality-arrow.svg +13 -0
  33. package/assets/icons/old/reload.svg +4 -0
  34. package/assets/icons/old/share.svg +13 -0
  35. package/assets/icons/old/sound-off.svg +15 -0
  36. package/assets/icons/old/sound-on.svg +15 -0
  37. package/assets/icons/old/streams.svg +3 -0
  38. package/assets/icons/old/twitter.svg +13 -0
  39. package/assets/icons/old/wn.svg +15 -0
  40. package/assets/icons/standard/01-play.svg +3 -0
  41. package/assets/icons/standard/02-pause.svg +3 -0
  42. package/assets/icons/standard/03-stop.svg +3 -0
  43. package/assets/icons/standard/04-volume.svg +3 -0
  44. package/assets/icons/standard/05-mute.svg +3 -0
  45. package/assets/icons/standard/06-expand.svg +3 -0
  46. package/assets/icons/standard/07-shrink.svg +3 -0
  47. package/assets/icons/standard/08-hd.svg +3 -0
  48. package/assets/icons/standard/09-cc.svg +8 -0
  49. package/assets/icons/standard/10-reload.svg +4 -0
  50. package/assets/style/main.scss +50 -0
  51. package/assets/style/theme.scss +42 -0
  52. package/assets/style/variables.scss +7 -0
  53. package/dist/DashPlayback-6wKK0_pL.js +666 -0
  54. package/dist/DashPlayback-8U6_s4Jc.js +666 -0
  55. package/dist/DashPlayback-BeZz7mN9.js +663 -0
  56. package/dist/DashPlayback-CRdja67F.js +667 -0
  57. package/dist/DashPlayback-D0df6zGg.js +663 -0
  58. package/dist/DashPlayback-D7egS-CZ.js +664 -0
  59. package/dist/DashPlayback-DH5lZMRR.js +663 -0
  60. package/dist/DashPlayback-DZfIc9sK.js +665 -0
  61. package/dist/DashPlayback-VhCxbQhn.js +666 -0
  62. package/dist/HlsPlayback-Avwy8-0O.js +749 -0
  63. package/dist/index.css +125 -0
  64. package/dist/index.js +467 -0
  65. package/lib/Player.d.ts +50 -0
  66. package/lib/Player.d.ts.map +1 -0
  67. package/lib/Player.js +310 -0
  68. package/lib/backend.d.ts +3 -0
  69. package/lib/backend.d.ts.map +1 -0
  70. package/lib/backend.js +10 -0
  71. package/lib/constants.d.ts +19 -0
  72. package/lib/constants.d.ts.map +1 -0
  73. package/lib/constants.js +18 -0
  74. package/lib/index.d.ts +10 -0
  75. package/lib/index.d.ts.map +1 -0
  76. package/lib/index.js +9 -0
  77. package/lib/internal.types.d.ts +105 -0
  78. package/lib/internal.types.d.ts.map +1 -0
  79. package/lib/internal.types.js +1 -0
  80. package/lib/playback.types.d.ts +13 -0
  81. package/lib/playback.types.d.ts.map +1 -0
  82. package/lib/playback.types.js +1 -0
  83. package/lib/plugins/audio-selector/AudioSelector.d.ts +48 -0
  84. package/lib/plugins/audio-selector/AudioSelector.d.ts.map +1 -0
  85. package/lib/plugins/audio-selector/AudioSelector.js +282 -0
  86. package/lib/plugins/big-mute-button/BigMuteButton.d.ts +33 -0
  87. package/lib/plugins/big-mute-button/BigMuteButton.d.ts.map +1 -0
  88. package/lib/plugins/big-mute-button/BigMuteButton.js +148 -0
  89. package/lib/plugins/bottom-gear/BottomGear.d.ts +30 -0
  90. package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -0
  91. package/lib/plugins/bottom-gear/BottomGear.js +103 -0
  92. package/lib/plugins/click-to-pause/ClickToPause.d.ts +16 -0
  93. package/lib/plugins/click-to-pause/ClickToPause.d.ts.map +1 -0
  94. package/lib/plugins/click-to-pause/ClickToPause.js +73 -0
  95. package/lib/plugins/dash-playback/DashPlayback.d.ts +81 -0
  96. package/lib/plugins/dash-playback/DashPlayback.d.ts.map +1 -0
  97. package/lib/plugins/dash-playback/DashPlayback.js +658 -0
  98. package/lib/plugins/dash-plugin/DashPlayback.d.ts +86 -0
  99. package/lib/plugins/dash-plugin/DashPlayback.d.ts.map +1 -0
  100. package/lib/plugins/dash-plugin/DashPlayback.js +659 -0
  101. package/lib/plugins/disable-controls/DisableControls.d.ts +15 -0
  102. package/lib/plugins/disable-controls/DisableControls.d.ts.map +1 -0
  103. package/lib/plugins/disable-controls/DisableControls.js +69 -0
  104. package/lib/plugins/dvr-controls/DVRControls.d.ts +27 -0
  105. package/lib/plugins/dvr-controls/DVRControls.d.ts.map +1 -0
  106. package/lib/plugins/dvr-controls/DVRControls.js +110 -0
  107. package/lib/plugins/hls-playback/HlsPlayback.d.ts +102 -0
  108. package/lib/plugins/hls-playback/HlsPlayback.d.ts.map +1 -0
  109. package/lib/plugins/hls-playback/HlsPlayback.js +747 -0
  110. package/lib/plugins/level-selector/LevelSelector.d.ts +48 -0
  111. package/lib/plugins/level-selector/LevelSelector.d.ts.map +1 -0
  112. package/lib/plugins/level-selector/LevelSelector.js +287 -0
  113. package/lib/plugins/media-control/MediaControl.d.ts +186 -0
  114. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -0
  115. package/lib/plugins/media-control/MediaControl.js +1000 -0
  116. package/lib/plugins/poster/Poster.d.ts +41 -0
  117. package/lib/plugins/poster/Poster.d.ts.map +1 -0
  118. package/lib/plugins/poster/Poster.js +186 -0
  119. package/lib/trace/LogTracer.d.ts +12 -0
  120. package/lib/trace/LogTracer.d.ts.map +1 -0
  121. package/lib/trace/LogTracer.js +17 -0
  122. package/lib/trace/SentryTracer.d.ts +11 -0
  123. package/lib/trace/SentryTracer.d.ts.map +1 -0
  124. package/lib/trace/SentryTracer.js +18 -0
  125. package/lib/trace/Tracer.d.ts +13 -0
  126. package/lib/trace/Tracer.d.ts.map +1 -0
  127. package/lib/trace/Tracer.js +15 -0
  128. package/lib/trace/index.d.ts +18 -0
  129. package/lib/trace/index.d.ts.map +1 -0
  130. package/lib/trace/index.js +27 -0
  131. package/lib/trace/types.d.ts +8 -0
  132. package/lib/trace/types.d.ts.map +1 -0
  133. package/lib/trace/types.js +1 -0
  134. package/lib/types.d.ts +82 -0
  135. package/lib/types.d.ts.map +1 -0
  136. package/lib/types.js +1 -0
  137. package/lib/utils/Logger.d.ts +23 -0
  138. package/lib/utils/Logger.d.ts.map +1 -0
  139. package/lib/utils/Logger.js +81 -0
  140. package/lib/utils/canAutoplay.d.ts +6 -0
  141. package/lib/utils/canAutoplay.d.ts.map +1 -0
  142. package/lib/utils/canAutoplay.js +30 -0
  143. package/lib/utils/errors.d.ts +2 -0
  144. package/lib/utils/errors.d.ts.map +1 -0
  145. package/lib/utils/errors.js +6 -0
  146. package/lib/utils/queryParams.d.ts +2 -0
  147. package/lib/utils/queryParams.d.ts.map +1 -0
  148. package/lib/utils/queryParams.js +4 -0
  149. package/lib/utils/scripts-load.d.ts +2 -0
  150. package/lib/utils/scripts-load.d.ts.map +1 -0
  151. package/lib/utils/scripts-load.js +20 -0
  152. package/lib/utils/types.d.ts +4 -0
  153. package/lib/utils/types.d.ts.map +1 -0
  154. package/lib/utils/types.js +1 -0
  155. package/lib/utils/utils.d.ts +7 -0
  156. package/lib/utils/utils.d.ts.map +1 -0
  157. package/lib/utils/utils.js +57 -0
  158. package/package.json +57 -0
  159. package/rollup.config.js +34 -0
  160. package/src/Player.ts +390 -0
  161. package/src/backend.ts +12 -0
  162. package/src/constants.ts +17 -0
  163. package/src/index.ts +9 -0
  164. package/src/internal.types.ts +126 -0
  165. package/src/playback.types.ts +15 -0
  166. package/src/plugins/dash-playback/DashPlayback.ts +808 -0
  167. package/src/plugins/dash-playback/_DashPlayback.js +688 -0
  168. package/src/plugins/hls-playback/HlsPlayback.ts +909 -0
  169. package/src/plugins/hls-playback/hls.js +706 -0
  170. package/src/trace/LogTracer.ts +23 -0
  171. package/src/trace/SentryTracer.ts +18 -0
  172. package/src/trace/Tracer.ts +27 -0
  173. package/src/trace/index.ts +32 -0
  174. package/src/trace/types.ts +7 -0
  175. package/src/types.ts +100 -0
  176. package/src/typings/@clappr/core/error_mixin.d.ts +15 -0
  177. package/src/typings/@clappr/core/events.d.ts +7 -0
  178. package/src/typings/@clappr/core/html5_video.d.ts +28 -0
  179. package/src/typings/@clappr/core/playback.d.ts +5 -0
  180. package/src/typings/@clappr/core/player.d.ts +83 -0
  181. package/src/typings/@clappr/plugins.d.ts +29 -0
  182. package/src/typings/clappr-zepto.xd.xts +44 -0
  183. package/src/typings/globals.d.ts +8 -0
  184. package/src/utils/Logger.ts +107 -0
  185. package/src/utils/canAutoplay.ts +39 -0
  186. package/src/utils/errors.ts +6 -0
  187. package/src/utils/queryParams.ts +5 -0
  188. package/src/utils/scripts-load.ts +26 -0
  189. package/src/utils/types.ts +5 -0
  190. package/src/utils/utils.ts +64 -0
  191. package/tsconfig.json +43 -0
  192. package/tsconfig.tsbuildinfo +1 -0
@@ -0,0 +1,749 @@
1
+ import { HTML5Video, Playback, Events, Log, PlayerError, Utils } from '@clappr/core';
2
+ import assert from 'assert';
3
+ import HLSJS from 'hls.js';
4
+
5
+ // Copyright 2014 Globo.com Player authors. All rights reserved.
6
+ // Use of this source code is governed by a BSD-style
7
+ // license that can be found in the LICENSE file.
8
+ const { now, listContainsIgnoreCase } = Utils;
9
+ assert(process.env.CLAPPR_VERSION, 'CLAPPR_VERSION is required');
10
+ const CLAPPR_VERSION = process.env.CLAPPR_VERSION;
11
+ const AUTO = -1;
12
+ const DEFAULT_RECOVER_ATTEMPTS = 16;
13
+ Events.register('PLAYBACK_FRAGMENT_CHANGED');
14
+ Events.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
15
+ class HlsPlayback extends HTML5Video {
16
+ _ccIsSetup = false;
17
+ _ccTracksUpdated = false;
18
+ _currentFragment = null;
19
+ _currentLevel = null;
20
+ _durationExcludesAfterLiveSyncPoint = false;
21
+ _extrapolatedWindowNumSegments = 0; // TODO
22
+ highDefinition = false;
23
+ _hls = null;
24
+ _isReadyState = false;
25
+ _lastDuration = null;
26
+ _lastTimeUpdate = null;
27
+ _levels = null;
28
+ _localStartTimeCorrelation = null;
29
+ _localEndTimeCorrelation = null;
30
+ _manifestParsed = false;
31
+ _playableRegionDuration = 0;
32
+ _playbackType = Playback.VOD;
33
+ _playlistType = null;
34
+ _playableRegionStartTime = 0;
35
+ _programDateTime = null;
36
+ _recoverAttemptsRemaining = 0;
37
+ _recoveredAudioCodecError = false;
38
+ _recoveredDecodingError = false;
39
+ _segmentTargetDuration = null;
40
+ _timeUpdateTimer = null;
41
+ get name() {
42
+ return 'hls';
43
+ }
44
+ get supportedVersion() {
45
+ return { min: CLAPPR_VERSION };
46
+ }
47
+ get levels() {
48
+ return this._levels || [];
49
+ }
50
+ get currentLevel() {
51
+ return this._currentLevel ?? AUTO;
52
+ }
53
+ get isReady() {
54
+ return this._isReadyState;
55
+ }
56
+ set currentLevel(id) {
57
+ this._currentLevel = id;
58
+ this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START);
59
+ assert.ok(this._hls, 'Hls.js instance is not available');
60
+ if (this.options.playback.hlsUseNextLevel) {
61
+ this._hls.nextLevel = this._currentLevel;
62
+ }
63
+ else {
64
+ this._hls.currentLevel = this._currentLevel;
65
+ }
66
+ }
67
+ get latency() {
68
+ assert.ok(this._hls, 'Hls.js instance is not available');
69
+ return this._hls.latency;
70
+ }
71
+ get currentProgramDateTime() {
72
+ assert.ok(this._hls, 'Hls.js instance is not available');
73
+ assert.ok(this._hls.playingDate, 'Hls.js playingDate is not defined');
74
+ return this._hls.playingDate;
75
+ }
76
+ get _startTime() {
77
+ if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT') {
78
+ return this._extrapolatedStartTime;
79
+ }
80
+ return this._playableRegionStartTime;
81
+ }
82
+ get _now() {
83
+ return now();
84
+ }
85
+ // the time in the video element which should represent the start of the sliding window
86
+ // extrapolated to increase in real time (instead of jumping as the early segments are removed)
87
+ get _extrapolatedStartTime() {
88
+ if (!this._localStartTimeCorrelation) {
89
+ return this._playableRegionStartTime;
90
+ }
91
+ const corr = this._localStartTimeCorrelation;
92
+ const timePassed = this._now - corr.local;
93
+ const extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000;
94
+ // cap at the end of the extrapolated window duration
95
+ return Math.min(extrapolatedWindowStartTime, this._playableRegionStartTime + this._extrapolatedWindowDuration);
96
+ }
97
+ // the time in the video element which should represent the end of the content
98
+ // extrapolated to increase in real time (instead of jumping as segments are added)
99
+ get _extrapolatedEndTime() {
100
+ const actualEndTime = this._playableRegionStartTime + this._playableRegionDuration;
101
+ if (!this._localEndTimeCorrelation) {
102
+ return actualEndTime;
103
+ }
104
+ const correlation = this._localEndTimeCorrelation;
105
+ const timePassed = this._now - correlation.local;
106
+ const extrapolatedEndTime = (correlation.remote + timePassed) / 1000;
107
+ return Math.max(actualEndTime - this._extrapolatedWindowDuration, Math.min(extrapolatedEndTime, actualEndTime));
108
+ }
109
+ get _duration() {
110
+ return this._extrapolatedEndTime - this._startTime;
111
+ }
112
+ // Returns the duration (seconds) of the window that the extrapolated start time is allowed
113
+ // to move in before being capped.
114
+ // The extrapolated start time should never reach the cap at the end of the window as the
115
+ // window should slide as chunks are removed from the start.
116
+ // This also applies to the extrapolated end time in the same way.
117
+ //
118
+ // If chunks aren't being removed for some reason that the start time will reach and remain fixed at
119
+ // playableRegionStartTime + extrapolatedWindowDuration
120
+ //
121
+ // <-- window duration -->
122
+ // I.e playableRegionStartTime |-----------------------|
123
+ // | --> . . .
124
+ // . --> | --> . .
125
+ // . . --> | --> .
126
+ // . . . --> |
127
+ // . . . .
128
+ // extrapolatedStartTime
129
+ get _extrapolatedWindowDuration() {
130
+ if (this._segmentTargetDuration === null) {
131
+ return 0;
132
+ }
133
+ return this._extrapolatedWindowNumSegments * this._segmentTargetDuration;
134
+ }
135
+ get bandwidthEstimate() {
136
+ return this._hls && this._hls.bandwidthEstimate;
137
+ }
138
+ get defaultOptions() {
139
+ return { preload: true };
140
+ }
141
+ get customListeners() {
142
+ return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || [];
143
+ }
144
+ get sourceMedia() {
145
+ return this.options.src;
146
+ }
147
+ get currentTimestamp() {
148
+ if (!this._currentFragment) {
149
+ return null;
150
+ }
151
+ assert(this._currentFragment.programDateTime !== null, 'Hls.js programDateTime is not defined');
152
+ const startTime = this._currentFragment.programDateTime;
153
+ const playbackTime = this.el.currentTime;
154
+ const playTimeOffSet = playbackTime - this._currentFragment.start;
155
+ const currentTimestampInMs = startTime + playTimeOffSet * 1000;
156
+ return currentTimestampInMs / 1000;
157
+ }
158
+ static get HLSJS() {
159
+ return HLSJS;
160
+ }
161
+ constructor(...args) {
162
+ // @ts-ignore
163
+ super(...args);
164
+ this.options.hlsPlayback = { ...this.defaultOptions, ...this.options.hlsPlayback };
165
+ this._setInitialState();
166
+ }
167
+ _setInitialState() {
168
+ // @ts-ignore
169
+ this._minDvrSize = typeof (this.options.hlsMinimumDvrSize) === 'undefined' ? 60 : this.options.hlsMinimumDvrSize;
170
+ // The size of the start time extrapolation window measured as a multiple of segments.
171
+ // Should be 2 or higher, or 0 to disable. Should only need to be increased above 2 if more than one segment is
172
+ // removed from the start of the playlist at a time. E.g if the playlist is cached for 10 seconds and new chunks are
173
+ // added/removed every 5.
174
+ this._extrapolatedWindowNumSegments = !this.options.playback || typeof (this.options.playback.extrapolatedWindowNumSegments) === 'undefined' ? 2 : this.options.playback.extrapolatedWindowNumSegments;
175
+ this._playbackType = Playback.VOD;
176
+ this._lastTimeUpdate = { current: 0, total: 0 };
177
+ this._lastDuration = null;
178
+ // for hls streams which have dvr with a sliding window,
179
+ // the content at the start of the playlist is removed as new
180
+ // content is appended at the end.
181
+ // this means the actual playable start time will increase as the
182
+ // start content is deleted
183
+ // For streams with dvr where the entire recording is kept from the
184
+ // beginning this should stay as 0
185
+ this._playableRegionStartTime = 0;
186
+ // {local, remote} remote is the time in the video element that should represent 0
187
+ // local is the system time when the 'remote' measurment took place
188
+ this._localStartTimeCorrelation = null;
189
+ // {local, remote} remote is the time in the video element that should represents the end
190
+ // local is the system time when the 'remote' measurment took place
191
+ this._localEndTimeCorrelation = null;
192
+ // if content is removed from the beginning then this empty area should
193
+ // be ignored. "playableRegionDuration" excludes the empty area
194
+ this._playableRegionDuration = 0;
195
+ // #EXT-X-PROGRAM-DATE-TIME
196
+ this._programDateTime = null;
197
+ // true when the actual duration is longer than hlsjs's live sync point
198
+ // when this is false playableRegionDuration will be the actual duration
199
+ // when this is true playableRegionDuration will exclude the time after the sync point
200
+ this._durationExcludesAfterLiveSyncPoint = false;
201
+ // #EXT-X-TARGETDURATION
202
+ this._segmentTargetDuration = null;
203
+ // #EXT-X-PLAYLIST-TYPE
204
+ this._playlistType = null;
205
+ // TODO options.hlsRecoverAttempts
206
+ this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts || DEFAULT_RECOVER_ATTEMPTS;
207
+ }
208
+ _setup() {
209
+ this._destroyHLSInstance();
210
+ this._createHLSInstance();
211
+ this._listenHLSEvents();
212
+ this._attachHLSMedia();
213
+ }
214
+ _destroyHLSInstance() {
215
+ if (!this._hls) {
216
+ return;
217
+ }
218
+ this._manifestParsed = false;
219
+ this._ccIsSetup = false;
220
+ this._ccTracksUpdated = false;
221
+ this._setInitialState();
222
+ this._hls.destroy();
223
+ this._hls = null;
224
+ }
225
+ _createHLSInstance() {
226
+ const config = {
227
+ ...this.options.playback.hlsjsConfig,
228
+ maxBufferLength: 2,
229
+ maxMaxBufferLength: 4,
230
+ };
231
+ this._hls = new HLSJS(config);
232
+ }
233
+ _attachHLSMedia() {
234
+ if (!this._hls) {
235
+ return;
236
+ }
237
+ this._hls.attachMedia(this.el);
238
+ }
239
+ _listenHLSEvents() {
240
+ if (!this._hls) {
241
+ return;
242
+ }
243
+ this._hls.once(HLSJS.Events.MEDIA_ATTACHED, () => {
244
+ assert.ok(this._hls, 'Hls.js instance is not available');
245
+ this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
246
+ });
247
+ const onPlaying = () => {
248
+ if (this._hls) {
249
+ this._hls.config.maxBufferLength = this.options.hlsPlayback.maxBufferLength || 30;
250
+ this._hls.config.maxMaxBufferLength = this.options.hlsPlayback.maxMaxBufferLength || 60;
251
+ }
252
+ this.el.removeEventListener('playing', onPlaying);
253
+ };
254
+ this.el.addEventListener('playing', onPlaying);
255
+ this._hls.on(HLSJS.Events.MANIFEST_PARSED, () => this._manifestParsed = true);
256
+ this._hls.on(HLSJS.Events.LEVEL_LOADED, (evt, data) => this._updatePlaybackType(evt, data));
257
+ this._hls.on(HLSJS.Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data));
258
+ this._hls.on(HLSJS.Events.LEVEL_SWITCHING, (evt, data) => this._onLevelSwitch(evt, data));
259
+ this._hls.on(HLSJS.Events.FRAG_CHANGED, (evt, data) => this._onFragmentChanged(evt, data));
260
+ this._hls.on(HLSJS.Events.FRAG_LOADED, (evt, data) => this._onFragmentLoaded(evt, data));
261
+ this._hls.on(HLSJS.Events.FRAG_PARSING_METADATA, (evt, data) => this._onFragmentParsingMetadata(evt, data));
262
+ this._hls.on(HLSJS.Events.ERROR, (evt, data) => this._onHLSJSError(evt, data));
263
+ // this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data));
264
+ this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, () => this._onSubtitleLoaded());
265
+ this._hls.on(HLSJS.Events.SUBTITLE_TRACKS_UPDATED, () => this._ccTracksUpdated = true);
266
+ this.bindCustomListeners();
267
+ }
268
+ bindCustomListeners() {
269
+ this.customListeners.forEach((item) => {
270
+ const requestedEventName = item.eventName;
271
+ const typeOfListener = item.once ? 'once' : 'on';
272
+ assert.ok(this._hls, 'Hls.js instance is not available');
273
+ requestedEventName && this._hls[`${typeOfListener}`](requestedEventName, item.callback);
274
+ });
275
+ }
276
+ unbindCustomListeners() {
277
+ this.customListeners.forEach((item) => {
278
+ const requestedEventName = item.eventName;
279
+ assert.ok(this._hls, 'Hls.js instance is not available');
280
+ requestedEventName && this._hls.off(requestedEventName, item.callback);
281
+ });
282
+ }
283
+ _onFragmentParsingMetadata(evt, data) {
284
+ // @ts-ignore
285
+ this.trigger(Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, { evt, data });
286
+ }
287
+ render() {
288
+ this._ready();
289
+ return super.render();
290
+ }
291
+ _ready() {
292
+ if (this._isReadyState) {
293
+ return;
294
+ }
295
+ !this._hls && this._setup();
296
+ this._isReadyState = true;
297
+ this.trigger(Events.PLAYBACK_READY, this.name);
298
+ }
299
+ _recover(evt, data, error) {
300
+ if (!this._recoveredDecodingError) {
301
+ this._recoveredDecodingError = true;
302
+ assert(this._hls, 'Hls.js instance is not available');
303
+ this._hls.recoverMediaError();
304
+ }
305
+ else if (!this._recoveredAudioCodecError) {
306
+ this._recoveredAudioCodecError = true;
307
+ assert(this._hls, 'Hls.js instance is not available');
308
+ this._hls.swapAudioCodec();
309
+ this._hls.recoverMediaError();
310
+ }
311
+ else {
312
+ Log.error('hlsjs: failed to recover', { evt, data });
313
+ error.level = PlayerError.Levels.FATAL;
314
+ const formattedError = this.createError(error);
315
+ this.trigger(Events.PLAYBACK_ERROR, formattedError);
316
+ this.stop();
317
+ }
318
+ }
319
+ // override
320
+ // this playback manages the src on the video element itself
321
+ _setupSrc(srcUrl) { } // eslint-disable-line no-unused-vars
322
+ _startTimeUpdateTimer() {
323
+ if (this._timeUpdateTimer) {
324
+ return;
325
+ }
326
+ this._timeUpdateTimer = setInterval(() => {
327
+ this._onDurationChange();
328
+ this._onTimeUpdate();
329
+ }, 100);
330
+ }
331
+ _stopTimeUpdateTimer() {
332
+ if (!this._timeUpdateTimer) {
333
+ return;
334
+ }
335
+ clearInterval(this._timeUpdateTimer);
336
+ this._timeUpdateTimer = null;
337
+ }
338
+ getProgramDateTime() {
339
+ return this._programDateTime;
340
+ }
341
+ // the duration on the video element itself should not be used
342
+ // as this does not necesarily represent the duration of the stream
343
+ // https://github.com/clappr/clappr/issues/668#issuecomment-157036678
344
+ getDuration() {
345
+ return this._duration;
346
+ }
347
+ getCurrentTime() {
348
+ // e.g. can be < 0 if user pauses near the start
349
+ // eventually they will then be kicked to the end by hlsjs if they run out of buffer
350
+ // before the official start time
351
+ return Math.max(0, this.el.currentTime - this._startTime);
352
+ }
353
+ // the time that "0" now represents relative to when playback started
354
+ // for a stream with a sliding window this will increase as content is
355
+ // removed from the beginning
356
+ getStartTimeOffset() {
357
+ return this._startTime;
358
+ }
359
+ seekPercentage(percentage) {
360
+ const seekTo = (percentage > 0)
361
+ ? this._duration * (percentage / 100)
362
+ : this._duration;
363
+ this.seek(seekTo);
364
+ }
365
+ seek(time) {
366
+ if (time < 0) {
367
+ Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
368
+ time = this.getDuration();
369
+ }
370
+ // assume live if time within 3 seconds of end of stream
371
+ this.dvrEnabled && this._updateDvr(time < this.getDuration() - 3);
372
+ time += this._startTime;
373
+ this.el.currentTime = time;
374
+ }
375
+ seekToLivePoint() {
376
+ this.seek(this.getDuration());
377
+ }
378
+ _updateDvr(status) {
379
+ this.trigger(Events.PLAYBACK_DVR, status);
380
+ this.trigger(Events.PLAYBACK_STATS_ADD, { 'dvr': status });
381
+ }
382
+ _updateSettings() {
383
+ if (this._playbackType === Playback.VOD) {
384
+ this.settings.left = ['playpause', 'position', 'duration'];
385
+ }
386
+ else if (this.dvrEnabled) {
387
+ this.settings.left = ['playpause'];
388
+ }
389
+ else {
390
+ this.settings.left = ['playstop'];
391
+ }
392
+ this.settings.seekEnabled = this.isSeekEnabled();
393
+ this.trigger(Events.PLAYBACK_SETTINGSUPDATE);
394
+ }
395
+ _onHLSJSError(evt, data) {
396
+ const error = {
397
+ code: `${data.type}_${data.details}`,
398
+ description: `${this.name} error: type: ${data.type}, details: ${data.details}`,
399
+ raw: data,
400
+ };
401
+ let formattedError;
402
+ if (data.response) {
403
+ error.description += `, response: ${JSON.stringify(data.response)}`;
404
+ }
405
+ // only report/handle errors if they are fatal
406
+ // hlsjs should automatically handle non fatal errors
407
+ if (data.fatal) {
408
+ if (this._recoverAttemptsRemaining > 0) {
409
+ this._recoverAttemptsRemaining -= 1;
410
+ switch (data.type) {
411
+ case HLSJS.ErrorTypes.NETWORK_ERROR:
412
+ switch (data.details) {
413
+ // The following network errors cannot be recovered with HLS.startLoad()
414
+ // For more details, see https://github.com/video-dev/hls.js/blob/master/doc/design.md#error-detection-and-handling
415
+ // For "level load" fatal errors, see https://github.com/video-dev/hls.js/issues/1138
416
+ case HLSJS.ErrorDetails.MANIFEST_LOAD_ERROR:
417
+ case HLSJS.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
418
+ case HLSJS.ErrorDetails.MANIFEST_PARSING_ERROR:
419
+ case HLSJS.ErrorDetails.LEVEL_LOAD_ERROR:
420
+ case HLSJS.ErrorDetails.LEVEL_LOAD_TIMEOUT:
421
+ Log.error('hlsjs: unrecoverable network fatal error.', { evt, data });
422
+ formattedError = this.createError(error);
423
+ this.trigger(Events.PLAYBACK_ERROR, formattedError);
424
+ this.stop();
425
+ break;
426
+ default:
427
+ Log.warn('hlsjs: trying to recover from network error.', { evt, data });
428
+ error.level = PlayerError.Levels.WARN;
429
+ assert(this._hls, 'Hls.js instance is not available');
430
+ this._hls.startLoad();
431
+ break;
432
+ }
433
+ break;
434
+ case HLSJS.ErrorTypes.MEDIA_ERROR:
435
+ Log.warn('hlsjs: trying to recover from media error.', { evt, data });
436
+ error.level = PlayerError.Levels.WARN;
437
+ this._recover(evt, data, error);
438
+ break;
439
+ default:
440
+ Log.error('hlsjs: could not recover from error.', { evt, data });
441
+ formattedError = this.createError(error);
442
+ this.trigger(Events.PLAYBACK_ERROR, formattedError);
443
+ this.stop();
444
+ break;
445
+ }
446
+ }
447
+ else {
448
+ Log.error('hlsjs: could not recover from error after maximum number of attempts.', { evt, data });
449
+ formattedError = this.createError(error);
450
+ this.trigger(Events.PLAYBACK_ERROR, formattedError);
451
+ this.stop();
452
+ }
453
+ }
454
+ else {
455
+ // Transforms HLSJS.ErrorDetails.KEY_LOAD_ERROR non-fatal error to
456
+ // playback fatal error if triggerFatalErrorOnResourceDenied playback
457
+ // option is set. HLSJS.ErrorTypes.KEY_SYSTEM_ERROR are fatal errors
458
+ // and therefore already handled.
459
+ if (this.options.playback.triggerFatalErrorOnResourceDenied && this._keyIsDenied(data)) {
460
+ Log.error('hlsjs: could not load decrypt key.', { evt, data });
461
+ formattedError = this.createError(error);
462
+ this.trigger(Events.PLAYBACK_ERROR, formattedError);
463
+ this.stop();
464
+ return;
465
+ }
466
+ error.level = PlayerError.Levels.WARN;
467
+ Log.warn('hlsjs: non-fatal error occurred', { evt, data });
468
+ }
469
+ }
470
+ _keyIsDenied(data) {
471
+ return data.type === HLSJS.ErrorTypes.NETWORK_ERROR
472
+ && data.details === HLSJS.ErrorDetails.KEY_LOAD_ERROR
473
+ && data.response
474
+ && data.response.code
475
+ && data.response.code >= 400;
476
+ }
477
+ _onTimeUpdate() {
478
+ const update = { current: this.getCurrentTime(), total: this.getDuration(), firstFragDateTime: this.getProgramDateTime() };
479
+ const isSame = this._lastTimeUpdate && (update.current === this._lastTimeUpdate.current &&
480
+ update.total === this._lastTimeUpdate.total);
481
+ if (isSame) {
482
+ return;
483
+ }
484
+ this._lastTimeUpdate = update;
485
+ this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name);
486
+ }
487
+ _onDurationChange() {
488
+ const duration = this.getDuration();
489
+ if (this._lastDuration === duration) {
490
+ return;
491
+ }
492
+ this._lastDuration = duration;
493
+ super._onDurationChange();
494
+ }
495
+ _onProgress() {
496
+ if (!this.el.buffered.length) {
497
+ return;
498
+ }
499
+ let buffered = [];
500
+ let bufferedPos = 0;
501
+ for (let i = 0; i < this.el.buffered.length; i++) {
502
+ buffered = [...buffered, {
503
+ // for a stream with sliding window dvr something that is buffered my slide off the start of the timeline
504
+ start: Math.max(0, this.el.buffered.start(i) - this._playableRegionStartTime),
505
+ end: Math.max(0, this.el.buffered.end(i) - this._playableRegionStartTime)
506
+ }];
507
+ if (this.el.currentTime >= buffered[i].start && this.el.currentTime <= buffered[i].end) {
508
+ bufferedPos = i;
509
+ }
510
+ }
511
+ const progress = {
512
+ start: buffered[bufferedPos].start,
513
+ current: buffered[bufferedPos].end,
514
+ total: this.getDuration()
515
+ };
516
+ this.trigger(Events.PLAYBACK_PROGRESS, progress, buffered);
517
+ }
518
+ load(url) {
519
+ this._stopTimeUpdateTimer();
520
+ this.options.src = url;
521
+ this._setup();
522
+ }
523
+ play() {
524
+ !this._hls && this._setup();
525
+ assert.ok(this._hls, 'Hls.js instance is not available');
526
+ !this._manifestParsed && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
527
+ super.play();
528
+ this._startTimeUpdateTimer();
529
+ }
530
+ pause() {
531
+ if (!this._hls) {
532
+ return;
533
+ }
534
+ this.el.pause();
535
+ if (this.dvrEnabled) {
536
+ this._updateDvr(true);
537
+ }
538
+ }
539
+ stop() {
540
+ this._stopTimeUpdateTimer();
541
+ if (this._hls) {
542
+ super.stop();
543
+ }
544
+ this._destroyHLSInstance();
545
+ }
546
+ destroy() {
547
+ this._stopTimeUpdateTimer();
548
+ this._destroyHLSInstance();
549
+ return super.destroy();
550
+ }
551
+ _updatePlaybackType(evt, data) {
552
+ this._playbackType = (data.details.live ? Playback.LIVE : Playback.VOD);
553
+ this._onLevelUpdated(evt, data);
554
+ // Live stream subtitle tracks detection hack (may not immediately available)
555
+ if (this._ccTracksUpdated && this._playbackType === Playback.LIVE && this.hasClosedCaptionsTracks) {
556
+ this._onSubtitleLoaded();
557
+ }
558
+ }
559
+ _fillLevels() {
560
+ assert.ok(this._hls, 'Hls.js instance is not available');
561
+ this._levels = this._hls.levels.map((level, index) => {
562
+ return { id: index, level: level, label: `${level.bitrate / 1000}Kbps` };
563
+ });
564
+ this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels);
565
+ }
566
+ _onLevelUpdated(evt, data) {
567
+ this._segmentTargetDuration = data.details.targetduration;
568
+ this._playlistType = data.details.type || null;
569
+ let startTimeChanged = false;
570
+ let durationChanged = false;
571
+ const fragments = data.details.fragments;
572
+ const previousPlayableRegionStartTime = this._playableRegionStartTime;
573
+ const previousPlayableRegionDuration = this._playableRegionDuration;
574
+ if (fragments.length === 0) {
575
+ return;
576
+ }
577
+ // #EXT-X-PROGRAM-DATE-TIME
578
+ if (fragments[0].rawProgramDateTime) {
579
+ this._programDateTime = fragments[0].rawProgramDateTime;
580
+ }
581
+ if (this._playableRegionStartTime !== fragments[0].start) {
582
+ startTimeChanged = true;
583
+ this._playableRegionStartTime = fragments[0].start;
584
+ }
585
+ if (startTimeChanged) {
586
+ if (!this._localStartTimeCorrelation) {
587
+ // set the correlation to map to middle of the extrapolation window
588
+ this._localStartTimeCorrelation = {
589
+ local: this._now,
590
+ remote: (fragments[0].start + (this._extrapolatedWindowDuration / 2)) * 1000
591
+ };
592
+ }
593
+ else {
594
+ // check if the correlation still works
595
+ const corr = this._localStartTimeCorrelation;
596
+ const timePassed = this._now - corr.local;
597
+ // this should point to a time within the extrapolation window
598
+ const startTime = (corr.remote + timePassed) / 1000;
599
+ if (startTime < fragments[0].start) {
600
+ // our start time is now earlier than the first chunk
601
+ // (maybe the chunk was removed early)
602
+ // reset correlation so that it sits at the beginning of the first available chunk
603
+ this._localStartTimeCorrelation = {
604
+ local: this._now,
605
+ remote: fragments[0].start * 1000
606
+ };
607
+ }
608
+ else if (startTime > previousPlayableRegionStartTime + this._extrapolatedWindowDuration) {
609
+ // start time was past the end of the old extrapolation window (so would have been capped)
610
+ // see if now that time would be inside the window, and if it would be set the correlation
611
+ // so that it resumes from the time it was at at the end of the old window
612
+ // update the correlation so that the time starts counting again from the value it's on now
613
+ this._localStartTimeCorrelation = {
614
+ local: this._now,
615
+ remote: Math.max(fragments[0].start, previousPlayableRegionStartTime + this._extrapolatedWindowDuration) * 1000
616
+ };
617
+ }
618
+ }
619
+ }
620
+ let newDuration = data.details.totalduration;
621
+ // if it's a live stream then shorten the duration to remove access
622
+ // to the area after hlsjs's live sync point
623
+ // seeks to areas after this point sometimes have issues
624
+ if (this._playbackType === Playback.LIVE) {
625
+ const fragmentTargetDuration = data.details.targetduration;
626
+ const hlsjsConfig = this.options.playback.hlsjsConfig || {};
627
+ const liveSyncDurationCount = hlsjsConfig.liveSyncDurationCount || HLSJS.DefaultConfig.liveSyncDurationCount;
628
+ const hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount;
629
+ if (hiddenAreaDuration <= newDuration) {
630
+ newDuration -= hiddenAreaDuration;
631
+ this._durationExcludesAfterLiveSyncPoint = true;
632
+ }
633
+ else {
634
+ this._durationExcludesAfterLiveSyncPoint = false;
635
+ }
636
+ }
637
+ if (newDuration !== this._playableRegionDuration) {
638
+ durationChanged = true;
639
+ this._playableRegionDuration = newDuration;
640
+ }
641
+ // Note the end time is not the playableRegionDuration
642
+ // The end time will always increase even if content is removed from the beginning
643
+ const endTime = fragments[0].start + newDuration;
644
+ const previousEndTime = previousPlayableRegionStartTime + previousPlayableRegionDuration;
645
+ const endTimeChanged = endTime !== previousEndTime;
646
+ if (endTimeChanged) {
647
+ if (!this._localEndTimeCorrelation) {
648
+ // set the correlation to map to the end
649
+ this._localEndTimeCorrelation = {
650
+ local: this._now,
651
+ remote: endTime * 1000
652
+ };
653
+ }
654
+ else {
655
+ // check if the correlation still works
656
+ const corr = this._localEndTimeCorrelation;
657
+ const timePassed = this._now - corr.local;
658
+ // this should point to a time within the extrapolation window from the end
659
+ const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
660
+ if (extrapolatedEndTime > endTime) {
661
+ this._localEndTimeCorrelation = {
662
+ local: this._now,
663
+ remote: endTime * 1000
664
+ };
665
+ }
666
+ else if (extrapolatedEndTime < endTime - this._extrapolatedWindowDuration) {
667
+ // our extrapolated end time is now earlier than the extrapolation window from the actual end time
668
+ // (maybe a chunk became available early)
669
+ // reset correlation so that it sits at the beginning of the extrapolation window from the end time
670
+ this._localEndTimeCorrelation = {
671
+ local: this._now,
672
+ remote: (endTime - this._extrapolatedWindowDuration) * 1000
673
+ };
674
+ }
675
+ else if (extrapolatedEndTime > previousEndTime) {
676
+ // end time was past the old end time (so would have been capped)
677
+ // set the correlation so that it resumes from the time it was at at the end of the old window
678
+ this._localEndTimeCorrelation = {
679
+ local: this._now,
680
+ remote: previousEndTime * 1000
681
+ };
682
+ }
683
+ }
684
+ }
685
+ // now that the values have been updated call any methods that use on them so they get the updated values
686
+ // immediately
687
+ durationChanged && this._onDurationChange();
688
+ startTimeChanged && this._onProgress();
689
+ }
690
+ _onFragmentChanged(evt, data) {
691
+ this._currentFragment = data.frag;
692
+ // @ts-ignore
693
+ this.trigger(Events.Custom.PLAYBACK_FRAGMENT_CHANGED, data);
694
+ }
695
+ _onFragmentLoaded(evt, data) {
696
+ this.trigger(Events.PLAYBACK_FRAGMENT_LOADED, data);
697
+ }
698
+ _onSubtitleLoaded() {
699
+ // This event may be triggered multiple times
700
+ // Setup CC only once (disable CC by default)
701
+ if (!this._ccIsSetup) {
702
+ this.trigger(Events.PLAYBACK_SUBTITLE_AVAILABLE);
703
+ const trackId = this._playbackType === Playback.LIVE ? -1 : this.closedCaptionsTrackId;
704
+ this.closedCaptionsTrackId = trackId;
705
+ this._ccIsSetup = true;
706
+ }
707
+ }
708
+ _onLevelSwitch(evt, data) {
709
+ if (!this.levels.length) {
710
+ this._fillLevels();
711
+ }
712
+ this.trigger(Events.PLAYBACK_LEVEL_SWITCH_END);
713
+ this.trigger(Events.PLAYBACK_LEVEL_SWITCH, data);
714
+ assert(this._hls, 'Hls.js instance is not available');
715
+ const currentLevel = this._hls.levels[data.level];
716
+ if (currentLevel) {
717
+ // TODO should highDefinition be private and maybe have a read only accessor if it's used somewhere
718
+ this.highDefinition = (currentLevel.height >= 720 || (currentLevel.bitrate / 1000) >= 2000);
719
+ this.trigger(Events.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition);
720
+ this.trigger(Events.PLAYBACK_BITRATE, {
721
+ height: currentLevel.height,
722
+ width: currentLevel.width,
723
+ bandwidth: currentLevel.bitrate,
724
+ bitrate: currentLevel.bitrate,
725
+ level: data.level
726
+ });
727
+ }
728
+ }
729
+ get dvrEnabled() {
730
+ // enabled when:
731
+ // - the duration does not include content after hlsjs's live sync point
732
+ // - the playable region duration is longer than the configured duration to enable dvr after
733
+ // - the playback type is LIVE.
734
+ return (this._durationExcludesAfterLiveSyncPoint && this._duration >= this._minDvrSize && this.getPlaybackType() === Playback.LIVE);
735
+ }
736
+ getPlaybackType() {
737
+ return this._playbackType;
738
+ }
739
+ isSeekEnabled() {
740
+ return (this._playbackType === Playback.VOD || this.dvrEnabled);
741
+ }
742
+ }
743
+ HlsPlayback.canPlay = function (resource, mimeType) {
744
+ const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
745
+ const isHls = ((resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'm3u8') || listContainsIgnoreCase(mimeType, ['application/vnd.apple.mpegurl', 'application/x-mpegURL']));
746
+ return !!(HLSJS.isSupported() && isHls);
747
+ };
748
+
749
+ export { HlsPlayback as default };