@gcorevideo/player 2.24.14 → 2.25.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 (41) hide show
  1. package/assets/clips/clips.ejs +1 -1
  2. package/assets/clips/clips.scss +7 -5
  3. package/assets/media-control/media-control.scss +22 -0
  4. package/assets/media-control/width370.scss +3 -5
  5. package/dist/core.js +1 -1
  6. package/dist/index.css +762 -746
  7. package/dist/index.embed.js +171 -100
  8. package/dist/index.js +150 -78
  9. package/dist/player.d.ts +106 -42
  10. package/docs/api/player.md +18 -20
  11. package/docs/api/player.mediacontrol.defaultsettings.md +32 -0
  12. package/docs/api/player.mediacontrol.extendsettings.md +77 -0
  13. package/docs/api/player.mediacontrol.md +31 -11
  14. package/docs/api/player.mediacontrol.mount.md +8 -8
  15. package/docs/api/player.mediacontrol.slot.md +97 -0
  16. package/docs/api/player.mediacontrolelement.md +6 -3
  17. package/docs/api/player.mediacontrolpluginsettings.md +13 -0
  18. package/docs/api/player.mediacontrolsettings.md +5 -5
  19. package/docs/api/{player.mediacontrol.enablecontrolbutton.md → player.mediacontrolslotmountpoint.md} +4 -8
  20. package/docs/api/{player.mediacontrol.disabledcontrolbutton.md → player.standardmediacontrolelement.md} +4 -8
  21. package/lib/plugins/clips/Clips.d.ts +1 -0
  22. package/lib/plugins/clips/Clips.d.ts.map +1 -1
  23. package/lib/plugins/clips/Clips.js +16 -2
  24. package/lib/plugins/dvr-controls/DvrControls.js +1 -1
  25. package/lib/plugins/media-control/MediaControl.d.ts +87 -34
  26. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  27. package/lib/plugins/media-control/MediaControl.js +121 -76
  28. package/package.json +1 -1
  29. package/src/plugins/clips/Clips.ts +17 -2
  30. package/src/plugins/clips/__tests__/Clips.test.ts +1 -1
  31. package/src/plugins/clips/__tests__/__snapshots__/Clips.test.ts.snap +1 -1
  32. package/src/plugins/dvr-controls/DvrControls.ts +1 -1
  33. package/src/plugins/dvr-controls/__tests__/DvrControls.test.ts +1 -1
  34. package/src/plugins/media-control/MediaControl.ts +170 -141
  35. package/src/plugins/media-control/__tests__/MediaControl.test.ts +24 -17
  36. package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +125 -93
  37. package/temp/player.api.json +186 -108
  38. package/tsconfig.tsbuildinfo +1 -1
  39. package/docs/api/player.mediacontrollayerelement.md +0 -16
  40. package/docs/api/player.mediacontrolleftelement.md +0 -16
  41. package/docs/api/player.mediacontrolrightelement.md +0 -16
package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap CHANGED
@@ -20,6 +20,10 @@ exports[`MediaControl > mount > base > should attach node to DOM tree 1`] = `
20
20
 
21
21
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
22
22
 
23
+ <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
24
+
25
+ <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
26
+
23
27
  <div class="drawer-container" data-volume="">
24
28
  <div class="drawer-icon-container" data-volume="">
25
29
  <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
@@ -37,12 +41,6 @@ exports[`MediaControl > mount > base > should attach node to DOM tree 1`] = `
37
41
 
38
42
  </div>
39
43
 
40
- <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
41
-
42
- <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
43
-
44
- <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
45
-
46
44
  </div>
47
45
 
48
46
 
@@ -55,10 +53,6 @@ exports[`MediaControl > mount > base > should attach node to DOM tree 1`] = `
55
53
 
56
54
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
57
55
 
58
- <div class="media-control-multicamera" data-multicamera=""></div>
59
-
60
- <div class="media-control-vr" data-vr=""></div>
61
-
62
56
  </div>
63
57
 
64
58
  <div id="test-element">test</div></div>
@@ -85,6 +79,10 @@ exports[`MediaControl > mount > center > should attach node to DOM tree 1`] = `
85
79
 
86
80
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
87
81
 
82
+ <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
83
+
84
+ <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
85
+
88
86
  <div class="drawer-container" data-volume="">
89
87
  <div class="drawer-icon-container" data-volume="">
90
88
  <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
@@ -102,12 +100,6 @@ exports[`MediaControl > mount > center > should attach node to DOM tree 1`] = `
102
100
 
103
101
  </div>
104
102
 
105
- <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
106
-
107
- <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
108
-
109
- <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
110
-
111
103
  </div>
112
104
 
113
105
 
@@ -120,10 +112,6 @@ exports[`MediaControl > mount > center > should attach node to DOM tree 1`] = `
120
112
 
121
113
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
122
114
 
123
- <div class="media-control-multicamera" data-multicamera=""></div>
124
-
125
- <div class="media-control-vr" data-vr=""></div>
126
-
127
115
  </div>
128
116
 
129
117
  </div>
@@ -150,6 +138,10 @@ exports[`MediaControl > mount > left > should attach node to DOM tree 1`] = `
150
138
 
151
139
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
152
140
 
141
+ <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
142
+
143
+ <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
144
+
153
145
  <div class="drawer-container" data-volume="">
154
146
  <div class="drawer-icon-container" data-volume="">
155
147
  <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
@@ -167,12 +159,6 @@ exports[`MediaControl > mount > left > should attach node to DOM tree 1`] = `
167
159
 
168
160
  </div>
169
161
 
170
- <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
171
-
172
- <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
173
-
174
- <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
175
-
176
162
  <div id="test-element">test</div></div>
177
163
 
178
164
 
@@ -185,10 +171,6 @@ exports[`MediaControl > mount > left > should attach node to DOM tree 1`] = `
185
171
 
186
172
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
187
173
 
188
- <div class="media-control-multicamera" data-multicamera=""></div>
189
-
190
- <div class="media-control-vr" data-vr=""></div>
191
-
192
174
  </div>
193
175
 
194
176
  </div>
@@ -215,6 +197,10 @@ exports[`MediaControl > mount > right > should attach node to DOM tree 1`] = `
215
197
 
216
198
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
217
199
 
200
+ <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
201
+
202
+ <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
203
+
218
204
  <div class="drawer-container" data-volume="">
219
205
  <div class="drawer-icon-container" data-volume="">
220
206
  <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
@@ -232,12 +218,6 @@ exports[`MediaControl > mount > right > should attach node to DOM tree 1`] = `
232
218
 
233
219
  </div>
234
220
 
235
- <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
236
-
237
- <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
238
-
239
- <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
240
-
241
221
  </div>
242
222
 
243
223
 
@@ -250,10 +230,6 @@ exports[`MediaControl > mount > right > should attach node to DOM tree 1`] = `
250
230
 
251
231
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
252
232
 
253
- <div class="media-control-multicamera" data-multicamera=""></div>
254
-
255
- <div class="media-control-vr" data-vr=""></div>
256
-
257
233
  <div id="test-element">test</div></div>
258
234
 
259
235
  </div>
@@ -280,6 +256,10 @@ exports[`MediaControl > mount > root > should attach node to DOM tree 1`] = `
280
256
 
281
257
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
282
258
 
259
+ <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
260
+
261
+ <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
262
+
283
263
  <div class="drawer-container" data-volume="">
284
264
  <div class="drawer-icon-container" data-volume="">
285
265
  <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
@@ -297,12 +277,6 @@ exports[`MediaControl > mount > root > should attach node to DOM tree 1`] = `
297
277
 
298
278
  </div>
299
279
 
300
- <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
301
-
302
- <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
303
-
304
- <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
305
-
306
280
  </div>
307
281
 
308
282
 
@@ -315,10 +289,6 @@ exports[`MediaControl > mount > root > should attach node to DOM tree 1`] = `
315
289
 
316
290
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
317
291
 
318
- <div class="media-control-multicamera" data-multicamera=""></div>
319
-
320
- <div class="media-control-vr" data-vr=""></div>
321
-
322
292
  </div>
323
293
 
324
294
  </div>
@@ -345,6 +315,10 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
345
315
 
346
316
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
347
317
 
318
+ <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
319
+
320
+ <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
321
+
348
322
  <div class="drawer-container" data-volume="">
349
323
  <div class="drawer-icon-container" data-volume="">
350
324
  <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
@@ -362,12 +336,6 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
362
336
 
363
337
  </div>
364
338
 
365
- <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
366
-
367
- <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
368
-
369
- <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
370
-
371
339
  </div>
372
340
 
373
341
 
@@ -391,10 +359,6 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
391
359
 
392
360
  <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
393
361
 
394
- <div class="media-control-multicamera" data-multicamera=""></div>
395
-
396
- <div class="media-control-vr" data-vr=""></div>
397
-
398
362
  </div>
399
363
 
400
364
  </div>
@@ -459,19 +423,13 @@ exports[`MediaControl > seekbar > should render 1`] = `
459
423
 
460
424
  <div class="media-control-right-panel" data-media-control="">
461
425
 
462
- <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
463
-
464
- <div class="media-control-multicamera" data-multicamera=""></div>
465
-
466
- <div class="media-control-vr" data-vr=""></div>
467
-
468
426
  </div>
469
427
 
470
428
  </div>
471
429
  <style>:root {}</style>"
472
430
  `;
473
431
 
474
- exports[`MediaControl > slot > audiotracks > should put the element in the right panel 1`] = `
432
+ exports[`MediaControl > slot > audiotracks > should put the element according to layout 1`] = `
475
433
  "<div class="media-control-background" data-background=""></div>
476
434
 
477
435
  <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -514,19 +472,13 @@ exports[`MediaControl > slot > audiotracks > should put the element in the right
514
472
 
515
473
  <div class="media-control-right-panel" data-media-control="">
516
474
 
517
- <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
518
-
519
- <div class="media-control-multicamera" data-multicamera=""></div>
520
-
521
- <div class="media-control-vr" data-vr=""></div>
522
-
523
- <div class="my-media-control" data-audiotracks="">test</div></div>
475
+ <div class="my-media-control" id="my-media-control" data-audiotracks="">test</div></div>
524
476
 
525
477
  </div>
526
478
  <style>:root {}</style>"
527
479
  `;
528
480
 
529
- exports[`MediaControl > slot > cc > should put the element in the right panel 1`] = `
481
+ exports[`MediaControl > slot > cc > should put the element according to layout 1`] = `
530
482
  "<div class="media-control-background" data-background=""></div>
531
483
 
532
484
  <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -569,19 +521,13 @@ exports[`MediaControl > slot > cc > should put the element in the right panel 1`
569
521
 
570
522
  <div class="media-control-right-panel" data-media-control="">
571
523
 
572
- <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
573
-
574
- <div class="media-control-multicamera" data-multicamera=""></div>
575
-
576
- <div class="media-control-vr" data-vr=""></div>
577
-
578
- <div class="my-media-control" data-cc="">test</div></div>
524
+ <div class="my-media-control" id="my-media-control" data-cc="">test</div></div>
579
525
 
580
526
  </div>
581
527
  <style>:root {}</style>"
582
528
  `;
583
529
 
584
- exports[`MediaControl > slot > gear > should put the element in the right panel 1`] = `
530
+ exports[`MediaControl > slot > clips > should put the element according to layout 1`] = `
585
531
  "<div class="media-control-background" data-background=""></div>
586
532
 
587
533
  <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -618,25 +564,68 @@ exports[`MediaControl > slot > gear > should put the element in the right panel
618
564
 
619
565
  <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
620
566
 
621
- </div>
567
+ <div class="my-media-control" id="my-media-control" data-clips="">test</div></div>
622
568
 
623
569
 
624
570
 
625
571
  <div class="media-control-right-panel" data-media-control="">
626
572
 
627
- <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
573
+ </div>
574
+
575
+ </div>
576
+ <style>:root {}</style>"
577
+ `;
578
+
579
+ exports[`MediaControl > slot > dvr > should put the element according to layout 1`] = `
580
+ "<div class="media-control-background" data-background=""></div>
581
+
582
+ <div class="media-control-layer gcore-skin-bg-color" data-controls="">
583
+
584
+
585
+
586
+
587
+
588
+
589
+
590
+
591
+
592
+
593
+
594
+
595
+ <div class="media-control-left-panel" data-media-control="">
596
+
597
+ <div class="drawer-container" data-volume="">
598
+ <div class="drawer-icon-container" data-volume="">
599
+ <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
600
+ <span class="drawer-text" data-volume=""></span>
601
+ </div>
602
+
603
+ <div class="bar-container" data-volume="">
604
+ <div class="bar-background" data-volume="">
605
+ <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
606
+ </div>
607
+ <div class="bar-scrubber" data-volume="" style="left: 100%;">
608
+ <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
609
+ </div>
610
+ </div>
611
+
612
+ </div>
613
+
614
+ <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
628
615
 
629
- <div class="media-control-multicamera" data-multicamera=""></div>
616
+ <div class="my-media-control" id="my-media-control" data-dvr="">test</div></div>
630
617
 
631
- <div class="media-control-vr" data-vr=""></div>
632
618
 
633
- <div class="my-media-control" data-gear="">test</div></div>
619
+
620
+ <div class="media-control-right-panel" data-media-control="">
621
+
622
+ </div>
634
623
 
635
624
  </div>
636
625
  <style>:root {}</style>"
637
626
  `;
638
627
 
639
- exports[`MediaControl > slot > pip > should put the element in the right panel 1`] = `
628
+ exports[`MediaControl > slot > gear > should put the element according to layout 1`] = `
640
629
  "<div class="media-control-background" data-background=""></div>
641
630
 
642
631
  <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -679,13 +668,56 @@ exports[`MediaControl > slot > pip > should put the element in the right panel 1
679
668
 
680
669
  <div class="media-control-right-panel" data-media-control="">
681
670
 
682
- <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
671
+ <div class="my-media-control" id="my-media-control" data-gear="">test</div></div>
683
672
 
684
- <div class="media-control-multicamera" data-multicamera=""></div>
673
+ </div>
674
+ <style>:root {}</style>"
675
+ `;
676
+
677
+ exports[`MediaControl > slot > pip > should put the element according to layout 1`] = `
678
+ "<div class="media-control-background" data-background=""></div>
679
+
680
+ <div class="media-control-layer gcore-skin-bg-color" data-controls="">
681
+
682
+
683
+
684
+
685
+
686
+
687
+
688
+
689
+
690
+
691
+
692
+
693
+ <div class="media-control-left-panel" data-media-control="">
694
+
695
+ <div class="drawer-container" data-volume="">
696
+ <div class="drawer-icon-container" data-volume="">
697
+ <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
698
+ <span class="drawer-text" data-volume=""></span>
699
+ </div>
700
+
701
+ <div class="bar-container" data-volume="">
702
+ <div class="bar-background" data-volume="">
703
+ <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
704
+ </div>
705
+ <div class="bar-scrubber" data-volume="" style="left: 100%;">
706
+ <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
707
+ </div>
708
+ </div>
709
+
710
+ </div>
685
711
 
686
- <div class="media-control-vr" data-vr=""></div>
712
+ <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
687
713
 
688
- <div class="my-media-control" data-pip="">test</div></div>
714
+ </div>
715
+
716
+
717
+
718
+ <div class="media-control-right-panel" data-media-control="">
719
+
720
+ <div class="my-media-control" id="my-media-control" data-pip="">test</div></div>
689
721
 
690
722
  </div>
691
723
  <style>:root {}</style>"