@gcorevideo/player 2.22.5 → 2.22.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 (40) hide show
  1. package/assets/media-control/media-control.ejs +1 -2
  2. package/dist/core.js +7 -2
  3. package/dist/index.css +881 -881
  4. package/dist/index.js +132 -91
  5. package/dist/plugins/index.css +418 -418
  6. package/dist/plugins/index.js +123 -86
  7. package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
  8. package/lib/playback/dash-playback/DashPlayback.js +6 -1
  9. package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
  10. package/lib/plugins/bottom-gear/BottomGear.js +2 -2
  11. package/lib/plugins/media-control/MediaControl.d.ts +37 -6
  12. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  13. package/lib/plugins/media-control/MediaControl.js +54 -36
  14. package/lib/plugins/playback-rate/PlaybackRate.d.ts +5 -4
  15. package/lib/plugins/playback-rate/PlaybackRate.d.ts.map +1 -1
  16. package/lib/plugins/playback-rate/PlaybackRate.js +46 -24
  17. package/lib/plugins/subtitles/ClosedCaptions.js +1 -1
  18. package/lib/plugins/utils/fullscreen.d.ts +4 -0
  19. package/lib/plugins/utils/fullscreen.d.ts.map +1 -0
  20. package/lib/plugins/utils/fullscreen.js +30 -0
  21. package/lib/plugins/utils.d.ts +0 -1
  22. package/lib/plugins/utils.d.ts.map +1 -1
  23. package/lib/plugins/utils.js +0 -28
  24. package/lib/utils/fullscreen.d.ts +3 -0
  25. package/lib/utils/fullscreen.d.ts.map +1 -0
  26. package/lib/utils/fullscreen.js +2 -0
  27. package/package.json +1 -1
  28. package/src/playback/dash-playback/DashPlayback.ts +6 -4
  29. package/src/plugins/bottom-gear/BottomGear.ts +2 -2
  30. package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts +15 -3
  31. package/src/plugins/media-control/MediaControl.ts +111 -62
  32. package/src/plugins/media-control/__tests__/MediaControl.test.ts +118 -8
  33. package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +149 -5
  34. package/src/plugins/playback-rate/PlaybackRate.ts +48 -26
  35. package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts +125 -55
  36. package/src/plugins/playback-rate/__tests__/__snapshots__/PlaybackRate.test.ts.snap +1 -1
  37. package/src/plugins/subtitles/ClosedCaptions.ts +1 -1
  38. package/src/plugins/utils/fullscreen.ts +34 -0
  39. package/src/plugins/utils.ts +0 -31
  40. package/tsconfig.tsbuildinfo +1 -1
@@ -222,44 +222,174 @@
222
222
  100% {
223
223
  color: #B80000;
224
224
  }
225
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
226
- order: 99;
227
- height: 20px;
225
+ }.big-mute-icon-wrapper[data-big-mute] {
226
+ position: absolute;
227
+ z-index: 9998;
228
+ background-color: transparent;
229
+ display: flex;
230
+ justify-content: center;
231
+ width: 100%;
232
+ height: calc(100% - 50px);
233
+ margin: 0 auto;
234
+ opacity: 0.75;
235
+ transition: opacity 0.1s ease;
236
+ pointer-events: auto;
228
237
  }
229
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
238
+ .big-mute-icon-wrapper[data-big-mute].hide {
239
+ display: none;
240
+ }
241
+ .big-mute-icon-wrapper[data-big-mute]:hover {
242
+ cursor: pointer;
243
+ }
244
+
245
+ .big-mute-icon[data-big-mute-icon] {
246
+ display: flex;
247
+ align-items: center;
248
+ justify-content: center;
249
+ align-self: center;
250
+ width: 120px;
251
+ height: 120px;
252
+ border: 2px solid white;
253
+ border-radius: 50%;
254
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
255
+ filter: alpha(opacity=60);
256
+ opacity: 1;
257
+ box-shadow: 0 0 1px 0 white;
258
+ background: rgba(240, 243, 247, 0.9411764706);
259
+ z-index: 10000;
260
+ }
261
+ .big-mute-icon[data-big-mute-icon] svg {
262
+ margin-left: 5px;
263
+ width: 80px;
264
+ height: 80px;
265
+ }
266
+ .big-mute-icon[data-big-mute-icon] svg path {
267
+ fill: #1f1e1e !important;
268
+ }
269
+ .big-mute-icon[data-big-mute-icon]:hover {
270
+ background: rgba(240, 243, 247, 0.8784313725);
271
+ }
272
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
273
+ fill: #151515 !important;
274
+ }.clips.bar-container[data-seekbar] {
275
+ clip-path: url("#myClip");
276
+ }.context-menu {
277
+ z-index: 999;
230
278
  position: absolute;
231
- right: 16px;
232
- bottom: 52px;
233
- width: 250px;
234
- min-height: 48px;
235
- z-index: 9999;
279
+ top: 0;
280
+ left: 0;
281
+ text-align: center;
282
+ }
283
+ .context-menu .context-menu-list {
284
+ font-family: "Proxima Nova", sans-serif;
285
+ font-size: 12px;
286
+ line-height: 12px;
287
+ list-style-type: none;
288
+ text-align: left;
289
+ padding: 5px;
290
+ margin-left: auto;
291
+ margin-right: auto;
292
+ background-color: rgba(0, 0, 0, 0.75);
293
+ border: 1px solid #666;
236
294
  border-radius: 4px;
237
295
  }
238
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
239
- padding: 8px 0;
296
+ .context-menu .context-menu-list .context-menu-list-item {
297
+ color: white;
298
+ padding: 5px;
299
+ cursor: pointer;
300
+ }.dvr-controls[data-dvr] {
301
+ display: inline-block;
302
+ color: var(--player-dvr-color);
303
+ line-height: 32px;
304
+ font-size: 10px;
305
+ font-weight: bold;
306
+ margin-left: 6px;
307
+ height: 40px;
308
+ line-height: 40px;
309
+ margin-left: 0;
240
310
  }
241
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
242
- float: left;
243
- margin-right: 10px;
311
+ .dvr-controls[data-dvr] .live-info {
312
+ cursor: default;
313
+ text-transform: uppercase;
244
314
  }
245
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
246
- margin: 0;
247
- text-align: left;
248
- line-height: 22px;
249
- padding: 5px 14px;
250
- width: 250px;
251
- font-size: 12px;
315
+ .dvr-controls[data-dvr] .live-info:before {
316
+ content: "";
317
+ display: inline-block;
318
+ position: relative;
319
+ width: 7px;
320
+ height: 7px;
321
+ border-radius: 3.5px;
322
+ margin-right: 3.5px;
323
+ background-color: var(--player-live-color);
252
324
  }
253
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
254
- float: right;
255
- margin-right: -14px;
325
+ .dvr-controls[data-dvr] .live-info.disabled {
326
+ opacity: 0.3;
256
327
  }
257
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
258
- float: right;
328
+ .dvr-controls[data-dvr] .live-info.disabled:before {
329
+ background-color: var(--player-dvr-color);
330
+ }
331
+ .dvr-controls[data-dvr] .live-button {
332
+ cursor: pointer;
333
+ outline: none;
334
+ display: none;
335
+ border: 0;
336
+ color: var(--player-dvr-color);
337
+ background-color: transparent;
338
+ height: 32px;
339
+ padding: 0;
340
+ opacity: 0.7;
341
+ text-transform: uppercase;
342
+ transition: all 0.1s ease;
343
+ }
344
+ .dvr-controls[data-dvr] .live-button:before {
345
+ content: "";
346
+ display: inline-block;
347
+ position: relative;
348
+ width: 7px;
349
+ height: 7px;
350
+ border-radius: 3.5px;
351
+ margin-right: 3.5px;
352
+ background-color: var(--player-dvr-color);
353
+ }
354
+ .dvr-controls[data-dvr] .live-button:hover {
355
+ opacity: 1;
356
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
357
+ }
358
+ .dvr-controls[data-dvr] .live-info {
359
+ font-size: 14px;
360
+ letter-spacing: 0.8px;
361
+ font-weight: 500;
362
+ color: #fffffe;
363
+ margin-left: 21px;
364
+ }
365
+ .dvr-controls[data-dvr] .live-info::before {
366
+ width: 10px;
367
+ height: 10px;
368
+ border-radius: 50%;
259
369
  margin-right: 8px;
370
+ background-color: #ed4f4a;
260
371
  }
261
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
262
- height: 20px;
372
+ .dvr-controls[data-dvr] .live-button {
373
+ height: 40px;
374
+ opacity: 1;
375
+ font-size: 14px;
376
+ letter-spacing: 0.8px;
377
+ font-weight: 500;
378
+ margin-left: 20px;
379
+ }
380
+ .dvr-controls[data-dvr] .live-button::before {
381
+ width: 10px;
382
+ height: 10px;
383
+ border-radius: 50%;
384
+ margin-right: 8px;
385
+ background-color: #cacaca;
386
+ }
387
+
388
+ .dvr .dvr-controls[data-dvr] .live-info {
389
+ display: none;
390
+ }
391
+ .dvr .dvr-controls[data-dvr] .live-button {
392
+ display: block;
263
393
  }*, :focus, :visited {
264
394
  outline: none !important;
265
395
  }
@@ -321,55 +451,44 @@
321
451
  }
322
452
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
323
453
  display: inline;
324
- }.big-mute-icon-wrapper[data-big-mute] {
325
- position: absolute;
326
- z-index: 9998;
327
- background-color: transparent;
328
- display: flex;
329
- justify-content: center;
330
- width: 100%;
331
- height: calc(100% - 50px);
332
- margin: 0 auto;
333
- opacity: 0.75;
334
- transition: opacity 0.1s ease;
335
- pointer-events: auto;
454
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
455
+ order: 99;
456
+ height: 20px;
336
457
  }
337
- .big-mute-icon-wrapper[data-big-mute].hide {
338
- display: none;
458
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
459
+ position: absolute;
460
+ right: 16px;
461
+ bottom: 52px;
462
+ width: 250px;
463
+ min-height: 48px;
464
+ z-index: 9999;
465
+ border-radius: 4px;
339
466
  }
340
- .big-mute-icon-wrapper[data-big-mute]:hover {
341
- cursor: pointer;
467
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
468
+ padding: 8px 0;
342
469
  }
343
-
344
- .big-mute-icon[data-big-mute-icon] {
345
- display: flex;
346
- align-items: center;
347
- justify-content: center;
348
- align-self: center;
349
- width: 120px;
350
- height: 120px;
351
- border: 2px solid white;
352
- border-radius: 50%;
353
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
354
- filter: alpha(opacity=60);
355
- opacity: 1;
356
- box-shadow: 0 0 1px 0 white;
357
- background: rgba(240, 243, 247, 0.9411764706);
358
- z-index: 10000;
470
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
471
+ float: left;
472
+ margin-right: 10px;
359
473
  }
360
- .big-mute-icon[data-big-mute-icon] svg {
361
- margin-left: 5px;
362
- width: 80px;
363
- height: 80px;
474
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
475
+ margin: 0;
476
+ text-align: left;
477
+ line-height: 22px;
478
+ padding: 5px 14px;
479
+ width: 250px;
480
+ font-size: 12px;
364
481
  }
365
- .big-mute-icon[data-big-mute-icon] svg path {
366
- fill: #1f1e1e !important;
482
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
483
+ float: right;
484
+ margin-right: -14px;
367
485
  }
368
- .big-mute-icon[data-big-mute-icon]:hover {
369
- background: rgba(240, 243, 247, 0.8784313725);
486
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
487
+ float: right;
488
+ margin-right: 8px;
370
489
  }
371
- .big-mute-icon[data-big-mute-icon]:hover svg path {
372
- fill: #151515 !important;
490
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
491
+ height: 20px;
373
492
  }:root {
374
493
  --primary-background-color: #000;
375
494
  --secondary-background-color: #262626;
@@ -752,6 +871,49 @@
752
871
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
753
872
  width: 25%;
754
873
  }
874
+ }div.player-error-screen, [data-player] div.player-error-screen {
875
+ color: #CCCACA;
876
+ position: absolute;
877
+ top: 0;
878
+ height: 100%;
879
+ width: 100%;
880
+ background-color: rgba(0, 0, 0, 0.7);
881
+ z-index: 2000;
882
+ display: flex;
883
+ flex-direction: column;
884
+ justify-content: center;
885
+ }
886
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
887
+ font-size: 14px;
888
+ color: #CCCACA;
889
+ margin-top: 45px;
890
+ }
891
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
892
+ font-weight: bold;
893
+ line-height: 30px;
894
+ font-size: 18px;
895
+ }
896
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
897
+ width: 90%;
898
+ margin: 0 auto;
899
+ }
900
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
901
+ font-size: 13px;
902
+ margin-top: 15px;
903
+ }
904
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
905
+ cursor: pointer;
906
+ width: 30px;
907
+ margin: 15px auto 0;
908
+ }.media-control-pip {
909
+ order: 95;
910
+ display: flex;
911
+ }
912
+ .media-control-pip button {
913
+ height: 20px;
914
+ }
915
+ .media-control-pip button svg {
916
+ height: 20px;
755
917
  }*, :focus, :visited {
756
918
  outline: none !important;
757
919
  }
@@ -900,8 +1062,6 @@
900
1062
  100% {
901
1063
  color: #B80000;
902
1064
  }
903
- }.clips.bar-container[data-seekbar] {
904
- clip-path: url("#myClip");
905
1065
  }.gear-option_hd-icon.hidden {
906
1066
  display: none;
907
1067
  }
@@ -945,99 +1105,6 @@
945
1105
  .seek-time[data-seek-time] [data-duration]::before {
946
1106
  content: "|";
947
1107
  margin-right: 7px;
948
- }.dvr-controls[data-dvr] {
949
- display: inline-block;
950
- color: var(--player-dvr-color);
951
- line-height: 32px;
952
- font-size: 10px;
953
- font-weight: bold;
954
- margin-left: 6px;
955
- height: 40px;
956
- line-height: 40px;
957
- margin-left: 0;
958
- }
959
- .dvr-controls[data-dvr] .live-info {
960
- cursor: default;
961
- text-transform: uppercase;
962
- }
963
- .dvr-controls[data-dvr] .live-info:before {
964
- content: "";
965
- display: inline-block;
966
- position: relative;
967
- width: 7px;
968
- height: 7px;
969
- border-radius: 3.5px;
970
- margin-right: 3.5px;
971
- background-color: var(--player-live-color);
972
- }
973
- .dvr-controls[data-dvr] .live-info.disabled {
974
- opacity: 0.3;
975
- }
976
- .dvr-controls[data-dvr] .live-info.disabled:before {
977
- background-color: var(--player-dvr-color);
978
- }
979
- .dvr-controls[data-dvr] .live-button {
980
- cursor: pointer;
981
- outline: none;
982
- display: none;
983
- border: 0;
984
- color: var(--player-dvr-color);
985
- background-color: transparent;
986
- height: 32px;
987
- padding: 0;
988
- opacity: 0.7;
989
- text-transform: uppercase;
990
- transition: all 0.1s ease;
991
- }
992
- .dvr-controls[data-dvr] .live-button:before {
993
- content: "";
994
- display: inline-block;
995
- position: relative;
996
- width: 7px;
997
- height: 7px;
998
- border-radius: 3.5px;
999
- margin-right: 3.5px;
1000
- background-color: var(--player-dvr-color);
1001
- }
1002
- .dvr-controls[data-dvr] .live-button:hover {
1003
- opacity: 1;
1004
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
1005
- }
1006
- .dvr-controls[data-dvr] .live-info {
1007
- font-size: 14px;
1008
- letter-spacing: 0.8px;
1009
- font-weight: 500;
1010
- color: #fffffe;
1011
- margin-left: 21px;
1012
- }
1013
- .dvr-controls[data-dvr] .live-info::before {
1014
- width: 10px;
1015
- height: 10px;
1016
- border-radius: 50%;
1017
- margin-right: 8px;
1018
- background-color: #ed4f4a;
1019
- }
1020
- .dvr-controls[data-dvr] .live-button {
1021
- height: 40px;
1022
- opacity: 1;
1023
- font-size: 14px;
1024
- letter-spacing: 0.8px;
1025
- font-weight: 500;
1026
- margin-left: 20px;
1027
- }
1028
- .dvr-controls[data-dvr] .live-button::before {
1029
- width: 10px;
1030
- height: 10px;
1031
- border-radius: 50%;
1032
- margin-right: 8px;
1033
- background-color: #cacaca;
1034
- }
1035
-
1036
- .dvr .dvr-controls[data-dvr] .live-info {
1037
- display: none;
1038
- }
1039
- .dvr .dvr-controls[data-dvr] .live-button {
1040
- display: block;
1041
1108
  }.player-poster[data-poster] {
1042
1109
  display: flex;
1043
1110
  justify-content: center;
@@ -1072,144 +1139,127 @@
1072
1139
  }
1073
1140
  .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1074
1141
  fill: #fff;
1075
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1076
- height: 0;
1077
- }
1078
-
1079
- .skip_time_plugin[data-skip-time] {
1080
- position: absolute;
1081
- width: 100%;
1082
- height: calc(100% - 50px);
1083
- z-index: 9998;
1084
- background-color: transparent;
1085
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1142
+ }.share_plugin[data-share] {
1143
+ pointer-events: auto;
1144
+ z-index: 5;
1145
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1086
1146
  }
1087
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1088
- width: 100%;
1089
- height: 100%;
1090
- display: flex;
1091
- justify-content: space-between;
1147
+ .share_plugin[data-share].share-hide .share-button-container {
1148
+ right: -50px;
1092
1149
  }
1093
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1094
- width: 33.3%;
1095
- height: 100%;
1096
- }div.player-error-screen, [data-player] div.player-error-screen {
1097
- color: #CCCACA;
1150
+ .share_plugin[data-share] .share-button-container {
1151
+ cursor: pointer;
1152
+ width: 36px;
1153
+ height: 36px;
1154
+ background-color: rgba(74, 74, 74, 0.6);
1155
+ border-radius: 4px;
1098
1156
  position: absolute;
1099
- top: 0;
1100
- height: 100%;
1101
- width: 100%;
1102
- background-color: rgba(0, 0, 0, 0.7);
1103
- z-index: 2000;
1104
- display: flex;
1105
- flex-direction: column;
1106
- justify-content: center;
1157
+ right: 10px;
1158
+ top: 10px;
1159
+ padding-top: 6px;
1160
+ transition: all 0.3s ease-out;
1107
1161
  }
1108
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1109
- font-size: 14px;
1110
- color: #CCCACA;
1111
- margin-top: 45px;
1162
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1163
+ background-color: transparent;
1164
+ border: 0;
1165
+ margin: 0 6px;
1166
+ padding: 0;
1167
+ cursor: pointer;
1168
+ display: inline-block;
1169
+ width: 19px;
1170
+ height: 20px;
1112
1171
  }
1113
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1114
- font-weight: bold;
1115
- line-height: 30px;
1116
- font-size: 18px;
1172
+ .share_plugin[data-share] .share-container {
1173
+ pointer-events: auto;
1174
+ position: absolute;
1175
+ width: 280px;
1176
+ background-color: white;
1177
+ transform: translate(0, 50%);
1178
+ transform: translate(-50%, -50%);
1179
+ left: 50%;
1180
+ /* margin-left: -140px; */
1181
+ top: calc(50% - 20px);
1182
+ /* margin-top: -170px; */
1117
1183
  }
1118
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1119
- width: 90%;
1120
- margin: 0 auto;
1184
+ .share_plugin[data-share] .share-container .share-container-header {
1185
+ text-align: left;
1186
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1121
1187
  }
1122
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1123
- font-size: 13px;
1124
- margin-top: 15px;
1188
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1189
+ display: inline-block;
1190
+ font-size: 16px;
1191
+ margin: 5px;
1125
1192
  }
1126
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1193
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1194
+ display: inline-block;
1195
+ width: 24px;
1196
+ float: right;
1197
+ margin: 5px;
1127
1198
  cursor: pointer;
1128
- width: 30px;
1129
- margin: 15px auto 0;
1130
- }*,
1131
- :focus,
1132
- :visited {
1133
- outline: none !important;
1134
- }
1135
-
1136
- .media-control-cc[data-cc] {
1137
- position: relative;
1138
- order: 85;
1139
1199
  }
1140
- .media-control-cc[data-cc] button {
1141
- background-color: transparent;
1142
- color: #fff;
1143
- -webkit-font-smoothing: antialiased;
1144
- border: none;
1145
- cursor: pointer;
1200
+ .share_plugin[data-share] .share-container .share-container-main {
1201
+ margin-bottom: 8px;
1146
1202
  }
1147
- .media-control-cc[data-cc] button .cc-text svg {
1148
- fill: white;
1203
+ .share_plugin[data-share] .share-container .share-container-main > div {
1204
+ text-align: left;
1205
+ font-size: 14px;
1206
+ padding: 5px;
1149
1207
  }
1150
- .media-control-cc[data-cc] button:hover {
1151
- color: #c9c9c9;
1208
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1209
+ overflow: hidden;
1210
+ text-overflow: ellipsis;
1211
+ color: #818181;
1212
+ border: solid 1px #d3d3d3;
1213
+ width: calc(100% - 10px);
1214
+ padding: 5px;
1152
1215
  }
1153
- .media-control-cc[data-cc] button.changing {
1154
- animation: pulse 0.5s infinite alternate;
1216
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1217
+ max-height: 90px;
1218
+ resize: none;
1155
1219
  }
1156
- .media-control-cc[data-cc] ul {
1157
- width: 80px;
1158
- list-style-type: none;
1220
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1221
+ width: 32px;
1222
+ display: inline-block;
1223
+ margin-right: 5px;
1224
+ cursor: pointer;
1225
+ }.spinner-three-bounce[data-spinner] {
1159
1226
  position: absolute;
1160
- bottom: 25px;
1161
- border: 1px solid black;
1162
- display: none;
1163
- background-color: #e6e6e6;
1164
- padding: 8px 0;
1165
- }
1166
- .media-control-cc[data-cc] li a {
1167
- color: #444;
1168
- padding: 2px 10px;
1169
- display: block;
1170
- text-decoration: none;
1171
- }
1172
- .media-control-cc[data-cc] li a:hover {
1173
- background-color: #555;
1174
- color: white;
1227
+ width: 70px;
1228
+ text-align: center;
1229
+ z-index: 999;
1230
+ left: 0;
1231
+ right: 0;
1232
+ margin: 0 auto;
1233
+ margin-left: auto;
1234
+ margin-right: auto;
1235
+ /* center vertically */
1236
+ top: 50%;
1237
+ transform: translateY(-50%);
1175
1238
  }
1176
- .media-control-cc[data-cc] li a:hover a {
1177
- color: white;
1178
- text-decoration: none;
1239
+ .spinner-three-bounce[data-spinner] > div {
1240
+ width: 18px;
1241
+ height: 18px;
1242
+ background-color: #FFF;
1243
+ border-radius: 100%;
1244
+ display: inline-block;
1245
+ animation: bouncedelay 1.4s infinite ease-in-out;
1246
+ /* Prevent first frame from flickering when animation starts */
1247
+ animation-fill-mode: both;
1179
1248
  }
1180
- .media-control-cc[data-cc] li.current a {
1181
- color: #f00;
1182
- background-color: #555;
1249
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1250
+ animation-delay: -0.32s;
1251
+ }
1252
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1253
+ animation-delay: -0.16s;
1183
1254
  }
1184
1255
 
1185
- @keyframes pulse {
1186
- 0% {
1187
- color: #fff;
1188
- }
1189
- 50% {
1190
- color: #ff0101;
1256
+ @keyframes bouncedelay {
1257
+ 0%, 80%, 100% {
1258
+ transform: scale(0);
1191
1259
  }
1192
- 100% {
1193
- color: #B80000;
1260
+ 40% {
1261
+ transform: scale(1);
1194
1262
  }
1195
- }
1196
- ::cue {
1197
- visibility: hidden !important;
1198
- font-size: 0 !important;
1199
- }
1200
-
1201
- .ios-fullscreen::cue {
1202
- visibility: visible !important;
1203
- font-size: 1em !important;
1204
- }.media-control-pip {
1205
- order: 95;
1206
- display: flex;
1207
- }
1208
- .media-control-pip button {
1209
- height: 20px;
1210
- }
1211
- .media-control-pip button svg {
1212
- height: 20px;
1213
1263
  }[data-player] {
1214
1264
  --bottom-panel: 40px;
1215
1265
  }
@@ -1847,68 +1897,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1847
1897
  }
1848
1898
  .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1849
1899
  display: none !important;
1850
- }.spinner-three-bounce[data-spinner] {
1851
- position: absolute;
1852
- width: 70px;
1853
- text-align: center;
1854
- z-index: 999;
1855
- left: 0;
1856
- right: 0;
1857
- margin: 0 auto;
1858
- margin-left: auto;
1859
- margin-right: auto;
1860
- /* center vertically */
1861
- top: 50%;
1862
- transform: translateY(-50%);
1863
- }
1864
- .spinner-three-bounce[data-spinner] > div {
1865
- width: 18px;
1866
- height: 18px;
1867
- background-color: #FFF;
1868
- border-radius: 100%;
1869
- display: inline-block;
1870
- animation: bouncedelay 1.4s infinite ease-in-out;
1871
- /* Prevent first frame from flickering when animation starts */
1872
- animation-fill-mode: both;
1873
- }
1874
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1875
- animation-delay: -0.32s;
1876
- }
1877
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1878
- animation-delay: -0.16s;
1879
- }
1880
-
1881
- @keyframes bouncedelay {
1882
- 0%, 80%, 100% {
1883
- transform: scale(0);
1884
- }
1885
- 40% {
1886
- transform: scale(1);
1887
- }
1888
- }.context-menu {
1889
- z-index: 999;
1890
- position: absolute;
1891
- top: 0;
1892
- left: 0;
1893
- text-align: center;
1894
- }
1895
- .context-menu .context-menu-list {
1896
- font-family: "Proxima Nova", sans-serif;
1897
- font-size: 12px;
1898
- line-height: 12px;
1899
- list-style-type: none;
1900
- text-align: left;
1901
- padding: 5px;
1902
- margin-left: auto;
1903
- margin-right: auto;
1904
- background-color: rgba(0, 0, 0, 0.75);
1905
- border: 1px solid #666;
1906
- border-radius: 4px;
1907
- }
1908
- .context-menu .context-menu-list .context-menu-list-item {
1909
- color: white;
1910
- padding: 5px;
1911
- cursor: pointer;
1912
1900
  }.scrub-thumbnails {
1913
1901
  position: absolute;
1914
1902
  bottom: 52px;
@@ -1970,96 +1958,108 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1970
1958
  }
1971
1959
  .scrub-thumbnails .backdrop .carousel img {
1972
1960
  width: auto;
1973
- }.player-logo[data-logo] {
1974
- position: absolute;
1975
- z-index: 2;
1976
- width: 100%;
1977
- height: 100%;
1961
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1962
+ height: 0;
1978
1963
  }
1979
1964
 
1980
- .clappr-logo {
1965
+ .skip_time_plugin[data-skip-time] {
1981
1966
  position: absolute;
1982
- }.share_plugin[data-share] {
1983
- pointer-events: auto;
1984
- z-index: 5;
1985
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1967
+ width: 100%;
1968
+ height: calc(100% - 50px);
1969
+ z-index: 9998;
1970
+ background-color: transparent;
1971
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1986
1972
  }
1987
- .share_plugin[data-share].share-hide .share-button-container {
1988
- right: -50px;
1973
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1974
+ width: 100%;
1975
+ height: 100%;
1976
+ display: flex;
1977
+ justify-content: space-between;
1989
1978
  }
1990
- .share_plugin[data-share] .share-button-container {
1991
- cursor: pointer;
1992
- width: 36px;
1993
- height: 36px;
1994
- background-color: rgba(74, 74, 74, 0.6);
1995
- border-radius: 4px;
1996
- position: absolute;
1997
- right: 10px;
1998
- top: 10px;
1999
- padding-top: 6px;
2000
- transition: all 0.3s ease-out;
1979
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1980
+ width: 33.3%;
1981
+ height: 100%;
1982
+ }*,
1983
+ :focus,
1984
+ :visited {
1985
+ outline: none !important;
2001
1986
  }
2002
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1987
+
1988
+ .media-control-cc[data-cc] {
1989
+ position: relative;
1990
+ order: 85;
1991
+ }
1992
+ .media-control-cc[data-cc] button {
2003
1993
  background-color: transparent;
2004
- border: 0;
2005
- margin: 0 6px;
2006
- padding: 0;
1994
+ color: #fff;
1995
+ -webkit-font-smoothing: antialiased;
1996
+ border: none;
2007
1997
  cursor: pointer;
2008
- display: inline-block;
2009
- width: 19px;
2010
- height: 20px;
2011
1998
  }
2012
- .share_plugin[data-share] .share-container {
2013
- pointer-events: auto;
1999
+ .media-control-cc[data-cc] button .cc-text svg {
2000
+ fill: white;
2001
+ }
2002
+ .media-control-cc[data-cc] button:hover {
2003
+ color: #c9c9c9;
2004
+ }
2005
+ .media-control-cc[data-cc] button.changing {
2006
+ animation: pulse 0.5s infinite alternate;
2007
+ }
2008
+ .media-control-cc[data-cc] ul {
2009
+ width: 80px;
2010
+ list-style-type: none;
2014
2011
  position: absolute;
2015
- width: 280px;
2016
- background-color: white;
2017
- transform: translate(0, 50%);
2018
- transform: translate(-50%, -50%);
2019
- left: 50%;
2020
- /* margin-left: -140px; */
2021
- top: calc(50% - 20px);
2022
- /* margin-top: -170px; */
2012
+ bottom: 25px;
2013
+ border: 1px solid black;
2014
+ display: none;
2015
+ background-color: #e6e6e6;
2016
+ padding: 8px 0;
2023
2017
  }
2024
- .share_plugin[data-share] .share-container .share-container-header {
2025
- text-align: left;
2026
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
2018
+ .media-control-cc[data-cc] li a {
2019
+ color: #444;
2020
+ padding: 2px 10px;
2021
+ display: block;
2022
+ text-decoration: none;
2027
2023
  }
2028
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
2029
- display: inline-block;
2030
- font-size: 16px;
2031
- margin: 5px;
2024
+ .media-control-cc[data-cc] li a:hover {
2025
+ background-color: #555;
2026
+ color: white;
2032
2027
  }
2033
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
2034
- display: inline-block;
2035
- width: 24px;
2036
- float: right;
2037
- margin: 5px;
2038
- cursor: pointer;
2028
+ .media-control-cc[data-cc] li a:hover a {
2029
+ color: white;
2030
+ text-decoration: none;
2039
2031
  }
2040
- .share_plugin[data-share] .share-container .share-container-main {
2041
- margin-bottom: 8px;
2032
+ .media-control-cc[data-cc] li.current a {
2033
+ color: #f00;
2034
+ background-color: #555;
2042
2035
  }
2043
- .share_plugin[data-share] .share-container .share-container-main > div {
2044
- text-align: left;
2045
- font-size: 14px;
2046
- padding: 5px;
2036
+
2037
+ @keyframes pulse {
2038
+ 0% {
2039
+ color: #fff;
2040
+ }
2041
+ 50% {
2042
+ color: #ff0101;
2043
+ }
2044
+ 100% {
2045
+ color: #B80000;
2046
+ }
2047
2047
  }
2048
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
2049
- overflow: hidden;
2050
- text-overflow: ellipsis;
2051
- color: #818181;
2052
- border: solid 1px #d3d3d3;
2053
- width: calc(100% - 10px);
2054
- padding: 5px;
2048
+ ::cue {
2049
+ visibility: hidden !important;
2050
+ font-size: 0 !important;
2055
2051
  }
2056
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
2057
- max-height: 90px;
2058
- resize: none;
2052
+
2053
+ .ios-fullscreen::cue {
2054
+ visibility: visible !important;
2055
+ font-size: 1em !important;
2056
+ }.player-logo[data-logo] {
2057
+ position: absolute;
2058
+ z-index: 2;
2059
+ width: 100%;
2060
+ height: 100%;
2059
2061
  }
2060
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
2061
- width: 32px;
2062
- display: inline-block;
2063
- margin-right: 5px;
2064
- cursor: pointer;
2062
+
2063
+ .clappr-logo {
2064
+ position: absolute;
2065
2065
  }