@gcorevideo/player 2.28.11 → 2.28.13

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
@@ -171,6 +171,51 @@
171
171
  }
172
172
  .big-mute-icon[data-big-mute-icon]:hover svg path {
173
173
  fill: #151515 !important;
174
+ }.media-control-skin-1 .media-control-item.media-control-gear {
175
+ order: 99;
176
+ }
177
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
178
+ position: absolute;
179
+ right: 16px;
180
+ bottom: 52px;
181
+ width: 250px;
182
+ min-height: 48px;
183
+ z-index: 9999;
184
+ border-radius: 4px;
185
+ box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
186
+ }
187
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
188
+ padding: 8px 0;
189
+ }
190
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
191
+ margin: 0;
192
+ text-align: left;
193
+ line-height: 22px;
194
+ padding: 5px 14px;
195
+ width: 250px;
196
+ font-size: 12px;
197
+ display: flex;
198
+ align-items: center;
199
+ justify-content: flex-start;
200
+ gap: 8px;
201
+ }
202
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
203
+ flex: 24px 0 0;
204
+ height: 24px;
205
+ }
206
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
207
+ visibility: hidden;
208
+ display: inline-block;
209
+ }
210
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
211
+ flex: 0 1 100%;
212
+ }
213
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
214
+ flex: 0 0 14px;
215
+ height: 24px;
216
+ }
217
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
218
+ flex: 1 0 auto;
174
219
  }*, :focus, :visited {
175
220
  outline: none !important;
176
221
  }
@@ -229,51 +274,6 @@
229
274
  }
230
275
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
231
276
  display: inline;
232
- }.media-control-skin-1 .media-control-item.media-control-gear {
233
- order: 99;
234
- }
235
- .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
236
- position: absolute;
237
- right: 16px;
238
- bottom: 52px;
239
- width: 250px;
240
- min-height: 48px;
241
- z-index: 9999;
242
- border-radius: 4px;
243
- box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
244
- }
245
- .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
246
- padding: 8px 0;
247
- }
248
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
249
- margin: 0;
250
- text-align: left;
251
- line-height: 22px;
252
- padding: 5px 14px;
253
- width: 250px;
254
- font-size: 12px;
255
- display: flex;
256
- align-items: center;
257
- justify-content: flex-start;
258
- gap: 8px;
259
- }
260
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
261
- flex: 24px 0 0;
262
- height: 24px;
263
- }
264
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
265
- visibility: hidden;
266
- display: inline-block;
267
- }
268
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
269
- flex: 0 1 100%;
270
- }
271
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
272
- flex: 0 0 14px;
273
- height: 24px;
274
- }
275
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
276
- flex: 1 0 auto;
277
277
  }:root {
278
278
  --primary-background-color: #000;
279
279
  --secondary-background-color: #262626;
@@ -697,40 +697,6 @@
697
697
  .context-menu .context-menu-list-item_icon {
698
698
  width: 20px;
699
699
  height: 20px;
700
- }div.player-error-screen, [data-player] div.player-error-screen {
701
- color: #CCCACA;
702
- position: absolute;
703
- top: 0;
704
- height: 100%;
705
- width: 100%;
706
- background-color: rgba(0, 0, 0, 0.7);
707
- z-index: 2000;
708
- display: flex;
709
- flex-direction: column;
710
- justify-content: center;
711
- }
712
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
713
- font-size: 14px;
714
- color: #CCCACA;
715
- margin-top: 45px;
716
- }
717
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
718
- font-weight: bold;
719
- line-height: 30px;
720
- font-size: 18px;
721
- }
722
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
723
- width: 90%;
724
- margin: 0 auto;
725
- }
726
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
727
- font-size: 13px;
728
- margin-top: 15px;
729
- }
730
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
731
- cursor: pointer;
732
- width: 30px;
733
- margin: 15px auto 0;
734
700
  }.dvr-controls {
735
701
  --disabled-opacity: 0.3;
736
702
  --circle-radius: 5px;
@@ -788,183 +754,40 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
788
754
  .dvr-controls .live-button:hover {
789
755
  opacity: 1;
790
756
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
791
- }*,
792
- :focus,
793
- :visited {
794
- outline: none !important;
795
- }
796
-
797
- .multicamera[data-multicamera] {
798
- float: right;
799
- margin-top: 4px;
800
- position: relative;
801
- margin-right: 20px;
802
- width: 20px;
803
- }
804
- .multicamera[data-multicamera] button {
805
- background-color: transparent;
806
- color: #fff;
807
- font-family: Roboto, "Open Sans", Arial, sans-serif;
808
- -webkit-font-smoothing: antialiased;
809
- border: none;
810
- font-size: 14px;
811
- padding: 0;
812
- }
813
- .multicamera[data-multicamera] button svg {
814
- height: 20px;
815
- position: relative;
816
- margin-top: 6px;
817
- }
818
- .multicamera[data-multicamera] button:hover {
819
- color: #c9c9c9;
820
- }
821
- .multicamera[data-multicamera] button.changing {
822
- animation: pulse 0.5s infinite alternate;
823
- }
824
- .multicamera[data-multicamera] button span.quality-arrow {
825
- width: 9px;
826
- height: 6px;
827
- margin-top: 11px;
828
- margin-left: 5px;
829
- }
830
- .multicamera[data-multicamera] > ul {
831
- padding: 6px 0;
832
- right: -24px;
833
- width: 245px;
834
- list-style-type: none;
835
- position: absolute;
836
- bottom: 48px;
837
- border-radius: 4px;
838
- display: none;
839
- background-color: rgba(74, 74, 74, 0.9);
840
- }
841
- .multicamera[data-multicamera] > ul::after {
842
- content: "";
757
+ }div.player-error-screen, [data-player] div.player-error-screen {
758
+ color: #CCCACA;
843
759
  position: absolute;
844
- top: 100%;
845
- left: 85%;
846
- margin-left: -10px;
847
- width: 0;
848
- height: 0;
849
- border-top: 10px solid rgba(74, 74, 74, 0.9);
850
- border-right: 10px solid transparent;
851
- border-left: 10px solid transparent;
852
- }
853
- .multicamera[data-multicamera] li {
854
- font-size: 10px;
855
- cursor: pointer;
856
- }
857
- .multicamera[data-multicamera] li .multicamera-item {
760
+ top: 0;
761
+ height: 100%;
762
+ width: 100%;
763
+ background-color: rgba(0, 0, 0, 0.7);
764
+ z-index: 2000;
858
765
  display: flex;
859
- padding: 10px 0;
766
+ flex-direction: column;
860
767
  justify-content: center;
861
- position: relative;
862
- }
863
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
864
- pointer-events: none;
865
- }
866
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
867
- opacity: 0.5;
868
- }
869
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
870
- opacity: 0.5;
871
- }
872
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
873
- background-color: rgba(0, 0, 0, 0);
874
768
  }
875
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
876
- background-color: rgba(0, 0, 0, 0.3);
877
- }
878
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
879
- width: 80px;
880
- height: 60px;
881
- }
882
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
883
- width: 80px;
884
- height: 60px;
885
- }
886
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
887
- width: 120px;
888
- text-align: left;
889
- margin-left: 15px;
890
- }
891
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
892
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
893
- width: 120px;
894
- height: 20px;
895
- font-family: Roboto, "Open Sans", Arial, sans-serif;
769
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
896
770
  font-size: 14px;
897
- font-weight: normal;
898
- font-style: normal;
899
- font-stretch: normal;
900
- line-height: 1.43;
901
- letter-spacing: normal;
902
- text-align: left;
903
- color: #fff;
904
- text-overflow: ellipsis;
905
- overflow: hidden;
906
- }
907
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
908
- opacity: 0.6;
909
- }
910
- .multicamera[data-multicamera] li a {
911
- color: #444;
912
- padding: 2px 10px;
913
- display: block;
914
- text-decoration: none;
915
- }
916
- .multicamera[data-multicamera] li a:hover {
917
- background-color: #555;
918
- color: white;
919
- }
920
- .multicamera[data-multicamera] li a:hover a {
921
- color: white;
922
- text-decoration: none;
923
- }
924
- .multicamera[data-multicamera] li.current a {
925
- color: #f00;
926
- }.media-control-skin-1 .media-control-item.media-control-pip {
927
- order: 95;
928
- }
929
- .media-control-skin-1 .media-control-item.media-control-pip button {
930
- height: 20px;
931
- }
932
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
933
- height: 20px;
934
- }.player-poster {
935
- display: flex;
936
- justify-content: center;
937
- align-items: center;
938
- position: absolute;
939
- height: 100%;
940
- width: 100%;
941
- z-index: 998;
942
- top: 0;
943
- left: 0;
944
- background-color: #000;
945
- background-size: cover;
946
- background-repeat: no-repeat;
947
- background-position: 50% 50%;
948
- }
949
- .player-poster.clickable {
950
- cursor: pointer;
771
+ color: #CCCACA;
772
+ margin-top: 45px;
951
773
  }
952
- .player-poster:hover .play-wrapper {
953
- opacity: 1;
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;
954
778
  }
955
- .player-poster .play-wrapper {
956
- width: 100%;
957
- height: 25%;
779
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
780
+ width: 90%;
958
781
  margin: 0 auto;
959
- opacity: 0.75;
960
- transition: opacity 0.1s ease;
961
782
  }
962
- .player-poster .play-wrapper svg {
963
- height: 100%;
964
- display: inline;
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;
965
786
  }
966
- .player-poster .play-wrapper svg path {
967
- fill: #fff;
787
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
788
+ cursor: pointer;
789
+ width: 30px;
790
+ margin: 15px auto 0;
968
791
  }[data-player] {
969
792
  --bottom-panel: 40px;
970
793
  }
@@ -1586,6 +1409,222 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1586
1409
  100% {
1587
1410
  color: #B80000;
1588
1411
  }
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
+ }.player-poster {
1556
+ display: flex;
1557
+ justify-content: center;
1558
+ align-items: center;
1559
+ position: absolute;
1560
+ height: 100%;
1561
+ width: 100%;
1562
+ z-index: 998;
1563
+ top: 0;
1564
+ left: 0;
1565
+ background-color: #000;
1566
+ background-size: cover;
1567
+ background-repeat: no-repeat;
1568
+ background-position: 50% 50%;
1569
+ }
1570
+ .player-poster.clickable {
1571
+ cursor: pointer;
1572
+ }
1573
+ .player-poster:hover .play-wrapper {
1574
+ opacity: 1;
1575
+ }
1576
+ .player-poster .play-wrapper {
1577
+ width: 100%;
1578
+ height: 25%;
1579
+ margin: 0 auto;
1580
+ opacity: 0.75;
1581
+ transition: opacity 0.1s ease;
1582
+ }
1583
+ .player-poster .play-wrapper svg {
1584
+ height: 100%;
1585
+ display: inline;
1586
+ }
1587
+ .player-poster .play-wrapper svg path {
1588
+ fill: #fff;
1589
+ }.quality-levels li.disabled {
1590
+ opacity: 0.5;
1591
+ pointer-events: none;
1592
+ }
1593
+ .quality-levels li.current {
1594
+ background-color: #000;
1595
+ }.seek-time {
1596
+ position: absolute;
1597
+ white-space: nowrap;
1598
+ height: 20px;
1599
+ line-height: 20px;
1600
+ font-size: 0;
1601
+ left: -100%;
1602
+ bottom: 55px;
1603
+ background-color: rgba(2, 2, 2, 0.5);
1604
+ z-index: 9999;
1605
+ transition: opacity 0.1s ease;
1606
+ }
1607
+ .seek-time.hidden {
1608
+ opacity: 0;
1609
+ }
1610
+ .seek-time .seek-time__pos {
1611
+ display: inline-block;
1612
+ color: white;
1613
+ font-size: 10px;
1614
+ padding-left: 7px;
1615
+ padding-right: 7px;
1616
+ vertical-align: top;
1617
+ }
1618
+ .seek-time .seek-time__duration {
1619
+ display: inline-block;
1620
+ color: rgba(255, 255, 255, 0.5);
1621
+ font-size: 10px;
1622
+ padding-right: 7px;
1623
+ vertical-align: top;
1624
+ }
1625
+ .seek-time .seek-time__duration::before {
1626
+ content: "|";
1627
+ margin-right: 7px;
1589
1628
  }.share_plugin[data-share] {
1590
1629
  pointer-events: auto;
1591
1630
  z-index: 5;
@@ -1669,45 +1708,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1669
1708
  display: inline-block;
1670
1709
  margin-right: 5px;
1671
1710
  cursor: pointer;
1672
- }.quality-levels li.disabled {
1673
- opacity: 0.5;
1674
- pointer-events: none;
1675
- }
1676
- .quality-levels li.current {
1677
- background-color: #000;
1678
- }.seek-time {
1679
- position: absolute;
1680
- white-space: nowrap;
1681
- height: 20px;
1682
- line-height: 20px;
1683
- font-size: 0;
1684
- left: -100%;
1685
- bottom: 55px;
1686
- background-color: rgba(2, 2, 2, 0.5);
1687
- z-index: 9999;
1688
- transition: opacity 0.1s ease;
1689
- }
1690
- .seek-time.hidden {
1691
- opacity: 0;
1692
- }
1693
- .seek-time .seek-time__pos {
1694
- display: inline-block;
1695
- color: white;
1696
- font-size: 10px;
1697
- padding-left: 7px;
1698
- padding-right: 7px;
1699
- vertical-align: top;
1700
- }
1701
- .seek-time .seek-time__duration {
1702
- display: inline-block;
1703
- color: rgba(255, 255, 255, 0.5);
1704
- font-size: 10px;
1705
- padding-right: 7px;
1706
- vertical-align: top;
1707
- }
1708
- .seek-time .seek-time__duration::before {
1709
- content: "|";
1710
- margin-right: 7px;
1711
1711
  }.container-with-poster-clickable .mc-skip-time {
1712
1712
  height: 0;
1713
1713
  }