mpegts-vue3 0.3.2 → 0.4.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 (6) hide show
  1. package/README.md +252 -0
  2. package/dist/index.cjs +283 -60
  3. package/dist/index.d.cts +45 -6
  4. package/dist/index.d.ts +45 -6
  5. package/dist/index.js +281 -65
  6. package/package.json +7 -3
package/dist/index.cjs CHANGED
@@ -23,20 +23,31 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
23
23
  //#endregion
24
24
  let vue = require("vue");
25
25
  let mpegts_js = require("mpegts.js");
26
+ __toESM(mpegts_js, 1);
26
27
  mpegts_js = __toESM(mpegts_js);
27
28
  //#region src/components/MpegtsPlayer.vue
28
- const _hoisted_1 = { class: "relative w-full h-full bg-black overflow-hidden" };
29
- const _hoisted_2 = {
30
- key: 0,
31
- class: "absolute inset-0 flex flex-col items-center justify-center bg-gray-900/90"
32
- };
33
- const _hoisted_3 = {
34
- key: 1,
35
- class: "absolute inset-0 flex items-center justify-center bg-black/60"
29
+ const _hoisted_1 = {
30
+ style: {
31
+ width: "2.5rem",
32
+ height: "2.5rem",
33
+ marginBottom: "0.75rem",
34
+ color: "#9ca3af"
35
+ },
36
+ fill: "none",
37
+ stroke: "currentColor",
38
+ "stroke-width": "1.5",
39
+ viewBox: "0 0 24 24"
36
40
  };
37
- const _hoisted_4 = {
38
- key: 2,
39
- class: "absolute inset-0 flex items-center justify-center bg-black/60"
41
+ const _hoisted_2 = {
42
+ style: {
43
+ width: "2rem",
44
+ height: "2rem",
45
+ color: "#f87171"
46
+ },
47
+ fill: "none",
48
+ stroke: "currentColor",
49
+ "stroke-width": "1.5",
50
+ viewBox: "0 0 24 24"
40
51
  };
41
52
  const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
42
53
  __name: "MpegtsPlayer",
@@ -68,11 +79,33 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
68
79
  },
69
80
  duration: {},
70
81
  filesize: {},
71
- config: { default: () => ({}) }
82
+ showLoading: {
83
+ type: Boolean,
84
+ default: true
85
+ },
86
+ config: { default: () => ({}) },
87
+ autoReconnect: {
88
+ type: Boolean,
89
+ default: true
90
+ },
91
+ reconnect: { default: () => ({
92
+ retries: 5,
93
+ minDelay: 1e3,
94
+ maxDelay: 16e3
95
+ }) }
72
96
  },
73
- emits: ["error", "status"],
97
+ emits: [
98
+ "error",
99
+ "status",
100
+ "statistics",
101
+ "mediaInfo",
102
+ "recovered",
103
+ "ended"
104
+ ],
74
105
  setup(__props, { expose: __expose, emit: __emit }) {
75
106
  const DEFAULT_CONFIG = {
107
+ enableWorker: true,
108
+ reuseRedirectedURL: true,
76
109
  enableStashBuffer: false,
77
110
  liveBufferLatencyChasing: true,
78
111
  liveBufferLatencyChasingOnPaused: true,
@@ -86,15 +119,135 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
86
119
  autoCleanupMinBackwardDuration: 10,
87
120
  fixAudioTimestampGap: true
88
121
  };
122
+ const MSE_REQUIRED_TYPES = [
123
+ "mse",
124
+ "mpegts",
125
+ "m2ts",
126
+ "flv"
127
+ ];
89
128
  const props = __props;
90
129
  const emit = __emit;
91
130
  const videoRef = (0, vue.ref)();
92
131
  const status = (0, vue.ref)("nosignal");
93
132
  let player = null;
94
- const videoStyle = (0, vue.computed)(() => ({ objectFit: props.objectFit ?? "fill" }));
95
- function destroyPlayer() {
133
+ let gen = 0;
134
+ let recreateTimer = null;
135
+ function scheduleRecreate() {
136
+ if (recreateTimer) clearTimeout(recreateTimer);
137
+ recreateTimer = setTimeout(() => {
138
+ recreateTimer = null;
139
+ createPlayer();
140
+ }, 300);
141
+ }
142
+ const RECONNECTABLE_ERRORS = new Set([
143
+ "Exception",
144
+ "ConnectingTimeout",
145
+ "UnrecoverableEarlyEof"
146
+ ]);
147
+ let reconnectAttempts = 0;
148
+ let reconnectTimer = null;
149
+ function markPlaying() {
150
+ reconnectAttempts = 0;
151
+ status.value = "playing";
152
+ emit("status", "playing");
153
+ }
154
+ function scheduleReconnect() {
155
+ const { retries = 5, minDelay = 1e3, maxDelay = 16e3 } = props.reconnect;
156
+ if (reconnectAttempts >= retries) return false;
157
+ const delay = Math.min(maxDelay, minDelay * 2 ** reconnectAttempts);
158
+ reconnectAttempts++;
159
+ status.value = "reconnecting";
160
+ emit("status", "reconnecting");
161
+ reconnectTimer = setTimeout(() => {
162
+ reconnectTimer = null;
163
+ createPlayer();
164
+ }, delay);
165
+ return true;
166
+ }
167
+ const videoStyle = (0, vue.computed)(() => ({
168
+ position: "absolute",
169
+ inset: 0,
170
+ width: "100%",
171
+ height: "100%",
172
+ objectFit: props.objectFit ?? "fill"
173
+ }));
174
+ const containerStyle = {
175
+ position: "relative",
176
+ width: "100%",
177
+ height: "100%",
178
+ backgroundColor: "#000",
179
+ overflow: "hidden"
180
+ };
181
+ const overlayBase = {
182
+ position: "absolute",
183
+ inset: 0,
184
+ display: "flex",
185
+ alignItems: "center",
186
+ justifyContent: "center"
187
+ };
188
+ const noSignalOverlay = {
189
+ ...overlayBase,
190
+ flexDirection: "column",
191
+ backgroundColor: "rgb(17 24 39 / 0.9)"
192
+ };
193
+ const maskOverlay = {
194
+ ...overlayBase,
195
+ backgroundColor: "rgb(0 0 0 / 0.6)"
196
+ };
197
+ const connectingInner = {
198
+ display: "flex",
199
+ flexDirection: "column",
200
+ alignItems: "center",
201
+ gap: "0.75rem"
202
+ };
203
+ const errorInner = {
204
+ display: "flex",
205
+ flexDirection: "column",
206
+ alignItems: "center",
207
+ gap: "0.5rem"
208
+ };
209
+ const spinnerStyle = {
210
+ width: "2rem",
211
+ height: "2rem",
212
+ borderRadius: "9999px",
213
+ border: "2px solid #3b82f6",
214
+ borderTopColor: "transparent",
215
+ animation: "mpegts-spin 1s linear infinite"
216
+ };
217
+ const noSignalTextStyle = {
218
+ fontSize: "0.875rem",
219
+ fontWeight: 500,
220
+ color: "#9ca3af",
221
+ letterSpacing: "0.05em",
222
+ textTransform: "uppercase"
223
+ };
224
+ const connectingTextStyle = {
225
+ fontSize: "0.875rem",
226
+ color: "#d1d5db"
227
+ };
228
+ const errorTextStyle = {
229
+ fontSize: "0.875rem",
230
+ color: "#f87171"
231
+ };
232
+ let keyframeInjected = false;
233
+ function ensureKeyframe() {
234
+ if (keyframeInjected || typeof document === "undefined") return;
235
+ keyframeInjected = true;
236
+ const el = document.createElement("style");
237
+ el.textContent = "@keyframes mpegts-spin { to { transform: rotate(360deg) } }";
238
+ document.head.appendChild(el);
239
+ }
240
+ function destroyPlayer(silent = false) {
241
+ gen++;
242
+ if (recreateTimer) {
243
+ clearTimeout(recreateTimer);
244
+ recreateTimer = null;
245
+ }
246
+ if (reconnectTimer) {
247
+ clearTimeout(reconnectTimer);
248
+ reconnectTimer = null;
249
+ }
96
250
  if (!player) return;
97
- status.value = "destroying";
98
251
  try {
99
252
  player.pause();
100
253
  player.unload();
@@ -102,23 +255,25 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
102
255
  player.destroy();
103
256
  } catch {}
104
257
  player = null;
105
- status.value = "nosignal";
258
+ if (!silent) {
259
+ status.value = "nosignal";
260
+ emit("status", "nosignal");
261
+ }
106
262
  }
107
263
  function play() {
108
264
  if (!player) return;
265
+ const myGen = gen;
109
266
  videoRef.value.muted = props.muted;
110
267
  const result = player.play();
111
268
  if (result instanceof Promise) result.then(() => {
112
- status.value = "playing";
113
- emit("status", "playing");
269
+ if (myGen !== gen) return;
270
+ markPlaying();
114
271
  }).catch(() => {
272
+ if (myGen !== gen) return;
115
273
  status.value = "stopped";
116
274
  emit("status", "stopped");
117
275
  });
118
- else {
119
- status.value = "playing";
120
- emit("status", "playing");
121
- }
276
+ else markPlaying();
122
277
  }
123
278
  function pause() {
124
279
  if (!player) return;
@@ -126,9 +281,45 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
126
281
  status.value = "stopped";
127
282
  emit("status", "stopped");
128
283
  }
284
+ function reload() {
285
+ createPlayer();
286
+ }
287
+ function setMuted(muted) {
288
+ if (videoRef.value) videoRef.value.muted = muted;
289
+ }
290
+ function getPlayer() {
291
+ return player;
292
+ }
293
+ function getVolume() {
294
+ return videoRef.value?.volume ?? 0;
295
+ }
296
+ function setVolume(volume) {
297
+ if (videoRef.value) videoRef.value.volume = volume;
298
+ }
299
+ function seek(seconds) {
300
+ if (player) player.currentTime = seconds;
301
+ }
302
+ function getCurrentTime() {
303
+ return videoRef.value?.currentTime ?? 0;
304
+ }
305
+ function getBufferedRanges() {
306
+ return videoRef.value?.buffered ?? null;
307
+ }
308
+ function getStatistics() {
309
+ return player?.statisticsInfo ?? null;
310
+ }
129
311
  __expose({
130
312
  play,
131
- pause
313
+ pause,
314
+ reload,
315
+ setMuted,
316
+ getPlayer,
317
+ getVolume,
318
+ setVolume,
319
+ seek,
320
+ getCurrentTime,
321
+ getBufferedRanges,
322
+ getStatistics
132
323
  });
133
324
  function buildMediaDataSource() {
134
325
  const source = {
@@ -139,17 +330,19 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
139
330
  if (props.cors !== void 0) source.cors = props.cors;
140
331
  if (props.withCredentials !== void 0) source.withCredentials = props.withCredentials;
141
332
  source.hasAudio = props.hasAudio;
142
- if (props.hasVideo !== void 0) source.hasVideo = props.hasVideo;
333
+ source.hasVideo = props.hasVideo;
143
334
  if (props.duration !== void 0) source.duration = props.duration;
144
335
  if (props.filesize !== void 0) source.filesize = props.filesize;
145
336
  return source;
146
337
  }
147
338
  function createPlayer() {
148
- destroyPlayer();
339
+ destroyPlayer(true);
340
+ const myGen = gen;
149
341
  if (!props.url || !videoRef.value) return;
150
- if (!mpegts_js.default.isSupported()) {
342
+ if (MSE_REQUIRED_TYPES.includes(props.type) && !mpegts_js.default.isSupported()) {
151
343
  status.value = "error";
152
344
  emit("status", "error");
345
+ emit("error", "NotSupportedError", "MediaSource Extensions (MSE) are not supported by this browser", { type: props.type });
153
346
  return;
154
347
  }
155
348
  status.value = "connecting";
@@ -162,53 +355,63 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
162
355
  player = mpegts_js.default.createPlayer(mediaSource, mergedConfig);
163
356
  player.attachMediaElement(videoRef.value);
164
357
  player.on(mpegts_js.default.Events.ERROR, (errorType, errorDetail, errorInfo) => {
358
+ if (myGen !== gen) return;
359
+ emit("error", errorType, errorDetail, errorInfo);
360
+ if (props.autoReconnect && errorType === "NetworkError" && RECONNECTABLE_ERRORS.has(errorDetail) && scheduleReconnect()) return;
165
361
  status.value = "error";
166
362
  emit("status", "error");
167
- emit("error", errorType, errorDetail, errorInfo);
363
+ });
364
+ player.on(mpegts_js.default.Events.STATISTICS_INFO, (info) => {
365
+ if (myGen !== gen) return;
366
+ emit("statistics", info);
367
+ });
368
+ player.on(mpegts_js.default.Events.MEDIA_INFO, (info) => {
369
+ if (myGen !== gen) return;
370
+ emit("mediaInfo", info);
371
+ });
372
+ player.on(mpegts_js.default.Events.RECOVERED_EARLY_EOF, () => {
373
+ if (myGen !== gen) return;
374
+ emit("recovered");
375
+ });
376
+ player.on(mpegts_js.default.Events.LOADING_COMPLETE, () => {
377
+ if (myGen !== gen) return;
378
+ emit("ended");
168
379
  });
169
380
  player.load();
170
381
  if (props.autoplay) {
171
382
  videoRef.value.muted = props.muted;
172
383
  const result = player.play();
173
384
  if (result instanceof Promise) result.then(() => {
174
- status.value = "playing";
175
- emit("status", "playing");
385
+ if (myGen !== gen) return;
386
+ markPlaying();
176
387
  }).catch(() => {
388
+ if (myGen !== gen) return;
177
389
  if (!props.muted && videoRef.value && player) {
178
390
  videoRef.value.muted = true;
179
391
  const fallbackResult = player.play();
180
392
  if (fallbackResult instanceof Promise) fallbackResult.then(() => {
181
- status.value = "playing";
182
- emit("status", "playing");
393
+ if (myGen !== gen) return;
394
+ markPlaying();
183
395
  }).catch(() => {
396
+ if (myGen !== gen) return;
184
397
  status.value = "stopped";
185
398
  emit("status", "stopped");
186
399
  });
187
- else {
188
- status.value = "playing";
189
- emit("status", "playing");
190
- }
400
+ else markPlaying();
191
401
  } else {
192
402
  status.value = "stopped";
193
403
  emit("status", "stopped");
194
404
  }
195
405
  });
196
- else {
197
- status.value = "playing";
198
- emit("status", "playing");
199
- }
406
+ else markPlaying();
200
407
  }
201
408
  }
202
409
  (0, vue.watch)(() => props.url, (newUrl) => {
203
- if (newUrl) createPlayer();
204
- else {
205
- destroyPlayer();
206
- status.value = "nosignal";
207
- emit("status", "nosignal");
208
- }
410
+ if (newUrl) scheduleRecreate();
411
+ else destroyPlayer();
209
412
  });
210
413
  (0, vue.watch)(() => props.config, () => {
211
- if (props.url) createPlayer();
414
+ if (props.url) scheduleRecreate();
212
415
  }, { deep: true });
213
416
  (0, vue.watch)(() => [
214
417
  props.type,
@@ -220,9 +423,10 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
220
423
  props.duration,
221
424
  props.filesize
222
425
  ], () => {
223
- if (props.url) createPlayer();
426
+ if (props.url) scheduleRecreate();
224
427
  });
225
428
  (0, vue.onMounted)(() => {
429
+ ensureKeyframe();
226
430
  if (props.url) createPlayer();
227
431
  });
228
432
  (0, vue.watch)(() => props.muted, (val) => {
@@ -232,31 +436,50 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
232
436
  destroyPlayer();
233
437
  });
234
438
  return (_ctx, _cache) => {
235
- return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [
439
+ return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
440
+ class: "mpegts-player",
441
+ style: containerStyle
442
+ }, [
236
443
  (0, vue.createElementVNode)("video", {
237
444
  ref_key: "videoRef",
238
445
  ref: videoRef,
239
- class: "absolute inset-0 w-full h-full",
240
446
  style: (0, vue.normalizeStyle)(videoStyle.value),
241
447
  onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"])),
242
448
  onContextmenu: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["prevent"]))
243
449
  }, null, 36),
244
- status.value === "nosignal" || !__props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [..._cache[2] || (_cache[2] = [(0, vue.createStaticVNode)("<div class=\"mb-3 flex items-center gap-2 text-gray-400\"><svg class=\"size-10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\"><path d=\"m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M18 12 6 12M18 8 6 8M18 16l-12 0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></div><span class=\"text-sm font-medium text-gray-400 tracking-wider uppercase\"> No Signal </span>", 2)])])) : (0, vue.createCommentVNode)("v-if", true),
245
- status.value === "connecting" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3, [..._cache[3] || (_cache[3] = [(0, vue.createElementVNode)("div", { class: "flex flex-col items-center gap-3" }, [(0, vue.createElementVNode)("div", { class: "size-8 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" }), (0, vue.createElementVNode)("span", { class: "text-sm text-gray-300" }, "Connecting...")], -1)])])) : (0, vue.createCommentVNode)("v-if", true),
246
- status.value === "error" && __props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("div", { class: "flex flex-col items-center gap-2" }, [(0, vue.createElementVNode)("svg", {
247
- class: "size-8 text-red-400",
248
- fill: "none",
249
- stroke: "currentColor",
250
- "stroke-width": "1.5",
251
- viewBox: "0 0 24 24"
252
- }, [(0, vue.createElementVNode)("path", {
450
+ status.value === "nosignal" || !__props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
451
+ key: 0,
452
+ style: noSignalOverlay
453
+ }, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("path", {
454
+ d: "m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z",
455
+ "stroke-linecap": "round",
456
+ "stroke-linejoin": "round"
457
+ }, null, -1), (0, vue.createElementVNode)("path", {
458
+ d: "M18 12 6 12M18 8 6 8M18 16l-12 0",
459
+ "stroke-linecap": "round",
460
+ "stroke-linejoin": "round"
461
+ }, null, -1)])])), (0, vue.createElementVNode)("span", { style: noSignalTextStyle }, "No Signal")])) : (0, vue.createCommentVNode)("v-if", true),
462
+ status.value === "connecting" && __props.showLoading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
463
+ key: 1,
464
+ style: maskOverlay
465
+ }, [(0, vue.createElementVNode)("div", { style: connectingInner }, [(0, vue.createElementVNode)("div", { style: spinnerStyle }), (0, vue.createElementVNode)("span", { style: connectingTextStyle }, "Connecting...")])])) : (0, vue.createCommentVNode)("v-if", true),
466
+ status.value === "error" && __props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
467
+ key: 2,
468
+ style: maskOverlay
469
+ }, [(0, vue.createElementVNode)("div", { style: errorInner }, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2, [..._cache[3] || (_cache[3] = [(0, vue.createElementVNode)("path", {
253
470
  d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
254
471
  "stroke-linecap": "round",
255
472
  "stroke-linejoin": "round"
256
- })]), (0, vue.createElementVNode)("span", { class: "text-sm text-red-400" }, "Connection Failed")], -1)])])) : (0, vue.createCommentVNode)("v-if", true)
473
+ }, null, -1)])])), (0, vue.createElementVNode)("span", { style: errorTextStyle }, "Connection Failed")])])) : (0, vue.createCommentVNode)("v-if", true)
257
474
  ]);
258
475
  };
259
476
  }
260
477
  });
261
478
  //#endregion
479
+ Object.defineProperty(exports, "Mpegts", {
480
+ enumerable: true,
481
+ get: function() {
482
+ return mpegts_js.default;
483
+ }
484
+ });
262
485
  exports.MpegtsPlayer = _sfc_main;
package/dist/index.d.cts CHANGED
@@ -1,11 +1,18 @@
1
1
  import * as vue0 from "vue";
2
- import Mpegts from "mpegts.js";
2
+ import Mpegts, { default as Mpegts$1 } from "mpegts.js";
3
3
 
4
4
  //#region src/types.d.ts
5
- type MediaDataSource = Mpegts.MediaDataSource;
6
- type MediaSegment = Mpegts.MediaSegment;
7
- type MpegtsConfig = Mpegts.Config;
8
- type PlayerStatus = 'connecting' | 'destroying' | 'error' | 'nosignal' | 'playing' | 'stopped';
5
+ type MediaDataSource = Mpegts$1.MediaDataSource;
6
+ type MediaSegment = Mpegts$1.MediaSegment;
7
+ type MpegtsConfig = Mpegts$1.Config;
8
+ type StatisticsInfo = Mpegts$1.MSEPlayerStatisticsInfo;
9
+ type MediaInfo = Mpegts$1.MSEPlayerMediaInfo;
10
+ interface ReconnectConfig {
11
+ retries?: number;
12
+ minDelay?: number;
13
+ maxDelay?: number;
14
+ }
15
+ type PlayerStatus = 'connecting' | 'reconnecting' | 'error' | 'nosignal' | 'playing' | 'stopped';
9
16
  //#endregion
10
17
  //#region src/components/MpegtsPlayer.vue.d.ts
11
18
  interface Props {
@@ -21,19 +28,48 @@ interface Props {
21
28
  hasVideo?: boolean;
22
29
  duration?: number;
23
30
  filesize?: number;
31
+ showLoading?: boolean;
24
32
  config?: Partial<MpegtsConfig>;
33
+ autoReconnect?: boolean;
34
+ reconnect?: ReconnectConfig;
25
35
  }
26
36
  declare function play(): void;
27
37
  declare function pause(): void;
38
+ declare function reload(): void;
39
+ declare function setMuted(muted: boolean): void;
40
+ declare function getPlayer(): Mpegts$1.Player | null;
41
+ declare function getVolume(): number;
42
+ declare function setVolume(volume: number): void;
43
+ declare function seek(seconds: number): void;
44
+ declare function getCurrentTime(): number;
45
+ declare function getBufferedRanges(): TimeRanges | null;
46
+ declare function getStatistics(): StatisticsInfo | null;
28
47
  declare const _default: vue0.DefineComponent<Props, {
29
48
  play: typeof play;
30
49
  pause: typeof pause;
50
+ reload: typeof reload;
51
+ setMuted: typeof setMuted;
52
+ getPlayer: typeof getPlayer;
53
+ getVolume: typeof getVolume;
54
+ setVolume: typeof setVolume;
55
+ seek: typeof seek;
56
+ getCurrentTime: typeof getCurrentTime;
57
+ getBufferedRanges: typeof getBufferedRanges;
58
+ getStatistics: typeof getStatistics;
31
59
  }, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
32
60
  error: (errorType: string, errorDetail: string, errorInfo: any) => any;
33
61
  status: (status: PlayerStatus) => any;
62
+ statistics: (info: Mpegts$1.MSEPlayerStatisticsInfo) => any;
63
+ mediaInfo: (info: Mpegts$1.MSEPlayerMediaInfo) => any;
64
+ recovered: () => any;
65
+ ended: () => any;
34
66
  }, string, vue0.PublicProps, Readonly<Props> & Readonly<{
35
67
  onError?: ((errorType: string, errorDetail: string, errorInfo: any) => any) | undefined;
36
68
  onStatus?: ((status: PlayerStatus) => any) | undefined;
69
+ onStatistics?: ((info: Mpegts$1.MSEPlayerStatisticsInfo) => any) | undefined;
70
+ onMediaInfo?: ((info: Mpegts$1.MSEPlayerMediaInfo) => any) | undefined;
71
+ onRecovered?: (() => any) | undefined;
72
+ onEnded?: (() => any) | undefined;
37
73
  }>, {
38
74
  autoplay: boolean;
39
75
  isLive: boolean;
@@ -41,7 +77,10 @@ declare const _default: vue0.DefineComponent<Props, {
41
77
  type: string;
42
78
  hasAudio: boolean;
43
79
  hasVideo: boolean;
80
+ showLoading: boolean;
44
81
  config: Partial<MpegtsConfig>;
82
+ autoReconnect: boolean;
83
+ reconnect: ReconnectConfig;
45
84
  }, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
46
85
  //#endregion
47
- export { type MediaDataSource, type MediaSegment, type MpegtsConfig, _default as MpegtsPlayer, type PlayerStatus };
86
+ export { type MediaDataSource, type MediaInfo, type MediaSegment, Mpegts, type MpegtsConfig, _default as MpegtsPlayer, type PlayerStatus, type ReconnectConfig, type StatisticsInfo };
package/dist/index.d.ts CHANGED
@@ -1,11 +1,18 @@
1
1
  import * as vue0 from "vue";
2
- import Mpegts from "mpegts.js";
2
+ import Mpegts, { default as Mpegts$1 } from "mpegts.js";
3
3
 
4
4
  //#region src/types.d.ts
5
- type MediaDataSource = Mpegts.MediaDataSource;
6
- type MediaSegment = Mpegts.MediaSegment;
7
- type MpegtsConfig = Mpegts.Config;
8
- type PlayerStatus = 'connecting' | 'destroying' | 'error' | 'nosignal' | 'playing' | 'stopped';
5
+ type MediaDataSource = Mpegts$1.MediaDataSource;
6
+ type MediaSegment = Mpegts$1.MediaSegment;
7
+ type MpegtsConfig = Mpegts$1.Config;
8
+ type StatisticsInfo = Mpegts$1.MSEPlayerStatisticsInfo;
9
+ type MediaInfo = Mpegts$1.MSEPlayerMediaInfo;
10
+ interface ReconnectConfig {
11
+ retries?: number;
12
+ minDelay?: number;
13
+ maxDelay?: number;
14
+ }
15
+ type PlayerStatus = 'connecting' | 'reconnecting' | 'error' | 'nosignal' | 'playing' | 'stopped';
9
16
  //#endregion
10
17
  //#region src/components/MpegtsPlayer.vue.d.ts
11
18
  interface Props {
@@ -21,19 +28,48 @@ interface Props {
21
28
  hasVideo?: boolean;
22
29
  duration?: number;
23
30
  filesize?: number;
31
+ showLoading?: boolean;
24
32
  config?: Partial<MpegtsConfig>;
33
+ autoReconnect?: boolean;
34
+ reconnect?: ReconnectConfig;
25
35
  }
26
36
  declare function play(): void;
27
37
  declare function pause(): void;
38
+ declare function reload(): void;
39
+ declare function setMuted(muted: boolean): void;
40
+ declare function getPlayer(): Mpegts$1.Player | null;
41
+ declare function getVolume(): number;
42
+ declare function setVolume(volume: number): void;
43
+ declare function seek(seconds: number): void;
44
+ declare function getCurrentTime(): number;
45
+ declare function getBufferedRanges(): TimeRanges | null;
46
+ declare function getStatistics(): StatisticsInfo | null;
28
47
  declare const _default: vue0.DefineComponent<Props, {
29
48
  play: typeof play;
30
49
  pause: typeof pause;
50
+ reload: typeof reload;
51
+ setMuted: typeof setMuted;
52
+ getPlayer: typeof getPlayer;
53
+ getVolume: typeof getVolume;
54
+ setVolume: typeof setVolume;
55
+ seek: typeof seek;
56
+ getCurrentTime: typeof getCurrentTime;
57
+ getBufferedRanges: typeof getBufferedRanges;
58
+ getStatistics: typeof getStatistics;
31
59
  }, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
32
60
  error: (errorType: string, errorDetail: string, errorInfo: any) => any;
33
61
  status: (status: PlayerStatus) => any;
62
+ statistics: (info: Mpegts$1.MSEPlayerStatisticsInfo) => any;
63
+ mediaInfo: (info: Mpegts$1.MSEPlayerMediaInfo) => any;
64
+ recovered: () => any;
65
+ ended: () => any;
34
66
  }, string, vue0.PublicProps, Readonly<Props> & Readonly<{
35
67
  onError?: ((errorType: string, errorDetail: string, errorInfo: any) => any) | undefined;
36
68
  onStatus?: ((status: PlayerStatus) => any) | undefined;
69
+ onStatistics?: ((info: Mpegts$1.MSEPlayerStatisticsInfo) => any) | undefined;
70
+ onMediaInfo?: ((info: Mpegts$1.MSEPlayerMediaInfo) => any) | undefined;
71
+ onRecovered?: (() => any) | undefined;
72
+ onEnded?: (() => any) | undefined;
37
73
  }>, {
38
74
  autoplay: boolean;
39
75
  isLive: boolean;
@@ -41,7 +77,10 @@ declare const _default: vue0.DefineComponent<Props, {
41
77
  type: string;
42
78
  hasAudio: boolean;
43
79
  hasVideo: boolean;
80
+ showLoading: boolean;
44
81
  config: Partial<MpegtsConfig>;
82
+ autoReconnect: boolean;
83
+ reconnect: ReconnectConfig;
45
84
  }, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
46
85
  //#endregion
47
- export { type MediaDataSource, type MediaSegment, type MpegtsConfig, _default as MpegtsPlayer, type PlayerStatus };
86
+ export { type MediaDataSource, type MediaInfo, type MediaSegment, Mpegts, type MpegtsConfig, _default as MpegtsPlayer, type PlayerStatus, type ReconnectConfig, type StatisticsInfo };