@gcorevideo/player 2.24.10 → 2.24.13

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 (48) hide show
  1. package/README.md +1 -0
  2. package/assets/dvr-controls/dvr_controls.scss +43 -80
  3. package/assets/dvr-controls/index.ejs +8 -2
  4. package/assets/media-control/width370.scss +1 -1
  5. package/dist/core.js +34 -23
  6. package/dist/index.css +394 -420
  7. package/dist/index.embed.js +107 -71
  8. package/dist/index.js +172 -134
  9. package/dist/player.d.ts +3264 -0
  10. package/lib/playback/dash-playback/DashPlayback.d.ts +2 -0
  11. package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
  12. package/lib/playback/dash-playback/DashPlayback.js +17 -11
  13. package/lib/playback/hls-playback/HlsPlayback.d.ts +6 -2
  14. package/lib/playback/hls-playback/HlsPlayback.d.ts.map +1 -1
  15. package/lib/playback/hls-playback/HlsPlayback.js +16 -11
  16. package/lib/plugins/audio-selector/AudioTracks.js +1 -1
  17. package/lib/plugins/bottom-gear/BottomGear.js +1 -1
  18. package/lib/plugins/clips/Clips.js +1 -1
  19. package/lib/plugins/dvr-controls/DvrControls.d.ts +3 -3
  20. package/lib/plugins/dvr-controls/DvrControls.d.ts.map +1 -1
  21. package/lib/plugins/dvr-controls/DvrControls.js +14 -12
  22. package/lib/plugins/media-control/MediaControl.d.ts +14 -5
  23. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  24. package/lib/plugins/media-control/MediaControl.js +55 -29
  25. package/lib/plugins/picture-in-picture/PictureInPicture.js +1 -1
  26. package/lib/plugins/subtitles/ClosedCaptions.js +1 -1
  27. package/lib/testUtils.d.ts.map +1 -1
  28. package/lib/testUtils.js +2 -0
  29. package/package.json +1 -1
  30. package/src/playback/dash-playback/DashPlayback.ts +20 -13
  31. package/src/playback/hls-playback/HlsPlayback.ts +40 -26
  32. package/src/plugins/audio-selector/AudioTracks.ts +1 -1
  33. package/src/plugins/audio-selector/__tests__/AudioTracks.test.ts +2 -2
  34. package/src/plugins/bottom-gear/BottomGear.ts +1 -1
  35. package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts +2 -2
  36. package/src/plugins/clips/Clips.ts +1 -1
  37. package/src/plugins/clips/__tests__/Clips.test.ts +1 -1
  38. package/src/plugins/dvr-controls/DvrControls.ts +14 -14
  39. package/src/plugins/dvr-controls/__tests__/DvrControls.test.ts +20 -17
  40. package/src/plugins/dvr-controls/__tests__/__snapshots__/DvrControls.test.ts.snap +4 -2
  41. package/src/plugins/media-control/MediaControl.ts +69 -35
  42. package/src/plugins/media-control/__tests__/MediaControl.test.ts +128 -112
  43. package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +227 -24
  44. package/src/plugins/picture-in-picture/PictureInPicture.ts +1 -1
  45. package/src/plugins/subtitles/ClosedCaptions.ts +1 -1
  46. package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts +1 -1
  47. package/src/testUtils.ts +2 -0
  48. package/tsconfig.tsbuildinfo +1 -1
package/dist/index.css CHANGED
@@ -222,92 +222,149 @@
222
222
  100% {
223
223
  color: #B80000;
224
224
  }
225
- }.dvr-controls[data-dvr] {
226
- display: inline-block;
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;
237
+ }
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
+ }.dvr-controls {
275
+ --disabled-opacity: 0.3;
276
+ --circle-radius: 5px;
277
+ display: flex;
278
+ align-items: center;
227
279
  color: var(--player-dvr-color);
228
- line-height: 32px;
229
280
  font-size: 10px;
230
- font-weight: bold;
231
- margin-left: 6px;
232
- height: 40px;
233
- line-height: 40px;
281
+ font-weight: 500;
282
+ height: var(--bottom-panel);
283
+ line-height: var(--bottom-panel);
234
284
  margin-left: 0;
235
285
  }
236
- .dvr-controls[data-dvr] .live-info {
237
- cursor: default;
286
+ .dvr-controls .live-info,
287
+ .dvr-controls .live-button {
288
+ font-size: 14px;
289
+ font-weight: 500;
290
+ margin-left: 20px;
291
+ letter-spacing: 0.8px;
238
292
  text-transform: uppercase;
239
293
  }
240
- .dvr-controls[data-dvr] .live-info:before {
294
+ .dvr-controls .live-info::before,
295
+ .dvr-controls .live-button::before {
296
+ margin-right: 8px;
241
297
  content: "";
242
298
  display: inline-block;
243
299
  position: relative;
244
- width: 7px;
245
- height: 7px;
246
- border-radius: 3.5px;
247
- margin-right: 3.5px;
248
- background-color: var(--player-live-color);
300
+ width: calc(var(--circle-radius) * 2);
301
+ height: calc(var(--circle-radius) * 2);
302
+ border-radius: var(--circle-radius);
303
+ background-color: var(--player-dvr-color);
249
304
  }
250
- .dvr-controls[data-dvr] .live-info.disabled {
251
- opacity: 0.3;
305
+ .dvr-controls.disabled {
306
+ opacity: var(--disabled-opacity);
252
307
  }
253
- .dvr-controls[data-dvr] .live-info.disabled:before {
308
+ .dvr-controls.disabled:before {
254
309
  background-color: var(--player-dvr-color);
255
310
  }
256
- .dvr-controls[data-dvr] .live-button {
311
+
312
+ .live-info {
313
+ text-transform: uppercase;
314
+ color: #fffffe;
315
+ }
316
+ .live-info::before {
317
+ background-color: var(--player-live-color);
318
+ background-color: #ed4f4a;
319
+ }
320
+
321
+ .live-button {
257
322
  cursor: pointer;
258
323
  outline: none;
259
- display: none;
260
324
  border: 0;
261
325
  color: var(--player-dvr-color);
262
326
  background-color: transparent;
263
- height: 32px;
264
327
  padding: 0;
265
328
  opacity: 0.7;
266
- text-transform: uppercase;
267
329
  transition: all 0.1s ease;
268
330
  }
269
- .dvr-controls[data-dvr] .live-button:before {
270
- content: "";
271
- display: inline-block;
272
- position: relative;
273
- width: 7px;
274
- height: 7px;
275
- border-radius: 3.5px;
276
- margin-right: 3.5px;
277
- background-color: var(--player-dvr-color);
278
- }
279
- .dvr-controls[data-dvr] .live-button:hover {
331
+ .live-button:hover {
280
332
  opacity: 1;
281
333
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
334
+ }.player-poster {
335
+ display: flex;
336
+ justify-content: center;
337
+ align-items: center;
338
+ position: absolute;
339
+ height: 100%;
340
+ width: 100%;
341
+ z-index: 998;
342
+ top: 0;
343
+ left: 0;
344
+ background-color: #000;
345
+ background-size: cover;
346
+ background-repeat: no-repeat;
347
+ background-position: 50% 50%;
282
348
  }
283
- .dvr-controls[data-dvr] .live-info {
284
- font-size: 14px;
285
- letter-spacing: 0.8px;
286
- font-weight: 500;
287
- color: #fffffe;
288
- margin-left: 21px;
289
- }
290
- .dvr-controls[data-dvr] .live-info::before {
291
- width: 10px;
292
- height: 10px;
293
- border-radius: 50%;
294
- margin-right: 8px;
295
- background-color: #ed4f4a;
349
+ .player-poster.clickable {
350
+ cursor: pointer;
296
351
  }
297
- .dvr-controls[data-dvr] .live-button {
298
- height: 40px;
352
+ .player-poster:hover .play-wrapper {
299
353
  opacity: 1;
300
- font-size: 14px;
301
- letter-spacing: 0.8px;
302
- font-weight: 500;
303
- margin-left: 20px;
304
354
  }
305
- .dvr-controls[data-dvr] .live-button::before {
306
- width: 10px;
307
- height: 10px;
308
- border-radius: 50%;
309
- margin-right: 8px;
310
- background-color: #cacaca;
355
+ .player-poster .play-wrapper {
356
+ width: 100%;
357
+ height: 25%;
358
+ margin: 0 auto;
359
+ opacity: 0.75;
360
+ transition: opacity 0.1s ease;
361
+ }
362
+ .player-poster .play-wrapper svg {
363
+ height: 100%;
364
+ display: inline;
365
+ }
366
+ .player-poster .play-wrapper svg path {
367
+ fill: #fff;
311
368
  }:root {
312
369
  --primary-background-color: #000;
313
370
  --secondary-background-color: #262626;
@@ -672,6 +729,64 @@
672
729
  .fullscreen .clappr-nerd-stats .stats-box {
673
730
  top: unset;
674
731
  }
732
+ }@charset "UTF-8";
733
+ .media-control-clips {
734
+ display: flex;
735
+ gap: 6px;
736
+ }
737
+ .media-control-clips .media-clip-text {
738
+ text-overflow: ellipsis;
739
+ white-space: nowrap;
740
+ overflow: hidden;
741
+ display: inline-block;
742
+ text-overflow: ellipsis;
743
+ color: white;
744
+ cursor: default;
745
+ line-height: var(--bottom-panel);
746
+ position: relative;
747
+ }
748
+ .media-control-clips .media-clip-text::before {
749
+ content: "•";
750
+ padding-right: 6px;
751
+ }
752
+ .media-control-clips .media-clip-text {
753
+ max-width: 100px;
754
+ }.context-menu {
755
+ z-index: 999;
756
+ position: absolute;
757
+ top: 0;
758
+ left: 0;
759
+ text-align: center;
760
+ }
761
+ .context-menu .context-menu-list {
762
+ font-family: "Proxima Nova", sans-serif;
763
+ font-size: 12px;
764
+ line-height: 12px;
765
+ list-style-type: none;
766
+ text-align: left;
767
+ padding: 5px;
768
+ margin-left: auto;
769
+ margin-right: auto;
770
+ background-color: rgba(0, 0, 0, 0.75);
771
+ border: 1px solid #666;
772
+ border-radius: 4px;
773
+ }
774
+ .context-menu .context-menu-list-item button {
775
+ border: none;
776
+ background-color: transparent;
777
+ padding: 0;
778
+ color: white;
779
+ display: flex;
780
+ gap: 8px;
781
+ align-items: center;
782
+ justify-content: center;
783
+ cursor: pointer;
784
+ padding: 5px;
785
+ width: 100%;
786
+ }
787
+ .context-menu .context-menu-list-item_icon {
788
+ width: 20px;
789
+ height: 20px;
675
790
  }*, :focus, :visited {
676
791
  outline: none !important;
677
792
  }
@@ -779,64 +894,192 @@
779
894
  }
780
895
  .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_value {
781
896
  flex: 1 0 auto;
782
- }@charset "UTF-8";
783
- .media-control-clips {
784
- display: flex;
785
- gap: 6px;
786
- }
787
- .media-control-clips .media-clip-text {
788
- text-overflow: ellipsis;
789
- white-space: nowrap;
790
- overflow: hidden;
791
- display: inline-block;
792
- text-overflow: ellipsis;
793
- color: white;
794
- cursor: default;
795
- line-height: var(--bottom-panel);
796
- position: relative;
797
- }
798
- .media-control-clips .media-clip-text::before {
799
- content: "•";
800
- padding-right: 6px;
897
+ }.share_plugin[data-share] {
898
+ pointer-events: auto;
899
+ z-index: 5;
900
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
801
901
  }
802
- .media-control-clips .media-clip-text {
803
- max-width: 100px;
804
- }.context-menu {
805
- z-index: 999;
806
- position: absolute;
807
- top: 0;
808
- left: 0;
809
- text-align: center;
902
+ .share_plugin[data-share].share-hide .share-button-container {
903
+ right: -50px;
810
904
  }
811
- .context-menu .context-menu-list {
812
- font-family: "Proxima Nova", sans-serif;
813
- font-size: 12px;
814
- line-height: 12px;
815
- list-style-type: none;
816
- text-align: left;
817
- padding: 5px;
818
- margin-left: auto;
819
- margin-right: auto;
820
- background-color: rgba(0, 0, 0, 0.75);
821
- border: 1px solid #666;
905
+ .share_plugin[data-share] .share-button-container {
906
+ cursor: pointer;
907
+ width: 36px;
908
+ height: 36px;
909
+ background-color: rgba(74, 74, 74, 0.6);
822
910
  border-radius: 4px;
911
+ position: absolute;
912
+ right: 10px;
913
+ top: 10px;
914
+ padding-top: 6px;
915
+ transition: all 0.3s ease-out;
823
916
  }
824
- .context-menu .context-menu-list-item button {
825
- border: none;
917
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
826
918
  background-color: transparent;
919
+ border: 0;
920
+ margin: 0 6px;
827
921
  padding: 0;
828
- color: white;
829
- display: flex;
830
- gap: 8px;
831
- align-items: center;
832
- justify-content: center;
833
922
  cursor: pointer;
834
- padding: 5px;
835
- width: 100%;
836
- }
837
- .context-menu .context-menu-list-item_icon {
838
- width: 20px;
923
+ display: inline-block;
924
+ width: 19px;
839
925
  height: 20px;
926
+ }
927
+ .share_plugin[data-share] .share-container {
928
+ pointer-events: auto;
929
+ position: absolute;
930
+ width: 280px;
931
+ background-color: white;
932
+ transform: translate(0, 50%);
933
+ transform: translate(-50%, -50%);
934
+ left: 50%;
935
+ /* margin-left: -140px; */
936
+ top: calc(50% - 20px);
937
+ /* margin-top: -170px; */
938
+ }
939
+ .share_plugin[data-share] .share-container .share-container-header {
940
+ text-align: left;
941
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
942
+ }
943
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
944
+ display: inline-block;
945
+ font-size: 16px;
946
+ margin: 5px;
947
+ }
948
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
949
+ display: inline-block;
950
+ width: 24px;
951
+ float: right;
952
+ margin: 5px;
953
+ cursor: pointer;
954
+ }
955
+ .share_plugin[data-share] .share-container .share-container-main {
956
+ margin-bottom: 8px;
957
+ }
958
+ .share_plugin[data-share] .share-container .share-container-main > div {
959
+ text-align: left;
960
+ font-size: 14px;
961
+ padding: 5px;
962
+ }
963
+ .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 {
964
+ overflow: hidden;
965
+ text-overflow: ellipsis;
966
+ color: #818181;
967
+ border: solid 1px #d3d3d3;
968
+ width: calc(100% - 10px);
969
+ padding: 5px;
970
+ }
971
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
972
+ max-height: 90px;
973
+ resize: none;
974
+ }
975
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
976
+ width: 32px;
977
+ display: inline-block;
978
+ margin-right: 5px;
979
+ cursor: pointer;
980
+ }div.player-error-screen, [data-player] div.player-error-screen {
981
+ color: #CCCACA;
982
+ position: absolute;
983
+ top: 0;
984
+ height: 100%;
985
+ width: 100%;
986
+ background-color: rgba(0, 0, 0, 0.7);
987
+ z-index: 2000;
988
+ display: flex;
989
+ flex-direction: column;
990
+ justify-content: center;
991
+ }
992
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
993
+ font-size: 14px;
994
+ color: #CCCACA;
995
+ margin-top: 45px;
996
+ }
997
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
998
+ font-weight: bold;
999
+ line-height: 30px;
1000
+ font-size: 18px;
1001
+ }
1002
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1003
+ width: 90%;
1004
+ margin: 0 auto;
1005
+ }
1006
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1007
+ font-size: 13px;
1008
+ margin-top: 15px;
1009
+ }
1010
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1011
+ cursor: pointer;
1012
+ width: 30px;
1013
+ margin: 15px auto 0;
1014
+ }.media-control-pip {
1015
+ order: 95;
1016
+ display: flex;
1017
+ }
1018
+ .media-control-pip button {
1019
+ height: 20px;
1020
+ }
1021
+ .media-control-pip button svg {
1022
+ height: 20px;
1023
+ }.container-with-poster-clickable .mc-skip-time {
1024
+ height: 0;
1025
+ }
1026
+
1027
+ .mc-skip-time {
1028
+ position: absolute;
1029
+ width: 100%;
1030
+ height: calc(100% - 50px);
1031
+ z-index: 9998;
1032
+ background-color: transparent;
1033
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1034
+ }
1035
+ .mc-skip-time .skip-container {
1036
+ width: 100%;
1037
+ height: 100%;
1038
+ display: flex;
1039
+ justify-content: space-between;
1040
+ }
1041
+ .mc-skip-time .skip-container .skip-item {
1042
+ flex: 1 0 0px;
1043
+ height: 100%;
1044
+ }.quality-levels li.disabled {
1045
+ opacity: 0.5;
1046
+ pointer-events: none;
1047
+ }
1048
+ .quality-levels li.current {
1049
+ background-color: #000;
1050
+ }.seek-time {
1051
+ position: absolute;
1052
+ white-space: nowrap;
1053
+ height: 20px;
1054
+ line-height: 20px;
1055
+ font-size: 0;
1056
+ left: -100%;
1057
+ bottom: 55px;
1058
+ background-color: rgba(2, 2, 2, 0.5);
1059
+ z-index: 9999;
1060
+ transition: opacity 0.1s ease;
1061
+ }
1062
+ .seek-time.hidden {
1063
+ opacity: 0;
1064
+ }
1065
+ .seek-time .seek-time__pos {
1066
+ display: inline-block;
1067
+ color: white;
1068
+ font-size: 10px;
1069
+ padding-left: 7px;
1070
+ padding-right: 7px;
1071
+ vertical-align: top;
1072
+ }
1073
+ .seek-time .seek-time__duration {
1074
+ display: inline-block;
1075
+ color: rgba(255, 255, 255, 0.5);
1076
+ font-size: 10px;
1077
+ padding-right: 7px;
1078
+ vertical-align: top;
1079
+ }
1080
+ .seek-time .seek-time__duration::before {
1081
+ content: "|";
1082
+ margin-right: 7px;
840
1083
  }[data-player] {
841
1084
  --bottom-panel: 40px;
842
1085
  }
@@ -1011,10 +1254,10 @@
1011
1254
  font-size: 11px;
1012
1255
  line-height: 32px;
1013
1256
  }
1014
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] {
1257
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls {
1015
1258
  height: 32px;
1016
1259
  }
1017
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button {
1260
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-button {
1018
1261
  margin-left: 10px;
1019
1262
  height: 32px;
1020
1263
  font-size: 12px;
@@ -1022,12 +1265,12 @@
1022
1265
  text-shadow: none;
1023
1266
  letter-spacing: 0.6px;
1024
1267
  }
1025
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button::before {
1268
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {
1026
1269
  width: 8px;
1027
1270
  height: 8px;
1028
1271
  margin-right: 4px;
1029
1272
  }
1030
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info {
1273
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-info {
1031
1274
  margin-left: 10px;
1032
1275
  height: 32px;
1033
1276
  font-size: 12px;
@@ -1035,7 +1278,7 @@
1035
1278
  text-shadow: none;
1036
1279
  letter-spacing: 0.6px;
1037
1280
  }
1038
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info::before {
1281
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {
1039
1282
  width: 8px;
1040
1283
  height: 8px;
1041
1284
  margin-right: 4px;
@@ -1450,6 +1693,44 @@
1450
1693
  .media-control-skin-1[data-media-control-skin-1] .seek-time .seek-time__pos {
1451
1694
  padding-left: 8px;
1452
1695
  padding-right: 8px;
1696
+ }.spinner-three-bounce[data-spinner] {
1697
+ position: absolute;
1698
+ width: 70px;
1699
+ text-align: center;
1700
+ z-index: 999;
1701
+ left: 0;
1702
+ right: 0;
1703
+ margin: 0 auto;
1704
+ margin-left: auto;
1705
+ margin-right: auto;
1706
+ /* center vertically */
1707
+ top: 50%;
1708
+ transform: translateY(-50%);
1709
+ }
1710
+ .spinner-three-bounce[data-spinner] > div {
1711
+ width: 18px;
1712
+ height: 18px;
1713
+ background-color: #FFF;
1714
+ border-radius: 100%;
1715
+ display: inline-block;
1716
+ animation: bouncedelay 1.4s infinite ease-in-out;
1717
+ /* Prevent first frame from flickering when animation starts */
1718
+ animation-fill-mode: both;
1719
+ }
1720
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1721
+ animation-delay: -0.32s;
1722
+ }
1723
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1724
+ animation-delay: -0.16s;
1725
+ }
1726
+
1727
+ @keyframes bouncedelay {
1728
+ 0%, 80%, 100% {
1729
+ transform: scale(0);
1730
+ }
1731
+ 40% {
1732
+ transform: scale(1);
1733
+ }
1453
1734
  }*, :focus, :visited {
1454
1735
  outline: none !important;
1455
1736
  }
@@ -1598,175 +1879,6 @@
1598
1879
  100% {
1599
1880
  color: #B80000;
1600
1881
  }
1601
- }.big-mute-icon-wrapper[data-big-mute] {
1602
- position: absolute;
1603
- z-index: 9998;
1604
- background-color: transparent;
1605
- display: flex;
1606
- justify-content: center;
1607
- width: 100%;
1608
- height: calc(100% - 50px);
1609
- margin: 0 auto;
1610
- opacity: 0.75;
1611
- transition: opacity 0.1s ease;
1612
- pointer-events: auto;
1613
- }
1614
- .big-mute-icon-wrapper[data-big-mute].hide {
1615
- display: none;
1616
- }
1617
- .big-mute-icon-wrapper[data-big-mute]:hover {
1618
- cursor: pointer;
1619
- }
1620
-
1621
- .big-mute-icon[data-big-mute-icon] {
1622
- display: flex;
1623
- align-items: center;
1624
- justify-content: center;
1625
- align-self: center;
1626
- width: 120px;
1627
- height: 120px;
1628
- border: 2px solid white;
1629
- border-radius: 50%;
1630
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1631
- filter: alpha(opacity=60);
1632
- opacity: 1;
1633
- box-shadow: 0 0 1px 0 white;
1634
- background: rgba(240, 243, 247, 0.9411764706);
1635
- z-index: 10000;
1636
- }
1637
- .big-mute-icon[data-big-mute-icon] svg {
1638
- margin-left: 5px;
1639
- width: 80px;
1640
- height: 80px;
1641
- }
1642
- .big-mute-icon[data-big-mute-icon] svg path {
1643
- fill: #1f1e1e !important;
1644
- }
1645
- .big-mute-icon[data-big-mute-icon]:hover {
1646
- background: rgba(240, 243, 247, 0.8784313725);
1647
- }
1648
- .big-mute-icon[data-big-mute-icon]:hover svg path {
1649
- fill: #151515 !important;
1650
- }.seek-time {
1651
- position: absolute;
1652
- white-space: nowrap;
1653
- height: 20px;
1654
- line-height: 20px;
1655
- font-size: 0;
1656
- left: -100%;
1657
- bottom: 55px;
1658
- background-color: rgba(2, 2, 2, 0.5);
1659
- z-index: 9999;
1660
- transition: opacity 0.1s ease;
1661
- }
1662
- .seek-time.hidden {
1663
- opacity: 0;
1664
- }
1665
- .seek-time .seek-time__pos {
1666
- display: inline-block;
1667
- color: white;
1668
- font-size: 10px;
1669
- padding-left: 7px;
1670
- padding-right: 7px;
1671
- vertical-align: top;
1672
- }
1673
- .seek-time .seek-time__duration {
1674
- display: inline-block;
1675
- color: rgba(255, 255, 255, 0.5);
1676
- font-size: 10px;
1677
- padding-right: 7px;
1678
- vertical-align: top;
1679
- }
1680
- .seek-time .seek-time__duration::before {
1681
- content: "|";
1682
- margin-right: 7px;
1683
- }div.player-error-screen, [data-player] div.player-error-screen {
1684
- color: #CCCACA;
1685
- position: absolute;
1686
- top: 0;
1687
- height: 100%;
1688
- width: 100%;
1689
- background-color: rgba(0, 0, 0, 0.7);
1690
- z-index: 2000;
1691
- display: flex;
1692
- flex-direction: column;
1693
- justify-content: center;
1694
- }
1695
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1696
- font-size: 14px;
1697
- color: #CCCACA;
1698
- margin-top: 45px;
1699
- }
1700
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1701
- font-weight: bold;
1702
- line-height: 30px;
1703
- font-size: 18px;
1704
- }
1705
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1706
- width: 90%;
1707
- margin: 0 auto;
1708
- }
1709
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1710
- font-size: 13px;
1711
- margin-top: 15px;
1712
- }
1713
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1714
- cursor: pointer;
1715
- width: 30px;
1716
- margin: 15px auto 0;
1717
- }.quality-levels li.disabled {
1718
- opacity: 0.5;
1719
- pointer-events: none;
1720
- }
1721
- .quality-levels li.current {
1722
- background-color: #000;
1723
- }.media-control-pip {
1724
- order: 95;
1725
- display: flex;
1726
- }
1727
- .media-control-pip button {
1728
- height: 20px;
1729
- }
1730
- .media-control-pip button svg {
1731
- height: 20px;
1732
- }.spinner-three-bounce[data-spinner] {
1733
- position: absolute;
1734
- width: 70px;
1735
- text-align: center;
1736
- z-index: 999;
1737
- left: 0;
1738
- right: 0;
1739
- margin: 0 auto;
1740
- margin-left: auto;
1741
- margin-right: auto;
1742
- /* center vertically */
1743
- top: 50%;
1744
- transform: translateY(-50%);
1745
- }
1746
- .spinner-three-bounce[data-spinner] > div {
1747
- width: 18px;
1748
- height: 18px;
1749
- background-color: #FFF;
1750
- border-radius: 100%;
1751
- display: inline-block;
1752
- animation: bouncedelay 1.4s infinite ease-in-out;
1753
- /* Prevent first frame from flickering when animation starts */
1754
- animation-fill-mode: both;
1755
- }
1756
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1757
- animation-delay: -0.32s;
1758
- }
1759
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1760
- animation-delay: -0.16s;
1761
- }
1762
-
1763
- @keyframes bouncedelay {
1764
- 0%, 80%, 100% {
1765
- transform: scale(0);
1766
- }
1767
- 40% {
1768
- transform: scale(1);
1769
- }
1770
1882
  }*,
1771
1883
  :focus,
1772
1884
  :visited {
@@ -1840,144 +1952,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1840
1952
  .ios-fullscreen::cue {
1841
1953
  visibility: visible !important;
1842
1954
  font-size: 1em !important;
1843
- }.player-poster {
1844
- display: flex;
1845
- justify-content: center;
1846
- align-items: center;
1847
- position: absolute;
1848
- height: 100%;
1849
- width: 100%;
1850
- z-index: 998;
1851
- top: 0;
1852
- left: 0;
1853
- background-color: #000;
1854
- background-size: cover;
1855
- background-repeat: no-repeat;
1856
- background-position: 50% 50%;
1857
- }
1858
- .player-poster.clickable {
1859
- cursor: pointer;
1860
- }
1861
- .player-poster:hover .play-wrapper {
1862
- opacity: 1;
1863
- }
1864
- .player-poster .play-wrapper {
1865
- width: 100%;
1866
- height: 25%;
1867
- margin: 0 auto;
1868
- opacity: 0.75;
1869
- transition: opacity 0.1s ease;
1870
- }
1871
- .player-poster .play-wrapper svg {
1872
- height: 100%;
1873
- display: inline;
1874
- }
1875
- .player-poster .play-wrapper svg path {
1876
- fill: #fff;
1877
- }.container-with-poster-clickable .mc-skip-time {
1878
- height: 0;
1879
- }
1880
-
1881
- .mc-skip-time {
1882
- position: absolute;
1883
- width: 100%;
1884
- height: calc(100% - 50px);
1885
- z-index: 9998;
1886
- background-color: transparent;
1887
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1888
- }
1889
- .mc-skip-time .skip-container {
1890
- width: 100%;
1891
- height: 100%;
1892
- display: flex;
1893
- justify-content: space-between;
1894
- }
1895
- .mc-skip-time .skip-container .skip-item {
1896
- flex: 1 0 0px;
1897
- height: 100%;
1898
- }.share_plugin[data-share] {
1899
- pointer-events: auto;
1900
- z-index: 5;
1901
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1902
- }
1903
- .share_plugin[data-share].share-hide .share-button-container {
1904
- right: -50px;
1905
- }
1906
- .share_plugin[data-share] .share-button-container {
1907
- cursor: pointer;
1908
- width: 36px;
1909
- height: 36px;
1910
- background-color: rgba(74, 74, 74, 0.6);
1911
- border-radius: 4px;
1912
- position: absolute;
1913
- right: 10px;
1914
- top: 10px;
1915
- padding-top: 6px;
1916
- transition: all 0.3s ease-out;
1917
- }
1918
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1919
- background-color: transparent;
1920
- border: 0;
1921
- margin: 0 6px;
1922
- padding: 0;
1923
- cursor: pointer;
1924
- display: inline-block;
1925
- width: 19px;
1926
- height: 20px;
1927
- }
1928
- .share_plugin[data-share] .share-container {
1929
- pointer-events: auto;
1930
- position: absolute;
1931
- width: 280px;
1932
- background-color: white;
1933
- transform: translate(0, 50%);
1934
- transform: translate(-50%, -50%);
1935
- left: 50%;
1936
- /* margin-left: -140px; */
1937
- top: calc(50% - 20px);
1938
- /* margin-top: -170px; */
1939
- }
1940
- .share_plugin[data-share] .share-container .share-container-header {
1941
- text-align: left;
1942
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1943
- }
1944
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1945
- display: inline-block;
1946
- font-size: 16px;
1947
- margin: 5px;
1948
- }
1949
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1950
- display: inline-block;
1951
- width: 24px;
1952
- float: right;
1953
- margin: 5px;
1954
- cursor: pointer;
1955
- }
1956
- .share_plugin[data-share] .share-container .share-container-main {
1957
- margin-bottom: 8px;
1958
- }
1959
- .share_plugin[data-share] .share-container .share-container-main > div {
1960
- text-align: left;
1961
- font-size: 14px;
1962
- padding: 5px;
1963
- }
1964
- .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 {
1965
- overflow: hidden;
1966
- text-overflow: ellipsis;
1967
- color: #818181;
1968
- border: solid 1px #d3d3d3;
1969
- width: calc(100% - 10px);
1970
- padding: 5px;
1971
- }
1972
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1973
- max-height: 90px;
1974
- resize: none;
1975
- }
1976
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1977
- width: 32px;
1978
- display: inline-block;
1979
- margin-right: 5px;
1980
- cursor: pointer;
1981
1955
  }.scrub-thumbnails {
1982
1956
  position: absolute;
1983
1957
  bottom: 52px;