rx-player 4.0.0-beta.0 → 4.0.0-beta.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.
- package/.eslintrc.js +8 -0
- package/CHANGELOG.md +53 -0
- package/VERSION +1 -1
- package/dist/_esm5.processed/compat/browser_detection.d.ts +23 -12
- package/dist/_esm5.processed/compat/browser_detection.js +80 -38
- package/dist/_esm5.processed/compat/can_reuse_media_keys.js +2 -2
- package/dist/_esm5.processed/compat/eme/close_session.js +2 -2
- package/dist/_esm5.processed/compat/event_listeners.js +1 -1
- package/dist/_esm5.processed/config.d.ts +2 -0
- package/dist/_esm5.processed/core/adaptive/adaptive_representation_selector.js +4 -2
- package/dist/_esm5.processed/core/api/debug/buffer_graph.d.ts +28 -0
- package/dist/_esm5.processed/core/api/debug/buffer_graph.js +175 -0
- package/dist/_esm5.processed/core/api/debug/buffer_size_graph.d.ts +10 -0
- package/dist/_esm5.processed/core/api/debug/buffer_size_graph.js +104 -0
- package/dist/_esm5.processed/core/api/debug/constants.d.ts +2 -0
- package/dist/_esm5.processed/core/api/debug/constants.js +2 -0
- package/dist/_esm5.processed/core/api/debug/index.d.ts +2 -0
- package/dist/_esm5.processed/core/api/debug/index.js +2 -0
- package/dist/_esm5.processed/core/api/debug/modules/general_info.d.ts +3 -0
- package/dist/_esm5.processed/core/api/debug/modules/general_info.js +180 -0
- package/dist/_esm5.processed/core/api/debug/modules/segment_buffer_content.d.ts +4 -0
- package/dist/_esm5.processed/core/api/debug/modules/segment_buffer_content.js +121 -0
- package/dist/_esm5.processed/core/api/debug/modules/segment_buffer_size.d.ts +3 -0
- package/dist/_esm5.processed/core/api/debug/modules/segment_buffer_size.js +35 -0
- package/dist/_esm5.processed/core/api/debug/render.d.ts +3 -0
- package/dist/_esm5.processed/core/api/debug/render.js +32 -0
- package/dist/_esm5.processed/core/api/debug/utils.d.ts +39 -0
- package/dist/_esm5.processed/core/api/debug/utils.js +57 -0
- package/dist/_esm5.processed/core/api/playback_observer.js +3 -2
- package/dist/_esm5.processed/core/api/public_api.d.ts +6 -2
- package/dist/_esm5.processed/core/api/public_api.js +50 -27
- package/dist/_esm5.processed/core/api/utils.js +3 -3
- package/dist/_esm5.processed/core/decrypt/__tests__/__global__/utils.d.ts +27 -8
- package/dist/_esm5.processed/core/decrypt/__tests__/__global__/utils.js +28 -7
- package/dist/_esm5.processed/core/decrypt/attach_media_keys.js +1 -1
- package/dist/_esm5.processed/core/decrypt/content_decryptor.js +1 -1
- package/dist/_esm5.processed/core/decrypt/find_key_system.js +29 -6
- package/dist/_esm5.processed/core/decrypt/session_events_listener.js +35 -31
- package/dist/_esm5.processed/core/decrypt/utils/check_key_statuses.js +4 -0
- package/dist/_esm5.processed/core/fetchers/cdn_prioritizer.d.ts +17 -8
- package/dist/_esm5.processed/core/fetchers/cdn_prioritizer.js +10 -6
- package/dist/_esm5.processed/core/fetchers/manifest/manifest_fetcher.js +5 -4
- package/dist/_esm5.processed/core/fetchers/segment/segment_fetcher.d.ts +22 -5
- package/dist/_esm5.processed/core/fetchers/segment/segment_fetcher.js +37 -21
- package/dist/_esm5.processed/core/fetchers/segment/task_prioritizer.js +21 -23
- package/dist/_esm5.processed/core/fetchers/utils/schedule_request.js +17 -7
- package/dist/_esm5.processed/core/init/directfile_content_initializer.js +1 -1
- package/dist/_esm5.processed/core/init/media_source_content_initializer.js +27 -31
- package/dist/_esm5.processed/core/init/utils/content_time_boundaries_observer.js +2 -2
- package/dist/_esm5.processed/core/init/utils/create_media_source.js +3 -12
- package/dist/_esm5.processed/core/init/utils/end_of_stream.js +6 -3
- package/dist/_esm5.processed/core/init/utils/get_loaded_reference.js +2 -1
- package/dist/_esm5.processed/core/init/utils/initial_seek_and_play.js +9 -5
- package/dist/_esm5.processed/core/init/utils/initialize_content_decryption.js +2 -1
- package/dist/_esm5.processed/core/init/utils/media_duration_updater.js +24 -20
- package/dist/_esm5.processed/core/init/utils/rebuffering_controller.js +1 -1
- package/dist/_esm5.processed/core/init/utils/stream_events_emitter/stream_events_emitter.js +6 -4
- package/dist/_esm5.processed/core/init/utils/throw_on_media_error.js +1 -1
- package/dist/_esm5.processed/core/segment_buffers/implementations/audio_video/audio_video_segment_buffer.js +7 -10
- package/dist/_esm5.processed/core/segment_buffers/implementations/text/html/html_text_segment_buffer.js +4 -2
- package/dist/_esm5.processed/core/segment_buffers/segment_buffers_store.js +13 -9
- package/dist/_esm5.processed/core/stream/adaptation/adaptation_stream.js +30 -16
- package/dist/_esm5.processed/core/stream/orchestrator/stream_orchestrator.js +26 -12
- package/dist/_esm5.processed/core/stream/period/period_stream.js +11 -10
- package/dist/_esm5.processed/core/stream/representation/representation_stream.js +15 -15
- package/dist/_esm5.processed/core/stream/representation/utils/append_segment_to_buffer.js +1 -1
- package/dist/_esm5.processed/core/stream/representation/utils/downloading_queue.js +16 -6
- package/dist/_esm5.processed/core/stream/utils/create_reload_request.js +1 -1
- package/dist/_esm5.processed/default_config.d.ts +16 -0
- package/dist/_esm5.processed/default_config.js +19 -0
- package/dist/_esm5.processed/experimental/features/debug_element.d.ts +8 -0
- package/dist/_esm5.processed/experimental/features/debug_element.js +10 -0
- package/dist/_esm5.processed/experimental/features/index.d.ts +1 -0
- package/dist/_esm5.processed/experimental/features/index.js +1 -0
- package/dist/_esm5.processed/experimental/tools/VideoThumbnailLoader/prepare_source_buffer.js +7 -4
- package/dist/_esm5.processed/experimental/tools/VideoThumbnailLoader/video_thumbnail_loader.js +8 -4
- package/dist/_esm5.processed/features/features_object.js +1 -0
- package/dist/_esm5.processed/features/initialize_features.js +13 -10
- package/dist/_esm5.processed/features/types.d.ts +3 -0
- package/dist/_esm5.processed/manifest/adaptation.js +4 -0
- package/dist/_esm5.processed/manifest/manifest.js +2 -0
- package/dist/_esm5.processed/manifest/representation.js +11 -4
- package/dist/_esm5.processed/parsers/manifest/dash/common/parse_adaptation_sets.js +105 -137
- package/dist/_esm5.processed/parsers/manifest/dash/common/parse_representations.js +25 -5
- package/dist/_esm5.processed/transports/dash/add_segment_integrity_checks_to_loader.js +15 -11
- package/dist/_esm5.processed/transports/dash/low_latency_segment_loader.js +2 -2
- package/dist/_esm5.processed/transports/dash/manifest_parser.js +1 -1
- package/dist/_esm5.processed/transports/dash/segment_loader.js +4 -4
- package/dist/_esm5.processed/transports/local/segment_loader.js +13 -26
- package/dist/_esm5.processed/transports/smooth/segment_loader.js +4 -4
- package/dist/_esm5.processed/transports/utils/call_custom_manifest_loader.js +3 -3
- package/dist/_esm5.processed/utils/cancellable_sleep.js +4 -10
- package/dist/_esm5.processed/utils/create_cancellable_promise.d.ts +26 -0
- package/dist/_esm5.processed/utils/create_cancellable_promise.js +52 -0
- package/dist/_esm5.processed/utils/reference.js +6 -0
- package/dist/_esm5.processed/utils/request/xhr.js +1 -1
- package/dist/_esm5.processed/utils/task_canceller.d.ts +34 -15
- package/dist/_esm5.processed/utils/task_canceller.js +55 -22
- package/dist/rx-player.js +882 -661
- package/dist/rx-player.min.js +1 -1
- package/jest.config.js +1 -5
- package/package.json +17 -19
- package/scripts/build/constants.d.ts +1 -0
- package/scripts/fast_demo_build.js +38 -39
- package/sonar-project.properties +1 -1
- package/src/compat/browser_detection.ts +99 -52
- package/src/compat/can_reuse_media_keys.ts +5 -2
- package/src/compat/eme/close_session.ts +2 -2
- package/src/compat/event_listeners.ts +1 -1
- package/src/core/adaptive/adaptive_representation_selector.ts +4 -2
- package/src/core/api/debug/buffer_graph.ts +247 -0
- package/src/core/api/debug/buffer_size_graph.ts +130 -0
- package/src/core/api/debug/constants.ts +2 -0
- package/src/core/api/debug/index.ts +3 -0
- package/src/core/api/debug/modules/general_info.ts +184 -0
- package/src/core/api/debug/modules/segment_buffer_content.ts +155 -0
- package/src/core/api/debug/modules/segment_buffer_size.ts +48 -0
- package/src/core/api/debug/render.ts +40 -0
- package/src/core/api/debug/utils.ts +103 -0
- package/src/core/api/playback_observer.ts +4 -2
- package/src/core/api/public_api.ts +59 -31
- package/src/core/api/utils.ts +3 -3
- package/src/core/decrypt/__tests__/__global__/utils.ts +61 -40
- package/src/core/decrypt/attach_media_keys.ts +1 -1
- package/src/core/decrypt/content_decryptor.ts +1 -1
- package/src/core/decrypt/find_key_system.ts +25 -11
- package/src/core/decrypt/session_events_listener.ts +39 -38
- package/src/core/decrypt/utils/check_key_statuses.ts +6 -0
- package/src/core/fetchers/cdn_prioritizer.ts +18 -9
- package/src/core/fetchers/manifest/manifest_fetcher.ts +5 -4
- package/src/core/fetchers/segment/segment_fetcher.ts +36 -14
- package/src/core/fetchers/segment/task_prioritizer.ts +25 -30
- package/src/core/fetchers/utils/schedule_request.ts +18 -7
- package/src/core/init/directfile_content_initializer.ts +1 -1
- package/src/core/init/media_source_content_initializer.ts +37 -41
- package/src/core/init/utils/content_time_boundaries_observer.ts +2 -2
- package/src/core/init/utils/create_media_source.ts +4 -16
- package/src/core/init/utils/end_of_stream.ts +6 -3
- package/src/core/init/utils/get_loaded_reference.ts +2 -1
- package/src/core/init/utils/initial_seek_and_play.ts +9 -5
- package/src/core/init/utils/initialize_content_decryption.ts +2 -1
- package/src/core/init/utils/media_duration_updater.ts +26 -21
- package/src/core/init/utils/rebuffering_controller.ts +1 -1
- package/src/core/init/utils/stream_events_emitter/stream_events_emitter.ts +6 -4
- package/src/core/init/utils/throw_on_media_error.ts +1 -1
- package/src/core/segment_buffers/implementations/audio_video/audio_video_segment_buffer.ts +7 -11
- package/src/core/segment_buffers/implementations/text/html/html_text_segment_buffer.ts +4 -2
- package/src/core/segment_buffers/segment_buffers_store.ts +16 -13
- package/src/core/stream/adaptation/adaptation_stream.ts +33 -19
- package/src/core/stream/orchestrator/stream_orchestrator.ts +26 -12
- package/src/core/stream/period/period_stream.ts +11 -10
- package/src/core/stream/representation/representation_stream.ts +15 -15
- package/src/core/stream/representation/utils/append_segment_to_buffer.ts +1 -1
- package/src/core/stream/representation/utils/downloading_queue.ts +16 -4
- package/src/core/stream/utils/create_reload_request.ts +1 -1
- package/src/default_config.ts +30 -9
- package/src/experimental/features/__tests__/debug_element.test.ts +26 -0
- package/src/experimental/features/debug_element.ts +13 -0
- package/src/experimental/features/index.ts +1 -0
- package/src/experimental/tools/VideoThumbnailLoader/prepare_source_buffer.ts +7 -4
- package/src/experimental/tools/VideoThumbnailLoader/video_thumbnail_loader.ts +8 -4
- package/src/features/__tests__/initialize_features.test.ts +11 -0
- package/src/features/features_object.ts +1 -0
- package/src/features/initialize_features.ts +15 -10
- package/src/features/types.ts +9 -0
- package/src/manifest/adaptation.ts +7 -0
- package/src/manifest/manifest.ts +4 -0
- package/src/manifest/representation.ts +10 -4
- package/src/parsers/manifest/dash/common/parse_adaptation_sets.ts +116 -151
- package/src/parsers/manifest/dash/common/parse_representations.ts +21 -4
- package/src/transports/dash/add_segment_integrity_checks_to_loader.ts +31 -22
- package/src/transports/dash/low_latency_segment_loader.ts +2 -2
- package/src/transports/dash/manifest_parser.ts +1 -1
- package/src/transports/dash/segment_loader.ts +4 -4
- package/src/transports/local/segment_loader.ts +14 -30
- package/src/transports/smooth/segment_loader.ts +4 -4
- package/src/transports/utils/call_custom_manifest_loader.ts +3 -3
- package/src/typings/globals.d.ts +2 -0
- package/src/utils/cancellable_sleep.ts +5 -14
- package/src/utils/create_cancellable_promise.ts +69 -0
- package/src/utils/reference.ts +6 -0
- package/src/utils/request/xhr.ts +1 -1
- package/src/utils/task_canceller.ts +63 -34
- package/tsconfig.json +1 -1
- package/tsconfig.modules.json +1 -1
- package/locked_reps.js +0 -46
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { DEFAULT_REFRESH_INTERVAL } from "../constants";
|
|
2
|
+
import { createCompositeElement, createElement, createMetricTitle, isExtendedMode, } from "../utils";
|
|
3
|
+
export default function constructDebugGeneralInfo(instance, parentElt, cancelSignal) {
|
|
4
|
+
var generalInfoElt = createElement("div");
|
|
5
|
+
var adaptationsElt = createElement("div");
|
|
6
|
+
var representationsElt = createElement("div");
|
|
7
|
+
updateGeneralInfo();
|
|
8
|
+
var generalInfoItv = setInterval(function () {
|
|
9
|
+
updateGeneralInfo();
|
|
10
|
+
}, DEFAULT_REFRESH_INTERVAL);
|
|
11
|
+
cancelSignal.register(function () {
|
|
12
|
+
clearInterval(generalInfoItv);
|
|
13
|
+
});
|
|
14
|
+
return createCompositeElement("div", [
|
|
15
|
+
generalInfoElt,
|
|
16
|
+
adaptationsElt,
|
|
17
|
+
representationsElt,
|
|
18
|
+
]);
|
|
19
|
+
function updateGeneralInfo() {
|
|
20
|
+
var _a, _b, _c, _d, _e;
|
|
21
|
+
var videoElement = instance.getVideoElement();
|
|
22
|
+
if (videoElement === null) {
|
|
23
|
+
// disposed player. Clean-up everything
|
|
24
|
+
generalInfoElt.innerHTML = "";
|
|
25
|
+
adaptationsElt.innerHTML = "";
|
|
26
|
+
representationsElt.innerHTML = "";
|
|
27
|
+
clearInterval(generalInfoItv);
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
var currentTime = instance.getPosition();
|
|
32
|
+
var bufferGap = instance.getCurrentBufferGap();
|
|
33
|
+
var bufferGapStr = bufferGap === Infinity ? "0" : bufferGap.toFixed(2);
|
|
34
|
+
var valuesLine1 = [
|
|
35
|
+
["ct", currentTime.toFixed(2)],
|
|
36
|
+
["bg", bufferGapStr],
|
|
37
|
+
["rs", String(videoElement.readyState)],
|
|
38
|
+
["pr", String(videoElement.playbackRate)],
|
|
39
|
+
["sp", String(instance.getPlaybackRate())],
|
|
40
|
+
["pa", String(videoElement.paused ? 1 : 0)],
|
|
41
|
+
["en", String(videoElement.ended ? 1 : 0)],
|
|
42
|
+
["li", String(instance.isLive() ? 1 : 0)],
|
|
43
|
+
["wba", String(instance.getWantedBufferAhead())],
|
|
44
|
+
["st", "\"".concat(instance.getPlayerState(), "\"")],
|
|
45
|
+
];
|
|
46
|
+
var valuesLine2 = [];
|
|
47
|
+
var ks = instance.getKeySystemConfiguration();
|
|
48
|
+
if (ks !== null) {
|
|
49
|
+
valuesLine2.push(["ks", ks.keySystem]);
|
|
50
|
+
}
|
|
51
|
+
var mbb = instance.getMaxBufferBehind();
|
|
52
|
+
if (mbb !== Infinity) {
|
|
53
|
+
valuesLine2.push(["mbb", String(mbb)]);
|
|
54
|
+
}
|
|
55
|
+
var mba = instance.getMaxBufferAhead();
|
|
56
|
+
if (mba !== Infinity) {
|
|
57
|
+
valuesLine2.push(["mba", String(mba)]);
|
|
58
|
+
}
|
|
59
|
+
var mbs = instance.getMaxVideoBufferSize();
|
|
60
|
+
if (mbs !== Infinity) {
|
|
61
|
+
valuesLine2.push(["mbs", String(mbs)]);
|
|
62
|
+
}
|
|
63
|
+
var minPos = instance.getMinimumPosition();
|
|
64
|
+
if (minPos !== null) {
|
|
65
|
+
valuesLine1.push(["mip", minPos.toFixed(2)]);
|
|
66
|
+
valuesLine2.push(["dmi", (currentTime - minPos).toFixed(2)]);
|
|
67
|
+
}
|
|
68
|
+
var maxPos = instance.getMaximumPosition();
|
|
69
|
+
if (maxPos !== null) {
|
|
70
|
+
valuesLine1.push(["map", maxPos.toFixed(2)]);
|
|
71
|
+
valuesLine2.push(["dma", (maxPos - currentTime).toFixed(2)]);
|
|
72
|
+
}
|
|
73
|
+
var valuesLine3 = [];
|
|
74
|
+
var error = instance.getError();
|
|
75
|
+
if (error !== null) {
|
|
76
|
+
valuesLine3.push(["er", "\"".concat(String(error), "\"")]);
|
|
77
|
+
}
|
|
78
|
+
generalInfoElt.innerHTML = "";
|
|
79
|
+
for (var _i = 0, _f = [valuesLine1, valuesLine2, valuesLine3]; _i < _f.length; _i++) {
|
|
80
|
+
var valueSet = _f[_i];
|
|
81
|
+
if (valueSet.length > 0) {
|
|
82
|
+
var lineInfoElt = createElement("div");
|
|
83
|
+
for (var _g = 0, valueSet_1 = valueSet; _g < valueSet_1.length; _g++) {
|
|
84
|
+
var value = valueSet_1[_g];
|
|
85
|
+
lineInfoElt.appendChild(createMetricTitle(value[0]));
|
|
86
|
+
lineInfoElt.appendChild(createElement("span", {
|
|
87
|
+
textContent: value[1] + " ",
|
|
88
|
+
}));
|
|
89
|
+
}
|
|
90
|
+
generalInfoElt.appendChild(lineInfoElt);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
if (isExtendedMode(parentElt)) {
|
|
94
|
+
var url = (_a = instance.getContentUrls()) === null || _a === void 0 ? void 0 : _a[0];
|
|
95
|
+
if (url !== undefined) {
|
|
96
|
+
var reducedUrl = url.length > 100 ?
|
|
97
|
+
url.substring(0, 99) + "…" :
|
|
98
|
+
url;
|
|
99
|
+
generalInfoElt.appendChild(createCompositeElement("div", [
|
|
100
|
+
createMetricTitle("url"),
|
|
101
|
+
createElement("span", {
|
|
102
|
+
textContent: reducedUrl,
|
|
103
|
+
}),
|
|
104
|
+
]));
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
if (isExtendedMode(parentElt)) {
|
|
109
|
+
var videoId = instance.getAvailableVideoTracks().map(function (_a) {
|
|
110
|
+
var id = _a.id, active = _a.active;
|
|
111
|
+
return active ? "*".concat(id) : id;
|
|
112
|
+
});
|
|
113
|
+
var audioId = instance.getAvailableAudioTracks().map(function (_a) {
|
|
114
|
+
var id = _a.id, active = _a.active;
|
|
115
|
+
return active ? "*".concat(id) : id;
|
|
116
|
+
});
|
|
117
|
+
var textId = instance.getAvailableTextTracks().map(function (_a) {
|
|
118
|
+
var id = _a.id, active = _a.active;
|
|
119
|
+
return active ? "*".concat(id) : id;
|
|
120
|
+
});
|
|
121
|
+
adaptationsElt.innerHTML = "";
|
|
122
|
+
if (videoId.length > 0) {
|
|
123
|
+
var textContent = "".concat(videoId.length, ":").concat(videoId.join(" "), " ");
|
|
124
|
+
if (textContent.length > 100) {
|
|
125
|
+
textContent = textContent.substring(0, 98) + "… ";
|
|
126
|
+
}
|
|
127
|
+
var videoAdaps = createCompositeElement("div", [
|
|
128
|
+
createMetricTitle("vt"),
|
|
129
|
+
createElement("span", { textContent: textContent }),
|
|
130
|
+
]);
|
|
131
|
+
adaptationsElt.appendChild(videoAdaps);
|
|
132
|
+
}
|
|
133
|
+
if (audioId.length > 0) {
|
|
134
|
+
var textContent = "".concat(audioId.length, ":").concat(audioId.join(" "), " ");
|
|
135
|
+
if (textContent.length > 100) {
|
|
136
|
+
textContent = textContent.substring(0, 98) + "… ";
|
|
137
|
+
}
|
|
138
|
+
var audioAdaps = createCompositeElement("div", [
|
|
139
|
+
createMetricTitle("at"),
|
|
140
|
+
createElement("span", { textContent: textContent }),
|
|
141
|
+
]);
|
|
142
|
+
adaptationsElt.appendChild(audioAdaps);
|
|
143
|
+
}
|
|
144
|
+
if (textId.length > 0) {
|
|
145
|
+
var textContent = "".concat(textId.length, ":").concat(textId.join(" "), " ");
|
|
146
|
+
if (textContent.length > 100) {
|
|
147
|
+
textContent = textContent.substring(0, 98) + "… ";
|
|
148
|
+
}
|
|
149
|
+
var textAdaps = createCompositeElement("div", [
|
|
150
|
+
createMetricTitle("tt"),
|
|
151
|
+
createElement("span", { textContent: textContent }),
|
|
152
|
+
]);
|
|
153
|
+
adaptationsElt.appendChild(textAdaps);
|
|
154
|
+
}
|
|
155
|
+
var videoBitrates = (_c = (_b = instance.getVideoTrack()) === null || _b === void 0 ? void 0 : _b.representations.map(function (r) {
|
|
156
|
+
return r.bitrate;
|
|
157
|
+
}).filter(function (bitrate) { return bitrate !== undefined; })) !== null && _c !== void 0 ? _c : [];
|
|
158
|
+
var audioBitrates = (_e = (_d = instance.getAudioTrack()) === null || _d === void 0 ? void 0 : _d.representations.map(function (r) {
|
|
159
|
+
return r.bitrate;
|
|
160
|
+
}).filter(function (bitrate) { return bitrate !== undefined; })) !== null && _e !== void 0 ? _e : [];
|
|
161
|
+
representationsElt.innerHTML = "";
|
|
162
|
+
if (videoBitrates.length > 0) {
|
|
163
|
+
representationsElt.appendChild(createMetricTitle("vb"));
|
|
164
|
+
representationsElt.appendChild(createElement("span", {
|
|
165
|
+
textContent: videoBitrates.join(" ") + " ",
|
|
166
|
+
}));
|
|
167
|
+
}
|
|
168
|
+
if (audioBitrates.length > 0) {
|
|
169
|
+
representationsElt.appendChild(createMetricTitle("ab"));
|
|
170
|
+
representationsElt.appendChild(createElement("span", {
|
|
171
|
+
textContent: audioBitrates.join(" ") + " ",
|
|
172
|
+
}));
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
else {
|
|
176
|
+
adaptationsElt.innerHTML = "";
|
|
177
|
+
representationsElt.innerHTML = "";
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { CancellationSignal } from "../../../../utils/task_canceller";
|
|
2
|
+
import { IBufferType } from "../../../segment_buffers";
|
|
3
|
+
import RxPlayer from "../../public_api";
|
|
4
|
+
export default function createSegmentBufferGraph(instance: RxPlayer, bufferType: IBufferType, title: string, parentElt: HTMLElement, cancelSignal: CancellationSignal): HTMLElement;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import isNullOrUndefined from "../../../../utils/is_null_or_undefined";
|
|
2
|
+
import SegmentBufferGraph from "../buffer_graph";
|
|
3
|
+
import { DEFAULT_REFRESH_INTERVAL } from "../constants";
|
|
4
|
+
import { createElement, createGraphCanvas, createMetricTitle, isExtendedMode, } from "../utils";
|
|
5
|
+
export default function createSegmentBufferGraph(instance, bufferType, title, parentElt, cancelSignal) {
|
|
6
|
+
var bufferGraphWrapper = createElement("div");
|
|
7
|
+
var bufferTitle = createMetricTitle(title);
|
|
8
|
+
var canvasElt = createGraphCanvas();
|
|
9
|
+
var currentRangeRepInfoElt = createElement("div");
|
|
10
|
+
var loadingRangeRepInfoElt = createElement("div");
|
|
11
|
+
var bufferGraph = new SegmentBufferGraph(canvasElt);
|
|
12
|
+
var intervalId = setInterval(update, DEFAULT_REFRESH_INTERVAL);
|
|
13
|
+
cancelSignal.register(function () {
|
|
14
|
+
clearInterval(intervalId);
|
|
15
|
+
});
|
|
16
|
+
bufferGraphWrapper.appendChild(bufferTitle);
|
|
17
|
+
bufferGraphWrapper.appendChild(canvasElt);
|
|
18
|
+
bufferGraphWrapper.appendChild(currentRangeRepInfoElt);
|
|
19
|
+
bufferGraphWrapper.appendChild(loadingRangeRepInfoElt);
|
|
20
|
+
bufferGraphWrapper.style.padding = "5px 0px";
|
|
21
|
+
update();
|
|
22
|
+
return bufferGraphWrapper;
|
|
23
|
+
function update() {
|
|
24
|
+
var _a, _b, _c, _d;
|
|
25
|
+
if (instance.getVideoElement() === null) {
|
|
26
|
+
// disposed player. Clean-up everything
|
|
27
|
+
bufferGraphWrapper.style.display = "none";
|
|
28
|
+
bufferGraphWrapper.innerHTML = "";
|
|
29
|
+
clearInterval(intervalId);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
var showAllInfo = isExtendedMode(parentElt);
|
|
33
|
+
var inventory = instance.__priv_getSegmentBufferContent(bufferType);
|
|
34
|
+
if (inventory === null) {
|
|
35
|
+
bufferGraphWrapper.style.display = "none";
|
|
36
|
+
currentRangeRepInfoElt.innerHTML = "";
|
|
37
|
+
loadingRangeRepInfoElt.innerHTML = "";
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
bufferGraphWrapper.style.display = "block";
|
|
41
|
+
var currentTime = instance.getPosition();
|
|
42
|
+
var width = Math.min(parentElt.clientWidth - 150, 600);
|
|
43
|
+
bufferGraph.update({
|
|
44
|
+
currentTime: currentTime,
|
|
45
|
+
minimumPosition: (_a = instance.getMinimumPosition()) !== null && _a !== void 0 ? _a : undefined,
|
|
46
|
+
maximumPosition: (_b = instance.getMaximumPosition()) !== null && _b !== void 0 ? _b : undefined,
|
|
47
|
+
inventory: inventory,
|
|
48
|
+
width: width,
|
|
49
|
+
height: 10,
|
|
50
|
+
});
|
|
51
|
+
if (!showAllInfo) {
|
|
52
|
+
currentRangeRepInfoElt.innerHTML = "";
|
|
53
|
+
loadingRangeRepInfoElt.innerHTML = "";
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
currentRangeRepInfoElt.innerHTML = "";
|
|
57
|
+
for (var i = 0; i < inventory.length; i++) {
|
|
58
|
+
var rangeInfo = inventory[i];
|
|
59
|
+
var bufferedStart = rangeInfo.bufferedStart, bufferedEnd = rangeInfo.bufferedEnd, infos = rangeInfo.infos;
|
|
60
|
+
if (bufferedStart !== undefined && bufferedEnd !== undefined &&
|
|
61
|
+
currentTime >= bufferedStart && currentTime < bufferedEnd) {
|
|
62
|
+
currentRangeRepInfoElt.appendChild(createMetricTitle("play"));
|
|
63
|
+
currentRangeRepInfoElt.appendChild(createElement("span", {
|
|
64
|
+
textContent: constructRepresentationInfo(infos),
|
|
65
|
+
}));
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
loadingRangeRepInfoElt.innerHTML = "";
|
|
70
|
+
var rep = (_c = instance.__priv_getCurrentRepresentations()) === null || _c === void 0 ? void 0 : _c[bufferType];
|
|
71
|
+
var adap = (_d = instance.__priv_getCurrentAdaptation()) === null || _d === void 0 ? void 0 : _d[bufferType];
|
|
72
|
+
var manifest = instance.__priv_getManifest();
|
|
73
|
+
if (manifest !== null && !isNullOrUndefined(rep) && !isNullOrUndefined(adap)) {
|
|
74
|
+
var period = manifest.getPeriodForTime(currentTime);
|
|
75
|
+
if (period !== undefined) {
|
|
76
|
+
loadingRangeRepInfoElt.appendChild(createMetricTitle("load"));
|
|
77
|
+
loadingRangeRepInfoElt.appendChild(createElement("span", {
|
|
78
|
+
textContent: constructRepresentationInfo({
|
|
79
|
+
period: period,
|
|
80
|
+
adaptation: adap,
|
|
81
|
+
representation: rep,
|
|
82
|
+
}),
|
|
83
|
+
}));
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
function constructRepresentationInfo(content) {
|
|
90
|
+
var _a;
|
|
91
|
+
var period = content.period;
|
|
92
|
+
var _b = content.adaptation, language = _b.language, isAudioDescription = _b.isAudioDescription, isClosedCaption = _b.isClosedCaption, isTrickModeTrack = _b.isTrickModeTrack, isSignInterpreted = _b.isSignInterpreted, bufferType = _b.type;
|
|
93
|
+
var _c = content.representation, id = _c.id, height = _c.height, width = _c.width, bitrate = _c.bitrate, codec = _c.codec;
|
|
94
|
+
var representationInfo = "\"".concat(id, "\" ");
|
|
95
|
+
if (height !== undefined && width !== undefined) {
|
|
96
|
+
representationInfo += "".concat(width, "x").concat(height, " ");
|
|
97
|
+
}
|
|
98
|
+
if (bitrate !== undefined) {
|
|
99
|
+
representationInfo += "(".concat((bitrate / 1000).toFixed(0), "kbps) ");
|
|
100
|
+
}
|
|
101
|
+
if (codec !== undefined) {
|
|
102
|
+
representationInfo += "c:\"".concat(codec, "\" ");
|
|
103
|
+
}
|
|
104
|
+
if (language !== undefined) {
|
|
105
|
+
representationInfo += "l:\"".concat(language, "\" ");
|
|
106
|
+
}
|
|
107
|
+
if (bufferType === "video" && typeof isSignInterpreted === "boolean") {
|
|
108
|
+
representationInfo += "si:".concat(isSignInterpreted ? 1 : 0, " ");
|
|
109
|
+
}
|
|
110
|
+
if (bufferType === "video" && typeof isTrickModeTrack === "boolean") {
|
|
111
|
+
representationInfo += "tm:".concat(isTrickModeTrack ? 1 : 0, " ");
|
|
112
|
+
}
|
|
113
|
+
if (bufferType === "audio" && typeof isAudioDescription === "boolean") {
|
|
114
|
+
representationInfo += "ad:".concat(isAudioDescription ? 1 : 0, " ");
|
|
115
|
+
}
|
|
116
|
+
if (bufferType === "text" && typeof isClosedCaption === "boolean") {
|
|
117
|
+
representationInfo += "cc:".concat(isClosedCaption ? 1 : 0, " ");
|
|
118
|
+
}
|
|
119
|
+
representationInfo += "p:".concat(period.start, "-").concat((_a = period.end) !== null && _a !== void 0 ? _a : "?");
|
|
120
|
+
return representationInfo;
|
|
121
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import BufferSizeGraph from "../buffer_size_graph";
|
|
2
|
+
import { DEFAULT_REFRESH_INTERVAL } from "../constants";
|
|
3
|
+
import { createElement, createGraphCanvas, createMetricTitle, } from "../utils";
|
|
4
|
+
export default function createSegmentBufferSizeGraph(instance, parentElt, cancelSignal) {
|
|
5
|
+
var bufferSizeGraphWrapperElt = createElement("div");
|
|
6
|
+
var bufferSizeTitle = createMetricTitle("bgap");
|
|
7
|
+
var canvasElt = createGraphCanvas();
|
|
8
|
+
var bufferSizeGraph = new BufferSizeGraph(canvasElt);
|
|
9
|
+
var intervalId = setInterval(addBufferSize, DEFAULT_REFRESH_INTERVAL);
|
|
10
|
+
cancelSignal.register(function () {
|
|
11
|
+
clearInterval(intervalId);
|
|
12
|
+
});
|
|
13
|
+
bufferSizeGraphWrapperElt.appendChild(bufferSizeTitle);
|
|
14
|
+
bufferSizeGraphWrapperElt.appendChild(canvasElt);
|
|
15
|
+
bufferSizeGraphWrapperElt.style.padding = "7px 0px";
|
|
16
|
+
addBufferSize();
|
|
17
|
+
return bufferSizeGraphWrapperElt;
|
|
18
|
+
function addBufferSize() {
|
|
19
|
+
if (instance.getVideoElement() === null) {
|
|
20
|
+
// disposed player. Clean-up everything
|
|
21
|
+
bufferSizeGraphWrapperElt.innerHTML = "";
|
|
22
|
+
clearInterval(intervalId);
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
var bufferGap = instance.getCurrentBufferGap();
|
|
26
|
+
if (bufferGap === Infinity) {
|
|
27
|
+
bufferSizeGraph.pushBufferSize(0);
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
bufferSizeGraph.pushBufferSize(bufferGap);
|
|
31
|
+
}
|
|
32
|
+
var width = Math.min(parentElt.clientWidth - 150, 600);
|
|
33
|
+
bufferSizeGraph.reRender(width, 10);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import constructDebugGeneralInfo from "./modules/general_info";
|
|
2
|
+
import createSegmentBufferGraph from "./modules/segment_buffer_content";
|
|
3
|
+
import createSegmentBufferSizeGraph from "./modules/segment_buffer_size";
|
|
4
|
+
import { createCompositeElement, createElement } from "./utils";
|
|
5
|
+
export default function renderDebugElement(parentElt, instance, cancelSignal) {
|
|
6
|
+
var debugElementTitleElt = createElement("div", {
|
|
7
|
+
textContent: "RxPlayer Debug Information",
|
|
8
|
+
});
|
|
9
|
+
debugElementTitleElt.style.fontWeight = "bold";
|
|
10
|
+
debugElementTitleElt.style.borderBottom = "1px solid white";
|
|
11
|
+
debugElementTitleElt.style.marginBottom = "5px";
|
|
12
|
+
debugElementTitleElt.style.fontStyle = "italic";
|
|
13
|
+
var debugWrapperElt = createCompositeElement("div", [
|
|
14
|
+
debugElementTitleElt,
|
|
15
|
+
constructDebugGeneralInfo(instance, parentElt, cancelSignal),
|
|
16
|
+
createSegmentBufferGraph(instance, "video", "vbuf", parentElt, cancelSignal),
|
|
17
|
+
createSegmentBufferGraph(instance, "audio", "abuf", parentElt, cancelSignal),
|
|
18
|
+
createSegmentBufferGraph(instance, "text", "tbuf", parentElt, cancelSignal),
|
|
19
|
+
createSegmentBufferSizeGraph(instance, parentElt, cancelSignal),
|
|
20
|
+
]);
|
|
21
|
+
debugWrapperElt.style.backgroundColor = "#00000099";
|
|
22
|
+
debugWrapperElt.style.padding = "7px";
|
|
23
|
+
debugWrapperElt.style.fontSize = "13px";
|
|
24
|
+
debugWrapperElt.style.fontFamily = "mono";
|
|
25
|
+
debugWrapperElt.style.color = "white";
|
|
26
|
+
debugWrapperElt.style.display = "inline-block";
|
|
27
|
+
debugWrapperElt.style.bottom = "0px";
|
|
28
|
+
parentElt.appendChild(debugWrapperElt);
|
|
29
|
+
cancelSignal.register(function () {
|
|
30
|
+
parentElt.removeChild(debugWrapperElt);
|
|
31
|
+
});
|
|
32
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Create an HTML element.
|
|
3
|
+
* @param {string} elementName - The element's name, like `"div"` for example.
|
|
4
|
+
* @param {Object} [options={}] - Optional attributes for the element.
|
|
5
|
+
* @param {string} [options.textContent] - Inner text for that element.
|
|
6
|
+
* @param {string} [options.className] - Value for a `class` attribute
|
|
7
|
+
* associated to this element.
|
|
8
|
+
* @param {string} [options.href] - Value for a `href` attribute
|
|
9
|
+
* associated to this element.
|
|
10
|
+
* @returns {HTMLElement}
|
|
11
|
+
*/
|
|
12
|
+
export declare function createElement(elementName: "input", opts?: CreateElementOptions | undefined): HTMLInputElement;
|
|
13
|
+
export declare function createElement(elementName: "button", opts?: CreateElementOptions | undefined): HTMLButtonElement;
|
|
14
|
+
export declare function createElement(elementName: "a", opts?: CreateElementOptions | undefined): HTMLLinkElement;
|
|
15
|
+
export declare function createElement(elementName: "canvas", opts?: CreateElementOptions | undefined): HTMLCanvasElement;
|
|
16
|
+
export declare function createElement(elementName: string, opts?: CreateElementOptions | undefined): HTMLElement;
|
|
17
|
+
interface CreateElementOptions {
|
|
18
|
+
textContent?: string | undefined;
|
|
19
|
+
className?: string | undefined;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Create an HTML element which may contain mutiple HTML sub-elements.
|
|
23
|
+
* @param {string} rootElementName - The element's name, like `"div"` for
|
|
24
|
+
* example.
|
|
25
|
+
* @param {Array.<string|HTMLElement>} parts - The HTML sub-elements, in order.
|
|
26
|
+
* Those can also just be strings, in which case only text nodes (and no actual
|
|
27
|
+
* HTMLElement) will be added at this place.
|
|
28
|
+
* @param {Object} [options={}] - Optional attributes for the element.
|
|
29
|
+
* @param {string} [options.className] - Value for a `class` attribute
|
|
30
|
+
* associated to this element.
|
|
31
|
+
* @returns {HTMLElement}
|
|
32
|
+
*/
|
|
33
|
+
export declare function createCompositeElement(rootElementName: string, parts: Array<HTMLElement | string>, { className }?: {
|
|
34
|
+
className?: string;
|
|
35
|
+
} | undefined): HTMLElement;
|
|
36
|
+
export declare function isExtendedMode(parentElt: HTMLElement): boolean;
|
|
37
|
+
export declare function createMetricTitle(title: string): HTMLElement;
|
|
38
|
+
export declare function createGraphCanvas(): HTMLCanvasElement;
|
|
39
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
export function createElement(elementName, _a) {
|
|
2
|
+
var _b = _a === void 0 ? {} : _a, textContent = _b.textContent, className = _b.className;
|
|
3
|
+
var elt = document.createElement(elementName);
|
|
4
|
+
if (className !== undefined) {
|
|
5
|
+
elt.className = className;
|
|
6
|
+
}
|
|
7
|
+
if (textContent !== undefined) {
|
|
8
|
+
elt.textContent = textContent;
|
|
9
|
+
}
|
|
10
|
+
return elt;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Create an HTML element which may contain mutiple HTML sub-elements.
|
|
14
|
+
* @param {string} rootElementName - The element's name, like `"div"` for
|
|
15
|
+
* example.
|
|
16
|
+
* @param {Array.<string|HTMLElement>} parts - The HTML sub-elements, in order.
|
|
17
|
+
* Those can also just be strings, in which case only text nodes (and no actual
|
|
18
|
+
* HTMLElement) will be added at this place.
|
|
19
|
+
* @param {Object} [options={}] - Optional attributes for the element.
|
|
20
|
+
* @param {string} [options.className] - Value for a `class` attribute
|
|
21
|
+
* associated to this element.
|
|
22
|
+
* @returns {HTMLElement}
|
|
23
|
+
*/
|
|
24
|
+
export function createCompositeElement(rootElementName, parts, _a) {
|
|
25
|
+
var _b = _a === void 0 ? {} : _a, className = _b.className;
|
|
26
|
+
var elt = document.createElement(rootElementName);
|
|
27
|
+
if (className !== undefined) {
|
|
28
|
+
elt.className = className;
|
|
29
|
+
}
|
|
30
|
+
for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
|
|
31
|
+
var subElt = parts_1[_i];
|
|
32
|
+
if (typeof subElt === "string") {
|
|
33
|
+
elt.appendChild(document.createTextNode(subElt));
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
elt.appendChild(subElt);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return elt;
|
|
40
|
+
}
|
|
41
|
+
export function isExtendedMode(parentElt) {
|
|
42
|
+
return parentElt.clientHeight > 400;
|
|
43
|
+
}
|
|
44
|
+
export function createMetricTitle(title) {
|
|
45
|
+
var elt = createElement("span", {
|
|
46
|
+
textContent: title + "/",
|
|
47
|
+
});
|
|
48
|
+
elt.style.fontWeight = "bold";
|
|
49
|
+
return elt;
|
|
50
|
+
}
|
|
51
|
+
export function createGraphCanvas() {
|
|
52
|
+
var canvasElt = createElement("canvas");
|
|
53
|
+
canvasElt.style.border = "1px solid white";
|
|
54
|
+
canvasElt.style.height = "15px";
|
|
55
|
+
canvasElt.style.marginLeft = "2px";
|
|
56
|
+
return canvasElt;
|
|
57
|
+
}
|
|
@@ -154,7 +154,7 @@ var PlaybackObserver = /** @class */ (function () {
|
|
|
154
154
|
*/
|
|
155
155
|
PlaybackObserver.prototype.listen = function (cb, options) {
|
|
156
156
|
var _a;
|
|
157
|
-
if (this._canceller.isUsed || ((_a = options === null || options === void 0 ? void 0 : options.clearSignal) === null || _a === void 0 ? void 0 : _a.isCancelled) === true) {
|
|
157
|
+
if (this._canceller.isUsed() || ((_a = options === null || options === void 0 ? void 0 : options.clearSignal) === null || _a === void 0 ? void 0 : _a.isCancelled()) === true) {
|
|
158
158
|
return noop;
|
|
159
159
|
}
|
|
160
160
|
this._observationRef.onUpdate(cb, {
|
|
@@ -565,7 +565,8 @@ function generateReadOnlyObserver(src, transform, cancellationSignal) {
|
|
|
565
565
|
},
|
|
566
566
|
listen: function (cb, options) {
|
|
567
567
|
var _a;
|
|
568
|
-
if (cancellationSignal.isCancelled
|
|
568
|
+
if (cancellationSignal.isCancelled() ||
|
|
569
|
+
((_a = options === null || options === void 0 ? void 0 : options.clearSignal) === null || _a === void 0 ? void 0 : _a.isCancelled()) === true) {
|
|
569
570
|
return;
|
|
570
571
|
}
|
|
571
572
|
mappedRef.onUpdate(cb, {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
16
|
import { IErrorCode, IErrorType } from "../../errors";
|
|
17
|
-
import Manifest from "../../manifest";
|
|
17
|
+
import Manifest, { Adaptation, Representation } from "../../manifest";
|
|
18
18
|
import { IAudioRepresentation, IAudioTrack, IAudioTrackSetting, IAvailableAudioTrack, IAvailableTextTrack, IAvailableVideoTrack, IBrokenRepresentationsLockContext, IConstructorOptions, IKeySystemConfigurationOutput, ILoadVideoOptions, ILockedAudioRepresentationsSettings, ILockedVideoRepresentationsSettings, ITrackUpdateEventPayload, IPeriod, IPeriodChangeEvent, IPlayerError, IPlayerState, IPositionUpdate, IStreamEvent, ITextTrack, IVideoRepresentation, ITextTrackSetting, IVideoTrack, IVideoTrackSetting } from "../../public_types";
|
|
19
19
|
import EventEmitter, { IListener } from "../../utils/event_emitter";
|
|
20
20
|
import Logger from "../../utils/logger";
|
|
@@ -151,6 +151,9 @@ declare class Player extends EventEmitter<IPublicAPIEvent> {
|
|
|
151
151
|
};
|
|
152
152
|
autoPlay?: boolean;
|
|
153
153
|
}): void;
|
|
154
|
+
createDebugElement(element: HTMLElement): {
|
|
155
|
+
dispose(): void;
|
|
156
|
+
};
|
|
154
157
|
/**
|
|
155
158
|
* From given options, initialize content playback.
|
|
156
159
|
* @param {Object} options
|
|
@@ -539,6 +542,8 @@ declare class Player extends EventEmitter<IPublicAPIEvent> {
|
|
|
539
542
|
* @returns {Manifest|null} - The current Manifest (`null` when not known).
|
|
540
543
|
*/
|
|
541
544
|
__priv_getManifest(): Manifest | null;
|
|
545
|
+
__priv_getCurrentAdaptation(): Partial<Record<IBufferType, Adaptation | null>> | null;
|
|
546
|
+
__priv_getCurrentRepresentations(): Partial<Record<IBufferType, Representation | null>> | null;
|
|
542
547
|
/**
|
|
543
548
|
* Reset all state properties relative to a playing content.
|
|
544
549
|
*/
|
|
@@ -613,7 +618,6 @@ declare class Player extends EventEmitter<IPublicAPIEvent> {
|
|
|
613
618
|
* @param {Object} observation
|
|
614
619
|
*/
|
|
615
620
|
private _priv_triggerPositionUpdate;
|
|
616
|
-
private _priv_getCurrentRepresentations;
|
|
617
621
|
/**
|
|
618
622
|
* @param {string} evt
|
|
619
623
|
* @param {*} arg
|