@gcorevideo/player 2.24.8 → 2.24.10

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,6 +122,192 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }*,
126
+ :focus,
127
+ :visited {
128
+ outline: none !important;
129
+ }
130
+
131
+ .media-control-audiotracks {
132
+ position: relative;
133
+ }
134
+ .media-control-audiotracks button {
135
+ background-color: transparent;
136
+ color: #fff;
137
+ -webkit-font-smoothing: antialiased;
138
+ border: none;
139
+ cursor: pointer;
140
+ display: flex;
141
+ align-items: center;
142
+ padding: 0;
143
+ }
144
+ .media-control-audiotracks button .audio-text {
145
+ text-overflow: ellipsis;
146
+ overflow: hidden;
147
+ white-space: nowrap;
148
+ max-width: 100px;
149
+ background-color: transparent;
150
+ -webkit-font-smoothing: antialiased;
151
+ border: none;
152
+ cursor: pointer;
153
+ }
154
+ .media-control-audiotracks button:hover {
155
+ color: white;
156
+ }
157
+ .media-control-audiotracks button.changing {
158
+ animation: pulse 0.5s infinite alternate;
159
+ }
160
+ .media-control-audiotracks button span.audio-arrow {
161
+ width: 9px;
162
+ height: 6px;
163
+ margin-left: 5px;
164
+ }
165
+ .media-control-audiotracks .menu {
166
+ max-width: 114px;
167
+ list-style-type: none;
168
+ position: absolute;
169
+ background-color: rgba(74, 74, 74, 0.6);
170
+ border: none;
171
+ min-width: 60px;
172
+ border-radius: 4px;
173
+ bottom: 40px;
174
+ right: -2px;
175
+ }
176
+ .media-control-audiotracks .menu.hidden {
177
+ display: none;
178
+ }
179
+ .media-control-audiotracks li {
180
+ font-size: var(--font-size-media-controls-dropdown);
181
+ text-align: right;
182
+ height: 30px;
183
+ }
184
+ .media-control-audiotracks li[data-title] {
185
+ background-color: #c3c2c2;
186
+ padding: 5px;
187
+ }
188
+ .media-control-audiotracks li a {
189
+ display: block;
190
+ text-decoration: none;
191
+ text-overflow: ellipsis;
192
+ overflow: hidden;
193
+ white-space: nowrap;
194
+ height: 30px;
195
+ padding: 5px 10px;
196
+ color: #fffffe;
197
+ }
198
+ .media-control-audiotracks li a:hover {
199
+ text-decoration: none;
200
+ background-color: rgba(0, 0, 0, 0.4);
201
+ color: white;
202
+ }
203
+ .media-control-audiotracks li.current a {
204
+ color: #f00;
205
+ }
206
+ .media-control-audiotracks li:first-child a {
207
+ border-bottom-left-radius: 4px;
208
+ border-bottom-right-radius: 4px;
209
+ }
210
+ .media-control-audiotracks li:last-child a {
211
+ border-top-left-radius: 4px;
212
+ border-top-right-radius: 4px;
213
+ }
214
+
215
+ @keyframes pulse {
216
+ 0% {
217
+ color: #fff;
218
+ }
219
+ 50% {
220
+ color: #ff0101;
221
+ }
222
+ 100% {
223
+ color: #B80000;
224
+ }
225
+ }.dvr-controls[data-dvr] {
226
+ display: inline-block;
227
+ color: var(--player-dvr-color);
228
+ line-height: 32px;
229
+ font-size: 10px;
230
+ font-weight: bold;
231
+ margin-left: 6px;
232
+ height: 40px;
233
+ line-height: 40px;
234
+ margin-left: 0;
235
+ }
236
+ .dvr-controls[data-dvr] .live-info {
237
+ cursor: default;
238
+ text-transform: uppercase;
239
+ }
240
+ .dvr-controls[data-dvr] .live-info:before {
241
+ content: "";
242
+ display: inline-block;
243
+ position: relative;
244
+ width: 7px;
245
+ height: 7px;
246
+ border-radius: 3.5px;
247
+ margin-right: 3.5px;
248
+ background-color: var(--player-live-color);
249
+ }
250
+ .dvr-controls[data-dvr] .live-info.disabled {
251
+ opacity: 0.3;
252
+ }
253
+ .dvr-controls[data-dvr] .live-info.disabled:before {
254
+ background-color: var(--player-dvr-color);
255
+ }
256
+ .dvr-controls[data-dvr] .live-button {
257
+ cursor: pointer;
258
+ outline: none;
259
+ display: none;
260
+ border: 0;
261
+ color: var(--player-dvr-color);
262
+ background-color: transparent;
263
+ height: 32px;
264
+ padding: 0;
265
+ opacity: 0.7;
266
+ text-transform: uppercase;
267
+ transition: all 0.1s ease;
268
+ }
269
+ .dvr-controls[data-dvr] .live-button:before {
270
+ content: "";
271
+ display: inline-block;
272
+ position: relative;
273
+ width: 7px;
274
+ height: 7px;
275
+ border-radius: 3.5px;
276
+ margin-right: 3.5px;
277
+ background-color: var(--player-dvr-color);
278
+ }
279
+ .dvr-controls[data-dvr] .live-button:hover {
280
+ opacity: 1;
281
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
282
+ }
283
+ .dvr-controls[data-dvr] .live-info {
284
+ font-size: 14px;
285
+ letter-spacing: 0.8px;
286
+ font-weight: 500;
287
+ color: #fffffe;
288
+ margin-left: 21px;
289
+ }
290
+ .dvr-controls[data-dvr] .live-info::before {
291
+ width: 10px;
292
+ height: 10px;
293
+ border-radius: 50%;
294
+ margin-right: 8px;
295
+ background-color: #ed4f4a;
296
+ }
297
+ .dvr-controls[data-dvr] .live-button {
298
+ height: 40px;
299
+ opacity: 1;
300
+ font-size: 14px;
301
+ letter-spacing: 0.8px;
302
+ font-weight: 500;
303
+ margin-left: 20px;
304
+ }
305
+ .dvr-controls[data-dvr] .live-button::before {
306
+ width: 10px;
307
+ height: 10px;
308
+ border-radius: 50%;
309
+ margin-right: 8px;
310
+ background-color: #cacaca;
125
311
  }:root {
126
312
  --primary-background-color: #000;
127
313
  --secondary-background-color: #262626;
@@ -486,55 +672,6 @@
486
672
  .fullscreen .clappr-nerd-stats .stats-box {
487
673
  top: unset;
488
674
  }
489
- }.big-mute-icon-wrapper[data-big-mute] {
490
- position: absolute;
491
- z-index: 9998;
492
- background-color: transparent;
493
- display: flex;
494
- justify-content: center;
495
- width: 100%;
496
- height: calc(100% - 50px);
497
- margin: 0 auto;
498
- opacity: 0.75;
499
- transition: opacity 0.1s ease;
500
- pointer-events: auto;
501
- }
502
- .big-mute-icon-wrapper[data-big-mute].hide {
503
- display: none;
504
- }
505
- .big-mute-icon-wrapper[data-big-mute]:hover {
506
- cursor: pointer;
507
- }
508
-
509
- .big-mute-icon[data-big-mute-icon] {
510
- display: flex;
511
- align-items: center;
512
- justify-content: center;
513
- align-self: center;
514
- width: 120px;
515
- height: 120px;
516
- border: 2px solid white;
517
- border-radius: 50%;
518
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
519
- filter: alpha(opacity=60);
520
- opacity: 1;
521
- box-shadow: 0 0 1px 0 white;
522
- background: rgba(240, 243, 247, 0.9411764706);
523
- z-index: 10000;
524
- }
525
- .big-mute-icon[data-big-mute-icon] svg {
526
- margin-left: 5px;
527
- width: 80px;
528
- height: 80px;
529
- }
530
- .big-mute-icon[data-big-mute-icon] svg path {
531
- fill: #1f1e1e !important;
532
- }
533
- .big-mute-icon[data-big-mute-icon]:hover {
534
- background: rgba(240, 243, 247, 0.8784313725);
535
- }
536
- .big-mute-icon[data-big-mute-icon]:hover svg path {
537
- fill: #151515 !important;
538
675
  }*, :focus, :visited {
539
676
  outline: none !important;
540
677
  }
@@ -642,46 +779,10 @@
642
779
  }
643
780
  .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_value {
644
781
  flex: 1 0 auto;
645
- }.context-menu {
646
- z-index: 999;
647
- position: absolute;
648
- top: 0;
649
- left: 0;
650
- text-align: center;
651
- }
652
- .context-menu .context-menu-list {
653
- font-family: "Proxima Nova", sans-serif;
654
- font-size: 12px;
655
- line-height: 12px;
656
- list-style-type: none;
657
- text-align: left;
658
- padding: 5px;
659
- margin-left: auto;
660
- margin-right: auto;
661
- background-color: rgba(0, 0, 0, 0.75);
662
- border: 1px solid #666;
663
- border-radius: 4px;
664
- }
665
- .context-menu .context-menu-list-item button {
666
- border: none;
667
- background-color: transparent;
668
- padding: 0;
669
- color: white;
670
- display: flex;
671
- gap: 8px;
672
- align-items: center;
673
- justify-content: center;
674
- cursor: pointer;
675
- padding: 5px;
676
- width: 100%;
677
- }
678
- .context-menu .context-menu-list-item_icon {
679
- width: 20px;
680
- height: 20px;
681
- }@charset "UTF-8";
682
- .media-control-clips {
683
- display: flex;
684
- gap: 6px;
782
+ }@charset "UTF-8";
783
+ .media-control-clips {
784
+ display: flex;
785
+ gap: 6px;
685
786
  }
686
787
  .media-control-clips .media-clip-text {
687
788
  text-overflow: ellipsis;
@@ -700,226 +801,42 @@
700
801
  }
701
802
  .media-control-clips .media-clip-text {
702
803
  max-width: 100px;
703
- }.dvr-controls[data-dvr] {
704
- display: inline-block;
705
- color: var(--player-dvr-color);
706
- line-height: 32px;
707
- font-size: 10px;
708
- font-weight: bold;
709
- margin-left: 6px;
710
- height: 40px;
711
- line-height: 40px;
712
- margin-left: 0;
713
- }
714
- .dvr-controls[data-dvr] .live-info {
715
- cursor: default;
716
- text-transform: uppercase;
717
- }
718
- .dvr-controls[data-dvr] .live-info:before {
719
- content: "";
720
- display: inline-block;
721
- position: relative;
722
- width: 7px;
723
- height: 7px;
724
- border-radius: 3.5px;
725
- margin-right: 3.5px;
726
- background-color: var(--player-live-color);
727
- }
728
- .dvr-controls[data-dvr] .live-info.disabled {
729
- opacity: 0.3;
730
- }
731
- .dvr-controls[data-dvr] .live-info.disabled:before {
732
- background-color: var(--player-dvr-color);
733
- }
734
- .dvr-controls[data-dvr] .live-button {
735
- cursor: pointer;
736
- outline: none;
737
- display: none;
738
- border: 0;
739
- color: var(--player-dvr-color);
740
- background-color: transparent;
741
- height: 32px;
742
- padding: 0;
743
- opacity: 0.7;
744
- text-transform: uppercase;
745
- transition: all 0.1s ease;
746
- }
747
- .dvr-controls[data-dvr] .live-button:before {
748
- content: "";
749
- display: inline-block;
750
- position: relative;
751
- width: 7px;
752
- height: 7px;
753
- border-radius: 3.5px;
754
- margin-right: 3.5px;
755
- background-color: var(--player-dvr-color);
756
- }
757
- .dvr-controls[data-dvr] .live-button:hover {
758
- opacity: 1;
759
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
760
- }
761
- .dvr-controls[data-dvr] .live-info {
762
- font-size: 14px;
763
- letter-spacing: 0.8px;
764
- font-weight: 500;
765
- color: #fffffe;
766
- margin-left: 21px;
767
- }
768
- .dvr-controls[data-dvr] .live-info::before {
769
- width: 10px;
770
- height: 10px;
771
- border-radius: 50%;
772
- margin-right: 8px;
773
- background-color: #ed4f4a;
774
- }
775
- .dvr-controls[data-dvr] .live-button {
776
- height: 40px;
777
- opacity: 1;
778
- font-size: 14px;
779
- letter-spacing: 0.8px;
780
- font-weight: 500;
781
- margin-left: 20px;
782
- }
783
- .dvr-controls[data-dvr] .live-button::before {
784
- width: 10px;
785
- height: 10px;
786
- border-radius: 50%;
787
- margin-right: 8px;
788
- background-color: #cacaca;
789
- }div.player-error-screen, [data-player] div.player-error-screen {
790
- color: #CCCACA;
804
+ }.context-menu {
805
+ z-index: 999;
791
806
  position: absolute;
792
807
  top: 0;
793
- height: 100%;
794
- width: 100%;
795
- background-color: rgba(0, 0, 0, 0.7);
796
- z-index: 2000;
797
- display: flex;
798
- flex-direction: column;
799
- justify-content: center;
800
- }
801
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
802
- font-size: 14px;
803
- color: #CCCACA;
804
- margin-top: 45px;
805
- }
806
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
807
- font-weight: bold;
808
- line-height: 30px;
809
- font-size: 18px;
810
- }
811
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
812
- width: 90%;
813
- margin: 0 auto;
814
- }
815
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
816
- font-size: 13px;
817
- margin-top: 15px;
818
- }
819
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
820
- cursor: pointer;
821
- width: 30px;
822
- margin: 15px auto 0;
823
- }*,
824
- :focus,
825
- :visited {
826
- outline: none !important;
808
+ left: 0;
809
+ text-align: center;
827
810
  }
828
-
829
- .media-control-audiotracks {
830
- position: relative;
811
+ .context-menu .context-menu-list {
812
+ font-family: "Proxima Nova", sans-serif;
813
+ font-size: 12px;
814
+ line-height: 12px;
815
+ list-style-type: none;
816
+ text-align: left;
817
+ padding: 5px;
818
+ margin-left: auto;
819
+ margin-right: auto;
820
+ background-color: rgba(0, 0, 0, 0.75);
821
+ border: 1px solid #666;
822
+ border-radius: 4px;
831
823
  }
832
- .media-control-audiotracks button {
833
- background-color: transparent;
834
- color: #fff;
835
- -webkit-font-smoothing: antialiased;
824
+ .context-menu .context-menu-list-item button {
836
825
  border: none;
837
- cursor: pointer;
826
+ background-color: transparent;
827
+ padding: 0;
828
+ color: white;
838
829
  display: flex;
830
+ gap: 8px;
839
831
  align-items: center;
840
- padding: 0;
841
- }
842
- .media-control-audiotracks button .audio-text {
843
- text-overflow: ellipsis;
844
- overflow: hidden;
845
- white-space: nowrap;
846
- max-width: 100px;
847
- background-color: transparent;
848
- -webkit-font-smoothing: antialiased;
849
- border: none;
832
+ justify-content: center;
850
833
  cursor: pointer;
851
- }
852
- .media-control-audiotracks button:hover {
853
- color: white;
854
- }
855
- .media-control-audiotracks button.changing {
856
- animation: pulse 0.5s infinite alternate;
857
- }
858
- .media-control-audiotracks button span.audio-arrow {
859
- width: 9px;
860
- height: 6px;
861
- margin-left: 5px;
862
- }
863
- .media-control-audiotracks .menu {
864
- max-width: 114px;
865
- list-style-type: none;
866
- position: absolute;
867
- background-color: rgba(74, 74, 74, 0.6);
868
- border: none;
869
- min-width: 60px;
870
- border-radius: 4px;
871
- bottom: 40px;
872
- right: -2px;
873
- }
874
- .media-control-audiotracks .menu.hidden {
875
- display: none;
876
- }
877
- .media-control-audiotracks li {
878
- font-size: var(--font-size-media-controls-dropdown);
879
- text-align: right;
880
- height: 30px;
881
- }
882
- .media-control-audiotracks li[data-title] {
883
- background-color: #c3c2c2;
884
834
  padding: 5px;
835
+ width: 100%;
885
836
  }
886
- .media-control-audiotracks li a {
887
- display: block;
888
- text-decoration: none;
889
- text-overflow: ellipsis;
890
- overflow: hidden;
891
- white-space: nowrap;
892
- height: 30px;
893
- padding: 5px 10px;
894
- color: #fffffe;
895
- }
896
- .media-control-audiotracks li a:hover {
897
- text-decoration: none;
898
- background-color: rgba(0, 0, 0, 0.4);
899
- color: white;
900
- }
901
- .media-control-audiotracks li.current a {
902
- color: #f00;
903
- }
904
- .media-control-audiotracks li:first-child a {
905
- border-bottom-left-radius: 4px;
906
- border-bottom-right-radius: 4px;
907
- }
908
- .media-control-audiotracks li:last-child a {
909
- border-top-left-radius: 4px;
910
- border-top-right-radius: 4px;
911
- }
912
-
913
- @keyframes pulse {
914
- 0% {
915
- color: #fff;
916
- }
917
- 50% {
918
- color: #ff0101;
919
- }
920
- 100% {
921
- color: #B80000;
922
- }
837
+ .context-menu .context-menu-list-item_icon {
838
+ width: 20px;
839
+ height: 20px;
923
840
  }[data-player] {
924
841
  --bottom-panel: 40px;
925
842
  }
@@ -1533,12 +1450,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1533
1450
  .media-control-skin-1[data-media-control-skin-1] .seek-time .seek-time__pos {
1534
1451
  padding-left: 8px;
1535
1452
  padding-right: 8px;
1536
- }.quality-levels li.disabled {
1537
- opacity: 0.5;
1538
- pointer-events: none;
1539
- }
1540
- .quality-levels li.current {
1541
- background-color: #000;
1542
1453
  }*, :focus, :visited {
1543
1454
  outline: none !important;
1544
1455
  }
@@ -1687,27 +1598,55 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1687
1598
  100% {
1688
1599
  color: #B80000;
1689
1600
  }
1690
- }.container-with-poster-clickable .mc-skip-time {
1691
- height: 0;
1601
+ }.big-mute-icon-wrapper[data-big-mute] {
1602
+ position: absolute;
1603
+ z-index: 9998;
1604
+ background-color: transparent;
1605
+ display: flex;
1606
+ justify-content: center;
1607
+ width: 100%;
1608
+ height: calc(100% - 50px);
1609
+ margin: 0 auto;
1610
+ opacity: 0.75;
1611
+ transition: opacity 0.1s ease;
1612
+ pointer-events: auto;
1613
+ }
1614
+ .big-mute-icon-wrapper[data-big-mute].hide {
1615
+ display: none;
1692
1616
  }
1693
-
1694
- .mc-skip-time {
1695
- position: absolute;
1696
- width: 100%;
1697
- height: calc(100% - 50px);
1698
- z-index: 9998;
1699
- background-color: transparent;
1700
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1617
+ .big-mute-icon-wrapper[data-big-mute]:hover {
1618
+ cursor: pointer;
1701
1619
  }
1702
- .mc-skip-time .skip-container {
1703
- width: 100%;
1704
- height: 100%;
1620
+
1621
+ .big-mute-icon[data-big-mute-icon] {
1705
1622
  display: flex;
1706
- justify-content: space-between;
1623
+ align-items: center;
1624
+ justify-content: center;
1625
+ align-self: center;
1626
+ width: 120px;
1627
+ height: 120px;
1628
+ border: 2px solid white;
1629
+ border-radius: 50%;
1630
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1631
+ filter: alpha(opacity=60);
1632
+ opacity: 1;
1633
+ box-shadow: 0 0 1px 0 white;
1634
+ background: rgba(240, 243, 247, 0.9411764706);
1635
+ z-index: 10000;
1707
1636
  }
1708
- .mc-skip-time .skip-container .skip-item {
1709
- flex: 1 0 0px;
1710
- height: 100%;
1637
+ .big-mute-icon[data-big-mute-icon] svg {
1638
+ margin-left: 5px;
1639
+ width: 80px;
1640
+ height: 80px;
1641
+ }
1642
+ .big-mute-icon[data-big-mute-icon] svg path {
1643
+ fill: #1f1e1e !important;
1644
+ }
1645
+ .big-mute-icon[data-big-mute-icon]:hover {
1646
+ background: rgba(240, 243, 247, 0.8784313725);
1647
+ }
1648
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
1649
+ fill: #151515 !important;
1711
1650
  }.seek-time {
1712
1651
  position: absolute;
1713
1652
  white-space: nowrap;
@@ -1741,6 +1680,93 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1741
1680
  .seek-time .seek-time__duration::before {
1742
1681
  content: "|";
1743
1682
  margin-right: 7px;
1683
+ }div.player-error-screen, [data-player] div.player-error-screen {
1684
+ color: #CCCACA;
1685
+ position: absolute;
1686
+ top: 0;
1687
+ height: 100%;
1688
+ width: 100%;
1689
+ background-color: rgba(0, 0, 0, 0.7);
1690
+ z-index: 2000;
1691
+ display: flex;
1692
+ flex-direction: column;
1693
+ justify-content: center;
1694
+ }
1695
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1696
+ font-size: 14px;
1697
+ color: #CCCACA;
1698
+ margin-top: 45px;
1699
+ }
1700
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1701
+ font-weight: bold;
1702
+ line-height: 30px;
1703
+ font-size: 18px;
1704
+ }
1705
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1706
+ width: 90%;
1707
+ margin: 0 auto;
1708
+ }
1709
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1710
+ font-size: 13px;
1711
+ margin-top: 15px;
1712
+ }
1713
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1714
+ cursor: pointer;
1715
+ width: 30px;
1716
+ margin: 15px auto 0;
1717
+ }.quality-levels li.disabled {
1718
+ opacity: 0.5;
1719
+ pointer-events: none;
1720
+ }
1721
+ .quality-levels li.current {
1722
+ background-color: #000;
1723
+ }.media-control-pip {
1724
+ order: 95;
1725
+ display: flex;
1726
+ }
1727
+ .media-control-pip button {
1728
+ height: 20px;
1729
+ }
1730
+ .media-control-pip button svg {
1731
+ height: 20px;
1732
+ }.spinner-three-bounce[data-spinner] {
1733
+ position: absolute;
1734
+ width: 70px;
1735
+ text-align: center;
1736
+ z-index: 999;
1737
+ left: 0;
1738
+ right: 0;
1739
+ margin: 0 auto;
1740
+ margin-left: auto;
1741
+ margin-right: auto;
1742
+ /* center vertically */
1743
+ top: 50%;
1744
+ transform: translateY(-50%);
1745
+ }
1746
+ .spinner-three-bounce[data-spinner] > div {
1747
+ width: 18px;
1748
+ height: 18px;
1749
+ background-color: #FFF;
1750
+ border-radius: 100%;
1751
+ display: inline-block;
1752
+ animation: bouncedelay 1.4s infinite ease-in-out;
1753
+ /* Prevent first frame from flickering when animation starts */
1754
+ animation-fill-mode: both;
1755
+ }
1756
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1757
+ animation-delay: -0.32s;
1758
+ }
1759
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1760
+ animation-delay: -0.16s;
1761
+ }
1762
+
1763
+ @keyframes bouncedelay {
1764
+ 0%, 80%, 100% {
1765
+ transform: scale(0);
1766
+ }
1767
+ 40% {
1768
+ transform: scale(1);
1769
+ }
1744
1770
  }*,
1745
1771
  :focus,
1746
1772
  :visited {
@@ -1814,44 +1840,61 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1814
1840
  .ios-fullscreen::cue {
1815
1841
  visibility: visible !important;
1816
1842
  font-size: 1em !important;
1817
- }.spinner-three-bounce[data-spinner] {
1843
+ }.player-poster {
1844
+ display: flex;
1845
+ justify-content: center;
1846
+ align-items: center;
1818
1847
  position: absolute;
1819
- width: 70px;
1820
- text-align: center;
1821
- z-index: 999;
1848
+ height: 100%;
1849
+ width: 100%;
1850
+ z-index: 998;
1851
+ top: 0;
1822
1852
  left: 0;
1823
- right: 0;
1824
- margin: 0 auto;
1825
- margin-left: auto;
1826
- margin-right: auto;
1827
- /* center vertically */
1828
- top: 50%;
1829
- transform: translateY(-50%);
1853
+ background-color: #000;
1854
+ background-size: cover;
1855
+ background-repeat: no-repeat;
1856
+ background-position: 50% 50%;
1830
1857
  }
1831
- .spinner-three-bounce[data-spinner] > div {
1832
- width: 18px;
1833
- height: 18px;
1834
- background-color: #FFF;
1835
- border-radius: 100%;
1836
- display: inline-block;
1837
- animation: bouncedelay 1.4s infinite ease-in-out;
1838
- /* Prevent first frame from flickering when animation starts */
1839
- animation-fill-mode: both;
1858
+ .player-poster.clickable {
1859
+ cursor: pointer;
1840
1860
  }
1841
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1842
- animation-delay: -0.32s;
1861
+ .player-poster:hover .play-wrapper {
1862
+ opacity: 1;
1843
1863
  }
1844
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1845
- animation-delay: -0.16s;
1864
+ .player-poster .play-wrapper {
1865
+ width: 100%;
1866
+ height: 25%;
1867
+ margin: 0 auto;
1868
+ opacity: 0.75;
1869
+ transition: opacity 0.1s ease;
1870
+ }
1871
+ .player-poster .play-wrapper svg {
1872
+ height: 100%;
1873
+ display: inline;
1874
+ }
1875
+ .player-poster .play-wrapper svg path {
1876
+ fill: #fff;
1877
+ }.container-with-poster-clickable .mc-skip-time {
1878
+ height: 0;
1846
1879
  }
1847
1880
 
1848
- @keyframes bouncedelay {
1849
- 0%, 80%, 100% {
1850
- transform: scale(0);
1851
- }
1852
- 40% {
1853
- transform: scale(1);
1854
- }
1881
+ .mc-skip-time {
1882
+ position: absolute;
1883
+ width: 100%;
1884
+ height: calc(100% - 50px);
1885
+ z-index: 9998;
1886
+ background-color: transparent;
1887
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1888
+ }
1889
+ .mc-skip-time .skip-container {
1890
+ width: 100%;
1891
+ height: 100%;
1892
+ display: flex;
1893
+ justify-content: space-between;
1894
+ }
1895
+ .mc-skip-time .skip-container .skip-item {
1896
+ flex: 1 0 0px;
1897
+ height: 100%;
1855
1898
  }.share_plugin[data-share] {
1856
1899
  pointer-events: auto;
1857
1900
  z-index: 5;
@@ -1998,49 +2041,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1998
2041
  }
1999
2042
  .scrub-thumbnails .backdrop .carousel img {
2000
2043
  width: auto;
2001
- }.player-poster {
2002
- display: flex;
2003
- justify-content: center;
2004
- align-items: center;
2005
- position: absolute;
2006
- height: 100%;
2007
- width: 100%;
2008
- z-index: 998;
2009
- top: 0;
2010
- left: 0;
2011
- background-color: #000;
2012
- background-size: cover;
2013
- background-repeat: no-repeat;
2014
- background-position: 50% 50%;
2015
- }
2016
- .player-poster.clickable {
2017
- cursor: pointer;
2018
- }
2019
- .player-poster:hover .play-wrapper {
2020
- opacity: 1;
2021
- }
2022
- .player-poster .play-wrapper {
2023
- width: 100%;
2024
- height: 25%;
2025
- margin: 0 auto;
2026
- opacity: 0.75;
2027
- transition: opacity 0.1s ease;
2028
- }
2029
- .player-poster .play-wrapper svg {
2030
- height: 100%;
2031
- display: inline;
2032
- }
2033
- .player-poster .play-wrapper svg path {
2034
- fill: #fff;
2035
- }.media-control-pip {
2036
- order: 95;
2037
- display: flex;
2038
- }
2039
- .media-control-pip button {
2040
- height: 20px;
2041
- }
2042
- .media-control-pip button svg {
2043
- height: 20px;
2044
2044
  }.player-logo[data-logo] {
2045
2045
  position: absolute;
2046
2046
  z-index: 2;