@gcorevideo/player 2.22.1 → 2.22.3

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.
Files changed (84) hide show
  1. package/dist/core.js +1 -1
  2. package/dist/index.css +1427 -1427
  3. package/dist/index.js +111 -33
  4. package/dist/player.d.ts +243 -95
  5. package/dist/plugins/index.css +350 -350
  6. package/dist/plugins/index.js +111 -33
  7. package/docs/api/player.bottomgear.additem.md +95 -0
  8. package/docs/api/player.bottomgear.md +63 -19
  9. package/docs/api/player.bottomgear.refresh.md +5 -1
  10. package/docs/api/player.clapprnerdstats.md +0 -2
  11. package/docs/api/player.clicktopause.md +1 -1
  12. package/docs/api/player.closedcaptions.md +2 -2
  13. package/docs/api/player.closedcaptionspluginsettings.md +5 -0
  14. package/docs/api/player.errorscreen.md +18 -4
  15. package/docs/api/player.errorscreenpluginsettings.md +1 -4
  16. package/docs/api/player.errorscreensettings.md +15 -0
  17. package/docs/api/{player.mediacontrolevents.md → player.gearevents.md} +7 -7
  18. package/docs/api/player.levelselector.events.md +0 -1
  19. package/docs/api/player.levelselector.md +1 -1
  20. package/docs/api/player.md +33 -36
  21. package/docs/api/{player.bottomgear.setcontent.md → player.mediacontrol.handlecustomarea.md} +5 -9
  22. package/docs/api/player.mediacontrol.md +15 -1
  23. package/docs/api/player.mediacontrol.putelement.md +2 -2
  24. package/docs/api/player.mediacontrol.toggleelement.md +2 -4
  25. package/docs/api/player.mediacontrolelement.md +1 -1
  26. package/docs/api/player.playbackrate.md +22 -3
  27. package/docs/api/{player.gearoptionsitem.md → player.playbackrateoption.md} +6 -4
  28. package/docs/api/player.playbackratesettings.md +20 -0
  29. package/docs/api/player.sourcecontroller._constructor_.md +49 -0
  30. package/docs/api/player.sourcecontroller.md +70 -7
  31. package/docs/api/player.spinnerevents.md +1 -4
  32. package/docs/api/player.spinnerthreebounce._constructor_.md +0 -3
  33. package/docs/api/player.spinnerthreebounce.hide.md +0 -3
  34. package/docs/api/player.spinnerthreebounce.md +6 -9
  35. package/docs/api/player.spinnerthreebounce.show.md +2 -5
  36. package/lib/index.plugins.d.ts +1 -0
  37. package/lib/index.plugins.d.ts.map +1 -1
  38. package/lib/index.plugins.js +1 -0
  39. package/lib/internal.types.d.ts +5 -0
  40. package/lib/internal.types.d.ts.map +1 -1
  41. package/lib/playback.types.d.ts +0 -5
  42. package/lib/playback.types.d.ts.map +1 -1
  43. package/lib/plugins/bottom-gear/BottomGear.d.ts +35 -13
  44. package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
  45. package/lib/plugins/bottom-gear/BottomGear.js +35 -3
  46. package/lib/plugins/click-to-pause/ClickToPause.d.ts +1 -1
  47. package/lib/plugins/click-to-pause/ClickToPause.d.ts.map +1 -1
  48. package/lib/plugins/click-to-pause/ClickToPause.js +3 -2
  49. package/lib/plugins/error-screen/ErrorScreen.d.ts +29 -4
  50. package/lib/plugins/error-screen/ErrorScreen.d.ts.map +1 -1
  51. package/lib/plugins/error-screen/ErrorScreen.js +17 -2
  52. package/lib/plugins/media-control/MediaControl.d.ts +0 -11
  53. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  54. package/lib/plugins/media-control/MediaControl.js +0 -12
  55. package/lib/plugins/source-controller/SourceController.d.ts +40 -4
  56. package/lib/plugins/source-controller/SourceController.d.ts.map +1 -1
  57. package/lib/plugins/source-controller/SourceController.js +41 -4
  58. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts +9 -6
  59. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts.map +1 -1
  60. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.js +11 -6
  61. package/lib/plugins/subtitles/ClosedCaptions.d.ts +7 -7
  62. package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -1
  63. package/lib/plugins/subtitles/ClosedCaptions.js +2 -2
  64. package/package.json +1 -1
  65. package/src/index.plugins.ts +1 -0
  66. package/src/internal.types.ts +6 -0
  67. package/src/playback.types.ts +0 -5
  68. package/src/plugins/bottom-gear/BottomGear.ts +35 -16
  69. package/src/plugins/click-to-pause/ClickToPause.ts +3 -2
  70. package/src/plugins/error-screen/ErrorScreen.ts +30 -4
  71. package/src/plugins/media-control/MediaControl.ts +0 -12
  72. package/src/plugins/source-controller/SourceController.ts +41 -4
  73. package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts +11 -6
  74. package/src/plugins/subtitles/ClosedCaptions.ts +8 -9
  75. package/temp/player.api.json +260 -299
  76. package/tsconfig.tsbuildinfo +1 -1
  77. package/assets/bottom-gear/bottomgear copy.ejs +0 -10
  78. package/docs/api/player.bottomgear.getelement.md +0 -56
  79. package/docs/api/player.gearitemelement.md +0 -18
  80. package/docs/api/player.subtitlespluginsettings.md +0 -18
  81. package/docs/api/player.texttrackitem.id.md +0 -11
  82. package/docs/api/player.texttrackitem.md +0 -87
  83. package/docs/api/player.texttrackitem.name.md +0 -11
  84. package/docs/api/player.texttrackitem.track.md +0 -11
@@ -122,30 +122,99 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }.context-menu {
126
- z-index: 999;
127
- position: absolute;
128
- top: 0;
129
- left: 0;
130
- text-align: center;
125
+ }.dvr-controls[data-dvr] {
126
+ display: inline-block;
127
+ color: var(--player-dvr-color);
128
+ line-height: 32px;
129
+ font-size: 10px;
130
+ font-weight: bold;
131
+ margin-left: 6px;
132
+ height: 40px;
133
+ line-height: 40px;
134
+ margin-left: 0;
131
135
  }
132
- .context-menu .context-menu-list {
133
- font-family: "Proxima Nova", sans-serif;
134
- font-size: 12px;
135
- line-height: 12px;
136
- list-style-type: none;
137
- text-align: left;
138
- padding: 5px;
139
- margin-left: auto;
140
- margin-right: auto;
141
- background-color: rgba(0, 0, 0, 0.75);
142
- border: 1px solid #666;
143
- border-radius: 4px;
136
+ .dvr-controls[data-dvr] .live-info {
137
+ cursor: default;
138
+ text-transform: uppercase;
144
139
  }
145
- .context-menu .context-menu-list .context-menu-list-item {
146
- color: white;
147
- padding: 5px;
140
+ .dvr-controls[data-dvr] .live-info:before {
141
+ content: "";
142
+ display: inline-block;
143
+ position: relative;
144
+ width: 7px;
145
+ height: 7px;
146
+ border-radius: 3.5px;
147
+ margin-right: 3.5px;
148
+ background-color: var(--player-live-color);
149
+ }
150
+ .dvr-controls[data-dvr] .live-info.disabled {
151
+ opacity: 0.3;
152
+ }
153
+ .dvr-controls[data-dvr] .live-info.disabled:before {
154
+ background-color: var(--player-dvr-color);
155
+ }
156
+ .dvr-controls[data-dvr] .live-button {
148
157
  cursor: pointer;
158
+ outline: none;
159
+ display: none;
160
+ border: 0;
161
+ color: var(--player-dvr-color);
162
+ background-color: transparent;
163
+ height: 32px;
164
+ padding: 0;
165
+ opacity: 0.7;
166
+ text-transform: uppercase;
167
+ transition: all 0.1s ease;
168
+ }
169
+ .dvr-controls[data-dvr] .live-button:before {
170
+ content: "";
171
+ display: inline-block;
172
+ position: relative;
173
+ width: 7px;
174
+ height: 7px;
175
+ border-radius: 3.5px;
176
+ margin-right: 3.5px;
177
+ background-color: var(--player-dvr-color);
178
+ }
179
+ .dvr-controls[data-dvr] .live-button:hover {
180
+ opacity: 1;
181
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
182
+ }
183
+ .dvr-controls[data-dvr] .live-info {
184
+ font-size: 14px;
185
+ letter-spacing: 0.8px;
186
+ font-weight: 500;
187
+ color: #fffffe;
188
+ margin-left: 21px;
189
+ }
190
+ .dvr-controls[data-dvr] .live-info::before {
191
+ width: 10px;
192
+ height: 10px;
193
+ border-radius: 50%;
194
+ margin-right: 8px;
195
+ background-color: #ed4f4a;
196
+ }
197
+ .dvr-controls[data-dvr] .live-button {
198
+ height: 40px;
199
+ opacity: 1;
200
+ font-size: 14px;
201
+ letter-spacing: 0.8px;
202
+ font-weight: 500;
203
+ margin-left: 20px;
204
+ }
205
+ .dvr-controls[data-dvr] .live-button::before {
206
+ width: 10px;
207
+ height: 10px;
208
+ border-radius: 50%;
209
+ margin-right: 8px;
210
+ background-color: #cacaca;
211
+ }
212
+
213
+ .dvr .dvr-controls[data-dvr] .live-info {
214
+ display: none;
215
+ }
216
+ .dvr .dvr-controls[data-dvr] .live-button {
217
+ display: block;
149
218
  }:root {
150
219
  --primary-background-color: #000;
151
220
  --secondary-background-color: #262626;
@@ -528,99 +597,105 @@
528
597
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
529
598
  width: 25%;
530
599
  }
531
- }.dvr-controls[data-dvr] {
532
- display: inline-block;
533
- color: var(--player-dvr-color);
534
- line-height: 32px;
535
- font-size: 10px;
536
- font-weight: bold;
537
- margin-left: 6px;
538
- height: 40px;
539
- line-height: 40px;
540
- margin-left: 0;
600
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
601
+ order: 99;
602
+ height: 20px;
541
603
  }
542
- .dvr-controls[data-dvr] .live-info {
543
- cursor: default;
544
- text-transform: uppercase;
604
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
605
+ position: absolute;
606
+ right: 16px;
607
+ bottom: 52px;
608
+ width: 250px;
609
+ min-height: 48px;
610
+ z-index: 9999;
611
+ border-radius: 4px;
545
612
  }
546
- .dvr-controls[data-dvr] .live-info:before {
547
- content: "";
548
- display: inline-block;
549
- position: relative;
550
- width: 7px;
551
- height: 7px;
552
- border-radius: 3.5px;
553
- margin-right: 3.5px;
554
- background-color: var(--player-live-color);
613
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
614
+ padding: 8px 0;
555
615
  }
556
- .dvr-controls[data-dvr] .live-info.disabled {
557
- opacity: 0.3;
616
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
617
+ float: left;
618
+ margin-right: 10px;
558
619
  }
559
- .dvr-controls[data-dvr] .live-info.disabled:before {
560
- background-color: var(--player-dvr-color);
620
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
621
+ margin: 0;
622
+ text-align: left;
623
+ line-height: 22px;
624
+ padding: 5px 14px;
625
+ width: 250px;
626
+ font-size: 12px;
561
627
  }
562
- .dvr-controls[data-dvr] .live-button {
563
- cursor: pointer;
564
- outline: none;
565
- display: none;
566
- border: 0;
567
- color: var(--player-dvr-color);
568
- background-color: transparent;
569
- height: 32px;
570
- padding: 0;
571
- opacity: 0.7;
572
- text-transform: uppercase;
573
- transition: all 0.1s ease;
628
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
629
+ float: right;
630
+ margin-right: -14px;
574
631
  }
575
- .dvr-controls[data-dvr] .live-button:before {
576
- content: "";
577
- display: inline-block;
578
- position: relative;
579
- width: 7px;
580
- height: 7px;
581
- border-radius: 3.5px;
582
- margin-right: 3.5px;
583
- background-color: var(--player-dvr-color);
632
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
633
+ float: right;
634
+ margin-right: 8px;
584
635
  }
585
- .dvr-controls[data-dvr] .live-button:hover {
586
- opacity: 1;
587
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
636
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
637
+ height: 20px;
638
+ }*, :focus, :visited {
639
+ outline: none !important;
588
640
  }
589
- .dvr-controls[data-dvr] .live-info {
641
+
642
+ .gear-wrapper .go-back {
643
+ font-weight: 600;
590
644
  font-size: 14px;
591
- letter-spacing: 0.8px;
592
- font-weight: 500;
645
+ line-height: 20px;
646
+ width: 100%;
647
+ text-align: left;
648
+ padding: 12px;
649
+ }
650
+ .gear-wrapper .go-back .arrow-left-icon {
651
+ float: left;
652
+ padding-top: 2px;
653
+ padding-right: 2px;
654
+ }
655
+ .gear-wrapper .go-back .arrow-left-icon svg {
656
+ height: 16px;
657
+ }
658
+ .gear-wrapper ul.gear-sub-menu {
659
+ width: 100%;
660
+ list-style-type: none;
661
+ min-width: 60px;
662
+ border-top: 2px solid rgb(36, 36, 36);
663
+ }
664
+ .gear-wrapper ul.gear-sub-menu li {
665
+ font-size: 12px;
666
+ text-align: left;
667
+ }
668
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
669
+ background-color: #c3c2c2;
670
+ padding: 5px;
671
+ }
672
+ .gear-wrapper ul.gear-sub-menu li a {
673
+ display: block;
674
+ text-decoration: none;
675
+ height: 32px;
676
+ padding: 5px 10px;
677
+ line-height: 22px;
593
678
  color: #fffffe;
594
- margin-left: 21px;
595
679
  }
596
- .dvr-controls[data-dvr] .live-info::before {
597
- width: 10px;
598
- height: 10px;
599
- border-radius: 50%;
600
- margin-right: 8px;
601
- background-color: #ed4f4a;
680
+ .gear-wrapper ul.gear-sub-menu li a:hover {
681
+ color: white;
682
+ background-color: rgba(0, 0, 0, 0.4);
602
683
  }
603
- .dvr-controls[data-dvr] .live-button {
604
- height: 40px;
605
- opacity: 1;
606
- font-size: 14px;
607
- letter-spacing: 0.8px;
608
- font-weight: 500;
609
- margin-left: 20px;
684
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
685
+ color: white;
686
+ text-decoration: none;
610
687
  }
611
- .dvr-controls[data-dvr] .live-button::before {
612
- width: 10px;
613
- height: 10px;
614
- border-radius: 50%;
615
- margin-right: 8px;
616
- background-color: #cacaca;
688
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
689
+ width: 30px;
690
+ height: 20px;
691
+ float: left;
692
+ display: block;
617
693
  }
618
-
619
- .dvr .dvr-controls[data-dvr] .live-info {
694
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
620
695
  display: none;
621
696
  }
622
- .dvr .dvr-controls[data-dvr] .live-button {
623
- display: block;
697
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
698
+ display: inline;
624
699
  }*,
625
700
  :focus,
626
701
  :visited {
@@ -719,105 +794,6 @@
719
794
  100% {
720
795
  color: #B80000;
721
796
  }
722
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
723
- order: 99;
724
- height: 20px;
725
- }
726
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
727
- position: absolute;
728
- right: 16px;
729
- bottom: 52px;
730
- width: 250px;
731
- min-height: 48px;
732
- z-index: 9999;
733
- border-radius: 4px;
734
- }
735
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
736
- padding: 8px 0;
737
- }
738
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
739
- float: left;
740
- margin-right: 10px;
741
- }
742
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
743
- margin: 0;
744
- text-align: left;
745
- line-height: 22px;
746
- padding: 5px 14px;
747
- width: 250px;
748
- font-size: 12px;
749
- }
750
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
751
- float: right;
752
- margin-right: -14px;
753
- }
754
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
755
- float: right;
756
- margin-right: 8px;
757
- }
758
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
759
- height: 20px;
760
- }*, :focus, :visited {
761
- outline: none !important;
762
- }
763
-
764
- .gear-wrapper .go-back {
765
- font-weight: 600;
766
- font-size: 14px;
767
- line-height: 20px;
768
- width: 100%;
769
- text-align: left;
770
- padding: 12px;
771
- }
772
- .gear-wrapper .go-back .arrow-left-icon {
773
- float: left;
774
- padding-top: 2px;
775
- padding-right: 2px;
776
- }
777
- .gear-wrapper .go-back .arrow-left-icon svg {
778
- height: 16px;
779
- }
780
- .gear-wrapper ul.gear-sub-menu {
781
- width: 100%;
782
- list-style-type: none;
783
- min-width: 60px;
784
- border-top: 2px solid rgb(36, 36, 36);
785
- }
786
- .gear-wrapper ul.gear-sub-menu li {
787
- font-size: 12px;
788
- text-align: left;
789
- }
790
- .gear-wrapper ul.gear-sub-menu li[data-title] {
791
- background-color: #c3c2c2;
792
- padding: 5px;
793
- }
794
- .gear-wrapper ul.gear-sub-menu li a {
795
- display: block;
796
- text-decoration: none;
797
- height: 32px;
798
- padding: 5px 10px;
799
- line-height: 22px;
800
- color: #fffffe;
801
- }
802
- .gear-wrapper ul.gear-sub-menu li a:hover {
803
- color: white;
804
- background-color: rgba(0, 0, 0, 0.4);
805
- }
806
- .gear-wrapper ul.gear-sub-menu li a:hover a {
807
- color: white;
808
- text-decoration: none;
809
- }
810
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
811
- width: 30px;
812
- height: 20px;
813
- float: left;
814
- display: block;
815
- }
816
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
817
- display: none;
818
- }
819
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
820
- display: inline;
821
797
  }div.player-error-screen, [data-player] div.player-error-screen {
822
798
  color: #CCCACA;
823
799
  position: absolute;
@@ -854,12 +830,79 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
854
830
  margin: 15px auto 0;
855
831
  }.clips.bar-container[data-seekbar] {
856
832
  clip-path: url("#myClip");
857
- }.gear-option_hd-icon.disabled {
858
- opacity: 0.5;
859
- pointer-events: none;
833
+ }.big-mute-icon-wrapper[data-big-mute] {
834
+ position: absolute;
835
+ z-index: 9998;
836
+ background-color: transparent;
837
+ display: flex;
838
+ justify-content: center;
839
+ width: 100%;
840
+ height: calc(100% - 50px);
841
+ margin: 0 auto;
842
+ opacity: 0.75;
843
+ transition: opacity 0.1s ease;
844
+ pointer-events: auto;
860
845
  }
861
- .gear-option_hd-icon.hidden {
846
+ .big-mute-icon-wrapper[data-big-mute].hide {
862
847
  display: none;
848
+ }
849
+ .big-mute-icon-wrapper[data-big-mute]:hover {
850
+ cursor: pointer;
851
+ }
852
+
853
+ .big-mute-icon[data-big-mute-icon] {
854
+ display: flex;
855
+ align-items: center;
856
+ justify-content: center;
857
+ align-self: center;
858
+ width: 120px;
859
+ height: 120px;
860
+ border: 2px solid white;
861
+ border-radius: 50%;
862
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
863
+ filter: alpha(opacity=60);
864
+ opacity: 1;
865
+ box-shadow: 0 0 1px 0 white;
866
+ background: rgba(240, 243, 247, 0.9411764706);
867
+ z-index: 10000;
868
+ }
869
+ .big-mute-icon[data-big-mute-icon] svg {
870
+ margin-left: 5px;
871
+ width: 80px;
872
+ height: 80px;
873
+ }
874
+ .big-mute-icon[data-big-mute-icon] svg path {
875
+ fill: #1f1e1e !important;
876
+ }
877
+ .big-mute-icon[data-big-mute-icon]:hover {
878
+ background: rgba(240, 243, 247, 0.8784313725);
879
+ }
880
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
881
+ fill: #151515 !important;
882
+ }.context-menu {
883
+ z-index: 999;
884
+ position: absolute;
885
+ top: 0;
886
+ left: 0;
887
+ text-align: center;
888
+ }
889
+ .context-menu .context-menu-list {
890
+ font-family: "Proxima Nova", sans-serif;
891
+ font-size: 12px;
892
+ line-height: 12px;
893
+ list-style-type: none;
894
+ text-align: left;
895
+ padding: 5px;
896
+ margin-left: auto;
897
+ margin-right: auto;
898
+ background-color: rgba(0, 0, 0, 0.75);
899
+ border: 1px solid #666;
900
+ border-radius: 4px;
901
+ }
902
+ .context-menu .context-menu-list .context-menu-list-item {
903
+ color: white;
904
+ padding: 5px;
905
+ cursor: pointer;
863
906
  }[data-player] {
864
907
  --bottom-panel: 40px;
865
908
  }
@@ -1497,39 +1540,15 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1497
1540
  }
1498
1541
  .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1499
1542
  display: none !important;
1500
- }.seek-time[data-seek-time] {
1501
- position: absolute;
1502
- white-space: nowrap;
1503
- height: 20px;
1504
- line-height: 20px;
1505
- font-size: 0;
1506
- left: -100%;
1507
- bottom: 55px;
1508
- background-color: rgba(2, 2, 2, 0.5);
1509
- z-index: 9999;
1510
- transition: opacity 0.1s ease;
1511
- }
1512
- .seek-time[data-seek-time].hidden[data-seek-time] {
1513
- opacity: 0;
1514
- }
1515
- .seek-time[data-seek-time] [data-seek-time] {
1516
- display: inline-block;
1517
- color: white;
1518
- font-size: 10px;
1519
- padding-left: 7px;
1520
- padding-right: 7px;
1521
- vertical-align: top;
1543
+ }.media-control-pip {
1544
+ order: 95;
1545
+ display: flex;
1522
1546
  }
1523
- .seek-time[data-seek-time] [data-duration] {
1524
- display: inline-block;
1525
- color: rgba(255, 255, 255, 0.5);
1526
- font-size: 10px;
1527
- padding-right: 7px;
1528
- vertical-align: top;
1547
+ .media-control-pip button {
1548
+ height: 20px;
1529
1549
  }
1530
- .seek-time[data-seek-time] [data-duration]::before {
1531
- content: "|";
1532
- margin-right: 7px;
1550
+ .media-control-pip button svg {
1551
+ height: 20px;
1533
1552
  }*, :focus, :visited {
1534
1553
  outline: none !important;
1535
1554
  }
@@ -1678,15 +1697,12 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1678
1697
  100% {
1679
1698
  color: #B80000;
1680
1699
  }
1681
- }.media-control-pip {
1682
- order: 95;
1683
- display: flex;
1684
- }
1685
- .media-control-pip button {
1686
- height: 20px;
1700
+ }.gear-option_hd-icon.disabled {
1701
+ opacity: 0.5;
1702
+ pointer-events: none;
1687
1703
  }
1688
- .media-control-pip button svg {
1689
- height: 20px;
1704
+ .gear-option_hd-icon.hidden {
1705
+ display: none;
1690
1706
  }.player-poster[data-poster] {
1691
1707
  display: flex;
1692
1708
  justify-content: center;
@@ -1804,6 +1820,39 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1804
1820
  display: inline-block;
1805
1821
  margin-right: 5px;
1806
1822
  cursor: pointer;
1823
+ }.seek-time[data-seek-time] {
1824
+ position: absolute;
1825
+ white-space: nowrap;
1826
+ height: 20px;
1827
+ line-height: 20px;
1828
+ font-size: 0;
1829
+ left: -100%;
1830
+ bottom: 55px;
1831
+ background-color: rgba(2, 2, 2, 0.5);
1832
+ z-index: 9999;
1833
+ transition: opacity 0.1s ease;
1834
+ }
1835
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1836
+ opacity: 0;
1837
+ }
1838
+ .seek-time[data-seek-time] [data-seek-time] {
1839
+ display: inline-block;
1840
+ color: white;
1841
+ font-size: 10px;
1842
+ padding-left: 7px;
1843
+ padding-right: 7px;
1844
+ vertical-align: top;
1845
+ }
1846
+ .seek-time[data-seek-time] [data-duration] {
1847
+ display: inline-block;
1848
+ color: rgba(255, 255, 255, 0.5);
1849
+ font-size: 10px;
1850
+ padding-right: 7px;
1851
+ vertical-align: top;
1852
+ }
1853
+ .seek-time[data-seek-time] [data-duration]::before {
1854
+ content: "|";
1855
+ margin-right: 7px;
1807
1856
  }.spinner-three-bounce[data-spinner] {
1808
1857
  position: absolute;
1809
1858
  width: 70px;
@@ -1842,6 +1891,67 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1842
1891
  40% {
1843
1892
  transform: scale(1);
1844
1893
  }
1894
+ }.scrub-thumbnails {
1895
+ position: absolute;
1896
+ bottom: 52px;
1897
+ width: 100%;
1898
+ transition: opacity 0.3s ease;
1899
+ }
1900
+ .scrub-thumbnails.hidden {
1901
+ opacity: 0;
1902
+ }
1903
+ .scrub-thumbnails .thumbnail-container {
1904
+ display: inline-block;
1905
+ position: relative;
1906
+ overflow: hidden;
1907
+ background-color: #000;
1908
+ }
1909
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
1910
+ position: absolute;
1911
+ width: auto;
1912
+ }
1913
+ .scrub-thumbnails .thumbnails-text {
1914
+ background-color: rgba(74, 74, 74, 0.7);
1915
+ border-radius: 3px;
1916
+ white-space: nowrap;
1917
+ overflow: hidden;
1918
+ text-overflow: ellipsis;
1919
+ color: white;
1920
+ position: absolute;
1921
+ bottom: 23px;
1922
+ width: 100px;
1923
+ }
1924
+ .scrub-thumbnails .spotlight {
1925
+ background-color: #4a4a4a;
1926
+ overflow: hidden;
1927
+ position: absolute;
1928
+ bottom: 0;
1929
+ left: 0;
1930
+ border-color: #4a4a4a;
1931
+ border-style: solid;
1932
+ border-width: 3px;
1933
+ border-radius: 3px;
1934
+ }
1935
+ .scrub-thumbnails .spotlight img {
1936
+ width: auto;
1937
+ }
1938
+ .scrub-thumbnails .backdrop {
1939
+ position: absolute;
1940
+ left: 0;
1941
+ bottom: 0;
1942
+ right: 0;
1943
+ background-color: #000;
1944
+ overflow: hidden;
1945
+ }
1946
+ .scrub-thumbnails .backdrop .carousel {
1947
+ position: absolute;
1948
+ top: 0;
1949
+ left: 0;
1950
+ height: 100%;
1951
+ white-space: nowrap;
1952
+ }
1953
+ .scrub-thumbnails .backdrop .carousel img {
1954
+ width: auto;
1845
1955
  }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1846
1956
  height: 0;
1847
1957
  }
@@ -1863,55 +1973,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1863
1973
  .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1864
1974
  width: 33.3%;
1865
1975
  height: 100%;
1866
- }.big-mute-icon-wrapper[data-big-mute] {
1867
- position: absolute;
1868
- z-index: 9998;
1869
- background-color: transparent;
1870
- display: flex;
1871
- justify-content: center;
1872
- width: 100%;
1873
- height: calc(100% - 50px);
1874
- margin: 0 auto;
1875
- opacity: 0.75;
1876
- transition: opacity 0.1s ease;
1877
- pointer-events: auto;
1878
- }
1879
- .big-mute-icon-wrapper[data-big-mute].hide {
1880
- display: none;
1881
- }
1882
- .big-mute-icon-wrapper[data-big-mute]:hover {
1883
- cursor: pointer;
1884
- }
1885
-
1886
- .big-mute-icon[data-big-mute-icon] {
1887
- display: flex;
1888
- align-items: center;
1889
- justify-content: center;
1890
- align-self: center;
1891
- width: 120px;
1892
- height: 120px;
1893
- border: 2px solid white;
1894
- border-radius: 50%;
1895
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1896
- filter: alpha(opacity=60);
1897
- opacity: 1;
1898
- box-shadow: 0 0 1px 0 white;
1899
- background: rgba(240, 243, 247, 0.9411764706);
1900
- z-index: 10000;
1901
- }
1902
- .big-mute-icon[data-big-mute-icon] svg {
1903
- margin-left: 5px;
1904
- width: 80px;
1905
- height: 80px;
1906
- }
1907
- .big-mute-icon[data-big-mute-icon] svg path {
1908
- fill: #1f1e1e !important;
1909
- }
1910
- .big-mute-icon[data-big-mute-icon]:hover {
1911
- background: rgba(240, 243, 247, 0.8784313725);
1912
- }
1913
- .big-mute-icon[data-big-mute-icon]:hover svg path {
1914
- fill: #151515 !important;
1915
1976
  }*,
1916
1977
  :focus,
1917
1978
  :visited {
@@ -1995,65 +2056,4 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1995
2056
 
1996
2057
  .clappr-logo {
1997
2058
  position: absolute;
1998
- }.scrub-thumbnails {
1999
- position: absolute;
2000
- bottom: 52px;
2001
- width: 100%;
2002
- transition: opacity 0.3s ease;
2003
- }
2004
- .scrub-thumbnails.hidden {
2005
- opacity: 0;
2006
- }
2007
- .scrub-thumbnails .thumbnail-container {
2008
- display: inline-block;
2009
- position: relative;
2010
- overflow: hidden;
2011
- background-color: #000;
2012
- }
2013
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
2014
- position: absolute;
2015
- width: auto;
2016
- }
2017
- .scrub-thumbnails .thumbnails-text {
2018
- background-color: rgba(74, 74, 74, 0.7);
2019
- border-radius: 3px;
2020
- white-space: nowrap;
2021
- overflow: hidden;
2022
- text-overflow: ellipsis;
2023
- color: white;
2024
- position: absolute;
2025
- bottom: 23px;
2026
- width: 100px;
2027
- }
2028
- .scrub-thumbnails .spotlight {
2029
- background-color: #4a4a4a;
2030
- overflow: hidden;
2031
- position: absolute;
2032
- bottom: 0;
2033
- left: 0;
2034
- border-color: #4a4a4a;
2035
- border-style: solid;
2036
- border-width: 3px;
2037
- border-radius: 3px;
2038
- }
2039
- .scrub-thumbnails .spotlight img {
2040
- width: auto;
2041
- }
2042
- .scrub-thumbnails .backdrop {
2043
- position: absolute;
2044
- left: 0;
2045
- bottom: 0;
2046
- right: 0;
2047
- background-color: #000;
2048
- overflow: hidden;
2049
- }
2050
- .scrub-thumbnails .backdrop .carousel {
2051
- position: absolute;
2052
- top: 0;
2053
- left: 0;
2054
- height: 100%;
2055
- white-space: nowrap;
2056
- }
2057
- .scrub-thumbnails .backdrop .carousel img {
2058
- width: auto;
2059
2059
  }