@gcorevideo/player 2.19.7 → 2.19.9

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 (159) hide show
  1. package/dist/core.js +7 -9
  2. package/dist/index.css +417 -417
  3. package/dist/index.js +94 -54
  4. package/dist/player.d.ts +109 -55
  5. package/dist/plugins/index.css +1529 -1529
  6. package/dist/plugins/index.js +86 -42
  7. package/docs/api/player.bigmutebutton.md +0 -14
  8. package/docs/api/player.levelselector.md +1 -1
  9. package/docs/api/player.md +24 -9
  10. package/docs/api/player.mediacontrol._constructor_.md +5 -2
  11. package/docs/api/player.mediacontrol.attributes.md +3 -0
  12. package/docs/api/player.mediacontrol.bindcontainerevents.md +3 -0
  13. package/docs/api/player.mediacontrol.bindevents.md +3 -0
  14. package/docs/api/player.mediacontrol.container.md +3 -0
  15. package/docs/api/player.mediacontrol.destroy.md +3 -0
  16. package/docs/api/player.mediacontrol.disable.md +3 -0
  17. package/docs/api/player.mediacontrol.disabled.md +3 -0
  18. package/docs/api/player.mediacontrol.disabledcontrolbutton.md +5 -0
  19. package/docs/api/player.mediacontrol.enable.md +3 -0
  20. package/docs/api/player.mediacontrol.enablecontrolbutton.md +5 -0
  21. package/docs/api/player.mediacontrol.events.md +3 -0
  22. package/docs/api/player.mediacontrol.getelement.md +11 -2
  23. package/docs/api/player.mediacontrol.getexternalinterface.md +3 -0
  24. package/docs/api/player.mediacontrol.md +53 -570
  25. package/docs/api/player.mediacontrol.muted.md +5 -0
  26. package/docs/api/player.mediacontrol.name.md +3 -0
  27. package/docs/api/player.mediacontrol.pause.md +5 -0
  28. package/docs/api/player.mediacontrol.play.md +5 -0
  29. package/docs/api/player.mediacontrol.playback.md +3 -0
  30. package/docs/api/player.mediacontrol.render.md +3 -0
  31. package/docs/api/player.mediacontrol.setinitialvolume.md +20 -0
  32. package/docs/api/player.mediacontrol.setmuted.md +3 -0
  33. package/docs/api/player.mediacontrol.setvolume.md +12 -1
  34. package/docs/api/player.mediacontrol.stop.md +5 -0
  35. package/docs/api/player.mediacontrol.supportedversion.md +3 -0
  36. package/docs/api/player.mediacontrol.volume.md +5 -0
  37. package/docs/api/{player.bigmutebutton.unbindevents.md → player.mediacontrolelement.md} +4 -7
  38. package/docs/api/player.subtitles.buttonelement.md +1 -1
  39. package/docs/api/player.subtitles.levelelement.md +1 -1
  40. package/docs/api/player.zeptoresult.md +15 -0
  41. package/lib/Player.d.ts.map +1 -1
  42. package/lib/Player.js +3 -5
  43. package/lib/index.core.d.ts +1 -0
  44. package/lib/index.core.d.ts.map +1 -1
  45. package/lib/index.core.js +1 -0
  46. package/lib/playback/hls-playback/HlsPlayback.d.ts.map +1 -1
  47. package/lib/playback/hls-playback/HlsPlayback.js +4 -4
  48. package/lib/plugins/big-mute-button/BigMuteButton.d.ts +1 -1
  49. package/lib/plugins/big-mute-button/BigMuteButton.d.ts.map +1 -1
  50. package/lib/plugins/clips/Clips.d.ts +3 -0
  51. package/lib/plugins/clips/Clips.d.ts.map +1 -1
  52. package/lib/plugins/clips/Clips.js +22 -2
  53. package/lib/plugins/kibo/index.d.ts +3 -0
  54. package/lib/plugins/kibo/index.d.ts.map +1 -1
  55. package/lib/plugins/kibo/index.js +3 -0
  56. package/lib/plugins/media-control/MediaControl.d.ts +95 -54
  57. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  58. package/lib/plugins/media-control/MediaControl.js +60 -37
  59. package/lib/plugins/source-controller/SourceController.d.ts.map +1 -1
  60. package/lib/plugins/source-controller/SourceController.js +3 -7
  61. package/lib/plugins/subtitles/Subtitles.d.ts +1 -1
  62. package/lib/plugins/subtitles/Subtitles.d.ts.map +1 -1
  63. package/lib/plugins/vast-ads/roll.d.ts +1 -1
  64. package/lib/plugins/vast-ads/roll.d.ts.map +1 -1
  65. package/lib/plugins/vast-ads/rollmanager.d.ts +1 -1
  66. package/lib/plugins/vast-ads/rollmanager.d.ts.map +1 -1
  67. package/lib/types.d.ts.map +1 -1
  68. package/lib/utils/types.d.ts +6 -0
  69. package/lib/utils/types.d.ts.map +1 -1
  70. package/package.json +1 -1
  71. package/src/Player.ts +3 -5
  72. package/src/index.core.ts +1 -0
  73. package/src/playback/hls-playback/HlsPlayback.ts +10 -5
  74. package/src/plugins/audio-selector/AudioSelector.ts +1 -1
  75. package/src/plugins/big-mute-button/BigMuteButton.ts +2 -2
  76. package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts +1 -1
  77. package/src/plugins/clappr-nerd-stats/speedtest/Speedtest.ts +1 -1
  78. package/src/plugins/clappr-stats/ClapprStats.ts +1 -1
  79. package/src/plugins/clips/Clips.ts +29 -3
  80. package/src/plugins/error-screen/ErrorScreen.ts +1 -1
  81. package/src/plugins/favicon/Favicon.ts +1 -1
  82. package/src/plugins/kibo/index.ts +3 -0
  83. package/src/plugins/level-selector/LevelSelector.ts +1 -1
  84. package/src/plugins/level-selector/__tests__/LevelSelector.test.ts +1 -8
  85. package/src/plugins/level-selector/__tests__/__snapshots__/LevelSelector.test.ts.snap +33 -0
  86. package/src/plugins/logo/Logo.ts +1 -1
  87. package/src/plugins/media-control/MediaControl.ts +114 -94
  88. package/src/plugins/multi-camera/MultiCamera.ts +1 -1
  89. package/src/plugins/playback-rate/PlaybackRate.ts +1 -1
  90. package/src/plugins/poster/Poster.ts +1 -1
  91. package/src/plugins/seek-time/SeekTime.ts +1 -1
  92. package/src/plugins/source-controller/SourceController.ts +4 -8
  93. package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts +1 -1
  94. package/src/plugins/subtitles/Subtitles.ts +1 -1
  95. package/src/plugins/thumbnails/Thumbnails.ts +1 -1
  96. package/src/plugins/vast-ads/VastAds.ts +1 -1
  97. package/src/plugins/vast-ads/roll.ts +1 -1
  98. package/src/plugins/vast-ads/rollmanager.ts +1 -1
  99. package/src/plugins/volume-fade/VolumeFade.ts +1 -1
  100. package/src/types.ts +0 -2
  101. package/src/utils/types.ts +6 -0
  102. package/temp/player.api.json +587 -2743
  103. package/tsconfig.tsbuildinfo +1 -1
  104. package/docs/api/player.kibo._constructor_.md +0 -49
  105. package/docs/api/player.kibo.delegate.md +0 -79
  106. package/docs/api/player.kibo.down.md +0 -65
  107. package/docs/api/player.kibo.lastkey.md +0 -51
  108. package/docs/api/player.kibo.lastmodifiersandkey.md +0 -15
  109. package/docs/api/player.kibo.md +0 -137
  110. package/docs/api/player.kibo.off.md +0 -49
  111. package/docs/api/player.kibo.up.md +0 -65
  112. package/docs/api/player.mediacontrol.applybuttonstyle.md +0 -49
  113. package/docs/api/player.mediacontrol.bigplaybutton.md +0 -11
  114. package/docs/api/player.mediacontrol.bindkeyandshow.md +0 -63
  115. package/docs/api/player.mediacontrol.bindkeyevents.md +0 -15
  116. package/docs/api/player.mediacontrol.configure.md +0 -15
  117. package/docs/api/player.mediacontrol.createcachedelements.md +0 -15
  118. package/docs/api/player.mediacontrol.drawdurationandposition.md +0 -15
  119. package/docs/api/player.mediacontrol.ended.md +0 -15
  120. package/docs/api/player.mediacontrol.getsettings.md +0 -15
  121. package/docs/api/player.mediacontrol.getvolumefromuievent.md +0 -49
  122. package/docs/api/player.mediacontrol.hide.md +0 -51
  123. package/docs/api/player.mediacontrol.hidecontrollads.md +0 -15
  124. package/docs/api/player.mediacontrol.hidevolumebar.md +0 -51
  125. package/docs/api/player.mediacontrol.highdefinitionupdate.md +0 -49
  126. package/docs/api/player.mediacontrol.initializeicons.md +0 -15
  127. package/docs/api/player.mediacontrol.isseekenabledforhtml5playback.md +0 -15
  128. package/docs/api/player.mediacontrol.isvisible.md +0 -15
  129. package/docs/api/player.mediacontrol.onactivecontainerchanged.md +0 -15
  130. package/docs/api/player.mediacontrol.onfinishad.md +0 -15
  131. package/docs/api/player.mediacontrol.onstartad.md +0 -15
  132. package/docs/api/player.mediacontrol.ontimeupdate.md +0 -49
  133. package/docs/api/player.mediacontrol.parsecolors.md +0 -15
  134. package/docs/api/player.mediacontrol.renderseekbar.md +0 -15
  135. package/docs/api/player.mediacontrol.resetindicators.md +0 -15
  136. package/docs/api/player.mediacontrol.resetkeepvisible.md +0 -15
  137. package/docs/api/player.mediacontrol.resetuserkeepvisible.md +0 -15
  138. package/docs/api/player.mediacontrol.seek.md +0 -49
  139. package/docs/api/player.mediacontrol.seekrelative.md +0 -49
  140. package/docs/api/player.mediacontrol.setcliptext.md +0 -49
  141. package/docs/api/player.mediacontrol.setkeepvisible.md +0 -15
  142. package/docs/api/player.mediacontrol.setseekpercentage.md +0 -49
  143. package/docs/api/player.mediacontrol.setsvgmask.md +0 -49
  144. package/docs/api/player.mediacontrol.setuserkeepvisible.md +0 -15
  145. package/docs/api/player.mediacontrol.show.md +0 -51
  146. package/docs/api/player.mediacontrol.showvolumebar.md +0 -15
  147. package/docs/api/player.mediacontrol.startseekdrag.md +0 -49
  148. package/docs/api/player.mediacontrol.startvolumedrag.md +0 -49
  149. package/docs/api/player.mediacontrol.stopdrag.md +0 -11
  150. package/docs/api/player.mediacontrol.template.md +0 -11
  151. package/docs/api/player.mediacontrol.togglefullscreen.md +0 -15
  152. package/docs/api/player.mediacontrol.togglemute.md +0 -15
  153. package/docs/api/player.mediacontrol.toggleplaypause.md +0 -15
  154. package/docs/api/player.mediacontrol.toggleplaystop.md +0 -15
  155. package/docs/api/player.mediacontrol.unbindkeyevents.md +0 -15
  156. package/docs/api/player.mediacontrol.updatecursorstyle.md +0 -49
  157. package/docs/api/player.mediacontrol.updatedrag.md +0 -11
  158. package/docs/api/player.mediacontrol.updateprogressbar.md +0 -49
  159. package/src/plugins/types.ts +0 -7
package/dist/index.css CHANGED
@@ -122,6 +122,193 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }.clips.bar-container[data-seekbar] {
126
+ clip-path: url("#myClip");
127
+ }.context-menu {
128
+ z-index: 999;
129
+ position: absolute;
130
+ top: 0;
131
+ left: 0;
132
+ text-align: center;
133
+ }
134
+ .context-menu .context-menu-list {
135
+ font-family: "Proxima Nova", sans-serif;
136
+ font-size: 12px;
137
+ line-height: 12px;
138
+ list-style-type: none;
139
+ text-align: left;
140
+ padding: 5px;
141
+ margin-left: auto;
142
+ margin-right: auto;
143
+ background-color: rgba(0, 0, 0, 0.75);
144
+ border: 1px solid #666;
145
+ border-radius: 4px;
146
+ }
147
+ .context-menu .context-menu-list .context-menu-list-item {
148
+ color: white;
149
+ padding: 5px;
150
+ cursor: pointer;
151
+ }.big-mute-icon-wrapper[data-big-mute] {
152
+ position: absolute;
153
+ z-index: 9998;
154
+ background-color: transparent;
155
+ display: flex;
156
+ justify-content: center;
157
+ width: 100%;
158
+ height: calc(100% - 50px);
159
+ margin: 0 auto;
160
+ opacity: 0.75;
161
+ transition: opacity 0.1s ease;
162
+ pointer-events: auto;
163
+ }
164
+ .big-mute-icon-wrapper[data-big-mute].hide {
165
+ display: none;
166
+ }
167
+ .big-mute-icon-wrapper[data-big-mute]:hover {
168
+ cursor: pointer;
169
+ }
170
+
171
+ .big-mute-icon[data-big-mute-icon] {
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: center;
175
+ align-self: center;
176
+ width: 120px;
177
+ height: 120px;
178
+ border: 2px solid white;
179
+ border-radius: 50%;
180
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
181
+ filter: alpha(opacity=60);
182
+ opacity: 1;
183
+ box-shadow: 0 0 1px 0 white;
184
+ background: rgba(240, 243, 247, 0.9411764706);
185
+ z-index: 10000;
186
+ }
187
+ .big-mute-icon[data-big-mute-icon] svg {
188
+ margin-left: 5px;
189
+ width: 80px;
190
+ height: 80px;
191
+ }
192
+ .big-mute-icon[data-big-mute-icon] svg path {
193
+ fill: #1f1e1e !important;
194
+ }
195
+ .big-mute-icon[data-big-mute-icon]:hover {
196
+ background: rgba(240, 243, 247, 0.8784313725);
197
+ }
198
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
199
+ fill: #151515 !important;
200
+ }*, :focus, :visited {
201
+ outline: none !important;
202
+ }
203
+
204
+ .gear-wrapper .go-back {
205
+ font-weight: 600;
206
+ font-size: 14px;
207
+ line-height: 20px;
208
+ width: 100%;
209
+ text-align: left;
210
+ padding: 12px;
211
+ }
212
+ .gear-wrapper .go-back .arrow-left-icon {
213
+ float: left;
214
+ padding-top: 2px;
215
+ padding-right: 2px;
216
+ }
217
+ .gear-wrapper .go-back .arrow-left-icon svg {
218
+ height: 16px;
219
+ }
220
+ .gear-wrapper ul.gear-sub-menu {
221
+ width: 100%;
222
+ list-style-type: none;
223
+ background-color: transparent;
224
+ min-width: 60px;
225
+ border-top: 2px solid rgb(36, 36, 36);
226
+ }
227
+ .gear-wrapper ul.gear-sub-menu li {
228
+ font-size: 12px;
229
+ text-align: left;
230
+ }
231
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
232
+ background-color: #c3c2c2;
233
+ padding: 5px;
234
+ }
235
+ .gear-wrapper ul.gear-sub-menu li a {
236
+ display: block;
237
+ text-decoration: none;
238
+ height: 32px;
239
+ padding: 5px 10px;
240
+ line-height: 22px;
241
+ color: #fffffe;
242
+ }
243
+ .gear-wrapper ul.gear-sub-menu li a:hover {
244
+ color: white;
245
+ background-color: rgba(0, 0, 0, 0.4);
246
+ }
247
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
248
+ color: white;
249
+ text-decoration: none;
250
+ }
251
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
252
+ width: 30px;
253
+ height: 20px;
254
+ float: left;
255
+ display: block;
256
+ }
257
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
258
+ display: none;
259
+ }
260
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
261
+ display: inline;
262
+ }
263
+ .gear-wrapper svg {
264
+ height: 20px;
265
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
266
+ float: right;
267
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
268
+ }
269
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
270
+ height: 40px;
271
+ width: 40px;
272
+ padding-right: 20px;
273
+ }
274
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
275
+ height: 20px;
276
+ }
277
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
278
+ position: absolute;
279
+ right: 16px;
280
+ bottom: 52px;
281
+ display: none;
282
+ width: 250px;
283
+ min-height: 48px;
284
+ z-index: 9999;
285
+ border-radius: 4px;
286
+ }
287
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
288
+ padding: 8px 0;
289
+ }
290
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
291
+ float: left;
292
+ margin-right: 10px;
293
+ }
294
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
295
+ margin: 0;
296
+ text-align: left;
297
+ line-height: 22px;
298
+ padding: 5px 14px;
299
+ width: 250px;
300
+ font-size: 12px;
301
+ }
302
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
303
+ float: right;
304
+ margin-right: -14px;
305
+ }
306
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
307
+ float: right;
308
+ margin-right: 8px;
309
+ }
310
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
311
+ height: 20px;
125
312
  }*, :focus, :visited {
126
313
  outline: none !important;
127
314
  }
@@ -641,193 +828,153 @@
641
828
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
642
829
  width: 25%;
643
830
  }
644
- }.context-menu {
645
- z-index: 999;
646
- position: absolute;
647
- top: 0;
648
- left: 0;
649
- text-align: center;
831
+ }.media-control-pip button {
832
+ float: right;
833
+ height: 40px;
834
+ margin-right: 20px;
650
835
  }
651
- .context-menu .context-menu-list {
652
- font-family: "Proxima Nova", sans-serif;
653
- font-size: 12px;
654
- line-height: 12px;
655
- list-style-type: none;
656
- text-align: left;
657
- padding: 5px;
658
- margin-left: auto;
659
- margin-right: auto;
660
- background-color: rgba(0, 0, 0, 0.75);
661
- border: 1px solid #666;
662
- border-radius: 4px;
836
+ .media-control-pip button svg {
837
+ height: 20px;
838
+ }.dvr-controls[data-dvr-controls] {
839
+ display: inline-block;
840
+ float: left;
841
+ color: #fff;
842
+ line-height: 32px;
843
+ font-size: 10px;
844
+ font-weight: bold;
845
+ margin-left: 6px;
663
846
  }
664
- .context-menu .context-menu-list .context-menu-list-item {
665
- color: white;
666
- padding: 5px;
667
- cursor: pointer;
668
- }.big-mute-icon-wrapper[data-big-mute] {
669
- position: absolute;
670
- z-index: 9998;
671
- background-color: transparent;
672
- display: flex;
673
- justify-content: center;
674
- width: 100%;
675
- height: calc(100% - 50px);
676
- margin: 0 auto;
677
- opacity: 0.75;
678
- transition: opacity 0.1s ease;
679
- pointer-events: auto;
847
+ .dvr-controls[data-dvr-controls] .live-info {
848
+ cursor: default;
849
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
850
+ text-transform: uppercase;
680
851
  }
681
- .big-mute-icon-wrapper[data-big-mute].hide {
682
- display: none;
852
+ .dvr-controls[data-dvr-controls] .live-info:before {
853
+ content: "";
854
+ display: inline-block;
855
+ position: relative;
856
+ width: 7px;
857
+ height: 7px;
858
+ border-radius: 3.5px;
859
+ margin-right: 3.5px;
860
+ background-color: #ff0101;
683
861
  }
684
- .big-mute-icon-wrapper[data-big-mute]:hover {
685
- cursor: pointer;
862
+ .dvr-controls[data-dvr-controls] .live-info.disabled {
863
+ opacity: 0.3;
686
864
  }
687
-
688
- .big-mute-icon[data-big-mute-icon] {
689
- display: flex;
690
- align-items: center;
691
- justify-content: center;
692
- align-self: center;
693
- width: 120px;
694
- height: 120px;
695
- border: 2px solid white;
696
- border-radius: 50%;
697
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
698
- filter: alpha(opacity=60);
699
- opacity: 1;
700
- box-shadow: 0 0 1px 0 white;
701
- background: rgba(240, 243, 247, 0.9411764706);
702
- z-index: 10000;
703
- }
704
- .big-mute-icon[data-big-mute-icon] svg {
705
- margin-left: 5px;
706
- width: 80px;
707
- height: 80px;
865
+ .dvr-controls[data-dvr-controls] .live-info.disabled:before {
866
+ background-color: #fff;
708
867
  }
709
- .big-mute-icon[data-big-mute-icon] svg path {
710
- fill: #1f1e1e !important;
868
+ .dvr-controls[data-dvr-controls] .live-button {
869
+ cursor: pointer;
870
+ outline: none;
871
+ display: none;
872
+ border: 0;
873
+ color: #fff;
874
+ background-color: transparent;
875
+ height: 32px;
876
+ padding: 0;
877
+ opacity: 0.7;
878
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
879
+ text-transform: uppercase;
880
+ transition: all 0.1s ease;
711
881
  }
712
- .big-mute-icon[data-big-mute-icon]:hover {
713
- background: rgba(240, 243, 247, 0.8784313725);
882
+ .dvr-controls[data-dvr-controls] .live-button:before {
883
+ content: "";
884
+ display: inline-block;
885
+ position: relative;
886
+ width: 7px;
887
+ height: 7px;
888
+ border-radius: 3.5px;
889
+ margin-right: 3.5px;
890
+ background-color: #fff;
714
891
  }
715
- .big-mute-icon[data-big-mute-icon]:hover svg path {
716
- fill: #151515 !important;
717
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
718
- float: right;
719
- font-family: Roboto, "Open Sans", Arial, sans-serif;
892
+ .dvr-controls[data-dvr-controls] .live-button:hover {
893
+ opacity: 1;
894
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
720
895
  }
721
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
896
+
897
+ .dvr-controls[data-dvr-controls] {
722
898
  height: 40px;
723
- width: 40px;
724
- padding-right: 20px;
725
- }
726
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
727
- height: 20px;
728
- }
729
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
730
- position: absolute;
731
- right: 16px;
732
- bottom: 52px;
733
- display: none;
734
- width: 250px;
735
- min-height: 48px;
736
- z-index: 9999;
737
- border-radius: 4px;
738
- }
739
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
740
- padding: 8px 0;
899
+ line-height: 40px;
900
+ margin-left: 0;
741
901
  }
742
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
743
- float: left;
744
- margin-right: 10px;
902
+ .dvr-controls[data-dvr-controls] .live-info {
903
+ font-size: 14px;
904
+ letter-spacing: 0.8px;
905
+ font-weight: 500;
906
+ color: #fffffe;
907
+ margin-left: 21px;
745
908
  }
746
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
747
- margin: 0;
748
- text-align: left;
749
- line-height: 22px;
750
- padding: 5px 14px;
751
- width: 250px;
752
- font-size: 12px;
909
+ .dvr-controls[data-dvr-controls] .live-info::before {
910
+ width: 10px;
911
+ height: 10px;
912
+ border-radius: 50%;
913
+ margin-right: 8px;
914
+ background-color: #ed4f4a;
753
915
  }
754
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
755
- float: right;
756
- margin-right: -14px;
916
+ .dvr-controls[data-dvr-controls] .live-button {
917
+ height: 40px;
918
+ opacity: 1;
919
+ font-size: 14px;
920
+ letter-spacing: 0.8px;
921
+ font-weight: 500;
922
+ margin-left: 20px;
757
923
  }
758
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
759
- float: right;
924
+ .dvr-controls[data-dvr-controls] .live-button::before {
925
+ width: 10px;
926
+ height: 10px;
927
+ border-radius: 50%;
760
928
  margin-right: 8px;
761
- }
762
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
763
- height: 20px;
764
- }*, :focus, :visited {
765
- outline: none !important;
929
+ background-color: #cacaca;
766
930
  }
767
931
 
768
- .gear-wrapper .go-back {
769
- font-weight: 600;
770
- font-size: 14px;
771
- line-height: 20px;
772
- width: 100%;
773
- text-align: left;
774
- padding: 12px;
932
+ .dvr .dvr-controls[data-dvr-controls] .live-info {
933
+ display: none;
775
934
  }
776
- .gear-wrapper .go-back .arrow-left-icon {
777
- float: left;
778
- padding-top: 2px;
779
- padding-right: 2px;
935
+ .dvr .dvr-controls[data-dvr-controls] .live-button {
936
+ display: block;
780
937
  }
781
- .gear-wrapper .go-back .arrow-left-icon svg {
782
- height: 16px;
938
+ .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
939
+ background-color: #005aff;
783
940
  }
784
- .gear-wrapper ul.gear-sub-menu {
941
+
942
+ .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
943
+ background-color: #ff0101;
944
+ }div.player-error-screen, [data-player] div.player-error-screen {
945
+ color: #CCCACA;
946
+ position: absolute;
947
+ top: 0;
948
+ height: 100%;
785
949
  width: 100%;
786
- list-style-type: none;
787
- background-color: transparent;
788
- min-width: 60px;
789
- border-top: 2px solid rgb(36, 36, 36);
790
- }
791
- .gear-wrapper ul.gear-sub-menu li {
792
- font-size: 12px;
793
- text-align: left;
950
+ background-color: rgba(0, 0, 0, 0.7);
951
+ z-index: 2000;
952
+ display: flex;
953
+ flex-direction: column;
954
+ justify-content: center;
794
955
  }
795
- .gear-wrapper ul.gear-sub-menu li[data-title] {
796
- background-color: #c3c2c2;
797
- padding: 5px;
956
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
957
+ font-size: 14px;
958
+ color: #CCCACA;
959
+ margin-top: 45px;
798
960
  }
799
- .gear-wrapper ul.gear-sub-menu li a {
800
- display: block;
801
- text-decoration: none;
802
- height: 32px;
803
- padding: 5px 10px;
804
- line-height: 22px;
805
- color: #fffffe;
961
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
962
+ font-weight: bold;
963
+ line-height: 30px;
964
+ font-size: 18px;
806
965
  }
807
- .gear-wrapper ul.gear-sub-menu li a:hover {
808
- color: white;
809
- background-color: rgba(0, 0, 0, 0.4);
966
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
967
+ width: 90%;
968
+ margin: 0 auto;
810
969
  }
811
- .gear-wrapper ul.gear-sub-menu li a:hover a {
812
- color: white;
813
- text-decoration: none;
970
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
971
+ font-size: 13px;
972
+ margin-top: 15px;
814
973
  }
815
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
974
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
975
+ cursor: pointer;
816
976
  width: 30px;
817
- height: 20px;
818
- float: left;
819
- display: block;
820
- }
821
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
822
- display: none;
823
- }
824
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
825
- display: inline;
826
- }
827
- .gear-wrapper svg {
828
- height: 20px;
829
- }.clips.bar-container[data-seekbar] {
830
- clip-path: url("#myClip");
977
+ margin: 15px auto 0;
831
978
  }*, :focus, :visited {
832
979
  outline: none !important;
833
980
  }
@@ -976,115 +1123,94 @@
976
1123
  100% {
977
1124
  color: #B80000;
978
1125
  }
979
- }.dvr-controls[data-dvr-controls] {
980
- display: inline-block;
981
- float: left;
982
- color: #fff;
983
- line-height: 32px;
984
- font-size: 10px;
985
- font-weight: bold;
986
- margin-left: 6px;
1126
+ }.seek-time[data-seek-time] {
1127
+ position: absolute;
1128
+ white-space: nowrap;
1129
+ height: 20px;
1130
+ line-height: 20px;
1131
+ font-size: 0;
1132
+ left: -100%;
1133
+ bottom: 55px;
1134
+ background-color: rgba(2, 2, 2, 0.5);
1135
+ z-index: 9999;
1136
+ transition: opacity 0.1s ease;
987
1137
  }
988
- .dvr-controls[data-dvr-controls] .live-info {
989
- cursor: default;
990
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
991
- text-transform: uppercase;
1138
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1139
+ opacity: 0;
992
1140
  }
993
- .dvr-controls[data-dvr-controls] .live-info:before {
994
- content: "";
1141
+ .seek-time[data-seek-time] [data-seek-time] {
995
1142
  display: inline-block;
996
- position: relative;
997
- width: 7px;
998
- height: 7px;
999
- border-radius: 3.5px;
1000
- margin-right: 3.5px;
1001
- background-color: #ff0101;
1002
- }
1003
- .dvr-controls[data-dvr-controls] .live-info.disabled {
1004
- opacity: 0.3;
1005
- }
1006
- .dvr-controls[data-dvr-controls] .live-info.disabled:before {
1007
- background-color: #fff;
1008
- }
1009
- .dvr-controls[data-dvr-controls] .live-button {
1010
- cursor: pointer;
1011
- outline: none;
1012
- display: none;
1013
- border: 0;
1014
- color: #fff;
1015
- background-color: transparent;
1016
- height: 32px;
1017
- padding: 0;
1018
- opacity: 0.7;
1019
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
1020
- text-transform: uppercase;
1021
- transition: all 0.1s ease;
1143
+ color: white;
1144
+ font-size: 10px;
1145
+ padding-left: 7px;
1146
+ padding-right: 7px;
1147
+ vertical-align: top;
1022
1148
  }
1023
- .dvr-controls[data-dvr-controls] .live-button:before {
1024
- content: "";
1149
+ .seek-time[data-seek-time] [data-duration] {
1025
1150
  display: inline-block;
1026
- position: relative;
1027
- width: 7px;
1028
- height: 7px;
1029
- border-radius: 3.5px;
1030
- margin-right: 3.5px;
1031
- background-color: #fff;
1032
- }
1033
- .dvr-controls[data-dvr-controls] .live-button:hover {
1034
- opacity: 1;
1035
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
1036
- }
1037
-
1038
- .dvr-controls[data-dvr-controls] {
1039
- height: 40px;
1040
- line-height: 40px;
1041
- margin-left: 0;
1042
- }
1043
- .dvr-controls[data-dvr-controls] .live-info {
1044
- font-size: 14px;
1045
- letter-spacing: 0.8px;
1046
- font-weight: 500;
1047
- color: #fffffe;
1048
- margin-left: 21px;
1151
+ color: rgba(255, 255, 255, 0.5);
1152
+ font-size: 10px;
1153
+ padding-right: 7px;
1154
+ vertical-align: top;
1049
1155
  }
1050
- .dvr-controls[data-dvr-controls] .live-info::before {
1051
- width: 10px;
1052
- height: 10px;
1053
- border-radius: 50%;
1054
- margin-right: 8px;
1055
- background-color: #ed4f4a;
1156
+ .seek-time[data-seek-time] [data-duration]::before {
1157
+ content: "|";
1158
+ margin-right: 7px;
1159
+ }.player-poster[data-poster] {
1160
+ display: flex;
1161
+ justify-content: center;
1162
+ align-items: center;
1163
+ position: absolute;
1164
+ height: 100%;
1165
+ width: 100%;
1166
+ z-index: 998;
1167
+ top: 0;
1168
+ left: 0;
1169
+ background-color: #000;
1170
+ background-size: cover;
1171
+ background-repeat: no-repeat;
1172
+ background-position: 50% 50%;
1056
1173
  }
1057
- .dvr-controls[data-dvr-controls] .live-button {
1058
- height: 40px;
1059
- opacity: 1;
1060
- font-size: 14px;
1061
- letter-spacing: 0.8px;
1062
- font-weight: 500;
1063
- margin-left: 20px;
1174
+ .player-poster[data-poster].clickable {
1175
+ cursor: pointer;
1064
1176
  }
1065
- .dvr-controls[data-dvr-controls] .live-button::before {
1066
- width: 10px;
1067
- height: 10px;
1068
- border-radius: 50%;
1069
- margin-right: 8px;
1070
- background-color: #cacaca;
1177
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1178
+ opacity: 1;
1071
1179
  }
1072
-
1073
- .dvr .dvr-controls[data-dvr-controls] .live-info {
1074
- display: none;
1180
+ .player-poster[data-poster] .play-wrapper[data-poster] {
1181
+ width: 100%;
1182
+ height: 25%;
1183
+ margin: 0 auto;
1184
+ opacity: 0.75;
1185
+ transition: opacity 0.1s ease;
1075
1186
  }
1076
- .dvr .dvr-controls[data-dvr-controls] .live-button {
1077
- display: block;
1187
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
1188
+ height: 100%;
1189
+ display: inline;
1078
1190
  }
1079
- .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1080
- background-color: #005aff;
1191
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1192
+ fill: #fff;
1193
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1194
+ height: 0;
1081
1195
  }
1082
1196
 
1083
- .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1084
- background-color: #ff0101;
1085
- }.level-disabled {
1086
- opacity: 0.5;
1087
- pointer-events: none;
1197
+ .skip_time_plugin[data-skip-time] {
1198
+ position: absolute;
1199
+ width: 100%;
1200
+ height: calc(100% - 50px);
1201
+ z-index: 9998;
1202
+ background-color: transparent;
1203
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1204
+ }
1205
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1206
+ width: 100%;
1207
+ height: 100%;
1208
+ display: flex;
1209
+ justify-content: space-between;
1210
+ }
1211
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1212
+ width: 33.3%;
1213
+ height: 100%;
1088
1214
  }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1089
1215
  .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1090
1216
  display: block;
@@ -1155,40 +1281,6 @@
1155
1281
  }
1156
1282
  .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1157
1283
  display: none !important;
1158
- }div.player-error-screen, [data-player] div.player-error-screen {
1159
- color: #CCCACA;
1160
- position: absolute;
1161
- top: 0;
1162
- height: 100%;
1163
- width: 100%;
1164
- background-color: rgba(0, 0, 0, 0.7);
1165
- z-index: 2000;
1166
- display: flex;
1167
- flex-direction: column;
1168
- justify-content: center;
1169
- }
1170
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1171
- font-size: 14px;
1172
- color: #CCCACA;
1173
- margin-top: 45px;
1174
- }
1175
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1176
- font-weight: bold;
1177
- line-height: 30px;
1178
- font-size: 18px;
1179
- }
1180
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1181
- width: 90%;
1182
- margin: 0 auto;
1183
- }
1184
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1185
- font-size: 13px;
1186
- margin-top: 15px;
1187
- }
1188
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1189
- cursor: pointer;
1190
- width: 30px;
1191
- margin: 15px auto 0;
1192
1284
  }[data-player] {
1193
1285
  --bottom-panel: 40px;
1194
1286
  }
@@ -1877,13 +1969,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1877
1969
  display: inline-block;
1878
1970
  margin-right: 5px;
1879
1971
  cursor: pointer;
1880
- }.media-control-pip button {
1881
- float: right;
1882
- height: 40px;
1883
- margin-right: 20px;
1884
- }
1885
- .media-control-pip button svg {
1886
- height: 20px;
1887
1972
  }.scrub-thumbnails {
1888
1973
  position: absolute;
1889
1974
  bottom: 52px;
@@ -1945,44 +2030,9 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1945
2030
  }
1946
2031
  .scrub-thumbnails .backdrop .carousel img {
1947
2032
  width: auto;
1948
- }.spinner-three-bounce[data-spinner] {
1949
- position: absolute;
1950
- width: 70px;
1951
- text-align: center;
1952
- z-index: 999;
1953
- left: 0;
1954
- right: 0;
1955
- margin: 0 auto;
1956
- margin-left: auto;
1957
- margin-right: auto;
1958
- /* center vertically */
1959
- top: 50%;
1960
- transform: translateY(-50%);
1961
- }
1962
- .spinner-three-bounce[data-spinner] > div {
1963
- width: 18px;
1964
- height: 18px;
1965
- background-color: #FFF;
1966
- border-radius: 100%;
1967
- display: inline-block;
1968
- animation: bouncedelay 1.4s infinite ease-in-out;
1969
- /* Prevent first frame from flickering when animation starts */
1970
- animation-fill-mode: both;
1971
- }
1972
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1973
- animation-delay: -0.32s;
1974
- }
1975
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1976
- animation-delay: -0.16s;
1977
- }
1978
-
1979
- @keyframes bouncedelay {
1980
- 0%, 80%, 100% {
1981
- transform: scale(0);
1982
- }
1983
- 40% {
1984
- transform: scale(1);
1985
- }
2033
+ }.level-disabled {
2034
+ opacity: 0.5;
2035
+ pointer-events: none;
1986
2036
  }*, :focus, :visited {
1987
2037
  outline: none !important;
1988
2038
  }
@@ -2064,94 +2114,44 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2064
2114
  .ios-fullscreen::cue {
2065
2115
  visibility: visible !important;
2066
2116
  font-size: 1em !important;
2067
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
2068
- height: 0;
2069
- }
2070
-
2071
- .skip_time_plugin[data-skip-time] {
2072
- position: absolute;
2073
- width: 100%;
2074
- height: calc(100% - 50px);
2075
- z-index: 9998;
2076
- background-color: transparent;
2077
- font-family: Roboto, "Open Sans", Arial, sans-serif;
2078
- }
2079
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
2080
- width: 100%;
2081
- height: 100%;
2082
- display: flex;
2083
- justify-content: space-between;
2084
- }
2085
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
2086
- width: 33.3%;
2087
- height: 100%;
2088
- }.seek-time[data-seek-time] {
2089
- position: absolute;
2090
- white-space: nowrap;
2091
- height: 20px;
2092
- line-height: 20px;
2093
- font-size: 0;
2094
- left: -100%;
2095
- bottom: 55px;
2096
- background-color: rgba(2, 2, 2, 0.5);
2097
- z-index: 9999;
2098
- transition: opacity 0.1s ease;
2099
- }
2100
- .seek-time[data-seek-time].hidden[data-seek-time] {
2101
- opacity: 0;
2102
- }
2103
- .seek-time[data-seek-time] [data-seek-time] {
2104
- display: inline-block;
2105
- color: white;
2106
- font-size: 10px;
2107
- padding-left: 7px;
2108
- padding-right: 7px;
2109
- vertical-align: top;
2110
- }
2111
- .seek-time[data-seek-time] [data-duration] {
2112
- display: inline-block;
2113
- color: rgba(255, 255, 255, 0.5);
2114
- font-size: 10px;
2115
- padding-right: 7px;
2116
- vertical-align: top;
2117
- }
2118
- .seek-time[data-seek-time] [data-duration]::before {
2119
- content: "|";
2120
- margin-right: 7px;
2121
- }.player-poster[data-poster] {
2122
- display: flex;
2123
- justify-content: center;
2124
- align-items: center;
2117
+ }.spinner-three-bounce[data-spinner] {
2125
2118
  position: absolute;
2126
- height: 100%;
2127
- width: 100%;
2128
- z-index: 998;
2129
- top: 0;
2119
+ width: 70px;
2120
+ text-align: center;
2121
+ z-index: 999;
2130
2122
  left: 0;
2131
- background-color: #000;
2132
- background-size: cover;
2133
- background-repeat: no-repeat;
2134
- background-position: 50% 50%;
2135
- }
2136
- .player-poster[data-poster].clickable {
2137
- cursor: pointer;
2123
+ right: 0;
2124
+ margin: 0 auto;
2125
+ margin-left: auto;
2126
+ margin-right: auto;
2127
+ /* center vertically */
2128
+ top: 50%;
2129
+ transform: translateY(-50%);
2138
2130
  }
2139
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
2140
- opacity: 1;
2131
+ .spinner-three-bounce[data-spinner] > div {
2132
+ width: 18px;
2133
+ height: 18px;
2134
+ background-color: #FFF;
2135
+ border-radius: 100%;
2136
+ display: inline-block;
2137
+ animation: bouncedelay 1.4s infinite ease-in-out;
2138
+ /* Prevent first frame from flickering when animation starts */
2139
+ animation-fill-mode: both;
2141
2140
  }
2142
- .player-poster[data-poster] .play-wrapper[data-poster] {
2143
- width: 100%;
2144
- height: 25%;
2145
- margin: 0 auto;
2146
- opacity: 0.75;
2147
- transition: opacity 0.1s ease;
2141
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
2142
+ animation-delay: -0.32s;
2148
2143
  }
2149
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
2150
- height: 100%;
2151
- display: inline;
2144
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
2145
+ animation-delay: -0.16s;
2152
2146
  }
2153
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2154
- fill: #fff;
2147
+
2148
+ @keyframes bouncedelay {
2149
+ 0%, 80%, 100% {
2150
+ transform: scale(0);
2151
+ }
2152
+ 40% {
2153
+ transform: scale(1);
2154
+ }
2155
2155
  }.player-logo[data-logo] {
2156
2156
  position: absolute;
2157
2157
  z-index: 2;