@gcorevideo/player 2.28.25 → 2.28.26

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 (143) hide show
  1. package/dist/core.js +38 -32
  2. package/dist/index.css +223 -223
  3. package/dist/index.embed.js +95 -38
  4. package/dist/index.js +227 -122
  5. package/lib/Player.d.ts.map +1 -1
  6. package/lib/index.core.d.ts +1 -1
  7. package/lib/index.core.d.ts.map +1 -1
  8. package/lib/index.core.js +1 -1
  9. package/lib/index.plugins.d.ts +34 -34
  10. package/lib/index.plugins.d.ts.map +1 -1
  11. package/lib/index.plugins.js +34 -34
  12. package/lib/playback/types.d.ts.map +1 -1
  13. package/lib/plugins/bottom-gear/BottomGear.d.ts.map +1 -1
  14. package/lib/plugins/bottom-gear/BottomGear.js +3 -1
  15. package/lib/plugins/clappr-nerd-stats/speedtest/index.d.ts.map +1 -1
  16. package/lib/plugins/clappr-nerd-stats/speedtest/index.js +9 -5
  17. package/lib/plugins/clappr-nerd-stats/speedtest/types.d.ts.map +1 -1
  18. package/lib/plugins/clappr-nerd-stats/utils.d.ts +2 -2
  19. package/lib/plugins/clips/utils.d.ts.map +1 -1
  20. package/lib/plugins/cmcd-config/CmcdConfig.js +1 -1
  21. package/lib/plugins/favicon/Favicon.d.ts.map +1 -1
  22. package/lib/plugins/google-analytics/GoogleAnalytics.d.ts.map +1 -1
  23. package/lib/plugins/google-analytics/GoogleAnalytics.js +10 -3
  24. package/lib/plugins/kibo/index.d.ts.map +1 -1
  25. package/lib/plugins/kibo/index.js +69 -20
  26. package/lib/plugins/level-selector/QualityLevels.js +2 -2
  27. package/lib/plugins/logo/Logo.d.ts.map +1 -1
  28. package/lib/plugins/logo/Logo.js +19 -15
  29. package/lib/plugins/logo/utils/index.d.ts.map +1 -1
  30. package/lib/plugins/logo/utils/index.js +11 -7
  31. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  32. package/lib/plugins/multi-camera/MultiCamera.d.ts.map +1 -1
  33. package/lib/plugins/multi-camera/MultiCamera.js +42 -20
  34. package/lib/plugins/picture-in-picture/PictureInPicture.d.ts.map +1 -1
  35. package/lib/plugins/picture-in-picture/PictureInPicture.js +3 -2
  36. package/lib/plugins/share/Share.d.ts.map +1 -1
  37. package/lib/plugins/share/Share.js +17 -12
  38. package/lib/plugins/skip-time/SkipTime.d.ts.map +1 -1
  39. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts.map +1 -1
  40. package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -1
  41. package/lib/plugins/subtitles/ClosedCaptions.js +4 -3
  42. package/lib/plugins/thumbnails/Thumbnails.js +2 -3
  43. package/lib/plugins/thumbnails/utils.d.ts.map +1 -1
  44. package/lib/plugins/utils/fullscreen.d.ts.map +1 -1
  45. package/lib/plugins/utils.d.ts.map +1 -1
  46. package/lib/plugins/utils.js +1 -1
  47. package/lib/plugins/vast-ads/VastAds.d.ts.map +1 -1
  48. package/lib/plugins/vast-ads/VastAds.js +2 -1
  49. package/lib/plugins/vast-ads/loaderxml.d.ts.map +1 -1
  50. package/lib/plugins/vast-ads/loaderxml.js +8 -5
  51. package/lib/plugins/vast-ads/roll.d.ts +2 -2
  52. package/lib/plugins/vast-ads/roll.d.ts.map +1 -1
  53. package/lib/plugins/vast-ads/roll.js +16 -10
  54. package/lib/plugins/vast-ads/rollmanager.d.ts.map +1 -1
  55. package/lib/plugins/vast-ads/rollmanager.js +17 -7
  56. package/lib/plugins/vast-ads/sctemanager.d.ts +1 -1
  57. package/lib/plugins/vast-ads/sctemanager.d.ts.map +1 -1
  58. package/lib/plugins/vast-ads/sctemanager.js +6 -5
  59. package/lib/plugins/vast-ads/types.d.ts.map +1 -1
  60. package/lib/plugins/vast-ads/urlhandler.d.ts.map +1 -1
  61. package/lib/plugins/vast-ads/xmlhttprequest.d.ts.map +1 -1
  62. package/lib/plugins/vast-ads/xmlhttprequest.js +3 -2
  63. package/lib/plugins/vast-ads/xmlmerge.d.ts.map +1 -1
  64. package/lib/plugins/vast-ads/xmlmerge.js +4 -3
  65. package/lib/types.d.ts +1 -1
  66. package/lib/types.d.ts.map +1 -1
  67. package/lib/utils/clickaway.d.ts.map +1 -1
  68. package/lib/utils/mediaSources.d.ts.map +1 -1
  69. package/lib/utils/mediaSources.js +1 -3
  70. package/lib/utils/types.d.ts.map +1 -1
  71. package/lib/version.js +2 -2
  72. package/package.json +2 -2
  73. package/src/Player.ts +10 -10
  74. package/src/__tests__/Player.test.ts +33 -10
  75. package/src/index.core.ts +9 -1
  76. package/src/index.plugins.ts +35 -35
  77. package/src/playback/BasePlayback.ts +1 -1
  78. package/src/playback/__tests__/HTML5Video.test.ts +10 -4
  79. package/src/playback/dash-playback/__tests__/DashPlayback.test.ts +10 -38
  80. package/src/playback/hls-playback/__tests__/HlsPlayback.test.ts +12 -45
  81. package/src/playback/types.ts +0 -1
  82. package/src/playback.types.ts +1 -2
  83. package/src/plugins/audio-selector/AudioTracks.ts +1 -1
  84. package/src/plugins/audio-selector/__tests__/AudioTracks.test.ts +30 -11
  85. package/src/plugins/bottom-gear/BottomGear.ts +3 -2
  86. package/src/plugins/clappr-nerd-stats/NerdStats.ts +1 -1
  87. package/src/plugins/clappr-nerd-stats/speedtest/index.ts +104 -82
  88. package/src/plugins/clappr-nerd-stats/speedtest/types.ts +3 -3
  89. package/src/plugins/clappr-nerd-stats/utils.ts +2 -2
  90. package/src/plugins/clappr-stats/__tests__/ClapprStats.test.ts +30 -18
  91. package/src/plugins/clips/utils.ts +5 -1
  92. package/src/plugins/cmcd-config/CmcdConfig.ts +1 -1
  93. package/src/plugins/error-screen/__tests__/ErrorScreen.test.ts +21 -15
  94. package/src/plugins/favicon/Favicon.ts +73 -49
  95. package/src/plugins/google-analytics/GoogleAnalytics.ts +93 -58
  96. package/src/plugins/kibo/index.ts +183 -109
  97. package/src/plugins/level-selector/QualityLevels.ts +2 -2
  98. package/src/plugins/logo/Logo.ts +134 -105
  99. package/src/plugins/logo/utils/index.ts +27 -20
  100. package/src/plugins/media-control/MediaControl.ts +12 -6
  101. package/src/plugins/multi-camera/MultiCamera.ts +218 -157
  102. package/src/plugins/picture-in-picture/PictureInPicture.ts +41 -37
  103. package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts +25 -11
  104. package/src/plugins/poster/__tests__/Poster.test.ts +8 -9
  105. package/src/plugins/share/Share.ts +85 -60
  106. package/src/plugins/skip-time/SkipTime.ts +5 -1
  107. package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts +8 -5
  108. package/src/plugins/subtitles/ClosedCaptions.ts +7 -5
  109. package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts +0 -1
  110. package/src/plugins/thumbnails/Thumbnails.ts +22 -21
  111. package/src/plugins/thumbnails/__tests__/Thumbnails.test.ts +14 -7
  112. package/src/plugins/thumbnails/utils.ts +3 -1
  113. package/src/plugins/typings/globals.d.ts +7 -7
  114. package/src/plugins/typings/workers.d.ts +3 -3
  115. package/src/plugins/utils/fullscreen.ts +2 -2
  116. package/src/plugins/utils.ts +17 -13
  117. package/src/plugins/vast-ads/VastAds.ts +4 -5
  118. package/src/plugins/vast-ads/loaderxml.ts +142 -101
  119. package/src/plugins/vast-ads/roll.ts +381 -284
  120. package/src/plugins/vast-ads/rollmanager.ts +214 -170
  121. package/src/plugins/vast-ads/sctemanager.ts +66 -48
  122. package/src/plugins/vast-ads/types.ts +15 -9
  123. package/src/plugins/vast-ads/urlhandler.ts +18 -13
  124. package/src/plugins/vast-ads/xmlhttprequest.ts +25 -20
  125. package/src/plugins/vast-ads/xmlmerge.ts +42 -32
  126. package/src/plugins/video360/VRControls.js +50 -42
  127. package/src/plugins/video360/VREffect.js +298 -206
  128. package/src/plugins/video360/Video360.js +553 -423
  129. package/src/plugins/video360/orbit-oriention-controls.js +526 -421
  130. package/src/plugins/video360/utils.js +18 -18
  131. package/src/types.ts +5 -3
  132. package/src/typings/@clappr/core/error_mixin.d.ts +9 -9
  133. package/src/typings/@clappr/core/index.d.ts +1 -3
  134. package/src/typings/@clappr/core/playback.d.ts +3 -3
  135. package/src/typings/@clappr/index.d.ts +1 -1
  136. package/src/typings/globals.d.ts +15 -15
  137. package/src/utils/__tests__/mediaSources.test.ts +42 -26
  138. package/src/utils/clickaway.ts +24 -24
  139. package/src/utils/errors.ts +2 -2
  140. package/src/utils/mediaSources.ts +5 -4
  141. package/src/utils/types.ts +1 -1
  142. package/src/version.ts +2 -2
  143. package/tsconfig.tsbuildinfo +1 -1
package/dist/core.js CHANGED
@@ -1,4 +1,4 @@
1
- const APP_NAME = "gplayer";
1
+ const APP_NAME = '_';
2
2
  class DebuggerWrapper {
3
3
  writer;
4
4
  namespace;
@@ -15,19 +15,19 @@ class DebuggerWrapper {
15
15
  this.currentWriter = nullWriter;
16
16
  }
17
17
  write = (m, ...args) => {
18
- const tokens = args.map((_) => "%s");
19
- if (typeof m === "string" || args.length > 0) {
20
- tokens.unshift("%s");
18
+ const tokens = args.map((_) => '%s');
19
+ if (typeof m === 'string' || args.length > 0) {
20
+ tokens.unshift('%s');
21
21
  }
22
- this.currentWriter(`${this.namespace}: ${tokens.join(' ')}`, m, ...args.map(a => JSON.stringify(a)));
22
+ this.currentWriter(`${this.namespace}: ${tokens.join(' ')}`, m, ...args.map((a) => JSON.stringify(a)));
23
23
  };
24
24
  }
25
25
  const currentPatterns = [];
26
26
  function parsePattern(pattern) {
27
- if (pattern === "*") {
27
+ if (pattern === '*') {
28
28
  return /.?/;
29
29
  }
30
- return new RegExp("^" + pattern.replace(/\*/g, "[@\\w-]+"), "i");
30
+ return new RegExp('^' + pattern.replace(/\*/g, '[@\\w-]+'), 'i');
31
31
  }
32
32
  function pass(namespace) {
33
33
  return currentPatterns.some((p) => p.test(namespace));
@@ -43,8 +43,8 @@ let Logger$1 = class Logger {
43
43
  error;
44
44
  debug;
45
45
  static items = [];
46
- constructor(namespace, appName = APP_NAME) {
47
- const ns = namespace ? `:${namespace}` : "";
46
+ constructor(appName = APP_NAME, namespace = '') {
47
+ const ns = namespace ? `:${namespace}` : '';
48
48
  const info = new DebuggerWrapper(console.info.bind(console), `${appName}:INFO${ns}`, pass(namespace));
49
49
  this.info = info.write;
50
50
  const warn = new DebuggerWrapper(console.warn.bind(console), `${appName}:WARN${ns}`, pass(namespace));
@@ -62,7 +62,7 @@ let Logger$1 = class Logger {
62
62
  * @param patterns - comma-separated list of patterns, can contain '*' as a wildcard
63
63
  */
64
64
  static enable(patterns) {
65
- currentPatterns.splice(0, currentPatterns.length, ...patterns.split(",").filter(Boolean).map(parsePattern));
65
+ currentPatterns.splice(0, currentPatterns.length, ...patterns.split(',').filter(Boolean).map(parsePattern));
66
66
  Logger.toggleItems();
67
67
  }
68
68
  static disable() {
@@ -80,14 +80,35 @@ let Logger$1 = class Logger {
80
80
  }
81
81
  };
82
82
 
83
+ /**
84
+ * A tracer that pushes a record through a chain of tracers
85
+ * @beta
86
+ */
87
+ class ChainedTracer {
88
+ tracers;
89
+ constructor(tracers) {
90
+ this.tracers = tracers;
91
+ }
92
+ reportError(e) {
93
+ for (const tracer of this.tracers) {
94
+ tracer.reportError(e);
95
+ }
96
+ }
97
+ trace(msg, data) {
98
+ for (const tracer of this.tracers) {
99
+ tracer.trace(msg, data);
100
+ }
101
+ }
102
+ }
103
+
83
104
  /**
84
105
  * A tracer that logs to the console
85
106
  * @public
86
107
  */
87
108
  class LogTracer {
88
109
  logger;
89
- constructor(ns = "") {
90
- this.logger = new Logger$1(ns);
110
+ constructor(appName = '') {
111
+ this.logger = new Logger$1(appName);
91
112
  }
92
113
  reportError(e) {
93
114
  this.logger.error(e);
@@ -96,19 +117,6 @@ class LogTracer {
96
117
  this.logger.debug(msg, data);
97
118
  }
98
119
  }
99
- // export class LogTracer implements Tracer {
100
- // private tags: Record<string, TagValue> = {};
101
- // reportError(e: Error) {
102
- // logger.error(e, this.tags);
103
- // }
104
- // setTag(name: string, value: TagValue) {
105
- // this.tags[name] = value;
106
- // }
107
- // trace(msg: string, data?: Record<string, unknown>) {
108
- // const fullData = Object.assign({}, this.tags, data);
109
- // logger.debug(msg, fullData);
110
- // }
111
- // }
112
120
 
113
121
  /**
114
122
  * @beta
@@ -125,8 +133,8 @@ class SentryTracer {
125
133
  }
126
134
  trace(message, data) {
127
135
  this.scope.addBreadcrumb({
128
- type: "default",
129
- level: "info",
136
+ type: 'default',
137
+ level: 'info',
130
138
  message,
131
139
  data,
132
140
  });
@@ -12621,9 +12629,7 @@ function buildMediaSourcesList(sources, priorityTransport = 'dash') {
12621
12629
  }
12622
12630
  const [preferred, rest] = sources.reduce(([preferred, rest], item) => {
12623
12631
  for (const p of playbacks) {
12624
- if ([
12625
- 'html5_audio', 'html_img', 'no_op'
12626
- ].includes(p.prototype.name)) {
12632
+ if (['html5_audio', 'html_img', 'no_op'].includes(p.prototype.name)) {
12627
12633
  continue;
12628
12634
  }
12629
12635
  const canPlay = p.canPlay(item.source, item.mimeType);
@@ -51326,7 +51332,7 @@ class Player {
51326
51332
  }
51327
51333
  }
51328
51334
 
51329
- var version$1 = "2.28.25";
51335
+ var version$1 = "2.28.26";
51330
51336
 
51331
51337
  var packages = {
51332
51338
  "node_modules/@clappr/core": {
@@ -51350,4 +51356,4 @@ function version() {
51350
51356
  };
51351
51357
  }
51352
51358
 
51353
- export { LogTracer, Logger$1 as Logger, PlaybackErrorCode, Player, PlayerEvent, SentryTracer, reportError, setTracer, trace, version };
51359
+ export { ChainedTracer, LogTracer, Logger$1 as Logger, PlaybackErrorCode, Player, PlayerEvent, SentryTracer, reportError, setTracer, trace, version };
package/dist/index.css CHANGED
@@ -122,6 +122,55 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }.big-mute-icon-wrapper[data-big-mute] {
126
+ position: absolute;
127
+ z-index: 9998;
128
+ background-color: transparent;
129
+ display: flex;
130
+ justify-content: center;
131
+ width: 100%;
132
+ height: calc(100% - 50px);
133
+ margin: 0 auto;
134
+ opacity: 0.75;
135
+ transition: opacity 0.1s ease;
136
+ pointer-events: auto;
137
+ }
138
+ .big-mute-icon-wrapper[data-big-mute].hide {
139
+ display: none;
140
+ }
141
+ .big-mute-icon-wrapper[data-big-mute]:hover {
142
+ cursor: pointer;
143
+ }
144
+
145
+ .big-mute-icon[data-big-mute-icon] {
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ align-self: center;
150
+ width: 120px;
151
+ height: 120px;
152
+ border: 2px solid white;
153
+ border-radius: 50%;
154
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
155
+ filter: alpha(opacity=60);
156
+ opacity: 1;
157
+ box-shadow: 0 0 1px 0 white;
158
+ background: rgba(240, 243, 247, 0.9411764706);
159
+ z-index: 10000;
160
+ }
161
+ .big-mute-icon[data-big-mute-icon] svg {
162
+ margin-left: 5px;
163
+ width: 80px;
164
+ height: 80px;
165
+ }
166
+ .big-mute-icon[data-big-mute-icon] svg path {
167
+ fill: #1f1e1e !important;
168
+ }
169
+ .big-mute-icon[data-big-mute-icon]:hover {
170
+ background: rgba(240, 243, 247, 0.8784313725);
171
+ }
172
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
173
+ fill: #151515 !important;
125
174
  }.media-control-skin-1 .media-control-item.media-control-gear {
126
175
  order: 99;
127
176
  }
@@ -230,55 +279,6 @@
230
279
  }
231
280
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
232
281
  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;
245
- }
246
- .big-mute-icon-wrapper[data-big-mute].hide {
247
- display: none;
248
- }
249
- .big-mute-icon-wrapper[data-big-mute]:hover {
250
- cursor: pointer;
251
- }
252
-
253
- .big-mute-icon[data-big-mute-icon] {
254
- display: flex;
255
- 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;
273
- }
274
- .big-mute-icon[data-big-mute-icon] svg path {
275
- fill: #1f1e1e !important;
276
- }
277
- .big-mute-icon[data-big-mute-icon]:hover {
278
- background: rgba(240, 243, 247, 0.8784313725);
279
- }
280
- .big-mute-icon[data-big-mute-icon]:hover svg path {
281
- fill: #151515 !important;
282
282
  }:root {
283
283
  --primary-background-color: #000;
284
284
  --secondary-background-color: #262626;
@@ -666,6 +666,76 @@
666
666
  }
667
667
  .gplayer-mc-clips .gplayer-mc-clips-text.compact {
668
668
  max-width: 100px;
669
+ }div.player-error-screen, [data-player] div.player-error-screen {
670
+ color: #CCCACA;
671
+ position: absolute;
672
+ top: 0;
673
+ height: 100%;
674
+ width: 100%;
675
+ background-color: rgba(0, 0, 0, 0.7);
676
+ z-index: 2000;
677
+ display: flex;
678
+ flex-direction: column;
679
+ justify-content: center;
680
+ }
681
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
682
+ font-size: 14px;
683
+ color: #CCCACA;
684
+ margin-top: 45px;
685
+ }
686
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
687
+ font-weight: bold;
688
+ line-height: 30px;
689
+ font-size: 18px;
690
+ }
691
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
692
+ width: 90%;
693
+ margin: 0 auto;
694
+ }
695
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
696
+ font-size: 13px;
697
+ margin-top: 15px;
698
+ }
699
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
700
+ cursor: pointer;
701
+ width: 30px;
702
+ margin: 15px auto 0;
703
+ }.context-menu {
704
+ z-index: 999;
705
+ position: absolute;
706
+ top: 0;
707
+ left: 0;
708
+ text-align: center;
709
+ }
710
+ .context-menu .context-menu-list {
711
+ font-family: "Proxima Nova", sans-serif;
712
+ font-size: 12px;
713
+ line-height: 12px;
714
+ list-style-type: none;
715
+ text-align: left;
716
+ padding: 5px;
717
+ margin-left: auto;
718
+ margin-right: auto;
719
+ background-color: rgba(0, 0, 0, 0.75);
720
+ border: 1px solid #666;
721
+ border-radius: 4px;
722
+ }
723
+ .context-menu .context-menu-list-item button {
724
+ border: none;
725
+ background-color: transparent;
726
+ padding: 0;
727
+ color: white;
728
+ display: flex;
729
+ gap: 8px;
730
+ align-items: center;
731
+ justify-content: center;
732
+ cursor: pointer;
733
+ padding: 5px;
734
+ width: 100%;
735
+ }
736
+ .context-menu .context-menu-list-item_icon {
737
+ width: 20px;
738
+ height: 20px;
669
739
  }.dvr-controls {
670
740
  --disabled-opacity: 0.3;
671
741
  --circle-radius: 5px;
@@ -723,76 +793,6 @@
723
793
  .dvr-controls .live-button:hover {
724
794
  opacity: 1;
725
795
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
726
- }.context-menu {
727
- z-index: 999;
728
- position: absolute;
729
- top: 0;
730
- left: 0;
731
- text-align: center;
732
- }
733
- .context-menu .context-menu-list {
734
- font-family: "Proxima Nova", sans-serif;
735
- font-size: 12px;
736
- line-height: 12px;
737
- list-style-type: none;
738
- text-align: left;
739
- padding: 5px;
740
- margin-left: auto;
741
- margin-right: auto;
742
- background-color: rgba(0, 0, 0, 0.75);
743
- border: 1px solid #666;
744
- border-radius: 4px;
745
- }
746
- .context-menu .context-menu-list-item button {
747
- border: none;
748
- background-color: transparent;
749
- padding: 0;
750
- color: white;
751
- display: flex;
752
- gap: 8px;
753
- align-items: center;
754
- justify-content: center;
755
- cursor: pointer;
756
- padding: 5px;
757
- width: 100%;
758
- }
759
- .context-menu .context-menu-list-item_icon {
760
- width: 20px;
761
- height: 20px;
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;
773
- }
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;
778
- }
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;
783
- }
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;
787
- }
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;
791
- }
792
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
793
- cursor: pointer;
794
- width: 30px;
795
- margin: 15px auto 0;
796
796
  }[data-player] {
797
797
  --bottom-panel: 40px;
798
798
  }
@@ -1549,14 +1549,12 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1549
1549
  }
1550
1550
  .multicamera[data-multicamera] li.current a {
1551
1551
  color: #f00;
1552
- }.media-control-skin-1 .media-control-item.media-control-pip {
1553
- order: 95;
1554
- }
1555
- .media-control-skin-1 .media-control-item.media-control-pip button {
1556
- height: 20px;
1552
+ }.quality-levels li.disabled {
1553
+ opacity: 0.5;
1554
+ pointer-events: none;
1557
1555
  }
1558
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
1559
- height: 20px;
1556
+ .quality-levels li.current {
1557
+ background-color: #000;
1560
1558
  }.player-poster {
1561
1559
  display: flex;
1562
1560
  justify-content: center;
@@ -1591,12 +1589,85 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1591
1589
  }
1592
1590
  .player-poster .play-wrapper svg path {
1593
1591
  fill: #fff;
1594
- }.quality-levels li.disabled {
1595
- opacity: 0.5;
1596
- pointer-events: none;
1592
+ }.media-control-skin-1 .media-control-item.media-control-pip {
1593
+ order: 95;
1597
1594
  }
1598
- .quality-levels li.current {
1599
- background-color: #000;
1595
+ .media-control-skin-1 .media-control-item.media-control-pip button {
1596
+ height: 20px;
1597
+ }
1598
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
1599
+ height: 20px;
1600
+ }.seek-time {
1601
+ position: absolute;
1602
+ white-space: nowrap;
1603
+ height: 20px;
1604
+ line-height: 20px;
1605
+ font-size: 0;
1606
+ left: -100%;
1607
+ bottom: 55px;
1608
+ background-color: rgba(2, 2, 2, 0.5);
1609
+ z-index: 9999;
1610
+ transition: opacity 0.1s ease;
1611
+ }
1612
+ .seek-time.hidden {
1613
+ opacity: 0;
1614
+ }
1615
+ .seek-time .seek-time__pos {
1616
+ display: inline-block;
1617
+ color: white;
1618
+ font-size: 10px;
1619
+ padding-left: 7px;
1620
+ padding-right: 7px;
1621
+ vertical-align: top;
1622
+ }
1623
+ .seek-time .seek-time__duration {
1624
+ display: inline-block;
1625
+ color: rgba(255, 255, 255, 0.5);
1626
+ font-size: 10px;
1627
+ padding-right: 7px;
1628
+ vertical-align: top;
1629
+ }
1630
+ .seek-time .seek-time__duration::before {
1631
+ content: "|";
1632
+ margin-right: 7px;
1633
+ }.spinner-three-bounce[data-spinner] {
1634
+ position: absolute;
1635
+ width: 70px;
1636
+ text-align: center;
1637
+ z-index: 999;
1638
+ left: 0;
1639
+ right: 0;
1640
+ margin: 0 auto;
1641
+ margin-left: auto;
1642
+ margin-right: auto;
1643
+ /* center vertically */
1644
+ top: 50%;
1645
+ transform: translateY(-50%);
1646
+ }
1647
+ .spinner-three-bounce[data-spinner] > div {
1648
+ width: 18px;
1649
+ height: 18px;
1650
+ background-color: #FFF;
1651
+ border-radius: 100%;
1652
+ display: inline-block;
1653
+ animation: bouncedelay 1.4s infinite ease-in-out;
1654
+ /* Prevent first frame from flickering when animation starts */
1655
+ animation-fill-mode: both;
1656
+ }
1657
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1658
+ animation-delay: -0.32s;
1659
+ }
1660
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1661
+ animation-delay: -0.16s;
1662
+ }
1663
+
1664
+ @keyframes bouncedelay {
1665
+ 0%, 80%, 100% {
1666
+ transform: scale(0);
1667
+ }
1668
+ 40% {
1669
+ transform: scale(1);
1670
+ }
1600
1671
  }.share_plugin[data-share] {
1601
1672
  pointer-events: auto;
1602
1673
  z-index: 5;
@@ -1680,98 +1751,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1680
1751
  display: inline-block;
1681
1752
  margin-right: 5px;
1682
1753
  cursor: pointer;
1683
- }.seek-time {
1684
- position: absolute;
1685
- white-space: nowrap;
1686
- height: 20px;
1687
- line-height: 20px;
1688
- font-size: 0;
1689
- left: -100%;
1690
- bottom: 55px;
1691
- background-color: rgba(2, 2, 2, 0.5);
1692
- z-index: 9999;
1693
- transition: opacity 0.1s ease;
1694
- }
1695
- .seek-time.hidden {
1696
- opacity: 0;
1697
- }
1698
- .seek-time .seek-time__pos {
1699
- display: inline-block;
1700
- color: white;
1701
- font-size: 10px;
1702
- padding-left: 7px;
1703
- padding-right: 7px;
1704
- vertical-align: top;
1705
- }
1706
- .seek-time .seek-time__duration {
1707
- display: inline-block;
1708
- color: rgba(255, 255, 255, 0.5);
1709
- font-size: 10px;
1710
- padding-right: 7px;
1711
- vertical-align: top;
1712
- }
1713
- .seek-time .seek-time__duration::before {
1714
- content: "|";
1715
- margin-right: 7px;
1716
- }.spinner-three-bounce[data-spinner] {
1717
- position: absolute;
1718
- width: 70px;
1719
- text-align: center;
1720
- z-index: 999;
1721
- left: 0;
1722
- right: 0;
1723
- margin: 0 auto;
1724
- margin-left: auto;
1725
- margin-right: auto;
1726
- /* center vertically */
1727
- top: 50%;
1728
- transform: translateY(-50%);
1729
- }
1730
- .spinner-three-bounce[data-spinner] > div {
1731
- width: 18px;
1732
- height: 18px;
1733
- background-color: #FFF;
1734
- border-radius: 100%;
1735
- display: inline-block;
1736
- animation: bouncedelay 1.4s infinite ease-in-out;
1737
- /* Prevent first frame from flickering when animation starts */
1738
- animation-fill-mode: both;
1739
- }
1740
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1741
- animation-delay: -0.32s;
1742
- }
1743
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1744
- animation-delay: -0.16s;
1745
- }
1746
-
1747
- @keyframes bouncedelay {
1748
- 0%, 80%, 100% {
1749
- transform: scale(0);
1750
- }
1751
- 40% {
1752
- transform: scale(1);
1753
- }
1754
- }.container-with-poster-clickable .mc-skip-time {
1755
- height: 0;
1756
- }
1757
-
1758
- .mc-skip-time {
1759
- position: absolute;
1760
- width: 100%;
1761
- height: calc(100% - 50px);
1762
- z-index: 9998;
1763
- background-color: transparent;
1764
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1765
- }
1766
- .mc-skip-time .skip-container {
1767
- width: 100%;
1768
- height: 100%;
1769
- display: flex;
1770
- justify-content: space-between;
1771
- }
1772
- .mc-skip-time .skip-container .skip-item {
1773
- flex: 1 0 0px;
1774
- height: 100%;
1775
1754
  }.media-control-skin-1 .media-control-cc button.media-control-button {
1776
1755
  display: flex;
1777
1756
  justify-content: center;
@@ -1829,6 +1808,27 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1829
1808
  background-color: rgba(0, 0, 0, 0.4);
1830
1809
  color: white;
1831
1810
  display: inline-block;
1811
+ }.container-with-poster-clickable .mc-skip-time {
1812
+ height: 0;
1813
+ }
1814
+
1815
+ .mc-skip-time {
1816
+ position: absolute;
1817
+ width: 100%;
1818
+ height: calc(100% - 50px);
1819
+ z-index: 9998;
1820
+ background-color: transparent;
1821
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1822
+ }
1823
+ .mc-skip-time .skip-container {
1824
+ width: 100%;
1825
+ height: 100%;
1826
+ display: flex;
1827
+ justify-content: space-between;
1828
+ }
1829
+ .mc-skip-time .skip-container .skip-item {
1830
+ flex: 1 0 0px;
1831
+ height: 100%;
1832
1832
  }.scrub-thumbnails {
1833
1833
  position: absolute;
1834
1834
  bottom: 52px;