@gcorevideo/player 2.28.20 → 2.28.22

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 (35) hide show
  1. package/dist/core.js +1 -1
  2. package/dist/index.css +442 -442
  3. package/dist/index.embed.js +2805 -210
  4. package/dist/index.js +2806 -211
  5. package/lib/plugins/audio-selector/AudioTracks.d.ts +2 -0
  6. package/lib/plugins/audio-selector/AudioTracks.d.ts.map +1 -1
  7. package/lib/plugins/audio-selector/AudioTracks.js +11 -0
  8. package/lib/plugins/bottom-gear/BottomGear.d.ts +2 -0
  9. package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
  10. package/lib/plugins/bottom-gear/BottomGear.js +11 -0
  11. package/lib/plugins/media-control/MediaControl.d.ts +10 -0
  12. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  13. package/lib/plugins/media-control/MediaControl.js +20 -23
  14. package/lib/plugins/subtitles/ClosedCaptions.d.ts +2 -0
  15. package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -1
  16. package/lib/plugins/subtitles/ClosedCaptions.js +11 -0
  17. package/lib/plugins/thumbnails/Thumbnails.d.ts +1 -1
  18. package/lib/plugins/thumbnails/Thumbnails.js +23 -3
  19. package/lib/testUtils.d.ts.map +1 -1
  20. package/lib/testUtils.js +2 -0
  21. package/lib/utils/clickaway.d.ts +15 -0
  22. package/lib/utils/clickaway.d.ts.map +1 -0
  23. package/lib/utils/clickaway.js +40 -0
  24. package/package.json +3 -2
  25. package/src/plugins/audio-selector/AudioTracks.ts +15 -1
  26. package/src/plugins/bottom-gear/BottomGear.ts +13 -0
  27. package/src/plugins/media-control/MediaControl.ts +20 -25
  28. package/src/plugins/subtitles/ClosedCaptions.ts +13 -0
  29. package/src/plugins/thumbnails/Thumbnails.ts +35 -4
  30. package/src/plugins/thumbnails/__tests__/Thumbnails.test.ts +108 -53
  31. package/src/plugins/thumbnails/__tests__/__snapshots__/Thumbnails.test.ts.snap +37 -1
  32. package/src/testUtils.ts +2 -0
  33. package/src/utils/clickaway.ts +43 -0
  34. package/tsconfig.tsbuildinfo +1 -1
  35. package/src/plugins/typings/parse-srt.d.ts +0 -14
package/dist/index.css CHANGED
@@ -122,51 +122,55 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }.media-control-skin-1 .media-control-item.media-control-gear {
126
- order: 99;
127
- }
128
- .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
125
+ }.big-mute-icon-wrapper[data-big-mute] {
129
126
  position: absolute;
130
- right: 16px;
131
- bottom: 52px;
132
- width: 250px;
133
- min-height: 48px;
134
- z-index: 9999;
135
- border-radius: 4px;
136
- box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
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
137
  }
138
- .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
139
- padding: 8px 0;
138
+ .big-mute-icon-wrapper[data-big-mute].hide {
139
+ display: none;
140
140
  }
141
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
142
- margin: 0;
143
- text-align: left;
144
- line-height: 22px;
145
- padding: 5px 14px;
146
- width: 250px;
147
- font-size: 12px;
141
+ .big-mute-icon-wrapper[data-big-mute]:hover {
142
+ cursor: pointer;
143
+ }
144
+
145
+ .big-mute-icon[data-big-mute-icon] {
148
146
  display: flex;
149
147
  align-items: center;
150
- justify-content: flex-start;
151
- gap: 8px;
152
- }
153
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
154
- flex: 24px 0 0;
155
- height: 20px;
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;
156
160
  }
157
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
158
- visibility: hidden;
159
- display: inline-block;
161
+ .big-mute-icon[data-big-mute-icon] svg {
162
+ margin-left: 5px;
163
+ width: 80px;
164
+ height: 80px;
160
165
  }
161
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
162
- flex: 0 1 100%;
166
+ .big-mute-icon[data-big-mute-icon] svg path {
167
+ fill: #1f1e1e !important;
163
168
  }
164
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
165
- flex: 0 0 14px;
166
- height: 20px;
169
+ .big-mute-icon[data-big-mute-icon]:hover {
170
+ background: rgba(240, 243, 247, 0.8784313725);
167
171
  }
168
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
169
- flex: 1 0 auto;
172
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
173
+ fill: #151515 !important;
170
174
  }*,
171
175
  :focus,
172
176
  :visited {
@@ -230,228 +234,108 @@
230
234
  }
231
235
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
232
236
  display: inline;
233
- }.big-mute-icon-wrapper[data-big-mute] {
234
- position: absolute;
235
- z-index: 9998;
236
- background-color: transparent;
237
- display: flex;
238
- justify-content: center;
239
- width: 100%;
240
- height: calc(100% - 50px);
241
- margin: 0 auto;
242
- opacity: 0.75;
243
- transition: opacity 0.1s ease;
244
- pointer-events: auto;
237
+ }.media-control-skin-1 .media-control-item.media-control-gear {
238
+ order: 99;
245
239
  }
246
- .big-mute-icon-wrapper[data-big-mute].hide {
247
- display: none;
240
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
241
+ position: absolute;
242
+ right: 16px;
243
+ bottom: 52px;
244
+ width: 250px;
245
+ min-height: 48px;
246
+ z-index: 9999;
247
+ border-radius: 4px;
248
+ box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
248
249
  }
249
- .big-mute-icon-wrapper[data-big-mute]:hover {
250
- cursor: pointer;
250
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
251
+ padding: 8px 0;
251
252
  }
252
-
253
- .big-mute-icon[data-big-mute-icon] {
253
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
254
+ margin: 0;
255
+ text-align: left;
256
+ line-height: 22px;
257
+ padding: 5px 14px;
258
+ width: 250px;
259
+ font-size: 12px;
254
260
  display: flex;
255
261
  align-items: center;
256
- justify-content: center;
257
- align-self: center;
258
- width: 120px;
259
- height: 120px;
260
- border: 2px solid white;
261
- border-radius: 50%;
262
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
263
- filter: alpha(opacity=60);
264
- opacity: 1;
265
- box-shadow: 0 0 1px 0 white;
266
- background: rgba(240, 243, 247, 0.9411764706);
267
- z-index: 10000;
268
- }
269
- .big-mute-icon[data-big-mute-icon] svg {
270
- margin-left: 5px;
271
- width: 80px;
272
- height: 80px;
262
+ justify-content: flex-start;
263
+ gap: 8px;
273
264
  }
274
- .big-mute-icon[data-big-mute-icon] svg path {
275
- fill: #1f1e1e !important;
265
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
266
+ flex: 24px 0 0;
267
+ height: 20px;
276
268
  }
277
- .big-mute-icon[data-big-mute-icon]:hover {
278
- background: rgba(240, 243, 247, 0.8784313725);
269
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
270
+ visibility: hidden;
271
+ display: inline-block;
279
272
  }
280
- .big-mute-icon[data-big-mute-icon]:hover svg path {
281
- fill: #151515 !important;
282
- }@charset "UTF-8";
283
- .gplayer-mc-clips {
284
- display: flex;
285
- gap: 6px;
273
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
274
+ flex: 0 1 100%;
286
275
  }
287
- .gplayer-mc-clips .gplayer-mc-clips-text {
288
- text-overflow: ellipsis;
289
- white-space: nowrap;
290
- overflow: hidden;
291
- display: inline-block;
292
- text-overflow: ellipsis;
293
- color: white;
294
- cursor: default;
295
- line-height: var(--bottom-panel);
296
- position: relative;
297
- max-width: 150px;
276
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
277
+ flex: 0 0 14px;
278
+ height: 20px;
298
279
  }
299
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
300
- content: "•";
301
- padding-right: 6px;
280
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
281
+ flex: 1 0 auto;
282
+ }:root {
283
+ --primary-background-color: #000;
284
+ --secondary-background-color: #262626;
285
+ --primary-text-color: #fff;
286
+ --secondary-text-color: #fff4f2;
287
+ --hover-text-color: #f9b090;
288
+ --speedtest-red: #df564d;
289
+ --speedtest-orange: #df934d;
290
+ --speedtest-yellow: #dfd04d;
291
+ --speedtest-light-green: #c2df4d;
292
+ --speedtest-green: #73df4d;
302
293
  }
303
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
304
- max-width: 100px;
305
- }.dvr-controls {
306
- --disabled-opacity: 0.3;
307
- --circle-radius: 5px;
308
- display: flex;
309
- align-items: center;
310
- color: var(--player-dvr-color);
311
- font-size: 10px;
312
- font-weight: 500;
313
- height: var(--bottom-panel);
314
- line-height: var(--bottom-panel);
315
- margin-left: 0;
294
+
295
+ .clappr-nerd-stats {
296
+ cursor: default;
316
297
  }
317
- .dvr-controls .live-info,
318
- .dvr-controls .live-button {
319
- font-size: 14px;
298
+ .clappr-nerd-stats .stats-box {
299
+ position: absolute;
300
+ display: inline-block;
301
+ bottom: 52px;
302
+ right: 0;
303
+ top: 0;
304
+ left: 0;
305
+ bottom: 0;
306
+ padding: 0 10px 12px;
307
+ margin: 0;
308
+ line-height: 20px;
309
+ font-size: 12px;
320
310
  font-weight: 500;
321
- margin-left: 20px;
322
- letter-spacing: 0.8px;
323
- text-transform: uppercase;
311
+ background: var(--primary-background-color);
312
+ color: #fff;
313
+ z-index: 20000;
314
+ overflow: auto;
315
+ max-width: 100%;
324
316
  }
325
- .dvr-controls .live-info::before,
326
- .dvr-controls .live-button::before {
327
- margin-right: 8px;
328
- content: "";
329
- display: inline-block;
330
- position: relative;
331
- width: calc(var(--circle-radius) * 2);
332
- height: calc(var(--circle-radius) * 2);
333
- border-radius: var(--circle-radius);
334
- background-color: var(--player-dvr-color);
317
+ .clappr-nerd-stats .stats-box-top {
318
+ position: absolute;
319
+ top: 0;
320
+ left: 0;
321
+ z-index: 9999;
322
+ width: 100%;
323
+ height: 32px;
324
+ background: var(--primary-background-color);
335
325
  }
336
- .dvr-controls.disabled {
337
- opacity: var(--disabled-opacity);
326
+ .clappr-nerd-stats .stats-box-top .close-button {
327
+ position: absolute;
328
+ right: 12px;
329
+ top: 10px;
330
+ display: block;
331
+ width: 12px;
332
+ height: 12px;
338
333
  }
339
- .dvr-controls.disabled:before {
340
- background-color: var(--player-dvr-color);
334
+ .clappr-nerd-stats .stats-box-top .close-button svg path {
335
+ fill: var(--primary-text-color);
341
336
  }
342
- .dvr-controls .live-info {
343
- text-transform: uppercase;
344
- color: #fffffe;
345
- }
346
- .dvr-controls .live-info::before {
347
- background-color: #ed4f4a;
348
- }
349
- .dvr-controls .live-button {
350
- cursor: pointer;
351
- outline: none;
352
- border: 0;
353
- color: var(--player-dvr-color);
354
- background-color: transparent;
355
- padding: 0;
356
- opacity: 0.7;
357
- transition: all 0.1s ease;
358
- }
359
- .dvr-controls .live-button:hover {
360
- opacity: 1;
361
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
362
- }.context-menu {
363
- z-index: 999;
364
- position: absolute;
365
- top: 0;
366
- left: 0;
367
- text-align: center;
368
- }
369
- .context-menu .context-menu-list {
370
- font-family: "Proxima Nova", sans-serif;
371
- font-size: 12px;
372
- line-height: 12px;
373
- list-style-type: none;
374
- text-align: left;
375
- padding: 5px;
376
- margin-left: auto;
377
- margin-right: auto;
378
- background-color: rgba(0, 0, 0, 0.75);
379
- border: 1px solid #666;
380
- border-radius: 4px;
381
- }
382
- .context-menu .context-menu-list-item button {
383
- border: none;
384
- background-color: transparent;
385
- padding: 0;
386
- color: white;
387
- display: flex;
388
- gap: 8px;
389
- align-items: center;
390
- justify-content: center;
391
- cursor: pointer;
392
- padding: 5px;
393
- width: 100%;
394
- }
395
- .context-menu .context-menu-list-item_icon {
396
- width: 20px;
397
- height: 20px;
398
- }:root {
399
- --primary-background-color: #000;
400
- --secondary-background-color: #262626;
401
- --primary-text-color: #fff;
402
- --secondary-text-color: #fff4f2;
403
- --hover-text-color: #f9b090;
404
- --speedtest-red: #df564d;
405
- --speedtest-orange: #df934d;
406
- --speedtest-yellow: #dfd04d;
407
- --speedtest-light-green: #c2df4d;
408
- --speedtest-green: #73df4d;
409
- }
410
-
411
- .clappr-nerd-stats {
412
- cursor: default;
413
- }
414
- .clappr-nerd-stats .stats-box {
415
- position: absolute;
416
- display: inline-block;
417
- bottom: 52px;
418
- right: 0;
419
- top: 0;
420
- left: 0;
421
- bottom: 0;
422
- padding: 0 10px 12px;
423
- margin: 0;
424
- line-height: 20px;
425
- font-size: 12px;
426
- font-weight: 500;
427
- background: var(--primary-background-color);
428
- color: #fff;
429
- z-index: 20000;
430
- overflow: auto;
431
- max-width: 100%;
432
- }
433
- .clappr-nerd-stats .stats-box-top {
434
- position: absolute;
435
- top: 0;
436
- left: 0;
437
- z-index: 9999;
438
- width: 100%;
439
- height: 32px;
440
- background: var(--primary-background-color);
441
- }
442
- .clappr-nerd-stats .stats-box-top .close-button {
443
- position: absolute;
444
- right: 12px;
445
- top: 10px;
446
- display: block;
447
- width: 12px;
448
- height: 12px;
449
- }
450
- .clappr-nerd-stats .stats-box-top .close-button svg path {
451
- fill: var(--primary-text-color);
452
- }
453
- .clappr-nerd-stats .stats-box-top .close-button:hover svg path {
454
- fill: var(--hover-text-color);
337
+ .clappr-nerd-stats .stats-box-top .close-button:hover svg path {
338
+ fill: var(--hover-text-color);
455
339
  }
456
340
  .clappr-nerd-stats .stats-box-main {
457
341
  overflow: hidden;
@@ -750,49 +634,308 @@
750
634
  transform: translate(-50%, -50%);
751
635
  }
752
636
  }
753
- @media only screen and (orientation: landscape) {
754
- .mobile .clappr-nerd-stats .stats-box-main ul {
755
- flex-basis: 1fr;
756
- }
637
+ @media only screen and (orientation: landscape) {
638
+ .mobile .clappr-nerd-stats .stats-box-main ul {
639
+ flex-basis: 1fr;
640
+ }
641
+ }
642
+ @media only screen and (min-width: 1100px) {
643
+ .fullscreen .clappr-nerd-stats .stats-box {
644
+ top: unset;
645
+ }
646
+ }.context-menu {
647
+ z-index: 999;
648
+ position: absolute;
649
+ top: 0;
650
+ left: 0;
651
+ text-align: center;
652
+ }
653
+ .context-menu .context-menu-list {
654
+ font-family: "Proxima Nova", sans-serif;
655
+ font-size: 12px;
656
+ line-height: 12px;
657
+ list-style-type: none;
658
+ text-align: left;
659
+ padding: 5px;
660
+ margin-left: auto;
661
+ margin-right: auto;
662
+ background-color: rgba(0, 0, 0, 0.75);
663
+ border: 1px solid #666;
664
+ border-radius: 4px;
665
+ }
666
+ .context-menu .context-menu-list-item button {
667
+ border: none;
668
+ background-color: transparent;
669
+ padding: 0;
670
+ color: white;
671
+ display: flex;
672
+ gap: 8px;
673
+ align-items: center;
674
+ justify-content: center;
675
+ cursor: pointer;
676
+ padding: 5px;
677
+ width: 100%;
678
+ }
679
+ .context-menu .context-menu-list-item_icon {
680
+ width: 20px;
681
+ height: 20px;
682
+ }@charset "UTF-8";
683
+ .gplayer-mc-clips {
684
+ display: flex;
685
+ gap: 6px;
686
+ }
687
+ .gplayer-mc-clips .gplayer-mc-clips-text {
688
+ text-overflow: ellipsis;
689
+ white-space: nowrap;
690
+ overflow: hidden;
691
+ display: inline-block;
692
+ text-overflow: ellipsis;
693
+ color: white;
694
+ cursor: default;
695
+ line-height: var(--bottom-panel);
696
+ position: relative;
697
+ max-width: 150px;
698
+ }
699
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
700
+ content: "•";
701
+ padding-right: 6px;
702
+ }
703
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
704
+ max-width: 100px;
705
+ }div.player-error-screen, [data-player] div.player-error-screen {
706
+ color: #CCCACA;
707
+ position: absolute;
708
+ top: 0;
709
+ height: 100%;
710
+ width: 100%;
711
+ background-color: rgba(0, 0, 0, 0.7);
712
+ z-index: 2000;
713
+ display: flex;
714
+ flex-direction: column;
715
+ justify-content: center;
716
+ }
717
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
718
+ font-size: 14px;
719
+ color: #CCCACA;
720
+ margin-top: 45px;
721
+ }
722
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
723
+ font-weight: bold;
724
+ line-height: 30px;
725
+ font-size: 18px;
726
+ }
727
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
728
+ width: 90%;
729
+ margin: 0 auto;
730
+ }
731
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
732
+ font-size: 13px;
733
+ margin-top: 15px;
734
+ }
735
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
736
+ cursor: pointer;
737
+ width: 30px;
738
+ margin: 15px auto 0;
739
+ }.dvr-controls {
740
+ --disabled-opacity: 0.3;
741
+ --circle-radius: 5px;
742
+ display: flex;
743
+ align-items: center;
744
+ color: var(--player-dvr-color);
745
+ font-size: 10px;
746
+ font-weight: 500;
747
+ height: var(--bottom-panel);
748
+ line-height: var(--bottom-panel);
749
+ margin-left: 0;
750
+ }
751
+ .dvr-controls .live-info,
752
+ .dvr-controls .live-button {
753
+ font-size: 14px;
754
+ font-weight: 500;
755
+ margin-left: 20px;
756
+ letter-spacing: 0.8px;
757
+ text-transform: uppercase;
758
+ }
759
+ .dvr-controls .live-info::before,
760
+ .dvr-controls .live-button::before {
761
+ margin-right: 8px;
762
+ content: "";
763
+ display: inline-block;
764
+ position: relative;
765
+ width: calc(var(--circle-radius) * 2);
766
+ height: calc(var(--circle-radius) * 2);
767
+ border-radius: var(--circle-radius);
768
+ background-color: var(--player-dvr-color);
769
+ }
770
+ .dvr-controls.disabled {
771
+ opacity: var(--disabled-opacity);
772
+ }
773
+ .dvr-controls.disabled:before {
774
+ background-color: var(--player-dvr-color);
775
+ }
776
+ .dvr-controls .live-info {
777
+ text-transform: uppercase;
778
+ color: #fffffe;
779
+ }
780
+ .dvr-controls .live-info::before {
781
+ background-color: #ed4f4a;
782
+ }
783
+ .dvr-controls .live-button {
784
+ cursor: pointer;
785
+ outline: none;
786
+ border: 0;
787
+ color: var(--player-dvr-color);
788
+ background-color: transparent;
789
+ padding: 0;
790
+ opacity: 0.7;
791
+ transition: all 0.1s ease;
792
+ }
793
+ .dvr-controls .live-button:hover {
794
+ opacity: 1;
795
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
796
+ }*,
797
+ :focus,
798
+ :visited {
799
+ outline: none !important;
800
+ }
801
+
802
+ .multicamera[data-multicamera] {
803
+ float: right;
804
+ margin-top: 4px;
805
+ position: relative;
806
+ margin-right: 20px;
807
+ width: 20px;
808
+ }
809
+ .multicamera[data-multicamera] button {
810
+ background-color: transparent;
811
+ color: #fff;
812
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
813
+ -webkit-font-smoothing: antialiased;
814
+ border: none;
815
+ font-size: 14px;
816
+ padding: 0;
817
+ }
818
+ .multicamera[data-multicamera] button svg {
819
+ height: 20px;
820
+ position: relative;
821
+ margin-top: 6px;
822
+ }
823
+ .multicamera[data-multicamera] button:hover {
824
+ color: #c9c9c9;
825
+ }
826
+ .multicamera[data-multicamera] button.changing {
827
+ animation: pulse 0.5s infinite alternate;
828
+ }
829
+ .multicamera[data-multicamera] button span.quality-arrow {
830
+ width: 9px;
831
+ height: 6px;
832
+ margin-top: 11px;
833
+ margin-left: 5px;
834
+ }
835
+ .multicamera[data-multicamera] > ul {
836
+ padding: 6px 0;
837
+ right: -24px;
838
+ width: 245px;
839
+ list-style-type: none;
840
+ position: absolute;
841
+ bottom: 48px;
842
+ border-radius: 4px;
843
+ display: none;
844
+ background-color: rgba(74, 74, 74, 0.9);
845
+ }
846
+ .multicamera[data-multicamera] > ul::after {
847
+ content: "";
848
+ position: absolute;
849
+ top: 100%;
850
+ left: 85%;
851
+ margin-left: -10px;
852
+ width: 0;
853
+ height: 0;
854
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
855
+ border-right: 10px solid transparent;
856
+ border-left: 10px solid transparent;
857
+ }
858
+ .multicamera[data-multicamera] li {
859
+ font-size: 10px;
860
+ cursor: pointer;
861
+ }
862
+ .multicamera[data-multicamera] li .multicamera-item {
863
+ display: flex;
864
+ padding: 10px 0;
865
+ justify-content: center;
866
+ position: relative;
867
+ }
868
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
869
+ opacity: 0.5;
870
+ }
871
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
872
+ opacity: 0.5;
873
+ }
874
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
875
+ background-color: rgba(0, 0, 0, 0);
876
+ }
877
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
878
+ pointer-events: none;
879
+ }
880
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
881
+ background-color: rgba(0, 0, 0, 0.3);
882
+ }
883
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
884
+ width: 80px;
885
+ height: 60px;
886
+ }
887
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
888
+ width: 80px;
889
+ height: 60px;
890
+ }
891
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
892
+ width: 120px;
893
+ text-align: left;
894
+ margin-left: 15px;
895
+ }
896
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
897
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
898
+ width: 120px;
899
+ height: 20px;
900
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
901
+ font-size: 14px;
902
+ font-weight: normal;
903
+ font-style: normal;
904
+ font-stretch: normal;
905
+ line-height: 1.43;
906
+ letter-spacing: normal;
907
+ text-align: left;
908
+ color: #fff;
909
+ text-overflow: ellipsis;
910
+ overflow: hidden;
911
+ }
912
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
913
+ opacity: 0.6;
757
914
  }
758
- @media only screen and (min-width: 1100px) {
759
- .fullscreen .clappr-nerd-stats .stats-box {
760
- top: unset;
761
- }
762
- }div.player-error-screen, [data-player] div.player-error-screen {
763
- color: #CCCACA;
764
- position: absolute;
765
- top: 0;
766
- height: 100%;
767
- width: 100%;
768
- background-color: rgba(0, 0, 0, 0.7);
769
- z-index: 2000;
770
- display: flex;
771
- flex-direction: column;
772
- justify-content: center;
915
+ .multicamera[data-multicamera] li a {
916
+ color: #444;
917
+ padding: 2px 10px;
918
+ display: block;
919
+ text-decoration: none;
773
920
  }
774
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
775
- font-size: 14px;
776
- color: #CCCACA;
777
- margin-top: 45px;
921
+ .multicamera[data-multicamera] li a:hover {
922
+ background-color: #555;
923
+ color: white;
778
924
  }
779
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
780
- font-weight: bold;
781
- line-height: 30px;
782
- font-size: 18px;
925
+ .multicamera[data-multicamera] li a:hover a {
926
+ color: white;
927
+ text-decoration: none;
783
928
  }
784
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
785
- width: 90%;
786
- margin: 0 auto;
929
+ .multicamera[data-multicamera] li.current a {
930
+ color: #f00;
931
+ }.media-control-skin-1 .media-control-item.media-control-pip {
932
+ order: 95;
787
933
  }
788
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
789
- font-size: 13px;
790
- margin-top: 15px;
934
+ .media-control-skin-1 .media-control-item.media-control-pip button {
935
+ height: 20px;
791
936
  }
792
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
793
- cursor: pointer;
794
- width: 30px;
795
- margin: 15px auto 0;
937
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
938
+ height: 20px;
796
939
  }[data-player] {
797
940
  --bottom-panel: 40px;
798
941
  }
@@ -1454,149 +1597,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1454
1597
  }
1455
1598
  .quality-levels li.current {
1456
1599
  background-color: #000;
1457
- }.media-control-skin-1 .media-control-item.media-control-pip {
1458
- order: 95;
1459
- }
1460
- .media-control-skin-1 .media-control-item.media-control-pip button {
1461
- height: 20px;
1462
- }
1463
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
1464
- height: 20px;
1465
- }*,
1466
- :focus,
1467
- :visited {
1468
- outline: none !important;
1469
- }
1470
-
1471
- .multicamera[data-multicamera] {
1472
- float: right;
1473
- margin-top: 4px;
1474
- position: relative;
1475
- margin-right: 20px;
1476
- width: 20px;
1477
- }
1478
- .multicamera[data-multicamera] button {
1479
- background-color: transparent;
1480
- color: #fff;
1481
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1482
- -webkit-font-smoothing: antialiased;
1483
- border: none;
1484
- font-size: 14px;
1485
- padding: 0;
1486
- }
1487
- .multicamera[data-multicamera] button svg {
1488
- height: 20px;
1489
- position: relative;
1490
- margin-top: 6px;
1491
- }
1492
- .multicamera[data-multicamera] button:hover {
1493
- color: #c9c9c9;
1494
- }
1495
- .multicamera[data-multicamera] button.changing {
1496
- animation: pulse 0.5s infinite alternate;
1497
- }
1498
- .multicamera[data-multicamera] button span.quality-arrow {
1499
- width: 9px;
1500
- height: 6px;
1501
- margin-top: 11px;
1502
- margin-left: 5px;
1503
- }
1504
- .multicamera[data-multicamera] > ul {
1505
- padding: 6px 0;
1506
- right: -24px;
1507
- width: 245px;
1508
- list-style-type: none;
1509
- position: absolute;
1510
- bottom: 48px;
1511
- border-radius: 4px;
1512
- display: none;
1513
- background-color: rgba(74, 74, 74, 0.9);
1514
- }
1515
- .multicamera[data-multicamera] > ul::after {
1516
- content: "";
1517
- position: absolute;
1518
- top: 100%;
1519
- left: 85%;
1520
- margin-left: -10px;
1521
- width: 0;
1522
- height: 0;
1523
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1524
- border-right: 10px solid transparent;
1525
- border-left: 10px solid transparent;
1526
- }
1527
- .multicamera[data-multicamera] li {
1528
- font-size: 10px;
1529
- cursor: pointer;
1530
- }
1531
- .multicamera[data-multicamera] li .multicamera-item {
1532
- display: flex;
1533
- padding: 10px 0;
1534
- justify-content: center;
1535
- position: relative;
1536
- }
1537
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1538
- opacity: 0.5;
1539
- }
1540
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1541
- opacity: 0.5;
1542
- }
1543
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1544
- background-color: rgba(0, 0, 0, 0);
1545
- }
1546
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1547
- pointer-events: none;
1548
- }
1549
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1550
- background-color: rgba(0, 0, 0, 0.3);
1551
- }
1552
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1553
- width: 80px;
1554
- height: 60px;
1555
- }
1556
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1557
- width: 80px;
1558
- height: 60px;
1559
- }
1560
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1561
- width: 120px;
1562
- text-align: left;
1563
- margin-left: 15px;
1564
- }
1565
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
1566
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1567
- width: 120px;
1568
- height: 20px;
1569
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1570
- font-size: 14px;
1571
- font-weight: normal;
1572
- font-style: normal;
1573
- font-stretch: normal;
1574
- line-height: 1.43;
1575
- letter-spacing: normal;
1576
- text-align: left;
1577
- color: #fff;
1578
- text-overflow: ellipsis;
1579
- overflow: hidden;
1580
- }
1581
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1582
- opacity: 0.6;
1583
- }
1584
- .multicamera[data-multicamera] li a {
1585
- color: #444;
1586
- padding: 2px 10px;
1587
- display: block;
1588
- text-decoration: none;
1589
- }
1590
- .multicamera[data-multicamera] li a:hover {
1591
- background-color: #555;
1592
- color: white;
1593
- }
1594
- .multicamera[data-multicamera] li a:hover a {
1595
- color: white;
1596
- text-decoration: none;
1597
- }
1598
- .multicamera[data-multicamera] li.current a {
1599
- color: #f00;
1600
1600
  }.seek-time {
1601
1601
  position: absolute;
1602
1602
  white-space: nowrap;
@@ -1630,27 +1630,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1630
1630
  .seek-time .seek-time__duration::before {
1631
1631
  content: "|";
1632
1632
  margin-right: 7px;
1633
- }.container-with-poster-clickable .mc-skip-time {
1634
- height: 0;
1635
- }
1636
-
1637
- .mc-skip-time {
1638
- position: absolute;
1639
- width: 100%;
1640
- height: calc(100% - 50px);
1641
- z-index: 9998;
1642
- background-color: transparent;
1643
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1644
- }
1645
- .mc-skip-time .skip-container {
1646
- width: 100%;
1647
- height: 100%;
1648
- display: flex;
1649
- justify-content: space-between;
1650
- }
1651
- .mc-skip-time .skip-container .skip-item {
1652
- flex: 1 0 0px;
1653
- height: 100%;
1654
1633
  }.share_plugin[data-share] {
1655
1634
  pointer-events: auto;
1656
1635
  z-index: 5;
@@ -1734,6 +1713,27 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1734
1713
  display: inline-block;
1735
1714
  margin-right: 5px;
1736
1715
  cursor: pointer;
1716
+ }.container-with-poster-clickable .mc-skip-time {
1717
+ height: 0;
1718
+ }
1719
+
1720
+ .mc-skip-time {
1721
+ position: absolute;
1722
+ width: 100%;
1723
+ height: calc(100% - 50px);
1724
+ z-index: 9998;
1725
+ background-color: transparent;
1726
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1727
+ }
1728
+ .mc-skip-time .skip-container {
1729
+ width: 100%;
1730
+ height: 100%;
1731
+ display: flex;
1732
+ justify-content: space-between;
1733
+ }
1734
+ .mc-skip-time .skip-container .skip-item {
1735
+ flex: 1 0 0px;
1736
+ height: 100%;
1737
1737
  }.spinner-three-bounce[data-spinner] {
1738
1738
  position: absolute;
1739
1739
  width: 70px;