@gcorevideo/player 2.20.6 → 2.20.8

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 (65) hide show
  1. package/dist/core.js +37 -13
  2. package/dist/index.css +1163 -1163
  3. package/dist/index.js +2557 -2513
  4. package/dist/plugins/index.css +470 -470
  5. package/dist/plugins/index.js +5230 -5217
  6. package/lib/playback/BasePlayback.d.ts +5 -0
  7. package/lib/playback/BasePlayback.d.ts.map +1 -1
  8. package/lib/playback/BasePlayback.js +8 -0
  9. package/lib/playback/HTML5Video.d.ts +4 -0
  10. package/lib/playback/HTML5Video.d.ts.map +1 -0
  11. package/lib/playback/HTML5Video.js +3 -0
  12. package/lib/playback/dash-playback/DashPlayback.d.ts +1 -0
  13. package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
  14. package/lib/playback/dash-playback/DashPlayback.js +6 -2
  15. package/lib/playback/index.d.ts.map +1 -1
  16. package/lib/playback/index.js +2 -0
  17. package/lib/playback/types.d.ts +9 -0
  18. package/lib/playback/types.d.ts.map +1 -0
  19. package/lib/playback/types.js +9 -0
  20. package/lib/plugins/bottom-gear/BottomGear.d.ts +6 -11
  21. package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
  22. package/lib/plugins/bottom-gear/BottomGear.js +9 -21
  23. package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.js +2 -2
  24. package/lib/plugins/dvr-controls/DvrControls.d.ts +1 -1
  25. package/lib/plugins/dvr-controls/DvrControls.d.ts.map +1 -1
  26. package/lib/plugins/dvr-controls/DvrControls.js +27 -16
  27. package/lib/plugins/level-selector/LevelSelector.d.ts +17 -5
  28. package/lib/plugins/level-selector/LevelSelector.d.ts.map +1 -1
  29. package/lib/plugins/level-selector/LevelSelector.js +35 -24
  30. package/lib/plugins/media-control/MediaControl.d.ts +11 -0
  31. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  32. package/lib/plugins/media-control/MediaControl.js +16 -3
  33. package/lib/plugins/playback-rate/PlaybackRate.d.ts +11 -10
  34. package/lib/plugins/playback-rate/PlaybackRate.d.ts.map +1 -1
  35. package/lib/plugins/playback-rate/PlaybackRate.js +83 -91
  36. package/lib/plugins/source-controller/SourceController.d.ts +1 -0
  37. package/lib/plugins/source-controller/SourceController.d.ts.map +1 -1
  38. package/lib/plugins/source-controller/SourceController.js +8 -4
  39. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts +7 -3
  40. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts.map +1 -1
  41. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.js +35 -27
  42. package/lib/testUtils.d.ts +5 -8
  43. package/lib/testUtils.d.ts.map +1 -1
  44. package/lib/testUtils.js +15 -9
  45. package/package.json +1 -1
  46. package/src/playback/BasePlayback.ts +12 -4
  47. package/src/playback/HTML5Video.ts +3 -0
  48. package/src/playback/dash-playback/DashPlayback.ts +15 -11
  49. package/src/playback/index.ts +2 -1
  50. package/src/playback/types.ts +9 -0
  51. package/src/plugins/bottom-gear/BottomGear.ts +10 -21
  52. package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts +36 -0
  53. package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap +41 -0
  54. package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts +3 -3
  55. package/src/plugins/dvr-controls/DvrControls.ts +87 -54
  56. package/src/plugins/level-selector/LevelSelector.ts +64 -31
  57. package/src/plugins/level-selector/__tests__/LevelSelector.test.ts +15 -16
  58. package/src/plugins/media-control/MediaControl.ts +20 -6
  59. package/src/plugins/playback-rate/PlaybackRate.ts +89 -105
  60. package/src/plugins/source-controller/SourceController.ts +9 -4
  61. package/src/plugins/source-controller/__tests__/SourceController.test.ts +35 -1
  62. package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts +80 -57
  63. package/src/testUtils.ts +16 -9
  64. package/tsconfig.tsbuildinfo +1 -1
  65. package/assets/playback-rate/playback-rate-selector.ejs +0 -9
@@ -122,6 +122,89 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }.big-mute-icon-wrapper[data-big-mute] {
126
+ position: absolute;
127
+ z-index: 9998;
128
+ background-color: transparent;
129
+ display: flex;
130
+ justify-content: center;
131
+ width: 100%;
132
+ height: calc(100% - 50px);
133
+ margin: 0 auto;
134
+ opacity: 0.75;
135
+ transition: opacity 0.1s ease;
136
+ pointer-events: auto;
137
+ }
138
+ .big-mute-icon-wrapper[data-big-mute].hide {
139
+ display: none;
140
+ }
141
+ .big-mute-icon-wrapper[data-big-mute]:hover {
142
+ cursor: pointer;
143
+ }
144
+
145
+ .big-mute-icon[data-big-mute-icon] {
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ align-self: center;
150
+ width: 120px;
151
+ height: 120px;
152
+ border: 2px solid white;
153
+ border-radius: 50%;
154
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
155
+ filter: alpha(opacity=60);
156
+ opacity: 1;
157
+ box-shadow: 0 0 1px 0 white;
158
+ background: rgba(240, 243, 247, 0.9411764706);
159
+ z-index: 10000;
160
+ }
161
+ .big-mute-icon[data-big-mute-icon] svg {
162
+ margin-left: 5px;
163
+ width: 80px;
164
+ height: 80px;
165
+ }
166
+ .big-mute-icon[data-big-mute-icon] svg path {
167
+ fill: #1f1e1e !important;
168
+ }
169
+ .big-mute-icon[data-big-mute-icon]:hover {
170
+ background: rgba(240, 243, 247, 0.8784313725);
171
+ }
172
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
173
+ fill: #151515 !important;
174
+ }div.player-error-screen, [data-player] div.player-error-screen {
175
+ color: #CCCACA;
176
+ position: absolute;
177
+ top: 0;
178
+ height: 100%;
179
+ width: 100%;
180
+ background-color: rgba(0, 0, 0, 0.7);
181
+ z-index: 2000;
182
+ display: flex;
183
+ flex-direction: column;
184
+ justify-content: center;
185
+ }
186
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
187
+ font-size: 14px;
188
+ color: #CCCACA;
189
+ margin-top: 45px;
190
+ }
191
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
192
+ font-weight: bold;
193
+ line-height: 30px;
194
+ font-size: 18px;
195
+ }
196
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
197
+ width: 90%;
198
+ margin: 0 auto;
199
+ }
200
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
201
+ font-size: 13px;
202
+ margin-top: 15px;
203
+ }
204
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
205
+ cursor: pointer;
206
+ width: 30px;
207
+ margin: 15px auto 0;
125
208
  }*, :focus, :visited {
126
209
  outline: none !important;
127
210
  }
@@ -259,136 +342,112 @@
259
342
  100% {
260
343
  color: #B80000;
261
344
  }
262
- }.big-mute-icon-wrapper[data-big-mute] {
263
- position: absolute;
264
- z-index: 9998;
265
- background-color: transparent;
266
- display: flex;
267
- justify-content: center;
268
- width: 100%;
269
- height: calc(100% - 50px);
270
- margin: 0 auto;
271
- opacity: 0.75;
272
- transition: opacity 0.1s ease;
273
- pointer-events: auto;
274
- }
275
- .big-mute-icon-wrapper[data-big-mute].hide {
276
- display: none;
277
- }
278
- .big-mute-icon-wrapper[data-big-mute]:hover {
279
- cursor: pointer;
345
+ }.dvr-controls[data-dvr-controls] {
346
+ display: inline-block;
347
+ float: left;
348
+ color: #fff;
349
+ line-height: 32px;
350
+ font-size: 10px;
351
+ font-weight: bold;
352
+ margin-left: 6px;
280
353
  }
281
-
282
- .big-mute-icon[data-big-mute-icon] {
283
- display: flex;
284
- align-items: center;
285
- justify-content: center;
286
- align-self: center;
287
- width: 120px;
288
- height: 120px;
289
- border: 2px solid white;
290
- border-radius: 50%;
291
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
292
- filter: alpha(opacity=60);
293
- opacity: 1;
294
- box-shadow: 0 0 1px 0 white;
295
- background: rgba(240, 243, 247, 0.9411764706);
296
- z-index: 10000;
354
+ .dvr-controls[data-dvr-controls] .live-info {
355
+ cursor: default;
356
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
357
+ text-transform: uppercase;
297
358
  }
298
- .big-mute-icon[data-big-mute-icon] svg {
299
- margin-left: 5px;
300
- width: 80px;
301
- height: 80px;
359
+ .dvr-controls[data-dvr-controls] .live-info:before {
360
+ content: "";
361
+ display: inline-block;
362
+ position: relative;
363
+ width: 7px;
364
+ height: 7px;
365
+ border-radius: 3.5px;
366
+ margin-right: 3.5px;
367
+ background-color: #ff0101;
302
368
  }
303
- .big-mute-icon[data-big-mute-icon] svg path {
304
- fill: #1f1e1e !important;
369
+ .dvr-controls[data-dvr-controls] .live-info.disabled {
370
+ opacity: 0.3;
305
371
  }
306
- .big-mute-icon[data-big-mute-icon]:hover {
307
- background: rgba(240, 243, 247, 0.8784313725);
372
+ .dvr-controls[data-dvr-controls] .live-info.disabled:before {
373
+ background-color: #fff;
308
374
  }
309
- .big-mute-icon[data-big-mute-icon]:hover svg path {
310
- fill: #151515 !important;
311
- }div.player-error-screen, [data-player] div.player-error-screen {
312
- color: #CCCACA;
313
- position: absolute;
314
- top: 0;
315
- height: 100%;
316
- width: 100%;
317
- background-color: rgba(0, 0, 0, 0.7);
318
- z-index: 2000;
319
- display: flex;
320
- flex-direction: column;
321
- justify-content: center;
375
+ .dvr-controls[data-dvr-controls] .live-button {
376
+ cursor: pointer;
377
+ outline: none;
378
+ display: none;
379
+ border: 0;
380
+ color: #fff;
381
+ background-color: transparent;
382
+ height: 32px;
383
+ padding: 0;
384
+ opacity: 0.7;
385
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
386
+ text-transform: uppercase;
387
+ transition: all 0.1s ease;
322
388
  }
323
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
324
- font-size: 14px;
325
- color: #CCCACA;
326
- margin-top: 45px;
389
+ .dvr-controls[data-dvr-controls] .live-button:before {
390
+ content: "";
391
+ display: inline-block;
392
+ position: relative;
393
+ width: 7px;
394
+ height: 7px;
395
+ border-radius: 3.5px;
396
+ margin-right: 3.5px;
397
+ background-color: #fff;
327
398
  }
328
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
329
- font-weight: bold;
330
- line-height: 30px;
331
- font-size: 18px;
399
+ .dvr-controls[data-dvr-controls] .live-button:hover {
400
+ opacity: 1;
401
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
332
402
  }
333
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
334
- width: 90%;
335
- margin: 0 auto;
403
+
404
+ .dvr-controls[data-dvr-controls] {
405
+ height: 40px;
406
+ line-height: 40px;
407
+ margin-left: 0;
336
408
  }
337
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
338
- font-size: 13px;
339
- margin-top: 15px;
409
+ .dvr-controls[data-dvr-controls] .live-info {
410
+ font-size: 14px;
411
+ letter-spacing: 0.8px;
412
+ font-weight: 500;
413
+ color: #fffffe;
414
+ margin-left: 21px;
340
415
  }
341
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
342
- cursor: pointer;
343
- width: 30px;
344
- margin: 15px auto 0;
345
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
346
- float: right;
347
- font-family: Roboto, "Open Sans", Arial, sans-serif;
416
+ .dvr-controls[data-dvr-controls] .live-info::before {
417
+ width: 10px;
418
+ height: 10px;
419
+ border-radius: 50%;
420
+ margin-right: 8px;
421
+ background-color: #ed4f4a;
348
422
  }
349
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
423
+ .dvr-controls[data-dvr-controls] .live-button {
350
424
  height: 40px;
351
- width: 40px;
352
- padding-right: 20px;
425
+ opacity: 1;
426
+ font-size: 14px;
427
+ letter-spacing: 0.8px;
428
+ font-weight: 500;
429
+ margin-left: 20px;
353
430
  }
354
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
355
- height: 20px;
431
+ .dvr-controls[data-dvr-controls] .live-button::before {
432
+ width: 10px;
433
+ height: 10px;
434
+ border-radius: 50%;
435
+ margin-right: 8px;
436
+ background-color: #cacaca;
356
437
  }
357
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
358
- position: absolute;
359
- right: 16px;
360
- bottom: 52px;
438
+
439
+ .dvr .dvr-controls[data-dvr-controls] .live-info {
361
440
  display: none;
362
- width: 250px;
363
- min-height: 48px;
364
- z-index: 9999;
365
- border-radius: 4px;
366
- }
367
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
368
- padding: 8px 0;
369
- }
370
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
371
- float: left;
372
- margin-right: 10px;
373
- }
374
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
375
- margin: 0;
376
- text-align: left;
377
- line-height: 22px;
378
- padding: 5px 14px;
379
- width: 250px;
380
- font-size: 12px;
381
441
  }
382
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
383
- float: right;
384
- margin-right: -14px;
442
+ .dvr .dvr-controls[data-dvr-controls] .live-button {
443
+ display: block;
385
444
  }
386
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
387
- float: right;
388
- margin-right: 8px;
445
+ .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] {
446
+ background-color: #005aff;
389
447
  }
390
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
391
- height: 20px;
448
+
449
+ .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
450
+ background-color: #ff0101;
392
451
  }:root {
393
452
  --primary-background-color: #000;
394
453
  --secondary-background-color: #262626;
@@ -771,9 +830,8 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
771
830
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
772
831
  width: 25%;
773
832
  }
774
- }.level-disabled {
775
- opacity: 0.5;
776
- pointer-events: none;
833
+ }.clips.bar-container[data-seekbar] {
834
+ clip-path: url("#myClip");
777
835
  }.context-menu {
778
836
  z-index: 999;
779
837
  position: absolute;
@@ -802,94 +860,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
802
860
  outline: none !important;
803
861
  }
804
862
 
805
- .gear-wrapper .go-back {
806
- font-weight: 600;
807
- font-size: 14px;
808
- line-height: 20px;
809
- width: 100%;
810
- text-align: left;
811
- padding: 12px;
812
- }
813
- .gear-wrapper .go-back .arrow-left-icon {
814
- float: left;
815
- padding-top: 2px;
816
- padding-right: 2px;
817
- }
818
- .gear-wrapper .go-back .arrow-left-icon svg {
819
- height: 16px;
820
- }
821
- .gear-wrapper ul.gear-sub-menu {
822
- width: 100%;
823
- list-style-type: none;
824
- background-color: transparent;
825
- min-width: 60px;
826
- border-top: 2px solid rgb(36, 36, 36);
827
- }
828
- .gear-wrapper ul.gear-sub-menu li {
829
- font-size: 12px;
830
- text-align: left;
831
- }
832
- .gear-wrapper ul.gear-sub-menu li[data-title] {
833
- background-color: #c3c2c2;
834
- padding: 5px;
835
- }
836
- .gear-wrapper ul.gear-sub-menu li a {
837
- display: block;
838
- text-decoration: none;
839
- height: 32px;
840
- padding: 5px 10px;
841
- line-height: 22px;
842
- color: #fffffe;
843
- }
844
- .gear-wrapper ul.gear-sub-menu li a:hover {
845
- color: white;
846
- background-color: rgba(0, 0, 0, 0.4);
847
- }
848
- .gear-wrapper ul.gear-sub-menu li a:hover a {
849
- color: white;
850
- text-decoration: none;
851
- }
852
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
853
- width: 30px;
854
- height: 20px;
855
- float: left;
856
- display: block;
857
- }
858
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
859
- display: none;
860
- }
861
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
862
- display: inline;
863
- }
864
- .gear-wrapper svg {
865
- height: 20px;
866
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
867
- height: 0;
868
- }
869
-
870
- .skip_time_plugin[data-skip-time] {
871
- position: absolute;
872
- width: 100%;
873
- height: calc(100% - 50px);
874
- z-index: 9998;
875
- background-color: transparent;
876
- font-family: Roboto, "Open Sans", Arial, sans-serif;
877
- }
878
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
879
- width: 100%;
880
- height: 100%;
881
- display: flex;
882
- justify-content: space-between;
883
- }
884
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
885
- width: 33.3%;
886
- height: 100%;
887
- }.clips.bar-container[data-seekbar] {
888
- clip-path: url("#myClip");
889
- }*, :focus, :visited {
890
- outline: none !important;
891
- }
892
-
893
863
  .multicamera[data-multicamera] {
894
864
  float: right;
895
865
  margin-top: 4px;
@@ -1006,34 +976,81 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1006
976
  background-color: #c3c2c2;
1007
977
  padding: 5px;
1008
978
  }
1009
- .multicamera[data-multicamera] li a {
1010
- color: #444;
1011
- padding: 2px 10px;
1012
- display: block;
1013
- text-decoration: none;
979
+ .multicamera[data-multicamera] li a {
980
+ color: #444;
981
+ padding: 2px 10px;
982
+ display: block;
983
+ text-decoration: none;
984
+ }
985
+ .multicamera[data-multicamera] li a:hover {
986
+ background-color: #555;
987
+ color: white;
988
+ }
989
+ .multicamera[data-multicamera] li a:hover a {
990
+ color: white;
991
+ text-decoration: none;
992
+ }
993
+ .multicamera[data-multicamera] li.current a {
994
+ color: #f00;
995
+ }
996
+
997
+ @keyframes pulse {
998
+ 0% {
999
+ color: #fff;
1000
+ }
1001
+ 50% {
1002
+ color: #ff0101;
1003
+ }
1004
+ 100% {
1005
+ color: #B80000;
1006
+ }
1007
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
1008
+ float: right;
1009
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1010
+ }
1011
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
1012
+ height: 40px;
1013
+ width: 40px;
1014
+ padding-right: 20px;
1015
+ }
1016
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
1017
+ height: 20px;
1018
+ }
1019
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
1020
+ position: absolute;
1021
+ right: 16px;
1022
+ bottom: 52px;
1023
+ display: none;
1024
+ width: 250px;
1025
+ min-height: 48px;
1026
+ z-index: 9999;
1027
+ border-radius: 4px;
1028
+ }
1029
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
1030
+ padding: 8px 0;
1031
+ }
1032
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
1033
+ float: left;
1034
+ margin-right: 10px;
1014
1035
  }
1015
- .multicamera[data-multicamera] li a:hover {
1016
- background-color: #555;
1017
- color: white;
1036
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
1037
+ margin: 0;
1038
+ text-align: left;
1039
+ line-height: 22px;
1040
+ padding: 5px 14px;
1041
+ width: 250px;
1042
+ font-size: 12px;
1018
1043
  }
1019
- .multicamera[data-multicamera] li a:hover a {
1020
- color: white;
1021
- text-decoration: none;
1044
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
1045
+ float: right;
1046
+ margin-right: -14px;
1022
1047
  }
1023
- .multicamera[data-multicamera] li.current a {
1024
- color: #f00;
1048
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
1049
+ float: right;
1050
+ margin-right: 8px;
1025
1051
  }
1026
-
1027
- @keyframes pulse {
1028
- 0% {
1029
- color: #fff;
1030
- }
1031
- 50% {
1032
- color: #ff0101;
1033
- }
1034
- 100% {
1035
- color: #B80000;
1036
- }
1052
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
1053
+ height: 20px;
1037
1054
  }.media-control-pip button {
1038
1055
  float: right;
1039
1056
  height: 40px;
@@ -1041,6 +1058,27 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1041
1058
  }
1042
1059
  .media-control-pip button svg {
1043
1060
  height: 20px;
1061
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1062
+ height: 0;
1063
+ }
1064
+
1065
+ .skip_time_plugin[data-skip-time] {
1066
+ position: absolute;
1067
+ width: 100%;
1068
+ height: calc(100% - 50px);
1069
+ z-index: 9998;
1070
+ background-color: transparent;
1071
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1072
+ }
1073
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1074
+ width: 100%;
1075
+ height: 100%;
1076
+ display: flex;
1077
+ justify-content: space-between;
1078
+ }
1079
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1080
+ width: 33.3%;
1081
+ height: 100%;
1044
1082
  }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1045
1083
  .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1046
1084
  display: block;
@@ -1111,6 +1149,71 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1111
1149
  }
1112
1150
  .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1113
1151
  display: none !important;
1152
+ }*, :focus, :visited {
1153
+ outline: none !important;
1154
+ }
1155
+
1156
+ .gear-wrapper .go-back {
1157
+ font-weight: 600;
1158
+ font-size: 14px;
1159
+ line-height: 20px;
1160
+ width: 100%;
1161
+ text-align: left;
1162
+ padding: 12px;
1163
+ }
1164
+ .gear-wrapper .go-back .arrow-left-icon {
1165
+ float: left;
1166
+ padding-top: 2px;
1167
+ padding-right: 2px;
1168
+ }
1169
+ .gear-wrapper .go-back .arrow-left-icon svg {
1170
+ height: 16px;
1171
+ }
1172
+ .gear-wrapper ul.gear-sub-menu {
1173
+ width: 100%;
1174
+ list-style-type: none;
1175
+ background-color: transparent;
1176
+ min-width: 60px;
1177
+ border-top: 2px solid rgb(36, 36, 36);
1178
+ }
1179
+ .gear-wrapper ul.gear-sub-menu li {
1180
+ font-size: 12px;
1181
+ text-align: left;
1182
+ }
1183
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
1184
+ background-color: #c3c2c2;
1185
+ padding: 5px;
1186
+ }
1187
+ .gear-wrapper ul.gear-sub-menu li a {
1188
+ display: block;
1189
+ text-decoration: none;
1190
+ height: 32px;
1191
+ padding: 5px 10px;
1192
+ line-height: 22px;
1193
+ color: #fffffe;
1194
+ }
1195
+ .gear-wrapper ul.gear-sub-menu li a:hover {
1196
+ color: white;
1197
+ background-color: rgba(0, 0, 0, 0.4);
1198
+ }
1199
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
1200
+ color: white;
1201
+ text-decoration: none;
1202
+ }
1203
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
1204
+ width: 30px;
1205
+ height: 20px;
1206
+ float: left;
1207
+ display: block;
1208
+ }
1209
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
1210
+ display: none;
1211
+ }
1212
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1213
+ display: inline;
1214
+ }
1215
+ .gear-wrapper svg {
1216
+ height: 20px;
1114
1217
  }[data-player] {
1115
1218
  --bottom-panel: 40px;
1116
1219
  }
@@ -1716,6 +1819,137 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1716
1819
  }
1717
1820
  .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1718
1821
  transform: scaleY(1.5);
1822
+ }.player-poster[data-poster] {
1823
+ display: flex;
1824
+ justify-content: center;
1825
+ align-items: center;
1826
+ position: absolute;
1827
+ height: 100%;
1828
+ width: 100%;
1829
+ z-index: 998;
1830
+ top: 0;
1831
+ left: 0;
1832
+ background-color: #000;
1833
+ background-size: cover;
1834
+ background-repeat: no-repeat;
1835
+ background-position: 50% 50%;
1836
+ }
1837
+ .player-poster[data-poster].clickable {
1838
+ cursor: pointer;
1839
+ }
1840
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1841
+ opacity: 1;
1842
+ }
1843
+ .player-poster[data-poster] .play-wrapper[data-poster] {
1844
+ width: 100%;
1845
+ height: 25%;
1846
+ margin: 0 auto;
1847
+ opacity: 0.75;
1848
+ transition: opacity 0.1s ease;
1849
+ }
1850
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
1851
+ height: 100%;
1852
+ display: inline;
1853
+ }
1854
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1855
+ fill: #fff;
1856
+ }.scrub-thumbnails {
1857
+ position: absolute;
1858
+ bottom: 52px;
1859
+ width: 100%;
1860
+ transition: opacity 0.3s ease;
1861
+ }
1862
+ .scrub-thumbnails.hidden {
1863
+ opacity: 0;
1864
+ }
1865
+ .scrub-thumbnails .thumbnail-container {
1866
+ display: inline-block;
1867
+ position: relative;
1868
+ overflow: hidden;
1869
+ background-color: #000;
1870
+ }
1871
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
1872
+ position: absolute;
1873
+ width: auto;
1874
+ }
1875
+ .scrub-thumbnails .thumbnails-text {
1876
+ background-color: rgba(74, 74, 74, 0.7);
1877
+ border-radius: 3px;
1878
+ white-space: nowrap;
1879
+ overflow: hidden;
1880
+ text-overflow: ellipsis;
1881
+ color: white;
1882
+ position: absolute;
1883
+ bottom: 23px;
1884
+ width: 100px;
1885
+ }
1886
+ .scrub-thumbnails .spotlight {
1887
+ background-color: #4a4a4a;
1888
+ overflow: hidden;
1889
+ position: absolute;
1890
+ bottom: 0;
1891
+ left: 0;
1892
+ border-color: #4a4a4a;
1893
+ border-style: solid;
1894
+ border-width: 3px;
1895
+ border-radius: 3px;
1896
+ }
1897
+ .scrub-thumbnails .spotlight img {
1898
+ width: auto;
1899
+ }
1900
+ .scrub-thumbnails .backdrop {
1901
+ position: absolute;
1902
+ left: 0;
1903
+ bottom: 0;
1904
+ right: 0;
1905
+ background-color: #000;
1906
+ overflow: hidden;
1907
+ }
1908
+ .scrub-thumbnails .backdrop .carousel {
1909
+ position: absolute;
1910
+ top: 0;
1911
+ left: 0;
1912
+ height: 100%;
1913
+ white-space: nowrap;
1914
+ }
1915
+ .scrub-thumbnails .backdrop .carousel img {
1916
+ width: auto;
1917
+ }.seek-time[data-seek-time] {
1918
+ position: absolute;
1919
+ white-space: nowrap;
1920
+ height: 20px;
1921
+ line-height: 20px;
1922
+ font-size: 0;
1923
+ left: -100%;
1924
+ bottom: 55px;
1925
+ background-color: rgba(2, 2, 2, 0.5);
1926
+ z-index: 9999;
1927
+ transition: opacity 0.1s ease;
1928
+ }
1929
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1930
+ opacity: 0;
1931
+ }
1932
+ .seek-time[data-seek-time] [data-seek-time] {
1933
+ display: inline-block;
1934
+ color: white;
1935
+ font-size: 10px;
1936
+ padding-left: 7px;
1937
+ padding-right: 7px;
1938
+ vertical-align: top;
1939
+ }
1940
+ .seek-time[data-seek-time] [data-duration] {
1941
+ display: inline-block;
1942
+ color: rgba(255, 255, 255, 0.5);
1943
+ font-size: 10px;
1944
+ padding-right: 7px;
1945
+ vertical-align: top;
1946
+ }
1947
+ .seek-time[data-seek-time] [data-duration]::before {
1948
+ content: "|";
1949
+ margin-right: 7px;
1950
+ }.level-disabled {
1951
+ opacity: 0.5;
1952
+ pointer-events: none;
1719
1953
  }*, :focus, :visited {
1720
1954
  outline: none !important;
1721
1955
  }
@@ -1797,76 +2031,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1797
2031
  .ios-fullscreen::cue {
1798
2032
  visibility: visible !important;
1799
2033
  font-size: 1em !important;
1800
- }.scrub-thumbnails {
1801
- position: absolute;
1802
- bottom: 52px;
1803
- width: 100%;
1804
- transition: opacity 0.3s ease;
1805
- }
1806
- .scrub-thumbnails.hidden {
1807
- opacity: 0;
1808
- }
1809
- .scrub-thumbnails .thumbnail-container {
1810
- display: inline-block;
1811
- position: relative;
1812
- overflow: hidden;
1813
- background-color: #000;
1814
- }
1815
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
1816
- position: absolute;
1817
- width: auto;
1818
- }
1819
- .scrub-thumbnails .thumbnails-text {
1820
- background-color: rgba(74, 74, 74, 0.7);
1821
- border-radius: 3px;
1822
- white-space: nowrap;
1823
- overflow: hidden;
1824
- text-overflow: ellipsis;
1825
- color: white;
1826
- position: absolute;
1827
- bottom: 23px;
1828
- width: 100px;
1829
- }
1830
- .scrub-thumbnails .spotlight {
1831
- background-color: #4a4a4a;
1832
- overflow: hidden;
1833
- position: absolute;
1834
- bottom: 0;
1835
- left: 0;
1836
- border-color: #4a4a4a;
1837
- border-style: solid;
1838
- border-width: 3px;
1839
- border-radius: 3px;
1840
- }
1841
- .scrub-thumbnails .spotlight img {
1842
- width: auto;
1843
- }
1844
- .scrub-thumbnails .backdrop {
1845
- position: absolute;
1846
- left: 0;
1847
- bottom: 0;
1848
- right: 0;
1849
- background-color: #000;
1850
- overflow: hidden;
1851
- }
1852
- .scrub-thumbnails .backdrop .carousel {
1853
- position: absolute;
1854
- top: 0;
1855
- left: 0;
1856
- height: 100%;
1857
- white-space: nowrap;
1858
- }
1859
- .scrub-thumbnails .backdrop .carousel img {
1860
- width: auto;
1861
- }.player-logo[data-logo] {
1862
- position: absolute;
1863
- z-index: 2;
1864
- width: 100%;
1865
- height: 100%;
1866
- }
1867
-
1868
- .clappr-logo {
1869
- position: absolute;
1870
2034
  }.share_plugin[data-share] {
1871
2035
  pointer-events: auto;
1872
2036
  z-index: 5;
@@ -1950,6 +2114,15 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1950
2114
  display: inline-block;
1951
2115
  margin-right: 5px;
1952
2116
  cursor: pointer;
2117
+ }.player-logo[data-logo] {
2118
+ position: absolute;
2119
+ z-index: 2;
2120
+ width: 100%;
2121
+ height: 100%;
2122
+ }
2123
+
2124
+ .clappr-logo {
2125
+ position: absolute;
1953
2126
  }.spinner-three-bounce[data-spinner] {
1954
2127
  position: absolute;
1955
2128
  width: 70px;
@@ -1988,177 +2161,4 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1988
2161
  40% {
1989
2162
  transform: scale(1);
1990
2163
  }
1991
- }.dvr-controls[data-dvr-controls] {
1992
- display: inline-block;
1993
- float: left;
1994
- color: #fff;
1995
- line-height: 32px;
1996
- font-size: 10px;
1997
- font-weight: bold;
1998
- margin-left: 6px;
1999
- }
2000
- .dvr-controls[data-dvr-controls] .live-info {
2001
- cursor: default;
2002
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
2003
- text-transform: uppercase;
2004
- }
2005
- .dvr-controls[data-dvr-controls] .live-info:before {
2006
- content: "";
2007
- display: inline-block;
2008
- position: relative;
2009
- width: 7px;
2010
- height: 7px;
2011
- border-radius: 3.5px;
2012
- margin-right: 3.5px;
2013
- background-color: #ff0101;
2014
- }
2015
- .dvr-controls[data-dvr-controls] .live-info.disabled {
2016
- opacity: 0.3;
2017
- }
2018
- .dvr-controls[data-dvr-controls] .live-info.disabled:before {
2019
- background-color: #fff;
2020
- }
2021
- .dvr-controls[data-dvr-controls] .live-button {
2022
- cursor: pointer;
2023
- outline: none;
2024
- display: none;
2025
- border: 0;
2026
- color: #fff;
2027
- background-color: transparent;
2028
- height: 32px;
2029
- padding: 0;
2030
- opacity: 0.7;
2031
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
2032
- text-transform: uppercase;
2033
- transition: all 0.1s ease;
2034
- }
2035
- .dvr-controls[data-dvr-controls] .live-button:before {
2036
- content: "";
2037
- display: inline-block;
2038
- position: relative;
2039
- width: 7px;
2040
- height: 7px;
2041
- border-radius: 3.5px;
2042
- margin-right: 3.5px;
2043
- background-color: #fff;
2044
- }
2045
- .dvr-controls[data-dvr-controls] .live-button:hover {
2046
- opacity: 1;
2047
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
2048
- }
2049
-
2050
- .dvr-controls[data-dvr-controls] {
2051
- height: 40px;
2052
- line-height: 40px;
2053
- margin-left: 0;
2054
- }
2055
- .dvr-controls[data-dvr-controls] .live-info {
2056
- font-size: 14px;
2057
- letter-spacing: 0.8px;
2058
- font-weight: 500;
2059
- color: #fffffe;
2060
- margin-left: 21px;
2061
- }
2062
- .dvr-controls[data-dvr-controls] .live-info::before {
2063
- width: 10px;
2064
- height: 10px;
2065
- border-radius: 50%;
2066
- margin-right: 8px;
2067
- background-color: #ed4f4a;
2068
- }
2069
- .dvr-controls[data-dvr-controls] .live-button {
2070
- height: 40px;
2071
- opacity: 1;
2072
- font-size: 14px;
2073
- letter-spacing: 0.8px;
2074
- font-weight: 500;
2075
- margin-left: 20px;
2076
- }
2077
- .dvr-controls[data-dvr-controls] .live-button::before {
2078
- width: 10px;
2079
- height: 10px;
2080
- border-radius: 50%;
2081
- margin-right: 8px;
2082
- background-color: #cacaca;
2083
- }
2084
-
2085
- .dvr .dvr-controls[data-dvr-controls] .live-info {
2086
- display: none;
2087
- }
2088
- .dvr .dvr-controls[data-dvr-controls] .live-button {
2089
- display: block;
2090
- }
2091
- .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] {
2092
- background-color: #005aff;
2093
- }
2094
-
2095
- .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
2096
- background-color: #ff0101;
2097
- }.player-poster[data-poster] {
2098
- display: flex;
2099
- justify-content: center;
2100
- align-items: center;
2101
- position: absolute;
2102
- height: 100%;
2103
- width: 100%;
2104
- z-index: 998;
2105
- top: 0;
2106
- left: 0;
2107
- background-color: #000;
2108
- background-size: cover;
2109
- background-repeat: no-repeat;
2110
- background-position: 50% 50%;
2111
- }
2112
- .player-poster[data-poster].clickable {
2113
- cursor: pointer;
2114
- }
2115
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
2116
- opacity: 1;
2117
- }
2118
- .player-poster[data-poster] .play-wrapper[data-poster] {
2119
- width: 100%;
2120
- height: 25%;
2121
- margin: 0 auto;
2122
- opacity: 0.75;
2123
- transition: opacity 0.1s ease;
2124
- }
2125
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
2126
- height: 100%;
2127
- display: inline;
2128
- }
2129
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2130
- fill: #fff;
2131
- }.seek-time[data-seek-time] {
2132
- position: absolute;
2133
- white-space: nowrap;
2134
- height: 20px;
2135
- line-height: 20px;
2136
- font-size: 0;
2137
- left: -100%;
2138
- bottom: 55px;
2139
- background-color: rgba(2, 2, 2, 0.5);
2140
- z-index: 9999;
2141
- transition: opacity 0.1s ease;
2142
- }
2143
- .seek-time[data-seek-time].hidden[data-seek-time] {
2144
- opacity: 0;
2145
- }
2146
- .seek-time[data-seek-time] [data-seek-time] {
2147
- display: inline-block;
2148
- color: white;
2149
- font-size: 10px;
2150
- padding-left: 7px;
2151
- padding-right: 7px;
2152
- vertical-align: top;
2153
- }
2154
- .seek-time[data-seek-time] [data-duration] {
2155
- display: inline-block;
2156
- color: rgba(255, 255, 255, 0.5);
2157
- font-size: 10px;
2158
- padding-right: 7px;
2159
- vertical-align: top;
2160
- }
2161
- .seek-time[data-seek-time] [data-duration]::before {
2162
- content: "|";
2163
- margin-right: 7px;
2164
2164
  }