@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
@@ -1,9 +1,4 @@
1
- .media-control-skin-1[data-media-control-skin-1].w270 {
2
- .media-control-quality,
3
- .media-control-audiotracks {
4
- display: none;
5
- }
6
-
1
+ .media-control-skin-1.w270 {
7
2
  .media-control-layer[data-controls] {
8
3
  .drawer-container[data-volume] {
9
4
  .bar-container[data-volume] {
@@ -12,17 +7,14 @@
12
7
  display: block;
13
8
  position: absolute;
14
9
 
15
- /* bottom: 12px; */
16
10
  margin: 0;
17
11
  top: -40px;
18
12
  padding: 0;
19
13
 
20
- /* right: 20px; */
21
14
  margin-left: -32px;
22
15
  margin-top: -3px;
23
16
  width: 80px;
24
17
 
25
- /* padding-left: 12px; */
26
18
  .bar-background-mask {
27
19
  position: absolute;
28
20
  width: 100%;
@@ -47,4 +39,4 @@
47
39
  }
48
40
  }
49
41
  }
50
- }
42
+ }
@@ -1,4 +1,4 @@
1
- .media-control-skin-1[data-media-control-skin-1].w370 {
1
+ .media-control-skin-1.w370 {
2
2
  .media-control-cc {
3
3
  width: 28px;
4
4
 
@@ -26,48 +26,10 @@
26
26
  }
27
27
  }
28
28
 
29
- .media-control-quality,
30
- .media-control-audiotracks {
29
+ .media-control-quality {
31
30
  display: block;
32
31
  }
33
32
 
34
- // .level-selector[data-level-selector],
35
- .media-control-audiotracks[data-audiotracks] {
36
- margin-top: 3px;
37
- margin-right: 10px;
38
-
39
- ul {
40
- bottom: 30px;
41
- width: 50px;
42
-
43
- li {
44
- height: 23px;
45
- font-size: 14px;
46
-
47
- a {
48
- height: 23px;
49
- padding: 2px 5px;
50
- }
51
- }
52
- }
53
-
54
- button[data-audiotracks-button] {
55
-
56
- .quality-text,
57
- .audio-text {
58
- font-size: 13px;
59
- }
60
-
61
- span.quality-arrow,
62
- span.audio-arrow {
63
- width: 7px;
64
- height: 5px;
65
- margin-left: 4px;
66
- margin-top: 11px;
67
- }
68
- }
69
- }
70
-
71
33
  .media-control-multicamera {
72
34
  .multicamera {
73
35
  margin-top: 0;
@@ -180,7 +142,7 @@
180
142
  }
181
143
 
182
144
  .media-control-button,
183
- .gplayer-mc-panel-item {
145
+ .media-control-item {
184
146
  height: 32px;
185
147
  }
186
148
  }
@@ -1,4 +1,6 @@
1
- *, :focus, :visited {
1
+ *,
2
+ :focus,
3
+ :visited {
2
4
  outline: none !important;
3
5
  }
4
6
 
@@ -40,7 +42,7 @@
40
42
  }
41
43
  }
42
44
 
43
- & > ul {
45
+ &>ul {
44
46
  padding: 6px 0;
45
47
  right: -24px;
46
48
  width: 245px;
@@ -91,7 +93,8 @@
91
93
  pointer-events: none;
92
94
  }
93
95
 
94
- &:hover, &.multicamera-active {
96
+ &:hover,
97
+ &.multicamera-active {
95
98
  background-color: rgb(0 0 0 / 30%);
96
99
  }
97
100
 
@@ -110,7 +113,8 @@
110
113
  text-align: left;
111
114
  margin-left: 15px;
112
115
 
113
- .multicamera-title, .multicamera-description {
116
+ .multicamera-title,
117
+ .multicamera-description {
114
118
  width: 120px;
115
119
  height: 20px;
116
120
  font-family: Roboto, "Open Sans", Arial, sans-serif;
@@ -159,18 +163,4 @@
159
163
  }
160
164
 
161
165
  }
162
- }
163
-
164
- @keyframes pulse {
165
- 0% {
166
- color: #fff;
167
- }
168
-
169
- 50% {
170
- color: #ff0101
171
- }
172
-
173
- 100% {
174
- color: #B80000;
175
- }
176
- }
166
+ }
@@ -0,0 +1,13 @@
1
+ .media-control-skin-1 {
2
+ .media-control-item.media-control-pip {
3
+ order: 95;
4
+
5
+ button {
6
+ height: 20px;
7
+
8
+ svg {
9
+ height: 20px;
10
+ }
11
+ }
12
+ }
13
+ }
@@ -1,91 +1,131 @@
1
- *,
2
- :focus,
3
- :visited {
4
- outline: none !important;
5
- }
6
-
7
- .media-control-cc[data-cc] {
8
- position: relative;
9
- order: 85;
10
-
11
- button {
12
- background-color: transparent;
13
- color: #fff;
14
- -webkit-font-smoothing: antialiased;
15
- border: none;
16
- cursor: pointer;
1
+ .media-control-skin-1 {
2
+ .media-control-cc {
3
+ button.media-control-button {
4
+ display: flex;
5
+ justify-content: center;
6
+ padding: 0;
7
+ align-items: center;
8
+ vertical-align: top;
17
9
 
18
- .cc-text {
19
- svg {
20
- fill: white;
10
+ &:hover {
11
+ color: white;
21
12
  }
22
13
  }
23
14
 
24
- &:hover {
25
- color: #c9c9c9;
26
- }
15
+ ul {
16
+ // TODO extract common styles
17
+ width: auto;
18
+ border-radius: 4px;
19
+ bottom: 52px;
20
+ margin-left: -28px;
21
+
22
+ li {
23
+ font-size: 16px;
24
+ text-align: center;
25
+ white-space: nowrap;
26
+ height: 30px;
27
+
28
+ a {
29
+ height: 30px;
30
+ padding: 5px 10px;
31
+ color: #fffffe;
32
+
33
+ &:hover {
34
+ background-color: rgb(0 0 0 / 40%);
35
+ }
36
+ }
37
+
38
+ &.current a {
39
+ background-color: rgb(0 0 0 / 40%);
40
+ }
41
+
42
+ &:first-child {
43
+ a {
44
+ border-bottom-left-radius: 4px;
45
+ border-bottom-right-radius: 4px;
46
+ }
47
+ }
27
48
 
28
- &.changing {
29
- animation: pulse 0.5s infinite alternate;
49
+ &:last-child {
50
+ a {
51
+ border-top-left-radius: 4px;
52
+ border-top-right-radius: 4px;
53
+ }
54
+ }
55
+ }
30
56
  }
31
57
  }
32
58
 
33
- ul {
34
- width: 80px;
35
- list-style-type: none;
36
- position: absolute;
37
- bottom: 25px;
38
- border: 1px solid black;
39
- background-color: #e6e6e6;
40
- padding: 8px 0;
41
- }
59
+ .media-control-cc {
60
+ position: relative;
61
+ order: 85;
42
62
 
43
- li {
44
- a {
45
- color: #444;
46
- padding: 2px 10px;
47
- display: block;
48
- text-decoration: none;
63
+ button {
64
+ background-color: transparent;
65
+ color: #fff;
66
+ -webkit-font-smoothing: antialiased;
67
+ border: none;
68
+ cursor: pointer;
69
+
70
+ .cc-text {
71
+ svg {
72
+ fill: white;
73
+ }
74
+ }
49
75
 
50
76
  &:hover {
51
- background-color: #555;
52
- color: white;
77
+ color: #c9c9c9;
78
+ }
53
79
 
54
- a {
55
- color: white;
56
- text-decoration: none;
57
- }
80
+ &.changing {
81
+ animation: pulse 0.5s infinite alternate;
58
82
  }
59
83
  }
60
84
 
61
- &.current a {
62
- color: #f00;
63
- background-color: #555;
85
+ ul {
86
+ width: 80px;
87
+ overflow: hidden;
88
+ list-style-type: none;
89
+ position: absolute;
90
+ bottom: 25px;
91
+ border: none;
92
+ background-color: #e6e6e6;
93
+ padding: 8px 0;
94
+ box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
64
95
  }
65
96
 
66
- }
67
- }
97
+ li {
98
+ a {
99
+ color: #444;
100
+ padding: 2px 10px;
101
+ display: block;
102
+ text-decoration: none;
68
103
 
69
- @keyframes pulse {
70
- 0% {
71
- color: #fff;
72
- }
104
+ &:hover {
105
+ background-color: #555;
106
+ color: white;
73
107
 
74
- 50% {
75
- color: #ff0101
76
- }
108
+ a {
109
+ color: white;
110
+ text-decoration: none;
111
+ }
112
+ }
113
+ }
77
114
 
78
- 100% {
79
- color: #B80000;
80
- }
81
- }
115
+ &.current a {
116
+ color: #f00;
117
+ background-color: #555;
118
+ }
82
119
 
83
- ::cue {
84
- visibility: hidden !important;
85
- font-size: 0 !important;
120
+ }
121
+ }
86
122
  }
87
123
 
88
- .ios-fullscreen::cue {
89
- visibility: visible !important;
90
- font-size: 1em !important;
91
- }
124
+ // ::cue {
125
+ // visibility: hidden !important;
126
+ // font-size: 0 !important;
127
+ // }
128
+ // .ios-fullscreen::cue {
129
+ // visibility: visible !important;
130
+ // font-size: 1em !important;
131
+ // }
package/dist/core.js CHANGED
@@ -43228,7 +43228,7 @@ class Player {
43228
43228
  }
43229
43229
  }
43230
43230
 
43231
- var version$1 = "2.25.5";
43231
+ var version$1 = "2.25.7";
43232
43232
 
43233
43233
  var packages = {
43234
43234
  "node_modules/@clappr/core": {