@gcorevideo/player 2.25.5 → 2.25.7

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 (30) hide show
  1. package/assets/audio-tracks/template.ejs +5 -4
  2. package/assets/bottom-gear/gear.scss +40 -39
  3. package/assets/media-control/media-control.scss +343 -284
  4. package/assets/media-control/width270.scss +2 -10
  5. package/assets/media-control/width370.scss +3 -41
  6. package/assets/multi-camera/style.scss +9 -19
  7. package/assets/picture-in-picture/style.scss +13 -0
  8. package/assets/subtitles/style.scss +108 -68
  9. package/dist/core.js +1 -1
  10. package/dist/index.css +1346 -1422
  11. package/dist/index.embed.js +47 -28
  12. package/dist/index.js +85 -66
  13. package/lib/plugins/audio-selector/AudioTracks.d.ts +4 -3
  14. package/lib/plugins/audio-selector/AudioTracks.d.ts.map +1 -1
  15. package/lib/plugins/audio-selector/AudioTracks.js +41 -23
  16. package/lib/plugins/media-control/MediaControl.js +1 -1
  17. package/lib/plugins/picture-in-picture/PictureInPicture.d.ts +1 -1
  18. package/lib/plugins/picture-in-picture/PictureInPicture.d.ts.map +1 -1
  19. package/lib/plugins/picture-in-picture/PictureInPicture.js +1 -1
  20. package/package.json +1 -1
  21. package/src/plugins/audio-selector/AudioTracks.ts +53 -29
  22. package/src/plugins/audio-selector/__tests__/AudioTracks.test.ts +60 -45
  23. package/src/plugins/audio-selector/__tests__/__snapshots__/AudioSelector.test.ts.snap +24 -24
  24. package/src/plugins/audio-selector/__tests__/__snapshots__/AudioTracks.test.ts.snap +21 -18
  25. package/src/plugins/media-control/MediaControl.ts +1 -1
  26. package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +6 -6
  27. package/src/plugins/picture-in-picture/PictureInPicture.ts +1 -1
  28. package/tsconfig.tsbuildinfo +1 -1
  29. package/assets/audio-tracks/style.scss +0 -124
  30. package/assets/picture-in-picture/button.scss +0 -12
package/src/plugins/audio-selector/__tests__/__snapshots__/AudioSelector.test.ts.snap CHANGED
@@ -1,19 +1,19 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
3
  exports[`AudioSelector > given that audio tracks are available > should render menu hidden 1`] = `
4
- "<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
4
+ "<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color" id="gplayer-mc-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
5
5
  <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
6
6
  </button>
7
- <ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
7
+ <ul class="gcore-skin-bg-color menu hidden" id="media-control-audiotracks-select" role="menu">
8
8
 
9
9
  <li class="">
10
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
10
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="1" role="menuitemradio" aria-checked="false">
11
11
  English
12
12
  </a>
13
13
  </li>
14
14
 
15
15
  <li class="">
16
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
16
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
17
17
  Spanish
18
18
  </a>
19
19
  </li>
@@ -23,19 +23,19 @@ exports[`AudioSelector > given that audio tracks are available > should render m
23
23
  `;
24
24
 
25
25
  exports[`AudioSelector > given that audio tracks are available > when button is clicked > should show menu 1`] = `
26
- "<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
26
+ "<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color" id="gplayer-mc-audiotracks-button" aria-haspopup="menu" aria-expanded="true">
27
27
  <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
28
28
  </button>
29
- <ul class="gcore-skin-bg-color menu" id="audiotracks-select" role="menu">
29
+ <ul class="gcore-skin-bg-color menu" id="media-control-audiotracks-select" role="menu">
30
30
 
31
31
  <li class="">
32
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
32
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="1" role="menuitemradio" aria-checked="false">
33
33
  English
34
34
  </a>
35
35
  </li>
36
36
 
37
37
  <li class="">
38
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
38
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
39
39
  Spanish
40
40
  </a>
41
41
  </li>
@@ -45,19 +45,19 @@ exports[`AudioSelector > given that audio tracks are available > when button is
45
45
  `;
46
46
 
47
47
  exports[`AudioSelector > given that audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
48
- "<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
48
+ "<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color changing" id="gplayer-mc-audiotracks-button" aria-haspopup="menu" aria-expanded="true">
49
49
  <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
50
50
  </button>
51
- <ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
51
+ <ul class="gcore-skin-bg-color menu hidden" id="media-control-audiotracks-select" role="menu">
52
52
 
53
53
  <li class="">
54
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
54
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="1" role="menuitemradio" aria-checked="false">
55
55
  English
56
56
  </a>
57
57
  </li>
58
58
 
59
59
  <li class="">
60
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
60
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
61
61
  Spanish
62
62
  </a>
63
63
  </li>
@@ -67,19 +67,19 @@ exports[`AudioSelector > given that audio tracks are available > when button is
67
67
  `;
68
68
 
69
69
  exports[`AudioTracks > given that audio tracks are available > should render menu hidden 1`] = `
70
- "<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
70
+ "<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color" id="gplayer-mc-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
71
71
  <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
72
72
  </button>
73
- <ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
73
+ <ul class="gcore-skin-bg-color menu hidden" id="media-control-audiotracks-select" role="menu">
74
74
 
75
75
  <li class="">
76
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
76
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="1" role="menuitemradio" aria-checked="false">
77
77
  English
78
78
  </a>
79
79
  </li>
80
80
 
81
81
  <li class="">
82
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
82
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
83
83
  Spanish
84
84
  </a>
85
85
  </li>
@@ -89,19 +89,19 @@ exports[`AudioTracks > given that audio tracks are available > should render men
89
89
  `;
90
90
 
91
91
  exports[`AudioTracks > given that audio tracks are available > when button is clicked > should show menu 1`] = `
92
- "<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
92
+ "<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color" id="gplayer-mc-audiotracks-button" aria-haspopup="menu" aria-expanded="true">
93
93
  <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
94
94
  </button>
95
- <ul class="gcore-skin-bg-color menu" id="audiotracks-select" role="menu">
95
+ <ul class="gcore-skin-bg-color menu" id="media-control-audiotracks-select" role="menu">
96
96
 
97
97
  <li class="">
98
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
98
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="1" role="menuitemradio" aria-checked="false">
99
99
  English
100
100
  </a>
101
101
  </li>
102
102
 
103
103
  <li class="">
104
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
104
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
105
105
  Spanish
106
106
  </a>
107
107
  </li>
@@ -111,19 +111,19 @@ exports[`AudioTracks > given that audio tracks are available > when button is cl
111
111
  `;
112
112
 
113
113
  exports[`AudioTracks > given that audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
114
- "<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
114
+ "<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color changing" id="gplayer-mc-audiotracks-button" aria-haspopup="menu" aria-expanded="true">
115
115
  <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
116
116
  </button>
117
- <ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
117
+ <ul class="gcore-skin-bg-color menu hidden" id="media-control-audiotracks-select" role="menu">
118
118
 
119
119
  <li class="">
120
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
120
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="1" role="menuitemradio" aria-checked="false">
121
121
  English
122
122
  </a>
123
123
  </li>
124
124
 
125
125
  <li class="">
126
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
126
+ <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
127
127
  Spanish
128
128
  </a>
129
129
  </li>
package/src/plugins/audio-selector/__tests__/__snapshots__/AudioTracks.test.ts.snap CHANGED
@@ -1,19 +1,20 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`AudioTracks > given that audio tracks are available > should render menu hidden 1`] = `
4
- "<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
5
- <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
3
+ exports[`AudioTracks > when audio tracks are available > should render menu 1`] = `
4
+ "<button class="gcore-skin-button-color media-control-dd" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
5
+ <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
6
+ <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
6
7
  </button>
7
- <ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
8
+ <ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu" style="display: none;">
8
9
 
9
10
  <li class="">
10
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
11
+ <a href="#" class="gcore-skin-text-color" data-item="1" role="menuitemradio" aria-checked="false">
11
12
  English
12
13
  </a>
13
14
  </li>
14
15
 
15
16
  <li class="">
16
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
17
+ <a href="#" class="gcore-skin-text-color" data-item="2" role="menuitemradio" aria-checked="false">
17
18
  Spanish
18
19
  </a>
19
20
  </li>
@@ -22,20 +23,21 @@ exports[`AudioTracks > given that audio tracks are available > should render men
22
23
  "
23
24
  `;
24
25
 
25
- exports[`AudioTracks > given that audio tracks are available > when button is clicked > should show menu 1`] = `
26
- "<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
27
- <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
26
+ exports[`AudioTracks > when audio tracks are available > when button is clicked > should show menu 1`] = `
27
+ "<button class="gcore-skin-button-color media-control-dd" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="true">
28
+ <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
29
+ <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
28
30
  </button>
29
- <ul class="gcore-skin-bg-color menu" id="audiotracks-select" role="menu">
31
+ <ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu">
30
32
 
31
33
  <li class="">
32
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
34
+ <a href="#" class="gcore-skin-text-color" data-item="1" role="menuitemradio" aria-checked="false">
33
35
  English
34
36
  </a>
35
37
  </li>
36
38
 
37
39
  <li class="">
38
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
40
+ <a href="#" class="gcore-skin-text-color" data-item="2" role="menuitemradio" aria-checked="false">
39
41
  Spanish
40
42
  </a>
41
43
  </li>
@@ -44,20 +46,21 @@ exports[`AudioTracks > given that audio tracks are available > when button is cl
44
46
  "
45
47
  `;
46
48
 
47
- exports[`AudioTracks > given that audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
48
- "<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
49
- <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
49
+ exports[`AudioTracks > when audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
50
+ "<button class="gcore-skin-button-color media-control-dd changing" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
51
+ <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
52
+ <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
50
53
  </button>
51
- <ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
54
+ <ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu" style="display: none;">
52
55
 
53
56
  <li class="">
54
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
57
+ <a href="#" class="gcore-skin-text-color" data-item="1" role="menuitemradio" aria-checked="false">
55
58
  English
56
59
  </a>
57
60
  </li>
58
61
 
59
62
  <li class="">
60
- <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
63
+ <a href="#" class="gcore-skin-text-color" data-item="2" role="menuitemradio" aria-checked="false">
61
64
  Spanish
62
65
  </a>
63
66
  </li>
package/src/plugins/media-control/MediaControl.ts CHANGED
@@ -1214,7 +1214,7 @@ export class MediaControl extends UICorePlugin {
1214
1214
  const panel = this.getElementLocation(name)
1215
1215
  if (panel) {
1216
1216
  element.attr(`data-${name}`, '')
1217
- element.addClass('gplayer-mc-panel-item')
1217
+ element.addClass('media-control-item')
1218
1218
  mountTo(panel, element)
1219
1219
  }
1220
1220
  }
package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap CHANGED
@@ -472,7 +472,7 @@ exports[`MediaControl > slot > audiotracks > should put the element according to
472
472
 
473
473
  <div class="media-control-right-panel" data-media-control="">
474
474
 
475
- <div class="my-media-control gplayer-mc-panel-item" id="my-media-control" data-audiotracks="">test</div></div>
475
+ <div class="my-media-control media-control-item" id="my-media-control" data-audiotracks="">test</div></div>
476
476
 
477
477
  </div>
478
478
  <style>:root {}</style>"
@@ -521,7 +521,7 @@ exports[`MediaControl > slot > cc > should put the element according to layout 1
521
521
 
522
522
  <div class="media-control-right-panel" data-media-control="">
523
523
 
524
- <div class="my-media-control gplayer-mc-panel-item" id="my-media-control" data-cc="">test</div></div>
524
+ <div class="my-media-control media-control-item" id="my-media-control" data-cc="">test</div></div>
525
525
 
526
526
  </div>
527
527
  <style>:root {}</style>"
@@ -564,7 +564,7 @@ exports[`MediaControl > slot > clips > should put the element according to layou
564
564
 
565
565
  <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
566
566
 
567
- <div class="my-media-control gplayer-mc-panel-item" id="my-media-control" data-clips="">test</div></div>
567
+ <div class="my-media-control media-control-item" id="my-media-control" data-clips="">test</div></div>
568
568
 
569
569
 
570
570
 
@@ -613,7 +613,7 @@ exports[`MediaControl > slot > dvr > should put the element according to layout
613
613
 
614
614
  <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
615
615
 
616
- <div class="my-media-control gplayer-mc-panel-item" id="my-media-control" data-dvr="">test</div></div>
616
+ <div class="my-media-control media-control-item" id="my-media-control" data-dvr="">test</div></div>
617
617
 
618
618
 
619
619
 
@@ -668,7 +668,7 @@ exports[`MediaControl > slot > gear > should put the element according to layout
668
668
 
669
669
  <div class="media-control-right-panel" data-media-control="">
670
670
 
671
- <div class="my-media-control gplayer-mc-panel-item" id="my-media-control" data-gear="">test</div></div>
671
+ <div class="my-media-control media-control-item" id="my-media-control" data-gear="">test</div></div>
672
672
 
673
673
  </div>
674
674
  <style>:root {}</style>"
@@ -717,7 +717,7 @@ exports[`MediaControl > slot > pip > should put the element according to layout
717
717
 
718
718
  <div class="media-control-right-panel" data-media-control="">
719
719
 
720
- <div class="my-media-control gplayer-mc-panel-item" id="my-media-control" data-pip="">test</div></div>
720
+ <div class="my-media-control media-control-item" id="my-media-control" data-pip="">test</div></div>
721
721
 
722
722
  </div>
723
723
  <style>:root {}</style>"
package/src/plugins/picture-in-picture/PictureInPicture.ts CHANGED
@@ -5,7 +5,7 @@ import { CLAPPR_VERSION } from '../../build.js';
5
5
 
6
6
  import pipIcon from '../../../assets/icons/new/pip.svg';
7
7
  import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
8
- import '../../../assets/picture-in-picture/button.scss';
8
+ import '../../../assets/picture-in-picture/style.scss';
9
9
  import assert from 'assert';
10
10
 
11
11
  const VERSION = '0.0.1';