@gcorevideo/player 2.28.14 → 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,7 +122,9 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }*, :focus, :visited {
125
+ }*,
126
+ :focus,
127
+ :visited {
126
128
  outline: none !important;
127
129
  }
128
130
 
@@ -142,9 +144,12 @@
142
144
  .gear-wrapper .go-back .arrow-left-icon svg {
143
145
  height: 16px;
144
146
  }
147
+ .gear-wrapper .gear-options-list,
148
+ .gear-wrapper .gear-sub-menu {
149
+ list-style-type: none;
150
+ }
145
151
  .gear-wrapper ul.gear-sub-menu {
146
152
  width: 100%;
147
- list-style-type: none;
148
153
  min-width: 60px;
149
154
  border-top: 2px solid rgb(36, 36, 36);
150
155
  overflow-y: auto;
@@ -661,6 +666,42 @@
661
666
  }
662
667
  .gplayer-mc-clips .gplayer-mc-clips-text.compact {
663
668
  max-width: 100px;
669
+ }.context-menu {
670
+ z-index: 999;
671
+ position: absolute;
672
+ top: 0;
673
+ left: 0;
674
+ text-align: center;
675
+ }
676
+ .context-menu .context-menu-list {
677
+ font-family: "Proxima Nova", sans-serif;
678
+ font-size: 12px;
679
+ line-height: 12px;
680
+ list-style-type: none;
681
+ text-align: left;
682
+ padding: 5px;
683
+ margin-left: auto;
684
+ margin-right: auto;
685
+ background-color: rgba(0, 0, 0, 0.75);
686
+ border: 1px solid #666;
687
+ border-radius: 4px;
688
+ }
689
+ .context-menu .context-menu-list-item button {
690
+ border: none;
691
+ background-color: transparent;
692
+ padding: 0;
693
+ color: white;
694
+ display: flex;
695
+ gap: 8px;
696
+ align-items: center;
697
+ justify-content: center;
698
+ cursor: pointer;
699
+ padding: 5px;
700
+ width: 100%;
701
+ }
702
+ .context-menu .context-menu-list-item_icon {
703
+ width: 20px;
704
+ height: 20px;
664
705
  }.dvr-controls {
665
706
  --disabled-opacity: 0.3;
666
707
  --circle-radius: 5px;
@@ -718,42 +759,6 @@
718
759
  .dvr-controls .live-button:hover {
719
760
  opacity: 1;
720
761
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
721
- }.context-menu {
722
- z-index: 999;
723
- position: absolute;
724
- top: 0;
725
- left: 0;
726
- text-align: center;
727
- }
728
- .context-menu .context-menu-list {
729
- font-family: "Proxima Nova", sans-serif;
730
- font-size: 12px;
731
- line-height: 12px;
732
- list-style-type: none;
733
- text-align: left;
734
- padding: 5px;
735
- margin-left: auto;
736
- margin-right: auto;
737
- background-color: rgba(0, 0, 0, 0.75);
738
- border: 1px solid #666;
739
- border-radius: 4px;
740
- }
741
- .context-menu .context-menu-list-item button {
742
- border: none;
743
- background-color: transparent;
744
- padding: 0;
745
- color: white;
746
- display: flex;
747
- gap: 8px;
748
- align-items: center;
749
- justify-content: center;
750
- cursor: pointer;
751
- padding: 5px;
752
- width: 100%;
753
- }
754
- .context-menu .context-menu-list-item_icon {
755
- width: 20px;
756
- height: 20px;
757
762
  }div.player-error-screen, [data-player] div.player-error-screen {
758
763
  color: #CCCACA;
759
764
  position: absolute;
@@ -796,6 +801,141 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
796
801
  }
797
802
  .media-control-skin-1 .media-control-item.media-control-pip button svg {
798
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;
909
+ font-size: 14px;
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;
919
+ }
920
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
921
+ opacity: 0.6;
922
+ }
923
+ .multicamera[data-multicamera] li a {
924
+ color: #444;
925
+ padding: 2px 10px;
926
+ display: block;
927
+ text-decoration: none;
928
+ }
929
+ .multicamera[data-multicamera] li a:hover {
930
+ background-color: #555;
931
+ color: white;
932
+ }
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;
799
939
  }[data-player] {
800
940
  --bottom-panel: 40px;
801
941
  }
@@ -1142,16 +1282,16 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1142
1282
  .media-control-skin-1 .media-control-indicator[data-position] {
1143
1283
  margin: 1px 0 0 7px;
1144
1284
  }
1285
+ .media-control-skin-1 .media-control-indicator[data-duration]::before {
1286
+ content: "|";
1287
+ margin-right: 7px;
1288
+ }
1145
1289
  .media-control-skin-1 .media-control-indicator[data-duration] {
1146
1290
  color: rgb(255, 255, 255);
1147
1291
  opacity: 0.5;
1148
1292
  margin-top: 1px;
1149
1293
  margin-right: 6px;
1150
1294
  }
1151
- .media-control-skin-1 .media-control-indicator[data-duration]::before {
1152
- content: "|";
1153
- margin-right: 7px;
1154
- }
1155
1295
  .media-control-skin-1 .bar-container[data-seekbar] {
1156
1296
  position: absolute;
1157
1297
  top: -11px;
@@ -1417,141 +1557,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1417
1557
  100% {
1418
1558
  color: #B80000;
1419
1559
  }
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;