@gcorevideo/player 2.22.16 → 2.22.17

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 (74) hide show
  1. package/dist/core.js +6 -8
  2. package/dist/index.css +1338 -1338
  3. package/dist/index.js +361 -439
  4. package/dist/player.d.ts +216 -159
  5. package/dist/plugins/index.css +1463 -1463
  6. package/dist/plugins/index.js +354 -427
  7. package/docs/api/player.clapprstats.exportmetrics.md +1 -1
  8. package/docs/api/player.clapprstats.md +5 -15
  9. package/docs/api/player.clapprstatssettings.md +13 -0
  10. package/docs/api/player.clips.destroy.md +18 -0
  11. package/docs/api/player.clips.disable.md +18 -0
  12. package/docs/api/player.clips.enable.md +18 -0
  13. package/docs/api/player.clips.md +170 -0
  14. package/docs/api/player.clips.render.md +18 -0
  15. package/docs/api/player.clips.supportedversion.md +16 -0
  16. package/docs/api/player.clips.version.md +14 -0
  17. package/docs/api/player.clipspluginsettings.md +2 -2
  18. package/docs/api/player.clipspluginsettings.text.md +1 -1
  19. package/docs/api/player.md +27 -18
  20. package/docs/api/player.mediacontrol.md +1 -1
  21. package/docs/api/{player.mediacontrol.getelement.md → player.mediacontrol.mount.md} +20 -7
  22. package/docs/api/player.mediacontrolleftelement.md +1 -1
  23. package/docs/api/{player.clapprnerdstats._constructor_.md → player.nerdstats._constructor_.md} +3 -3
  24. package/docs/api/{player.clapprnerdstats.md → player.nerdstats.md} +5 -5
  25. package/docs/api/player.qualitylevel.height.md +1 -1
  26. package/docs/api/player.qualitylevel.level.md +1 -1
  27. package/docs/api/player.qualitylevel.md +4 -4
  28. package/docs/api/player.qualitylevel.width.md +1 -1
  29. package/docs/api/player.timeposition.current.md +1 -1
  30. package/docs/api/player.timeposition.md +2 -2
  31. package/docs/api/player.timeposition.total.md +1 -1
  32. package/docs/api/player.timeprogress.md +6 -4
  33. package/docs/api/player.timevalue.md +1 -1
  34. package/lib/index.plugins.d.ts +2 -1
  35. package/lib/index.plugins.d.ts.map +1 -1
  36. package/lib/index.plugins.js +2 -1
  37. package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
  38. package/lib/playback/dash-playback/DashPlayback.js +5 -7
  39. package/lib/playback.types.d.ts +22 -9
  40. package/lib/playback.types.d.ts.map +1 -1
  41. package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts +4 -0
  42. package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts.map +1 -1
  43. package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.js +20 -23
  44. package/lib/plugins/clappr-nerd-stats/NerdStats.d.ts +83 -0
  45. package/lib/plugins/clappr-nerd-stats/NerdStats.d.ts.map +1 -0
  46. package/lib/plugins/clappr-nerd-stats/NerdStats.js +339 -0
  47. package/lib/plugins/clappr-stats/ClapprStats.d.ts +27 -32
  48. package/lib/plugins/clappr-stats/ClapprStats.d.ts.map +1 -1
  49. package/lib/plugins/clappr-stats/ClapprStats.js +94 -202
  50. package/lib/plugins/clappr-stats/types.d.ts +65 -24
  51. package/lib/plugins/clappr-stats/types.d.ts.map +1 -1
  52. package/lib/plugins/clappr-stats/types.js +37 -2
  53. package/lib/plugins/clappr-stats/utils.d.ts.map +1 -1
  54. package/lib/plugins/clappr-stats/utils.js +1 -2
  55. package/lib/testUtils.d.ts +2 -1
  56. package/lib/testUtils.d.ts.map +1 -1
  57. package/lib/testUtils.js +3 -2
  58. package/package.json +1 -1
  59. package/src/index.plugins.ts +2 -1
  60. package/src/playback/dash-playback/DashPlayback.ts +5 -8
  61. package/src/playback.types.ts +23 -8
  62. package/src/plugins/clappr-nerd-stats/{ClapprNerdStats.ts → NerdStats.ts} +25 -30
  63. package/src/plugins/clappr-stats/ClapprStats.ts +242 -306
  64. package/src/plugins/clappr-stats/__tests__/ClapprStats.test.ts +133 -0
  65. package/src/plugins/clappr-stats/types.ts +72 -25
  66. package/src/plugins/clappr-stats/utils.ts +1 -2
  67. package/src/plugins/error-screen/__tests__/ErrorScreen.test.ts +3 -4
  68. package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts +1 -0
  69. package/src/testUtils.ts +3 -2
  70. package/temp/player.api.json +311 -159
  71. package/tsconfig.tsbuildinfo +1 -1
  72. package/docs/api/player.clapprstats.setupdatemetrics.md +0 -56
  73. package/docs/api/player.clipsplugin.gettext.md +0 -58
  74. package/docs/api/player.clipsplugin.md +0 -59
package/dist/player.d.ts CHANGED
@@ -312,101 +312,32 @@ export declare class BottomGear extends UICorePlugin {
312
312
  }
313
313
 
314
314
  /**
315
- * `PLUGIN` that displays useful network-related statistics.
316
315
  * @beta
317
- *
318
- * @remarks
319
- * Depends on:
320
- *
321
- * - {@link BottomGear}
322
- *
323
- * - {@link ClapprStats}
324
- *
325
- * The plugin is rendered as an item in the gear menu.
326
- *
327
- * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
328
- * and recommended quality level.
329
316
  */
330
- export declare class ClapprNerdStats extends UICorePlugin {
331
- private container;
332
- private customMetrics;
333
- private metrics;
334
- private showing;
335
- private shortcut;
336
- private iconPosition;
337
- private static readonly buttonTemplate;
338
- /**
339
- * @internal
340
- */
341
- get name(): string;
342
- /**
343
- * @internal
344
- */
345
- get supportedVersion(): {
346
- min: string;
347
- };
348
- private static readonly template;
349
- /**
350
- * @internal
351
- */
352
- get attributes(): {
353
- 'data-clappr-nerd-stats': string;
354
- class: string;
355
- };
356
- /**
357
- * @internal
358
- */
359
- get events(): {
360
- 'click [data-show-stats-button]': string;
361
- 'click [data-close-button]': string;
362
- 'click [data-refresh-button]': string;
363
- };
364
- private get statsBoxElem();
365
- private get statsBoxWidthThreshold();
366
- private get playerWidth();
367
- private get playerHeight();
368
- constructor(core: Core);
369
- /**
370
- * @internal
371
- */
372
- bindEvents(): void;
373
- private onCoreReady;
374
- private toggle;
375
- private show;
376
- private hide;
377
- private onPlayerResize;
378
- private addGeneralMetrics;
379
- private addCustomMetrics;
380
- private updateMetrics;
381
- private setStatsBoxSize;
382
- /**
383
- * @internal
384
- */
385
- render(): this;
386
- private addToBottomGear;
387
- private clearCustomMetrics;
388
- private refreshSpeedTest;
317
+ declare enum Chronograph {
318
+ Startup = "startup",
319
+ Watch = "watch",
320
+ Pause = "pause",
321
+ Buffering = "buffering",
322
+ Session = "session"
389
323
  }
390
324
 
391
325
  /**
392
- * `PLUGIN` that collects useful statistics about playback performance.
326
+ * `PLUGIN` that measures data about playback, which can be useful for analyzing performance and UX.
393
327
  * @beta
394
328
  * @remarks
395
329
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
330
+ *
331
+ * Configuration options - {@link ClapprStatsSettings}
332
+ *
333
+ * Events - {@link ClapprStatsEvents}
396
334
  */
397
335
  export declare class ClapprStats extends ContainerPlugin {
398
- private bwMeasureCount;
399
- private intervalId;
336
+ private timerId;
400
337
  private lastDecodedFramesCount;
401
338
  private metrics;
402
- private completion;
403
- private _onReport;
404
- private runBandwidthTestEvery;
405
- private runEach;
406
339
  private timers;
407
- private updateFn;
408
- private urisToMeasureBandwidth;
409
- private uriToMeasureLatency;
340
+ private runEach;
410
341
  /**
411
342
  * @internal
412
343
  */
@@ -417,18 +348,12 @@ export declare class ClapprStats extends ContainerPlugin {
417
348
  get supportedVersion(): {
418
349
  min: string;
419
350
  };
420
- private get _playbackName();
421
- private get _playbackType();
422
- private _now;
423
- private _inc;
351
+ private get playbackName();
352
+ private get playbackType();
353
+ private now;
354
+ private inc;
424
355
  private start;
425
- private _stop;
426
- /**
427
- * Registers a callback to receive the metrics.
428
- * @param updateMetricsFn - The callback to receive the metrics
429
- */
430
- setUpdateMetrics(updateMetricsFn: MetricsUpdateFn): void;
431
- private _defaultReport;
356
+ private stop;
432
357
  constructor(container: Container);
433
358
  /**
434
359
  * @internal
@@ -440,7 +365,7 @@ export declare class ClapprStats extends ContainerPlugin {
440
365
  destroy(): void;
441
366
  /**
442
367
  * Returns the collected metrics.
443
- * @returns Currently collected metrics
368
+ * @returns Measurements collected so far
444
369
  */
445
370
  exportMetrics(): Metrics;
446
371
  private onBitrate;
@@ -456,17 +381,22 @@ export declare class ClapprStats extends ContainerPlugin {
456
381
  private onBuffering;
457
382
  private onBufferfull;
458
383
  private onProgress;
459
- private _newMetrics;
460
- private _onCompletion;
461
- private _buildReport;
462
- private _fetchFPS;
463
- private _calculateBitrates;
464
- private _calculatePercentages;
465
- private _html5FetchFPS;
466
- private _measureLatency;
467
- private _measureBandwidth;
384
+ private onCompletion;
385
+ private buildReport;
386
+ private fetchFPS;
387
+ private calcBitrates;
388
+ private calcBufferingPercentage;
389
+ private html5FetchFPS;
468
390
  }
469
391
 
392
+ export declare type ClapprStatsSettings = {
393
+ /**
394
+ * The interval in milliseconds of periodic measurements.
395
+ * The plugin will emit a {@link ClapprStatsEvents.REPORT} event with the collected metrics at the specified interval.
396
+ */
397
+ runEach?: number;
398
+ };
399
+
470
400
  /**
471
401
  * A small `PLUGIN` that toggles the playback state on click over the video container
472
402
  * @beta
@@ -495,21 +425,23 @@ export declare class ClickToPause extends ContainerPlugin {
495
425
  }
496
426
 
497
427
  /**
498
- * `PLUGIN` that shows text over the seekbar to indicate the current clip.
428
+ * `PLUGIN` that allows marking up the timeline of the video
499
429
  * @beta
500
430
  * @remarks
431
+ * The plugin decorates the seekbar with notches to indicate the clips of the video and displays current clip text in the left panel
432
+ *
501
433
  * Depends on:
502
434
  *
503
435
  * - {@link MediaControl}
504
436
  *
505
437
  * Configuration options - {@link ClipsPluginSettings}
506
438
  */
507
- export declare class ClipsPlugin extends UICorePlugin {
439
+ export declare class Clips extends UICorePlugin {
440
+ private barStyle;
508
441
  private clips;
509
- private duration;
510
- private durationGetting;
511
- private _oldContainer;
442
+ private oldContainer;
512
443
  private svgMask;
444
+ private static readonly template;
513
445
  /**
514
446
  * @internal
515
447
  */
@@ -520,34 +452,37 @@ export declare class ClipsPlugin extends UICorePlugin {
520
452
  get attributes(): {
521
453
  class: string;
522
454
  };
455
+ get version(): string;
456
+ get supportedVersion(): {
457
+ min: string;
458
+ };
523
459
  /**
524
460
  * @internal
525
461
  */
526
462
  bindEvents(): void;
527
- private _onCoreReady;
528
- private _onMediaControlContainerChanged;
463
+ render(): this;
464
+ destroy(): UIObject;
465
+ disable(): void;
466
+ enable(): void;
467
+ private onCoreReady;
468
+ private onMcRender;
469
+ private onContainerChanged;
529
470
  private playerResize;
530
- private _bindContainerEvents;
531
471
  private onTimeUpdate;
532
472
  private parseClips;
533
- /**
534
- * Returns the text of the current clip.
535
- * @param time - The current time of the player.
536
- * @returns The text of the current clip.
537
- */
538
- getText(time: number): string;
539
473
  private makeSvg;
540
474
  private setSVGMask;
541
475
  private setClipText;
542
476
  }
543
477
 
544
478
  /**
545
- * Configuration options for the {@link ClipsPlugin | clips} plugin.
479
+ * Configuration options for the {@link ClipsPlugin} plugin.
546
480
  * @beta
547
481
  */
548
482
  export declare interface ClipsPluginSettings {
549
483
  /**
550
- * The text to display over the seekbar.
484
+ * The compiled text of the clips description, one clip per line in format :
485
+ * `HH:MM:SS text` or `MM:SS text` or `SS text`
551
486
  */
552
487
  text: string;
553
488
  }
@@ -758,6 +693,23 @@ export declare type CorePluginConstructor = {
758
693
  type: string;
759
694
  };
760
695
 
696
+ /**
697
+ * @beta
698
+ */
699
+ declare enum Counter {
700
+ Play = "play",
701
+ Pause = "pause",
702
+ Error = "error",
703
+ Buffering = "buffering",
704
+ DecodedFrames = "decodedFrames",
705
+ DroppedFrames = "droppedFrames",
706
+ Fps = "fps",
707
+ ChangeLevel = "changeLevel",
708
+ Seek = "seek",
709
+ Fullscreen = "fullscreen",
710
+ DvrUsage = "dvrUsage"
711
+ }
712
+
761
713
  /**
762
714
  * A plain JS object that must conform to the DASH.js settings schema.
763
715
  * @public
@@ -1096,8 +1048,6 @@ export declare class MediaControl extends UICorePlugin {
1096
1048
  private userDisabled;
1097
1049
  private userKeepVisible;
1098
1050
  private verticalVolume;
1099
- private $clipText;
1100
- private $clipTextContainer;
1101
1051
  private $duration;
1102
1052
  private $fullscreenToggle;
1103
1053
  private $multiCameraSelector;
@@ -1263,15 +1213,14 @@ export declare class MediaControl extends UICorePlugin {
1263
1213
  * ```ts
1264
1214
  * class MyPlugin extends UICorePlugin {
1265
1215
  * override render() {
1266
- * const mediaControl = this.core.getPlugin('media_control')
1267
- * const clipText = mediaControl.getElement('clipText')
1268
- * clipText?.el.text('Here we go')
1216
+ * this.$el.html('<div data-clips>Here we go</div>')
1217
+ * this.core.getPlugin('media_control').mount('clips', this.$el)
1269
1218
  * return this
1270
1219
  * }
1271
1220
  * }
1272
1221
  * ```
1273
1222
  */
1274
- getElement(name: MediaControlElement): ZeptoResult | null;
1223
+ mount(name: MediaControlElement, element: ZeptoResult): void;
1275
1224
  putElement(name: MediaControlElement, element: ZeptoResult): void;
1276
1225
  /**
1277
1226
  * Toggle the visibility of a media control element
@@ -1336,7 +1285,7 @@ export declare type MediaControlLayerElement = 'seekbar' | 'seekBarContainer';
1336
1285
  * Media control elements that appear in the left area.
1337
1286
  * @beta
1338
1287
  */
1339
- export declare type MediaControlLeftElement = 'clipText' | 'duration' | 'dvr' | 'playpause' | 'playstop' | 'position' | 'volume';
1288
+ export declare type MediaControlLeftElement = 'clipText' | 'duration' | 'dvr' | 'playpause' | 'playstop' | 'position' | 'volume' | 'clips';
1340
1289
 
1341
1290
  /**
1342
1291
  * Media control elements that appear in the right area.
@@ -1386,26 +1335,43 @@ export declare type MenuOption = {
1386
1335
  * @beta
1387
1336
  */
1388
1337
  declare type Metrics = {
1338
+ /**
1339
+ * Events count counters
1340
+ */
1389
1341
  counters: {
1390
- play: number;
1391
- pause: number;
1392
- error: number;
1393
- buffering: number;
1394
- decodedFrames: number;
1395
- droppedFrames: number;
1396
- fps: number;
1397
- changeLevel: number;
1398
- seek: number;
1399
- fullscreen: number;
1400
- dvrUsage: number;
1401
- };
1402
- timers: {
1403
- startup: number;
1404
- watch: number;
1405
- pause: number;
1406
- buffering: number;
1407
- session: number;
1408
- latency: number;
1342
+ /**
1343
+ *
1344
+ */
1345
+ [Counter.Play]: number;
1346
+ [Counter.Pause]: number;
1347
+ [Counter.Error]: number;
1348
+ [Counter.Buffering]: number;
1349
+ [Counter.DecodedFrames]: number;
1350
+ [Counter.DroppedFrames]: number;
1351
+ [Counter.Fps]: number;
1352
+ [Counter.ChangeLevel]: number;
1353
+ [Counter.Seek]: number;
1354
+ [Counter.Fullscreen]: number;
1355
+ [Counter.DvrUsage]: number;
1356
+ };
1357
+ /**
1358
+ * Time measurements - accumulated duration of time-based activities
1359
+ */
1360
+ chrono: {
1361
+ /**
1362
+ * Time spent in the startup phase
1363
+ */
1364
+ [Chronograph.Startup]: number;
1365
+ /**
1366
+ * Total time spent in the watch phase
1367
+ */
1368
+ [Chronograph.Watch]: number;
1369
+ /**
1370
+ *
1371
+ */
1372
+ [Chronograph.Pause]: number;
1373
+ [Chronograph.Buffering]: number;
1374
+ [Chronograph.Session]: number;
1409
1375
  };
1410
1376
  extra: {
1411
1377
  playbackName: string;
@@ -1424,11 +1390,6 @@ declare type Metrics = {
1424
1390
  custom: Record<string, unknown>;
1425
1391
  };
1426
1392
 
1427
- /**
1428
- * @beta
1429
- */
1430
- declare type MetricsUpdateFn = (metrics: Metrics) => void;
1431
-
1432
1393
  /**
1433
1394
  * `PLUGIN` that adds support for loading multiple streams and switching between them using the media control UI.
1434
1395
  * @beta
@@ -1482,6 +1443,89 @@ export declare class MultiCamera extends UICorePlugin {
1482
1443
  private highlightCurrentLevel;
1483
1444
  }
1484
1445
 
1446
+ /**
1447
+ * `PLUGIN` that displays useful network-related statistics.
1448
+ * @beta
1449
+ *
1450
+ * @remarks
1451
+ * Depends on:
1452
+ *
1453
+ * - {@link BottomGear}
1454
+ *
1455
+ * - {@link ClapprStats}
1456
+ *
1457
+ * The plugin is rendered as an item in the gear menu.
1458
+ *
1459
+ * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
1460
+ * and recommended quality level.
1461
+ */
1462
+ declare class NerdStats extends UICorePlugin {
1463
+ private container;
1464
+ private customMetrics;
1465
+ private metrics;
1466
+ private showing;
1467
+ private shortcut;
1468
+ private iconPosition;
1469
+ private static readonly buttonTemplate;
1470
+ /**
1471
+ * @internal
1472
+ */
1473
+ get name(): string;
1474
+ /**
1475
+ * @internal
1476
+ */
1477
+ get supportedVersion(): {
1478
+ min: string;
1479
+ };
1480
+ private static readonly template;
1481
+ /**
1482
+ * @internal
1483
+ */
1484
+ get attributes(): {
1485
+ 'data-clappr-nerd-stats': string;
1486
+ class: string;
1487
+ };
1488
+ /**
1489
+ * @internal
1490
+ */
1491
+ get events(): {
1492
+ 'click [data-show-stats-button]': string;
1493
+ 'click [data-close-button]': string;
1494
+ 'click [data-refresh-button]': string;
1495
+ };
1496
+ private get statsBoxElem();
1497
+ private get statsBoxWidthThreshold();
1498
+ private get playerWidth();
1499
+ private get playerHeight();
1500
+ constructor(core: Core);
1501
+ /**
1502
+ * @internal
1503
+ */
1504
+ bindEvents(): void;
1505
+ private onCoreReady;
1506
+ /**
1507
+ * @internal
1508
+ */
1509
+ destroy(): UIObject;
1510
+ private toggle;
1511
+ private show;
1512
+ private hide;
1513
+ private onPlayerResize;
1514
+ private addGeneralMetrics;
1515
+ private addCustomMetrics;
1516
+ private updateMetrics;
1517
+ private setStatsBoxSize;
1518
+ /**
1519
+ * @internal
1520
+ */
1521
+ render(): this;
1522
+ private addToBottomGear;
1523
+ private clearCustomMetrics;
1524
+ private refreshSpeedTest;
1525
+ }
1526
+ export { NerdStats as ClapprNerdStats }
1527
+ export { NerdStats }
1528
+
1485
1529
  /**
1486
1530
  * `PLUGIN` that enables picture in picture mode.
1487
1531
  * @beta
@@ -2237,20 +2281,21 @@ export declare class Poster extends UIContainerPlugin {
2237
2281
  }
2238
2282
 
2239
2283
  /**
2240
- * A level of quality within a media source.
2284
+ * A level of quality within a media source/representation.
2241
2285
  * @public
2242
2286
  */
2243
2287
  export declare interface QualityLevel {
2244
2288
  /**
2245
2289
  * Zero-based index of the quality level.
2290
+ * Quality levels go from low to high
2246
2291
  */
2247
2292
  level: number;
2248
2293
  /**
2249
- * Width of the video, pixels.
2294
+ * Width of the video frame, pixels.
2250
2295
  */
2251
2296
  width: number;
2252
2297
  /**
2253
- * Height of the video, pixels.
2298
+ * Height of the video frame, pixels.
2254
2299
  */
2255
2300
  height: number;
2256
2301
  /**
@@ -2890,21 +2935,32 @@ export declare type ThumbnailsPluginSettings = {
2890
2935
  */
2891
2936
  export declare interface TimePosition {
2892
2937
  /**
2893
- * Current playback time, 0..duration, seconds.
2938
+ * Current playback time, 0..duration
2894
2939
  */
2895
2940
  current: TimeValue;
2896
2941
  /**
2897
- * Total duration of the media, seconds.
2942
+ * Total duration of the media content (or DVR window size or segment duration for live streams)
2898
2943
  */
2899
2944
  total: TimeValue;
2900
2945
  }
2901
2946
 
2902
2947
  /**
2903
- * For the plugin development
2948
+ * Time progress information indicated by Clappr CONTAINER_PROGRESS and PLAYBACK_PROGRESS events.
2904
2949
  * @beta
2905
2950
  */
2906
- export declare type TimeProgress = TimePosition & {
2907
- start: number;
2951
+ export declare type TimeProgress = {
2952
+ /**
2953
+ * Current playback time
2954
+ */
2955
+ start: TimeValue;
2956
+ /**
2957
+ * Current buffer length beginning from the start (=current) time
2958
+ */
2959
+ current: TimeValue;
2960
+ /**
2961
+ * Total duration of the media content
2962
+ */
2963
+ total: TimeValue;
2908
2964
  };
2909
2965
 
2910
2966
  /**
@@ -2916,7 +2972,8 @@ export declare type TimeUpdate = TimePosition & {
2916
2972
  };
2917
2973
 
2918
2974
  /**
2919
- * Playback time in seconds since the beginning of the stream (or a segment for the live streams)
2975
+ * Playback time position in seconds since the beginning of the stream.
2976
+ * For the live streams this is limited to the length of a segment. When DVR is enabled, this refers to the
2920
2977
  * @public
2921
2978
  */
2922
2979
  export declare type TimeValue = number;