@gcorevideo/player 2.28.13 → 2.28.16

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.
package/dist/index.css CHANGED
@@ -122,55 +122,69 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }.big-mute-icon-wrapper[data-big-mute] {
126
- position: absolute;
127
- z-index: 9998;
128
- background-color: transparent;
129
- display: flex;
130
- justify-content: center;
125
+ }*,
126
+ :focus,
127
+ :visited {
128
+ outline: none !important;
129
+ }
130
+
131
+ .gear-wrapper .go-back {
132
+ font-weight: 600;
133
+ font-size: 14px;
134
+ line-height: 20px;
131
135
  width: 100%;
132
- height: calc(100% - 50px);
133
- margin: 0 auto;
134
- opacity: 0.75;
135
- transition: opacity 0.1s ease;
136
- pointer-events: auto;
136
+ text-align: left;
137
+ padding: 12px;
137
138
  }
138
- .big-mute-icon-wrapper[data-big-mute].hide {
139
- display: none;
139
+ .gear-wrapper .go-back .arrow-left-icon {
140
+ float: left;
141
+ padding-top: 2px;
142
+ padding-right: 2px;
140
143
  }
141
- .big-mute-icon-wrapper[data-big-mute]:hover {
142
- cursor: pointer;
144
+ .gear-wrapper .go-back .arrow-left-icon svg {
145
+ height: 16px;
143
146
  }
144
-
145
- .big-mute-icon[data-big-mute-icon] {
146
- display: flex;
147
- align-items: center;
148
- justify-content: center;
149
- align-self: center;
150
- width: 120px;
151
- height: 120px;
152
- border: 2px solid white;
153
- border-radius: 50%;
154
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
155
- filter: alpha(opacity=60);
156
- opacity: 1;
157
- box-shadow: 0 0 1px 0 white;
158
- background: rgba(240, 243, 247, 0.9411764706);
159
- z-index: 10000;
147
+ .gear-wrapper .gear-options-list,
148
+ .gear-wrapper .gear-sub-menu {
149
+ list-style-type: none;
160
150
  }
161
- .big-mute-icon[data-big-mute-icon] svg {
162
- margin-left: 5px;
163
- width: 80px;
164
- height: 80px;
151
+ .gear-wrapper ul.gear-sub-menu {
152
+ width: 100%;
153
+ min-width: 60px;
154
+ border-top: 2px solid rgb(36, 36, 36);
155
+ overflow-y: auto;
165
156
  }
166
- .big-mute-icon[data-big-mute-icon] svg path {
167
- fill: #1f1e1e !important;
157
+ .gear-wrapper ul.gear-sub-menu li {
158
+ font-size: 12px;
159
+ text-align: left;
168
160
  }
169
- .big-mute-icon[data-big-mute-icon]:hover {
170
- background: rgba(240, 243, 247, 0.8784313725);
161
+ .gear-wrapper ul.gear-sub-menu li a {
162
+ display: block;
163
+ text-decoration: none;
164
+ height: 30px;
165
+ padding: 5px 10px;
166
+ line-height: 22px;
167
+ color: var(--gplayer-mc-text-dim-color);
171
168
  }
172
- .big-mute-icon[data-big-mute-icon]:hover svg path {
173
- fill: #151515 !important;
169
+ .gear-wrapper ul.gear-sub-menu li a:hover {
170
+ color: var(--gplayer-mc-text-color);
171
+ background-color: rgba(0, 0, 0, 0.4);
172
+ }
173
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
174
+ color: var(--gplayer-mc-text-color);
175
+ text-decoration: none;
176
+ }
177
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
178
+ width: 30px;
179
+ height: 20px;
180
+ float: left;
181
+ display: block;
182
+ }
183
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
184
+ display: none;
185
+ }
186
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
187
+ display: inline;
174
188
  }.media-control-skin-1 .media-control-item.media-control-gear {
175
189
  order: 99;
176
190
  }
@@ -216,64 +230,55 @@
216
230
  }
217
231
  .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
218
232
  flex: 1 0 auto;
219
- }*, :focus, :visited {
220
- outline: none !important;
221
- }
222
-
223
- .gear-wrapper .go-back {
224
- font-weight: 600;
225
- font-size: 14px;
226
- line-height: 20px;
227
- width: 100%;
228
- text-align: left;
229
- padding: 12px;
230
- }
231
- .gear-wrapper .go-back .arrow-left-icon {
232
- float: left;
233
- padding-top: 2px;
234
- padding-right: 2px;
235
- }
236
- .gear-wrapper .go-back .arrow-left-icon svg {
237
- height: 16px;
238
- }
239
- .gear-wrapper ul.gear-sub-menu {
233
+ }.big-mute-icon-wrapper[data-big-mute] {
234
+ position: absolute;
235
+ z-index: 9998;
236
+ background-color: transparent;
237
+ display: flex;
238
+ justify-content: center;
240
239
  width: 100%;
241
- list-style-type: none;
242
- min-width: 60px;
243
- border-top: 2px solid rgb(36, 36, 36);
244
- overflow-y: auto;
240
+ height: calc(100% - 50px);
241
+ margin: 0 auto;
242
+ opacity: 0.75;
243
+ transition: opacity 0.1s ease;
244
+ pointer-events: auto;
245
245
  }
246
- .gear-wrapper ul.gear-sub-menu li {
247
- font-size: 12px;
248
- text-align: left;
246
+ .big-mute-icon-wrapper[data-big-mute].hide {
247
+ display: none;
249
248
  }
250
- .gear-wrapper ul.gear-sub-menu li a {
251
- display: block;
252
- text-decoration: none;
253
- height: 30px;
254
- padding: 5px 10px;
255
- line-height: 22px;
256
- color: var(--gplayer-mc-text-dim-color);
249
+ .big-mute-icon-wrapper[data-big-mute]:hover {
250
+ cursor: pointer;
257
251
  }
258
- .gear-wrapper ul.gear-sub-menu li a:hover {
259
- color: var(--gplayer-mc-text-color);
260
- background-color: rgba(0, 0, 0, 0.4);
252
+
253
+ .big-mute-icon[data-big-mute-icon] {
254
+ display: flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ align-self: center;
258
+ width: 120px;
259
+ height: 120px;
260
+ border: 2px solid white;
261
+ border-radius: 50%;
262
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
263
+ filter: alpha(opacity=60);
264
+ opacity: 1;
265
+ box-shadow: 0 0 1px 0 white;
266
+ background: rgba(240, 243, 247, 0.9411764706);
267
+ z-index: 10000;
261
268
  }
262
- .gear-wrapper ul.gear-sub-menu li a:hover a {
263
- color: var(--gplayer-mc-text-color);
264
- text-decoration: none;
269
+ .big-mute-icon[data-big-mute-icon] svg {
270
+ margin-left: 5px;
271
+ width: 80px;
272
+ height: 80px;
265
273
  }
266
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
267
- width: 30px;
268
- height: 20px;
269
- float: left;
270
- display: block;
274
+ .big-mute-icon[data-big-mute-icon] svg path {
275
+ fill: #1f1e1e !important;
271
276
  }
272
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
273
- display: none;
277
+ .big-mute-icon[data-big-mute-icon]:hover {
278
+ background: rgba(240, 243, 247, 0.8784313725);
274
279
  }
275
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
276
- display: inline;
280
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
281
+ fill: #151515 !important;
277
282
  }:root {
278
283
  --primary-background-color: #000;
279
284
  --secondary-background-color: #262626;
@@ -766,28 +771,171 @@
766
771
  flex-direction: column;
767
772
  justify-content: center;
768
773
  }
769
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
774
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
775
+ font-size: 14px;
776
+ color: #CCCACA;
777
+ margin-top: 45px;
778
+ }
779
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
780
+ font-weight: bold;
781
+ line-height: 30px;
782
+ font-size: 18px;
783
+ }
784
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
785
+ width: 90%;
786
+ margin: 0 auto;
787
+ }
788
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
789
+ font-size: 13px;
790
+ margin-top: 15px;
791
+ }
792
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
793
+ cursor: pointer;
794
+ width: 30px;
795
+ margin: 15px auto 0;
796
+ }.media-control-skin-1 .media-control-item.media-control-pip {
797
+ order: 95;
798
+ }
799
+ .media-control-skin-1 .media-control-item.media-control-pip button {
800
+ height: 20px;
801
+ }
802
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
803
+ height: 20px;
804
+ }*,
805
+ :focus,
806
+ :visited {
807
+ outline: none !important;
808
+ }
809
+
810
+ .multicamera[data-multicamera] {
811
+ float: right;
812
+ margin-top: 4px;
813
+ position: relative;
814
+ margin-right: 20px;
815
+ width: 20px;
816
+ }
817
+ .multicamera[data-multicamera] button {
818
+ background-color: transparent;
819
+ color: #fff;
820
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
821
+ -webkit-font-smoothing: antialiased;
822
+ border: none;
823
+ font-size: 14px;
824
+ padding: 0;
825
+ }
826
+ .multicamera[data-multicamera] button svg {
827
+ height: 20px;
828
+ position: relative;
829
+ margin-top: 6px;
830
+ }
831
+ .multicamera[data-multicamera] button:hover {
832
+ color: #c9c9c9;
833
+ }
834
+ .multicamera[data-multicamera] button.changing {
835
+ animation: pulse 0.5s infinite alternate;
836
+ }
837
+ .multicamera[data-multicamera] button span.quality-arrow {
838
+ width: 9px;
839
+ height: 6px;
840
+ margin-top: 11px;
841
+ margin-left: 5px;
842
+ }
843
+ .multicamera[data-multicamera] > ul {
844
+ padding: 6px 0;
845
+ right: -24px;
846
+ width: 245px;
847
+ list-style-type: none;
848
+ position: absolute;
849
+ bottom: 48px;
850
+ border-radius: 4px;
851
+ display: none;
852
+ background-color: rgba(74, 74, 74, 0.9);
853
+ }
854
+ .multicamera[data-multicamera] > ul::after {
855
+ content: "";
856
+ position: absolute;
857
+ top: 100%;
858
+ left: 85%;
859
+ margin-left: -10px;
860
+ width: 0;
861
+ height: 0;
862
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
863
+ border-right: 10px solid transparent;
864
+ border-left: 10px solid transparent;
865
+ }
866
+ .multicamera[data-multicamera] li {
867
+ font-size: 10px;
868
+ cursor: pointer;
869
+ }
870
+ .multicamera[data-multicamera] li .multicamera-item {
871
+ display: flex;
872
+ padding: 10px 0;
873
+ justify-content: center;
874
+ position: relative;
875
+ }
876
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
877
+ opacity: 0.5;
878
+ }
879
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
880
+ opacity: 0.5;
881
+ }
882
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
883
+ background-color: rgba(0, 0, 0, 0);
884
+ }
885
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
886
+ pointer-events: none;
887
+ }
888
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
889
+ background-color: rgba(0, 0, 0, 0.3);
890
+ }
891
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
892
+ width: 80px;
893
+ height: 60px;
894
+ }
895
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
896
+ width: 80px;
897
+ height: 60px;
898
+ }
899
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
900
+ width: 120px;
901
+ text-align: left;
902
+ margin-left: 15px;
903
+ }
904
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
905
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
906
+ width: 120px;
907
+ height: 20px;
908
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
770
909
  font-size: 14px;
771
- color: #CCCACA;
772
- margin-top: 45px;
910
+ font-weight: normal;
911
+ font-style: normal;
912
+ font-stretch: normal;
913
+ line-height: 1.43;
914
+ letter-spacing: normal;
915
+ text-align: left;
916
+ color: #fff;
917
+ text-overflow: ellipsis;
918
+ overflow: hidden;
773
919
  }
774
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
775
- font-weight: bold;
776
- line-height: 30px;
777
- font-size: 18px;
920
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
921
+ opacity: 0.6;
778
922
  }
779
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
780
- width: 90%;
781
- margin: 0 auto;
923
+ .multicamera[data-multicamera] li a {
924
+ color: #444;
925
+ padding: 2px 10px;
926
+ display: block;
927
+ text-decoration: none;
782
928
  }
783
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
784
- font-size: 13px;
785
- margin-top: 15px;
929
+ .multicamera[data-multicamera] li a:hover {
930
+ background-color: #555;
931
+ color: white;
786
932
  }
787
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
788
- cursor: pointer;
789
- width: 30px;
790
- margin: 15px auto 0;
933
+ .multicamera[data-multicamera] li a:hover a {
934
+ color: white;
935
+ text-decoration: none;
936
+ }
937
+ .multicamera[data-multicamera] li.current a {
938
+ color: #f00;
791
939
  }[data-player] {
792
940
  --bottom-panel: 40px;
793
941
  }
@@ -1134,16 +1282,16 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1134
1282
  .media-control-skin-1 .media-control-indicator[data-position] {
1135
1283
  margin: 1px 0 0 7px;
1136
1284
  }
1285
+ .media-control-skin-1 .media-control-indicator[data-duration]::before {
1286
+ content: "|";
1287
+ margin-right: 7px;
1288
+ }
1137
1289
  .media-control-skin-1 .media-control-indicator[data-duration] {
1138
1290
  color: rgb(255, 255, 255);
1139
1291
  opacity: 0.5;
1140
1292
  margin-top: 1px;
1141
1293
  margin-right: 6px;
1142
1294
  }
1143
- .media-control-skin-1 .media-control-indicator[data-duration]::before {
1144
- content: "|";
1145
- margin-right: 7px;
1146
- }
1147
1295
  .media-control-skin-1 .bar-container[data-seekbar] {
1148
1296
  position: absolute;
1149
1297
  top: -11px;
@@ -1409,149 +1557,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1409
1557
  100% {
1410
1558
  color: #B80000;
1411
1559
  }
1412
- }.media-control-skin-1 .media-control-item.media-control-pip {
1413
- order: 95;
1414
- }
1415
- .media-control-skin-1 .media-control-item.media-control-pip button {
1416
- height: 20px;
1417
- }
1418
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
1419
- height: 20px;
1420
- }*,
1421
- :focus,
1422
- :visited {
1423
- outline: none !important;
1424
- }
1425
-
1426
- .multicamera[data-multicamera] {
1427
- float: right;
1428
- margin-top: 4px;
1429
- position: relative;
1430
- margin-right: 20px;
1431
- width: 20px;
1432
- }
1433
- .multicamera[data-multicamera] button {
1434
- background-color: transparent;
1435
- color: #fff;
1436
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1437
- -webkit-font-smoothing: antialiased;
1438
- border: none;
1439
- font-size: 14px;
1440
- padding: 0;
1441
- }
1442
- .multicamera[data-multicamera] button svg {
1443
- height: 20px;
1444
- position: relative;
1445
- margin-top: 6px;
1446
- }
1447
- .multicamera[data-multicamera] button:hover {
1448
- color: #c9c9c9;
1449
- }
1450
- .multicamera[data-multicamera] button.changing {
1451
- animation: pulse 0.5s infinite alternate;
1452
- }
1453
- .multicamera[data-multicamera] button span.quality-arrow {
1454
- width: 9px;
1455
- height: 6px;
1456
- margin-top: 11px;
1457
- margin-left: 5px;
1458
- }
1459
- .multicamera[data-multicamera] > ul {
1460
- padding: 6px 0;
1461
- right: -24px;
1462
- width: 245px;
1463
- list-style-type: none;
1464
- position: absolute;
1465
- bottom: 48px;
1466
- border-radius: 4px;
1467
- display: none;
1468
- background-color: rgba(74, 74, 74, 0.9);
1469
- }
1470
- .multicamera[data-multicamera] > ul::after {
1471
- content: "";
1472
- position: absolute;
1473
- top: 100%;
1474
- left: 85%;
1475
- margin-left: -10px;
1476
- width: 0;
1477
- height: 0;
1478
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1479
- border-right: 10px solid transparent;
1480
- border-left: 10px solid transparent;
1481
- }
1482
- .multicamera[data-multicamera] li {
1483
- font-size: 10px;
1484
- cursor: pointer;
1485
- }
1486
- .multicamera[data-multicamera] li .multicamera-item {
1487
- display: flex;
1488
- padding: 10px 0;
1489
- justify-content: center;
1490
- position: relative;
1491
- }
1492
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1493
- pointer-events: none;
1494
- }
1495
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1496
- opacity: 0.5;
1497
- }
1498
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1499
- opacity: 0.5;
1500
- }
1501
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1502
- background-color: rgba(0, 0, 0, 0);
1503
- }
1504
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1505
- background-color: rgba(0, 0, 0, 0.3);
1506
- }
1507
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1508
- width: 80px;
1509
- height: 60px;
1510
- }
1511
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1512
- width: 80px;
1513
- height: 60px;
1514
- }
1515
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1516
- width: 120px;
1517
- text-align: left;
1518
- margin-left: 15px;
1519
- }
1520
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
1521
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1522
- width: 120px;
1523
- height: 20px;
1524
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1525
- font-size: 14px;
1526
- font-weight: normal;
1527
- font-style: normal;
1528
- font-stretch: normal;
1529
- line-height: 1.43;
1530
- letter-spacing: normal;
1531
- text-align: left;
1532
- color: #fff;
1533
- text-overflow: ellipsis;
1534
- overflow: hidden;
1535
- }
1536
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1537
- opacity: 0.6;
1538
- }
1539
- .multicamera[data-multicamera] li a {
1540
- color: #444;
1541
- padding: 2px 10px;
1542
- display: block;
1543
- text-decoration: none;
1544
- }
1545
- .multicamera[data-multicamera] li a:hover {
1546
- background-color: #555;
1547
- color: white;
1548
- }
1549
- .multicamera[data-multicamera] li a:hover a {
1550
- color: white;
1551
- text-decoration: none;
1552
- }
1553
- .multicamera[data-multicamera] li.current a {
1554
- color: #f00;
1555
1560
  }.player-poster {
1556
1561
  display: flex;
1557
1562
  justify-content: center;
@@ -1592,6 +1597,27 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1592
1597
  }
1593
1598
  .quality-levels li.current {
1594
1599
  background-color: #000;
1600
+ }.container-with-poster-clickable .mc-skip-time {
1601
+ height: 0;
1602
+ }
1603
+
1604
+ .mc-skip-time {
1605
+ position: absolute;
1606
+ width: 100%;
1607
+ height: calc(100% - 50px);
1608
+ z-index: 9998;
1609
+ background-color: transparent;
1610
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1611
+ }
1612
+ .mc-skip-time .skip-container {
1613
+ width: 100%;
1614
+ height: 100%;
1615
+ display: flex;
1616
+ justify-content: space-between;
1617
+ }
1618
+ .mc-skip-time .skip-container .skip-item {
1619
+ flex: 1 0 0px;
1620
+ height: 100%;
1595
1621
  }.seek-time {
1596
1622
  position: absolute;
1597
1623
  white-space: nowrap;
@@ -1708,27 +1734,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1708
1734
  display: inline-block;
1709
1735
  margin-right: 5px;
1710
1736
  cursor: pointer;
1711
- }.container-with-poster-clickable .mc-skip-time {
1712
- height: 0;
1713
- }
1714
-
1715
- .mc-skip-time {
1716
- position: absolute;
1717
- width: 100%;
1718
- height: calc(100% - 50px);
1719
- z-index: 9998;
1720
- background-color: transparent;
1721
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1722
- }
1723
- .mc-skip-time .skip-container {
1724
- width: 100%;
1725
- height: 100%;
1726
- display: flex;
1727
- justify-content: space-between;
1728
- }
1729
- .mc-skip-time .skip-container .skip-item {
1730
- flex: 1 0 0px;
1731
- height: 100%;
1732
1737
  }.spinner-three-bounce[data-spinner] {
1733
1738
  position: absolute;
1734
1739
  width: 70px;