@gcorevideo/player 2.28.28 → 2.28.29

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,6 @@
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;
131
- 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;
137
- }
138
- .big-mute-icon-wrapper[data-big-mute].hide {
139
- display: none;
140
- }
141
- .big-mute-icon-wrapper[data-big-mute]:hover {
142
- cursor: pointer;
143
- }
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;
160
- }
161
- .big-mute-icon[data-big-mute-icon] svg {
162
- margin-left: 5px;
163
- width: 80px;
164
- height: 80px;
165
- }
166
- .big-mute-icon[data-big-mute-icon] svg path {
167
- fill: #1f1e1e !important;
168
- }
169
- .big-mute-icon[data-big-mute-icon]:hover {
170
- background: rgba(240, 243, 247, 0.8784313725);
171
- }
172
- .big-mute-icon[data-big-mute-icon]:hover svg path {
173
- fill: #151515 !important;
174
125
  }.media-control-skin-1 .media-control-item.media-control-gear {
175
126
  order: 99;
176
127
  }
@@ -279,29 +230,55 @@
279
230
  }
280
231
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
281
232
  display: inline;
282
- }@charset "UTF-8";
283
- .gplayer-mc-clips {
233
+ }.big-mute-icon-wrapper[data-big-mute] {
234
+ position: absolute;
235
+ z-index: 9998;
236
+ background-color: transparent;
284
237
  display: flex;
285
- gap: 6px;
238
+ justify-content: center;
239
+ width: 100%;
240
+ height: calc(100% - 50px);
241
+ margin: 0 auto;
242
+ opacity: 0.75;
243
+ transition: opacity 0.1s ease;
244
+ pointer-events: auto;
286
245
  }
287
- .gplayer-mc-clips .gplayer-mc-clips-text {
288
- text-overflow: ellipsis;
289
- white-space: nowrap;
290
- overflow: hidden;
291
- display: inline-block;
292
- text-overflow: ellipsis;
293
- color: white;
294
- cursor: default;
295
- line-height: var(--bottom-panel);
296
- position: relative;
297
- max-width: 150px;
246
+ .big-mute-icon-wrapper[data-big-mute].hide {
247
+ display: none;
298
248
  }
299
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
300
- content: "•";
301
- padding-right: 6px;
249
+ .big-mute-icon-wrapper[data-big-mute]:hover {
250
+ cursor: pointer;
302
251
  }
303
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
304
- max-width: 100px;
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;
268
+ }
269
+ .big-mute-icon[data-big-mute-icon] svg {
270
+ margin-left: 5px;
271
+ width: 80px;
272
+ height: 80px;
273
+ }
274
+ .big-mute-icon[data-big-mute-icon] svg path {
275
+ fill: #1f1e1e !important;
276
+ }
277
+ .big-mute-icon[data-big-mute-icon]:hover {
278
+ background: rgba(240, 243, 247, 0.8784313725);
279
+ }
280
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
281
+ fill: #151515 !important;
305
282
  }:root {
306
283
  --primary-background-color: #000;
307
284
  --secondary-background-color: #262626;
@@ -666,6 +643,29 @@
666
643
  .fullscreen .clappr-nerd-stats .stats-box {
667
644
  top: unset;
668
645
  }
646
+ }@charset "UTF-8";
647
+ .gplayer-mc-clips {
648
+ display: flex;
649
+ gap: 6px;
650
+ }
651
+ .gplayer-mc-clips .gplayer-mc-clips-text {
652
+ text-overflow: ellipsis;
653
+ white-space: nowrap;
654
+ overflow: hidden;
655
+ display: inline-block;
656
+ text-overflow: ellipsis;
657
+ color: white;
658
+ cursor: default;
659
+ line-height: var(--bottom-panel);
660
+ position: relative;
661
+ max-width: 150px;
662
+ }
663
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
664
+ content: "•";
665
+ padding-right: 6px;
666
+ }
667
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
668
+ max-width: 100px;
669
669
  }.dvr-controls {
670
670
  --disabled-opacity: 0.3;
671
671
  --circle-radius: 5px;
@@ -723,42 +723,6 @@
723
723
  .dvr-controls .live-button:hover {
724
724
  opacity: 1;
725
725
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
726
- }.context-menu {
727
- z-index: 999;
728
- position: absolute;
729
- top: 0;
730
- left: 0;
731
- text-align: center;
732
- }
733
- .context-menu .context-menu-list {
734
- font-family: "Proxima Nova", sans-serif;
735
- font-size: 12px;
736
- line-height: 12px;
737
- list-style-type: none;
738
- text-align: left;
739
- padding: 5px;
740
- margin-left: auto;
741
- margin-right: auto;
742
- background-color: rgba(0, 0, 0, 0.75);
743
- border: 1px solid #666;
744
- border-radius: 4px;
745
- }
746
- .context-menu .context-menu-list-item button {
747
- border: none;
748
- background-color: transparent;
749
- padding: 0;
750
- color: white;
751
- display: flex;
752
- gap: 8px;
753
- align-items: center;
754
- justify-content: center;
755
- cursor: pointer;
756
- padding: 5px;
757
- width: 100%;
758
- }
759
- .context-menu .context-menu-list-item_icon {
760
- width: 20px;
761
- height: 20px;
762
726
  }div.player-error-screen, [data-player] div.player-error-screen {
763
727
  color: #CCCACA;
764
728
  position: absolute;
@@ -793,183 +757,50 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
793
757
  cursor: pointer;
794
758
  width: 30px;
795
759
  margin: 15px auto 0;
796
- }*,
797
- :focus,
798
- :visited {
799
- outline: none !important;
800
- }
801
-
802
- .multicamera[data-multicamera] {
803
- float: right;
804
- margin-top: 4px;
805
- position: relative;
806
- margin-right: 20px;
807
- width: 20px;
808
- }
809
- .multicamera[data-multicamera] button {
810
- background-color: transparent;
811
- color: #fff;
812
- font-family: Roboto, "Open Sans", Arial, sans-serif;
813
- -webkit-font-smoothing: antialiased;
814
- border: none;
815
- font-size: 14px;
816
- padding: 0;
817
- }
818
- .multicamera[data-multicamera] button svg {
819
- height: 20px;
820
- position: relative;
821
- margin-top: 6px;
822
- }
823
- .multicamera[data-multicamera] button:hover {
824
- color: #c9c9c9;
825
- }
826
- .multicamera[data-multicamera] button.changing {
827
- animation: pulse 0.5s infinite alternate;
828
- }
829
- .multicamera[data-multicamera] button span.quality-arrow {
830
- width: 9px;
831
- height: 6px;
832
- margin-top: 11px;
833
- margin-left: 5px;
834
- }
835
- .multicamera[data-multicamera] > ul {
836
- padding: 6px 0;
837
- right: -24px;
838
- width: 245px;
839
- list-style-type: none;
840
- position: absolute;
841
- bottom: 48px;
842
- border-radius: 4px;
843
- display: none;
844
- background-color: rgba(74, 74, 74, 0.9);
845
- }
846
- .multicamera[data-multicamera] > ul::after {
847
- content: "";
848
- position: absolute;
849
- top: 100%;
850
- left: 85%;
851
- margin-left: -10px;
852
- width: 0;
853
- height: 0;
854
- border-top: 10px solid rgba(74, 74, 74, 0.9);
855
- border-right: 10px solid transparent;
856
- border-left: 10px solid transparent;
857
- }
858
- .multicamera[data-multicamera] li {
859
- font-size: 10px;
860
- cursor: pointer;
861
- }
862
- .multicamera[data-multicamera] li .multicamera-item {
863
- display: flex;
864
- padding: 10px 0;
865
- justify-content: center;
866
- position: relative;
867
- }
868
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
869
- opacity: 0.5;
870
- }
871
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
872
- opacity: 0.5;
873
- }
874
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
875
- background-color: rgba(0, 0, 0, 0);
876
- }
877
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
878
- pointer-events: none;
879
- }
880
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
881
- background-color: rgba(0, 0, 0, 0.3);
882
- }
883
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
884
- width: 80px;
885
- height: 60px;
886
- }
887
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
888
- width: 80px;
889
- height: 60px;
890
- }
891
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
892
- width: 120px;
893
- text-align: left;
894
- margin-left: 15px;
895
- }
896
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
897
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
898
- width: 120px;
899
- height: 20px;
900
- font-family: Roboto, "Open Sans", Arial, sans-serif;
901
- font-size: 14px;
902
- font-weight: normal;
903
- font-style: normal;
904
- font-stretch: normal;
905
- line-height: 1.43;
906
- letter-spacing: normal;
907
- text-align: left;
908
- color: #fff;
909
- text-overflow: ellipsis;
910
- overflow: hidden;
911
- }
912
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
913
- opacity: 0.6;
914
- }
915
- .multicamera[data-multicamera] li a {
916
- color: #444;
917
- padding: 2px 10px;
918
- display: block;
919
- text-decoration: none;
920
- }
921
- .multicamera[data-multicamera] li a:hover {
922
- background-color: #555;
923
- color: white;
924
- }
925
- .multicamera[data-multicamera] li a:hover a {
926
- color: white;
927
- text-decoration: none;
928
- }
929
- .multicamera[data-multicamera] li.current a {
930
- color: #f00;
931
- }.media-control-skin-1 .media-control-item.media-control-pip {
932
- order: 95;
933
- }
934
- .media-control-skin-1 .media-control-item.media-control-pip button {
935
- height: 20px;
936
- }
937
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
938
- height: 20px;
939
- }.player-poster {
940
- display: flex;
941
- justify-content: center;
942
- align-items: center;
760
+ }.context-menu {
761
+ z-index: 999;
943
762
  position: absolute;
944
- height: 100%;
945
- width: 100%;
946
- z-index: 998;
947
763
  top: 0;
948
764
  left: 0;
949
- background-color: #000;
950
- background-size: cover;
951
- background-repeat: no-repeat;
952
- background-position: 50% 50%;
953
- }
954
- .player-poster.clickable {
955
- cursor: pointer;
765
+ text-align: center;
956
766
  }
957
- .player-poster:hover .play-wrapper {
958
- opacity: 1;
767
+ .context-menu .context-menu-list {
768
+ font-family: "Proxima Nova", sans-serif;
769
+ font-size: 12px;
770
+ line-height: 12px;
771
+ list-style-type: none;
772
+ text-align: left;
773
+ padding: 5px;
774
+ margin-left: auto;
775
+ margin-right: auto;
776
+ background-color: rgba(0, 0, 0, 0.75);
777
+ border: 1px solid #666;
778
+ border-radius: 4px;
959
779
  }
960
- .player-poster .play-wrapper {
780
+ .context-menu .context-menu-list-item button {
781
+ border: none;
782
+ background-color: transparent;
783
+ padding: 0;
784
+ color: white;
785
+ display: flex;
786
+ gap: 8px;
787
+ align-items: center;
788
+ justify-content: center;
789
+ cursor: pointer;
790
+ padding: 5px;
961
791
  width: 100%;
962
- height: 25%;
963
- margin: 0 auto;
964
- opacity: 0.75;
965
- transition: opacity 0.1s ease;
966
792
  }
967
- .player-poster .play-wrapper svg {
968
- height: 100%;
969
- display: inline;
793
+ .context-menu .context-menu-list-item_icon {
794
+ width: 20px;
795
+ height: 20px;
796
+ }.media-control-skin-1 .media-control-item.media-control-pip {
797
+ order: 95;
970
798
  }
971
- .player-poster .play-wrapper svg path {
972
- fill: #fff;
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;
973
804
  }[data-player] {
974
805
  --bottom-panel: 40px;
975
806
  }
@@ -1591,6 +1422,181 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1591
1422
  100% {
1592
1423
  color: #B80000;
1593
1424
  }
1425
+ }*,
1426
+ :focus,
1427
+ :visited {
1428
+ outline: none !important;
1429
+ }
1430
+
1431
+ .multicamera[data-multicamera] {
1432
+ float: right;
1433
+ margin-top: 4px;
1434
+ position: relative;
1435
+ margin-right: 20px;
1436
+ width: 20px;
1437
+ }
1438
+ .multicamera[data-multicamera] button {
1439
+ background-color: transparent;
1440
+ color: #fff;
1441
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1442
+ -webkit-font-smoothing: antialiased;
1443
+ border: none;
1444
+ font-size: 14px;
1445
+ padding: 0;
1446
+ }
1447
+ .multicamera[data-multicamera] button svg {
1448
+ height: 20px;
1449
+ position: relative;
1450
+ margin-top: 6px;
1451
+ }
1452
+ .multicamera[data-multicamera] button:hover {
1453
+ color: #c9c9c9;
1454
+ }
1455
+ .multicamera[data-multicamera] button.changing {
1456
+ animation: pulse 0.5s infinite alternate;
1457
+ }
1458
+ .multicamera[data-multicamera] button span.quality-arrow {
1459
+ width: 9px;
1460
+ height: 6px;
1461
+ margin-top: 11px;
1462
+ margin-left: 5px;
1463
+ }
1464
+ .multicamera[data-multicamera] > ul {
1465
+ padding: 6px 0;
1466
+ right: -24px;
1467
+ width: 245px;
1468
+ list-style-type: none;
1469
+ position: absolute;
1470
+ bottom: 48px;
1471
+ border-radius: 4px;
1472
+ display: none;
1473
+ background-color: rgba(74, 74, 74, 0.9);
1474
+ }
1475
+ .multicamera[data-multicamera] > ul::after {
1476
+ content: "";
1477
+ position: absolute;
1478
+ top: 100%;
1479
+ left: 85%;
1480
+ margin-left: -10px;
1481
+ width: 0;
1482
+ height: 0;
1483
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1484
+ border-right: 10px solid transparent;
1485
+ border-left: 10px solid transparent;
1486
+ }
1487
+ .multicamera[data-multicamera] li {
1488
+ font-size: 10px;
1489
+ cursor: pointer;
1490
+ }
1491
+ .multicamera[data-multicamera] li .multicamera-item {
1492
+ display: flex;
1493
+ padding: 10px 0;
1494
+ justify-content: center;
1495
+ position: relative;
1496
+ }
1497
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1498
+ opacity: 0.5;
1499
+ }
1500
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1501
+ opacity: 0.5;
1502
+ }
1503
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1504
+ background-color: rgba(0, 0, 0, 0);
1505
+ }
1506
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1507
+ pointer-events: none;
1508
+ }
1509
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1510
+ background-color: rgba(0, 0, 0, 0.3);
1511
+ }
1512
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1513
+ width: 80px;
1514
+ height: 60px;
1515
+ }
1516
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1517
+ width: 80px;
1518
+ height: 60px;
1519
+ }
1520
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1521
+ width: 120px;
1522
+ text-align: left;
1523
+ margin-left: 15px;
1524
+ }
1525
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
1526
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1527
+ width: 120px;
1528
+ height: 20px;
1529
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1530
+ font-size: 14px;
1531
+ font-weight: normal;
1532
+ font-style: normal;
1533
+ font-stretch: normal;
1534
+ line-height: 1.43;
1535
+ letter-spacing: normal;
1536
+ text-align: left;
1537
+ color: #fff;
1538
+ text-overflow: ellipsis;
1539
+ overflow: hidden;
1540
+ }
1541
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1542
+ opacity: 0.6;
1543
+ }
1544
+ .multicamera[data-multicamera] li a {
1545
+ color: #444;
1546
+ padding: 2px 10px;
1547
+ display: block;
1548
+ text-decoration: none;
1549
+ }
1550
+ .multicamera[data-multicamera] li a:hover {
1551
+ background-color: #555;
1552
+ color: white;
1553
+ }
1554
+ .multicamera[data-multicamera] li a:hover a {
1555
+ color: white;
1556
+ text-decoration: none;
1557
+ }
1558
+ .multicamera[data-multicamera] li.current a {
1559
+ color: #f00;
1560
+ }.player-poster {
1561
+ display: flex;
1562
+ justify-content: center;
1563
+ align-items: center;
1564
+ position: absolute;
1565
+ height: 100%;
1566
+ width: 100%;
1567
+ z-index: 998;
1568
+ top: 0;
1569
+ left: 0;
1570
+ background-color: #000;
1571
+ background-size: cover;
1572
+ background-repeat: no-repeat;
1573
+ background-position: 50% 50%;
1574
+ }
1575
+ .player-poster.clickable {
1576
+ cursor: pointer;
1577
+ }
1578
+ .player-poster:hover .play-wrapper {
1579
+ opacity: 1;
1580
+ }
1581
+ .player-poster .play-wrapper {
1582
+ width: 100%;
1583
+ height: 25%;
1584
+ margin: 0 auto;
1585
+ opacity: 0.75;
1586
+ transition: opacity 0.1s ease;
1587
+ }
1588
+ .player-poster .play-wrapper svg {
1589
+ height: 100%;
1590
+ display: inline;
1591
+ }
1592
+ .player-poster .play-wrapper svg path {
1593
+ fill: #fff;
1594
+ }.quality-levels li.disabled {
1595
+ opacity: 0.5;
1596
+ pointer-events: none;
1597
+ }
1598
+ .quality-levels li.current {
1599
+ background-color: #000;
1594
1600
  }.seek-time {
1595
1601
  position: absolute;
1596
1602
  white-space: nowrap;
@@ -1624,33 +1630,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1624
1630
  .seek-time .seek-time__duration::before {
1625
1631
  content: "|";
1626
1632
  margin-right: 7px;
1627
- }.quality-levels li.disabled {
1628
- opacity: 0.5;
1629
- pointer-events: none;
1630
- }
1631
- .quality-levels li.current {
1632
- background-color: #000;
1633
- }.container-with-poster-clickable .mc-skip-time {
1634
- height: 0;
1635
- }
1636
-
1637
- .mc-skip-time {
1638
- position: absolute;
1639
- width: 100%;
1640
- height: calc(100% - 50px);
1641
- z-index: 9998;
1642
- background-color: transparent;
1643
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1644
- }
1645
- .mc-skip-time .skip-container {
1646
- width: 100%;
1647
- height: 100%;
1648
- display: flex;
1649
- justify-content: space-between;
1650
- }
1651
- .mc-skip-time .skip-container .skip-item {
1652
- flex: 1 0 0px;
1653
- height: 100%;
1654
1633
  }.share_plugin[data-share] {
1655
1634
  pointer-events: auto;
1656
1635
  z-index: 5;
@@ -1734,6 +1713,27 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1734
1713
  display: inline-block;
1735
1714
  margin-right: 5px;
1736
1715
  cursor: pointer;
1716
+ }.container-with-poster-clickable .mc-skip-time {
1717
+ height: 0;
1718
+ }
1719
+
1720
+ .mc-skip-time {
1721
+ position: absolute;
1722
+ width: 100%;
1723
+ height: calc(100% - 50px);
1724
+ z-index: 9998;
1725
+ background-color: transparent;
1726
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1727
+ }
1728
+ .mc-skip-time .skip-container {
1729
+ width: 100%;
1730
+ height: 100%;
1731
+ display: flex;
1732
+ justify-content: space-between;
1733
+ }
1734
+ .mc-skip-time .skip-container .skip-item {
1735
+ flex: 1 0 0px;
1736
+ height: 100%;
1737
1737
  }.spinner-three-bounce[data-spinner] {
1738
1738
  position: absolute;
1739
1739
  width: 70px;