@gcorevideo/player 2.28.27 → 2.28.28

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
@@ -279,6 +279,29 @@
279
279
  }
280
280
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
281
281
  display: inline;
282
+ }@charset "UTF-8";
283
+ .gplayer-mc-clips {
284
+ display: flex;
285
+ gap: 6px;
286
+ }
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;
298
+ }
299
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
300
+ content: "•";
301
+ padding-right: 6px;
302
+ }
303
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
304
+ max-width: 100px;
282
305
  }:root {
283
306
  --primary-background-color: #000;
284
307
  --secondary-background-color: #262626;
@@ -643,29 +666,63 @@
643
666
  .fullscreen .clappr-nerd-stats .stats-box {
644
667
  top: unset;
645
668
  }
646
- }@charset "UTF-8";
647
- .gplayer-mc-clips {
669
+ }.dvr-controls {
670
+ --disabled-opacity: 0.3;
671
+ --circle-radius: 5px;
648
672
  display: flex;
649
- gap: 6px;
673
+ align-items: center;
674
+ color: var(--player-dvr-color);
675
+ font-size: 10px;
676
+ font-weight: 500;
677
+ height: var(--bottom-panel);
678
+ line-height: var(--bottom-panel);
679
+ margin-left: 0;
650
680
  }
651
- .gplayer-mc-clips .gplayer-mc-clips-text {
652
- text-overflow: ellipsis;
653
- white-space: nowrap;
654
- overflow: hidden;
681
+ .dvr-controls .live-info,
682
+ .dvr-controls .live-button {
683
+ font-size: 14px;
684
+ font-weight: 500;
685
+ margin-left: 20px;
686
+ letter-spacing: 0.8px;
687
+ text-transform: uppercase;
688
+ }
689
+ .dvr-controls .live-info::before,
690
+ .dvr-controls .live-button::before {
691
+ margin-right: 8px;
692
+ content: "";
655
693
  display: inline-block;
656
- text-overflow: ellipsis;
657
- color: white;
658
- cursor: default;
659
- line-height: var(--bottom-panel);
660
694
  position: relative;
661
- max-width: 150px;
695
+ width: calc(var(--circle-radius) * 2);
696
+ height: calc(var(--circle-radius) * 2);
697
+ border-radius: var(--circle-radius);
698
+ background-color: var(--player-dvr-color);
662
699
  }
663
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
664
- content: "•";
665
- padding-right: 6px;
700
+ .dvr-controls.disabled {
701
+ opacity: var(--disabled-opacity);
666
702
  }
667
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
668
- max-width: 100px;
703
+ .dvr-controls.disabled:before {
704
+ background-color: var(--player-dvr-color);
705
+ }
706
+ .dvr-controls .live-info {
707
+ text-transform: uppercase;
708
+ color: #fffffe;
709
+ }
710
+ .dvr-controls .live-info::before {
711
+ background-color: #ed4f4a;
712
+ }
713
+ .dvr-controls .live-button {
714
+ cursor: pointer;
715
+ outline: none;
716
+ border: 0;
717
+ color: var(--player-dvr-color);
718
+ background-color: transparent;
719
+ padding: 0;
720
+ opacity: 0.7;
721
+ transition: all 0.1s ease;
722
+ }
723
+ .dvr-controls .live-button:hover {
724
+ opacity: 1;
725
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
669
726
  }.context-menu {
670
727
  z-index: 999;
671
728
  position: absolute;
@@ -736,71 +793,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
736
793
  cursor: pointer;
737
794
  width: 30px;
738
795
  margin: 15px auto 0;
739
- }.dvr-controls {
740
- --disabled-opacity: 0.3;
741
- --circle-radius: 5px;
742
- display: flex;
743
- align-items: center;
744
- color: var(--player-dvr-color);
745
- font-size: 10px;
746
- font-weight: 500;
747
- height: var(--bottom-panel);
748
- line-height: var(--bottom-panel);
749
- margin-left: 0;
750
- }
751
- .dvr-controls .live-info,
752
- .dvr-controls .live-button {
753
- font-size: 14px;
754
- font-weight: 500;
755
- margin-left: 20px;
756
- letter-spacing: 0.8px;
757
- text-transform: uppercase;
758
- }
759
- .dvr-controls .live-info::before,
760
- .dvr-controls .live-button::before {
761
- margin-right: 8px;
762
- content: "";
763
- display: inline-block;
764
- position: relative;
765
- width: calc(var(--circle-radius) * 2);
766
- height: calc(var(--circle-radius) * 2);
767
- border-radius: var(--circle-radius);
768
- background-color: var(--player-dvr-color);
769
- }
770
- .dvr-controls.disabled {
771
- opacity: var(--disabled-opacity);
772
- }
773
- .dvr-controls.disabled:before {
774
- background-color: var(--player-dvr-color);
775
- }
776
- .dvr-controls .live-info {
777
- text-transform: uppercase;
778
- color: #fffffe;
779
- }
780
- .dvr-controls .live-info::before {
781
- background-color: #ed4f4a;
782
- }
783
- .dvr-controls .live-button {
784
- cursor: pointer;
785
- outline: none;
786
- border: 0;
787
- color: var(--player-dvr-color);
788
- background-color: transparent;
789
- padding: 0;
790
- opacity: 0.7;
791
- transition: all 0.1s ease;
792
- }
793
- .dvr-controls .live-button:hover {
794
- opacity: 1;
795
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
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
796
  }*,
805
797
  :focus,
806
798
  :visited {
@@ -936,6 +928,14 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
936
928
  }
937
929
  .multicamera[data-multicamera] li.current a {
938
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
939
  }.player-poster {
940
940
  display: flex;
941
941
  justify-content: center;
@@ -1630,44 +1630,27 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1630
1630
  }
1631
1631
  .quality-levels li.current {
1632
1632
  background-color: #000;
1633
- }.spinner-three-bounce[data-spinner] {
1634
- position: absolute;
1635
- width: 70px;
1636
- text-align: center;
1637
- z-index: 999;
1638
- left: 0;
1639
- right: 0;
1640
- margin: 0 auto;
1641
- margin-left: auto;
1642
- margin-right: auto;
1643
- /* center vertically */
1644
- top: 50%;
1645
- transform: translateY(-50%);
1646
- }
1647
- .spinner-three-bounce[data-spinner] > div {
1648
- width: 18px;
1649
- height: 18px;
1650
- background-color: #FFF;
1651
- border-radius: 100%;
1652
- display: inline-block;
1653
- animation: bouncedelay 1.4s infinite ease-in-out;
1654
- /* Prevent first frame from flickering when animation starts */
1655
- animation-fill-mode: both;
1633
+ }.container-with-poster-clickable .mc-skip-time {
1634
+ height: 0;
1656
1635
  }
1657
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1658
- animation-delay: -0.32s;
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;
1659
1644
  }
1660
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1661
- animation-delay: -0.16s;
1645
+ .mc-skip-time .skip-container {
1646
+ width: 100%;
1647
+ height: 100%;
1648
+ display: flex;
1649
+ justify-content: space-between;
1662
1650
  }
1663
-
1664
- @keyframes bouncedelay {
1665
- 0%, 80%, 100% {
1666
- transform: scale(0);
1667
- }
1668
- 40% {
1669
- transform: scale(1);
1670
- }
1651
+ .mc-skip-time .skip-container .skip-item {
1652
+ flex: 1 0 0px;
1653
+ height: 100%;
1671
1654
  }.share_plugin[data-share] {
1672
1655
  pointer-events: auto;
1673
1656
  z-index: 5;
@@ -1751,27 +1734,44 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1751
1734
  display: inline-block;
1752
1735
  margin-right: 5px;
1753
1736
  cursor: pointer;
1754
- }.container-with-poster-clickable .mc-skip-time {
1755
- height: 0;
1756
- }
1757
-
1758
- .mc-skip-time {
1737
+ }.spinner-three-bounce[data-spinner] {
1759
1738
  position: absolute;
1760
- width: 100%;
1761
- height: calc(100% - 50px);
1762
- z-index: 9998;
1763
- background-color: transparent;
1764
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1739
+ width: 70px;
1740
+ text-align: center;
1741
+ z-index: 999;
1742
+ left: 0;
1743
+ right: 0;
1744
+ margin: 0 auto;
1745
+ margin-left: auto;
1746
+ margin-right: auto;
1747
+ /* center vertically */
1748
+ top: 50%;
1749
+ transform: translateY(-50%);
1765
1750
  }
1766
- .mc-skip-time .skip-container {
1767
- width: 100%;
1768
- height: 100%;
1769
- display: flex;
1770
- justify-content: space-between;
1751
+ .spinner-three-bounce[data-spinner] > div {
1752
+ width: 18px;
1753
+ height: 18px;
1754
+ background-color: #FFF;
1755
+ border-radius: 100%;
1756
+ display: inline-block;
1757
+ animation: bouncedelay 1.4s infinite ease-in-out;
1758
+ /* Prevent first frame from flickering when animation starts */
1759
+ animation-fill-mode: both;
1771
1760
  }
1772
- .mc-skip-time .skip-container .skip-item {
1773
- flex: 1 0 0px;
1774
- height: 100%;
1761
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1762
+ animation-delay: -0.32s;
1763
+ }
1764
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1765
+ animation-delay: -0.16s;
1766
+ }
1767
+
1768
+ @keyframes bouncedelay {
1769
+ 0%, 80%, 100% {
1770
+ transform: scale(0);
1771
+ }
1772
+ 40% {
1773
+ transform: scale(1);
1774
+ }
1775
1775
  }.media-control-skin-1 .media-control-cc button.media-control-button {
1776
1776
  display: flex;
1777
1777
  justify-content: center;