@gcorevideo/player 2.20.4 → 2.20.6

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 (63) hide show
  1. package/assets/error-screen/error_screen.ejs +3 -1
  2. package/dist/core.js +407 -205
  3. package/dist/index.css +1285 -1285
  4. package/dist/index.js +550 -386
  5. package/dist/plugins/index.css +966 -966
  6. package/dist/plugins/index.js +121 -162
  7. package/lib/Player.d.ts.map +1 -1
  8. package/lib/Player.js +2 -2
  9. package/lib/playback/BasePlayback.d.ts +11 -0
  10. package/lib/playback/BasePlayback.d.ts.map +1 -0
  11. package/lib/playback/BasePlayback.js +33 -0
  12. package/lib/playback/dash-playback/DashPlayback.d.ts +3 -2
  13. package/lib/playback/dash-playback/DashPlayback.d.ts.map +1 -1
  14. package/lib/playback/dash-playback/DashPlayback.js +7 -7
  15. package/lib/playback/hls-playback/HlsPlayback.d.ts +2 -2
  16. package/lib/playback/hls-playback/HlsPlayback.d.ts.map +1 -1
  17. package/lib/playback/hls-playback/HlsPlayback.js +8 -5
  18. package/lib/playback/utils.d.ts +2 -0
  19. package/lib/playback/utils.d.ts.map +1 -0
  20. package/lib/playback/utils.js +1 -0
  21. package/lib/playback.types.d.ts +10 -3
  22. package/lib/playback.types.d.ts.map +1 -1
  23. package/lib/playback.types.js +3 -3
  24. package/lib/plugins/context-menu/ContextMenu.d.ts.map +1 -1
  25. package/lib/plugins/context-menu/ContextMenu.js +1 -2
  26. package/lib/plugins/error-screen/ErrorScreen.d.ts +39 -24
  27. package/lib/plugins/error-screen/ErrorScreen.d.ts.map +1 -1
  28. package/lib/plugins/error-screen/ErrorScreen.js +69 -136
  29. package/lib/plugins/media-control/MediaControl.d.ts +1 -1
  30. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  31. package/lib/plugins/media-control/MediaControl.js +16 -8
  32. package/lib/plugins/multi-camera/MultiCamera.d.ts.map +1 -1
  33. package/lib/plugins/multi-camera/MultiCamera.js +2 -3
  34. package/lib/plugins/poster/Poster.js +1 -1
  35. package/lib/plugins/source-controller/SourceController.d.ts +2 -1
  36. package/lib/plugins/source-controller/SourceController.d.ts.map +1 -1
  37. package/lib/plugins/source-controller/SourceController.js +12 -6
  38. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts +2 -1
  39. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts.map +1 -1
  40. package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.js +19 -3
  41. package/lib/testUtils.d.ts +66 -2
  42. package/lib/testUtils.d.ts.map +1 -1
  43. package/lib/testUtils.js +95 -2
  44. package/package.json +2 -2
  45. package/src/Player.ts +2 -2
  46. package/src/__tests__/Player.test.ts +2 -3
  47. package/src/playback/BasePlayback.ts +41 -0
  48. package/src/playback/dash-playback/DashPlayback.ts +12 -17
  49. package/src/playback/hls-playback/HlsPlayback.ts +9 -7
  50. package/src/playback.types.ts +11 -3
  51. package/src/plugins/context-menu/ContextMenu.ts +1 -2
  52. package/src/plugins/error-screen/ErrorScreen.ts +120 -195
  53. package/src/plugins/error-screen/__tests__/ErrorScreen.test.ts +113 -0
  54. package/src/plugins/error-screen/__tests__/__snapshots__/ErrorScreen.test.ts.snap +20 -0
  55. package/src/plugins/level-selector/__tests__/LevelSelector.test.ts +32 -57
  56. package/src/plugins/media-control/MediaControl.ts +16 -8
  57. package/src/plugins/multi-camera/MultiCamera.ts +2 -3
  58. package/src/plugins/poster/Poster.ts +1 -1
  59. package/src/plugins/source-controller/SourceController.ts +20 -14
  60. package/src/plugins/source-controller/__tests__/SourceController.test.ts +29 -46
  61. package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts +20 -3
  62. package/src/testUtils.ts +100 -3
  63. package/tsconfig.tsbuildinfo +1 -1
package/dist/index.css CHANGED
@@ -126,589 +126,302 @@
126
126
  outline: none !important;
127
127
  }
128
128
 
129
- .audio_selector[data-track-selector] {
130
- float: right;
131
- margin-top: 4px;
132
- position: relative;
133
- width: 50px;
134
- font-family: Roboto, "Open Sans", Arial, sans-serif;
135
- }
136
- .audio_selector[data-track-selector] button {
137
- background-color: transparent;
138
- color: #fff;
139
- -webkit-font-smoothing: antialiased;
140
- border: none;
141
- font-size: 14px;
142
- cursor: pointer;
143
- }
144
- .audio_selector[data-track-selector] button .audio-text {
145
- text-overflow: ellipsis;
146
- overflow: hidden;
147
- white-space: nowrap;
148
- max-width: 100px;
149
- background-color: transparent;
150
- -webkit-font-smoothing: antialiased;
151
- border: none;
129
+ .gear-wrapper .go-back {
130
+ font-weight: 600;
152
131
  font-size: 14px;
153
- cursor: pointer;
154
- padding-top: 5px;
155
- }
156
- .audio_selector[data-track-selector] button:hover {
157
- color: #c9c9c9;
132
+ line-height: 20px;
133
+ width: 100%;
134
+ text-align: left;
135
+ padding: 12px;
158
136
  }
159
- .audio_selector[data-track-selector] button.changing {
160
- animation: pulse 0.5s infinite alternate;
137
+ .gear-wrapper .go-back .arrow-left-icon {
138
+ float: left;
139
+ padding-top: 2px;
140
+ padding-right: 2px;
161
141
  }
162
- .audio_selector[data-track-selector] button span.audio-arrow {
163
- width: 9px;
164
- height: 6px;
165
- margin-top: 11px;
166
- margin-left: 5px;
142
+ .gear-wrapper .go-back .arrow-left-icon svg {
143
+ height: 16px;
167
144
  }
168
- .audio_selector[data-track-selector] > ul {
169
- max-width: 114px;
145
+ .gear-wrapper ul.gear-sub-menu {
146
+ width: 100%;
170
147
  list-style-type: none;
171
- position: absolute;
172
- bottom: 25px;
173
- border: 1px solid black;
174
- display: none;
175
- background-color: #e6e6e6;
148
+ background-color: transparent;
149
+ min-width: 60px;
150
+ border-top: 2px solid rgb(36, 36, 36);
176
151
  }
177
- .audio_selector[data-track-selector] li {
178
- font-size: 10px;
152
+ .gear-wrapper ul.gear-sub-menu li {
153
+ font-size: 12px;
154
+ text-align: left;
179
155
  }
180
- .audio_selector[data-track-selector] li[data-title] {
156
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
181
157
  background-color: #c3c2c2;
182
158
  padding: 5px;
183
159
  }
184
- .audio_selector[data-track-selector] li a {
185
- color: #444;
186
- padding: 2px 10px;
160
+ .gear-wrapper ul.gear-sub-menu li a {
187
161
  display: block;
188
162
  text-decoration: none;
189
- text-overflow: ellipsis;
190
- overflow: hidden;
191
- white-space: nowrap;
163
+ height: 32px;
164
+ padding: 5px 10px;
165
+ line-height: 22px;
166
+ color: #fffffe;
192
167
  }
193
- .audio_selector[data-track-selector] li a:hover {
194
- background-color: #555;
168
+ .gear-wrapper ul.gear-sub-menu li a:hover {
195
169
  color: white;
170
+ background-color: rgba(0, 0, 0, 0.4);
196
171
  }
197
- .audio_selector[data-track-selector] li a:hover a {
172
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
198
173
  color: white;
199
174
  text-decoration: none;
200
175
  }
201
- .audio_selector[data-track-selector] li.current a {
202
- color: #f00;
176
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
177
+ width: 30px;
178
+ height: 20px;
179
+ float: left;
180
+ display: block;
203
181
  }
204
-
205
- .audio_selector[data-track-selector] {
206
- width: auto;
207
- margin-top: 7px;
208
- margin-right: 20px;
182
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
183
+ display: none;
209
184
  }
210
- .audio_selector[data-track-selector] button[data-level-selector-button],
211
- .audio_selector[data-track-selector] button[data-track-selector-button] {
212
- display: flex;
213
- justify-content: center;
214
- padding: 0;
185
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
186
+ display: inline;
215
187
  }
216
- .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
217
- .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
218
- color: white;
188
+ .gear-wrapper svg {
189
+ height: 20px;
190
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
191
+ float: right;
192
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
219
193
  }
220
- .audio_selector[data-track-selector] ul {
221
- background-color: rgba(74, 74, 74, 0.6);
222
- border: none;
223
- min-width: 60px;
224
- transform: rotate(180deg);
194
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
195
+ height: 40px;
196
+ width: 40px;
197
+ padding-right: 20px;
198
+ }
199
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
200
+ height: 20px;
201
+ }
202
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
203
+ position: absolute;
204
+ right: 16px;
205
+ bottom: 52px;
206
+ display: none;
207
+ width: 250px;
208
+ min-height: 48px;
209
+ z-index: 9999;
225
210
  border-radius: 4px;
226
- bottom: 40px;
227
- right: -2px;
228
211
  }
229
- .audio_selector[data-track-selector] ul li {
230
- transform: rotate(-180deg);
231
- font-size: 16px;
232
- text-align: right;
233
- height: 30px;
212
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
213
+ padding: 8px 0;
234
214
  }
235
- .audio_selector[data-track-selector] ul li a {
236
- height: 30px;
237
- padding: 5px 10px;
238
- color: #fffffe;
215
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
216
+ float: left;
217
+ margin-right: 10px;
239
218
  }
240
- .audio_selector[data-track-selector] ul li a:hover {
241
- background-color: rgba(0, 0, 0, 0.4);
219
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
220
+ margin: 0;
221
+ text-align: left;
222
+ line-height: 22px;
223
+ padding: 5px 14px;
224
+ width: 250px;
225
+ font-size: 12px;
242
226
  }
243
- .audio_selector[data-track-selector] ul li:first-child a {
244
- border-bottom-left-radius: 4px;
245
- border-bottom-right-radius: 4px;
227
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
228
+ float: right;
229
+ margin-right: -14px;
246
230
  }
247
- .audio_selector[data-track-selector] ul li:last-child a {
248
- border-top-left-radius: 4px;
249
- border-top-right-radius: 4px;
231
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
232
+ float: right;
233
+ margin-right: 8px;
234
+ }
235
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
236
+ height: 20px;
237
+ }:root {
238
+ --primary-background-color: #000;
239
+ --secondary-background-color: #262626;
240
+ --primary-text-color: #fff;
241
+ --secondary-text-color: #fff4f2;
242
+ --hover-text-color: #f9b090;
243
+ --speedtest-red: #df564d;
244
+ --speedtest-orange: #df934d;
245
+ --speedtest-yellow: #dfd04d;
246
+ --speedtest-light-green: #c2df4d;
247
+ --speedtest-green: #73df4d;
250
248
  }
251
249
 
252
- @keyframes pulse {
253
- 0% {
254
- color: #fff;
255
- }
256
- 50% {
257
- color: #ff0101;
258
- }
259
- 100% {
260
- color: #B80000;
261
- }
262
- }div.player-error-screen, [data-player] div.player-error-screen {
263
- color: #CCCACA;
250
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box {
251
+ position: absolute;
252
+ display: inline-block;
253
+ bottom: 52px;
254
+ right: 16px;
255
+ padding: 0 10px 12px;
256
+ margin: 0;
257
+ line-height: 20px;
258
+ font-size: 12px;
259
+ font-weight: 500;
260
+ background: var(--primary-background-color);
261
+ color: #fff;
262
+ z-index: 20000;
263
+ overflow: auto;
264
+ max-height: calc(100vh - 60px);
265
+ max-width: calc(100vw - 10px);
266
+ }
267
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top {
264
268
  position: absolute;
265
269
  top: 0;
266
- height: 100%;
270
+ left: 0;
271
+ z-index: 99990;
267
272
  width: 100%;
268
- background-color: rgba(0, 0, 0, 0.7);
269
- z-index: 2000;
270
- display: flex;
271
- flex-direction: column;
272
- justify-content: center;
273
+ height: 32px;
274
+ background: var(--primary-background-color);
273
275
  }
274
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
275
- font-size: 14px;
276
- color: #CCCACA;
277
- margin-top: 45px;
276
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button {
277
+ float: right;
278
+ margin-right: 12px;
279
+ margin-top: 10px;
280
+ display: block;
281
+ width: 12px;
282
+ height: 12px;
278
283
  }
279
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
280
- font-weight: bold;
281
- line-height: 30px;
282
- font-size: 18px;
284
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button svg path {
285
+ fill: var(--primary-text-color);
283
286
  }
284
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
285
- width: 90%;
286
- margin: 0 auto;
287
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button:hover svg path {
288
+ fill: var(--hover-text-color);
287
289
  }
288
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
289
- font-size: 13px;
290
- margin-top: 15px;
290
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-main {
291
+ overflow: hidden;
292
+ margin-top: 44px;
291
293
  }
292
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
293
- cursor: pointer;
294
- width: 30px;
295
- margin: 15px auto 0;
296
- }.clips.bar-container[data-seekbar] {
297
- clip-path: url("#myClip");
298
- }.dvr-controls[data-dvr-controls] {
299
- display: inline-block;
300
- float: left;
301
- color: #fff;
302
- line-height: 32px;
303
- font-size: 10px;
304
- font-weight: bold;
305
- margin-left: 6px;
306
- }
307
- .dvr-controls[data-dvr-controls] .live-info {
308
- cursor: default;
309
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
310
- text-transform: uppercase;
311
- }
312
- .dvr-controls[data-dvr-controls] .live-info:before {
313
- content: "";
314
- display: inline-block;
315
- position: relative;
316
- width: 7px;
317
- height: 7px;
318
- border-radius: 3.5px;
319
- margin-right: 3.5px;
320
- background-color: #ff0101;
321
- }
322
- .dvr-controls[data-dvr-controls] .live-info.disabled {
323
- opacity: 0.3;
294
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.wide {
295
+ width: 820px;
324
296
  }
325
- .dvr-controls[data-dvr-controls] .live-info.disabled:before {
326
- background-color: #fff;
297
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul, .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box li {
298
+ list-style-type: none;
327
299
  }
328
- .dvr-controls[data-dvr-controls] .live-button {
329
- cursor: pointer;
330
- outline: none;
331
- display: none;
332
- border: 0;
333
- color: #fff;
334
- background-color: transparent;
335
- height: 32px;
336
- padding: 0;
337
- opacity: 0.7;
338
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
339
- text-transform: uppercase;
340
- transition: all 0.1s ease;
300
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul div, .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box li div {
301
+ padding-left: 2px;
302
+ padding-right: 2px;
303
+ background: var(--primary-background-color);
341
304
  }
342
- .dvr-controls[data-dvr-controls] .live-button:before {
343
- content: "";
305
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
344
306
  display: inline-block;
307
+ float: left;
308
+ padding: 5px;
309
+ width: 200px;
310
+ }
311
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li {
345
312
  position: relative;
346
- width: 7px;
347
- height: 7px;
348
- border-radius: 3.5px;
349
- margin-right: 3.5px;
350
- background-color: #fff;
313
+ padding: 0 5px;
314
+ text-align: left;
351
315
  }
352
- .dvr-controls[data-dvr-controls] .live-button:hover {
353
- opacity: 1;
354
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
316
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li.canvas-wrapper {
317
+ padding: 0;
355
318
  }
356
-
357
- .dvr-controls[data-dvr-controls] {
358
- height: 40px;
359
- line-height: 40px;
360
- margin-left: 0;
319
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li.canvas-wrapper canvas {
320
+ width: 100%;
361
321
  }
362
- .dvr-controls[data-dvr-controls] .live-info {
363
- font-size: 14px;
364
- letter-spacing: 0.8px;
365
- font-weight: 500;
366
- color: #fffffe;
367
- margin-left: 21px;
322
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li:nth-child(2n) {
323
+ background: var(--secondary-background-color);
368
324
  }
369
- .dvr-controls[data-dvr-controls] .live-info::before {
370
- width: 10px;
371
- height: 10px;
372
- border-radius: 50%;
373
- margin-right: 8px;
374
- background-color: #ed4f4a;
325
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li:nth-child(2n) div {
326
+ background: var(--secondary-background-color);
375
327
  }
376
- .dvr-controls[data-dvr-controls] .live-button {
377
- height: 40px;
378
- opacity: 1;
328
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li.title {
329
+ text-align: center;
330
+ font-weight: bold;
331
+ padding-bottom: 4px;
379
332
  font-size: 14px;
380
- letter-spacing: 0.8px;
381
- font-weight: 500;
382
- margin-left: 20px;
383
333
  }
384
- .dvr-controls[data-dvr-controls] .live-button::before {
385
- width: 10px;
386
- height: 10px;
387
- border-radius: 50%;
388
- margin-right: 8px;
389
- background-color: #cacaca;
334
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li div {
335
+ margin: 0;
336
+ position: absolute;
337
+ right: 0;
338
+ top: 0;
390
339
  }
391
340
 
392
- .dvr .dvr-controls[data-dvr-controls] .live-info {
393
- display: none;
341
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow {
342
+ width: 250px;
394
343
  }
395
- .dvr .dvr-controls[data-dvr-controls] .live-button {
396
- display: block;
344
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow ul {
345
+ width: 100%;
397
346
  }
398
- .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
399
- background-color: #005aff;
347
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary {
348
+ padding: 0 5px;
349
+ height: auto;
400
350
  }
401
-
402
- .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
403
- background-color: #ff0101;
404
- }.big-mute-icon-wrapper[data-big-mute] {
405
- position: absolute;
406
- z-index: 9998;
407
- background-color: transparent;
408
- display: flex;
409
- justify-content: center;
351
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary-block {
410
352
  width: 100%;
411
- height: calc(100% - 50px);
412
- margin: 0 auto;
413
- opacity: 0.75;
414
- transition: opacity 0.1s ease;
415
- pointer-events: auto;
353
+ flex-direction: column;
416
354
  }
417
- .big-mute-icon-wrapper[data-big-mute].hide {
418
- display: none;
355
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock {
356
+ width: 100%;
419
357
  }
420
- .big-mute-icon-wrapper[data-big-mute]:hover {
421
- cursor: pointer;
358
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock-content {
359
+ width: 100%;
422
360
  }
423
-
424
- .big-mute-icon[data-big-mute-icon] {
425
- display: flex;
426
- align-items: center;
427
- justify-content: center;
428
- align-self: center;
429
- width: 120px;
430
- height: 120px;
431
- border: 2px solid white;
432
- border-radius: 50%;
433
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
434
- filter: alpha(opacity=60);
435
- opacity: 1;
436
- box-shadow: 0 0 1px 0 white;
437
- background: rgba(240, 243, 247, 0.9411764706);
438
- z-index: 10000;
361
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary-header {
362
+ padding-top: 12px;
363
+ height: 38px;
364
+ text-align: center;
439
365
  }
440
- .big-mute-icon[data-big-mute-icon] svg {
441
- margin-left: 5px;
442
- width: 80px;
366
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-quality-header {
367
+ text-align: center;
368
+ }
369
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-footer {
443
370
  height: 80px;
444
371
  }
445
- .big-mute-icon[data-big-mute-icon] svg path {
446
- fill: #1f1e1e !important;
372
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-footer-about-link {
373
+ bottom: 0;
374
+ left: 0;
447
375
  }
448
- .big-mute-icon[data-big-mute-icon]:hover {
449
- background: rgba(240, 243, 247, 0.8784313725);
376
+ .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-footer .speedtest-footer-refresh {
377
+ inset: 50% auto auto 50%;
378
+ transform: translate(-50%, -50%);
450
379
  }
451
- .big-mute-icon[data-big-mute-icon]:hover svg path {
452
- fill: #151515 !important;
453
- }.context-menu {
454
- z-index: 999;
380
+
381
+ .speed-test-button {
382
+ margin: 10px 0 0;
383
+ color: #000;
384
+ }
385
+
386
+ .speed-test {
455
387
  position: absolute;
456
388
  top: 0;
457
389
  left: 0;
458
- text-align: center;
390
+ width: 100%;
391
+ height: 100%;
392
+ z-index: 9999;
459
393
  }
460
- .context-menu .context-menu-list {
461
- font-family: "Proxima Nova", sans-serif;
462
- font-size: 12px;
463
- line-height: 12px;
464
- list-style-type: none;
465
- text-align: left;
466
- padding: 5px;
467
- margin-left: auto;
468
- margin-right: auto;
469
- background-color: rgba(0, 0, 0, 0.75);
470
- border: 1px solid #666;
471
- border-radius: 4px;
394
+ .speed-test .speed-test-header {
395
+ width: 100%;
396
+ height: 32px;
472
397
  }
473
- .context-menu .context-menu-list .context-menu-list-item {
474
- color: white;
475
- padding: 5px;
476
- cursor: pointer;
477
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
398
+ .speed-test .speed-test-header .close-speed-test {
478
399
  float: right;
479
- font-family: Roboto, "Open Sans", Arial, sans-serif;
400
+ margin-right: 5px;
401
+ line-height: 32px;
402
+ cursor: pointer;
403
+ color: var(--primary-text-color);
480
404
  }
481
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
482
- height: 40px;
483
- width: 40px;
484
- padding-right: 20px;
405
+ .speed-test .speed-test-header .close-speed-test:hover {
406
+ color: var(--hover-text-color);
485
407
  }
486
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
487
- height: 20px;
408
+
409
+ .settings-button {
410
+ float: right;
411
+ margin: 0 12px 0 0;
412
+ height: 40px;
413
+ width: 24px;
414
+ border: none;
415
+ padding: 0;
488
416
  }
489
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
417
+
418
+ .settings-options-list {
490
419
  position: absolute;
491
420
  right: 16px;
492
421
  bottom: 52px;
493
- display: none;
422
+ background: var(--primary-background-color);
494
423
  width: 250px;
495
- min-height: 48px;
496
- z-index: 9999;
497
- border-radius: 4px;
498
- }
499
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
500
- padding: 8px 0;
501
- }
502
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
503
- float: left;
504
- margin-right: 10px;
505
- }
506
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
507
- margin: 0;
508
- text-align: left;
509
- line-height: 22px;
510
- padding: 5px 14px;
511
- width: 250px;
512
- font-size: 12px;
513
- }
514
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
515
- float: right;
516
- margin-right: -14px;
517
- }
518
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
519
- float: right;
520
- margin-right: 8px;
521
- }
522
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
523
- height: 20px;
524
- }:root {
525
- --primary-background-color: #000;
526
- --secondary-background-color: #262626;
527
- --primary-text-color: #fff;
528
- --secondary-text-color: #fff4f2;
529
- --hover-text-color: #f9b090;
530
- --speedtest-red: #df564d;
531
- --speedtest-orange: #df934d;
532
- --speedtest-yellow: #dfd04d;
533
- --speedtest-light-green: #c2df4d;
534
- --speedtest-green: #73df4d;
535
- }
536
-
537
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box {
538
- position: absolute;
539
- display: inline-block;
540
- bottom: 52px;
541
- right: 16px;
542
- padding: 0 10px 12px;
543
- margin: 0;
544
- line-height: 20px;
545
- font-size: 12px;
546
- font-weight: 500;
547
- background: var(--primary-background-color);
548
- color: #fff;
549
- z-index: 20000;
550
- overflow: auto;
551
- max-height: calc(100vh - 60px);
552
- max-width: calc(100vw - 10px);
553
- }
554
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top {
555
- position: absolute;
556
- top: 0;
557
- left: 0;
558
- z-index: 99990;
559
- width: 100%;
560
- height: 32px;
561
- background: var(--primary-background-color);
562
- }
563
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button {
564
- float: right;
565
- margin-right: 12px;
566
- margin-top: 10px;
567
- display: block;
568
- width: 12px;
569
- height: 12px;
570
- }
571
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button svg path {
572
- fill: var(--primary-text-color);
573
- }
574
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button:hover svg path {
575
- fill: var(--hover-text-color);
576
- }
577
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-main {
578
- overflow: hidden;
579
- margin-top: 44px;
580
- }
581
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.wide {
582
- width: 820px;
583
- }
584
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul, .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box li {
585
- list-style-type: none;
586
- }
587
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul div, .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box li div {
588
- padding-left: 2px;
589
- padding-right: 2px;
590
- background: var(--primary-background-color);
591
- }
592
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
593
- display: inline-block;
594
- float: left;
595
- padding: 5px;
596
- width: 200px;
597
- }
598
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li {
599
- position: relative;
600
- padding: 0 5px;
601
- text-align: left;
602
- }
603
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li.canvas-wrapper {
604
- padding: 0;
605
- }
606
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li.canvas-wrapper canvas {
607
- width: 100%;
608
- }
609
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li:nth-child(2n) {
610
- background: var(--secondary-background-color);
611
- }
612
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li:nth-child(2n) div {
613
- background: var(--secondary-background-color);
614
- }
615
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li.title {
616
- text-align: center;
617
- font-weight: bold;
618
- padding-bottom: 4px;
619
- font-size: 14px;
620
- }
621
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul li div {
622
- margin: 0;
623
- position: absolute;
624
- right: 0;
625
- top: 0;
626
- }
627
-
628
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow {
629
- width: 250px;
630
- }
631
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow ul {
632
- width: 100%;
633
- }
634
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary {
635
- padding: 0 5px;
636
- height: auto;
637
- }
638
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary-block {
639
- width: 100%;
640
- flex-direction: column;
641
- }
642
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock {
643
- width: 100%;
644
- }
645
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock-content {
646
- width: 100%;
647
- }
648
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-summary-header {
649
- padding-top: 12px;
650
- height: 38px;
651
- text-align: center;
652
- }
653
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-quality-header {
654
- text-align: center;
655
- }
656
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-footer {
657
- height: 80px;
658
- }
659
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-footer-about-link {
660
- bottom: 0;
661
- left: 0;
662
- }
663
- .desktop .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow .speedtest-footer .speedtest-footer-refresh {
664
- inset: 50% auto auto 50%;
665
- transform: translate(-50%, -50%);
666
- }
667
-
668
- .speed-test-button {
669
- margin: 10px 0 0;
670
- color: #000;
671
- }
672
-
673
- .speed-test {
674
- position: absolute;
675
- top: 0;
676
- left: 0;
677
- width: 100%;
678
- height: 100%;
679
- z-index: 9999;
680
- }
681
- .speed-test .speed-test-header {
682
- width: 100%;
683
- height: 32px;
684
- }
685
- .speed-test .speed-test-header .close-speed-test {
686
- float: right;
687
- margin-right: 5px;
688
- line-height: 32px;
689
- cursor: pointer;
690
- color: var(--primary-text-color);
691
- }
692
- .speed-test .speed-test-header .close-speed-test:hover {
693
- color: var(--hover-text-color);
694
- }
695
-
696
- .settings-button {
697
- float: right;
698
- margin: 0 12px 0 0;
699
- height: 40px;
700
- width: 24px;
701
- border: none;
702
- padding: 0;
703
- }
704
-
705
- .settings-options-list {
706
- position: absolute;
707
- right: 16px;
708
- bottom: 52px;
709
- background: var(--primary-background-color);
710
- width: 250px;
711
- height: 48px;
424
+ height: 48px;
712
425
  z-index: 9999;
713
426
  border-radius: 4px;
714
427
  }
@@ -903,165 +616,31 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
903
616
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
904
617
  width: 25%;
905
618
  }
906
- }*, :focus, :visited {
907
- outline: none !important;
908
- }
909
-
910
- .gear-wrapper .go-back {
911
- font-weight: 600;
912
- font-size: 14px;
913
- line-height: 20px;
619
+ }.big-mute-icon-wrapper[data-big-mute] {
620
+ position: absolute;
621
+ z-index: 9998;
622
+ background-color: transparent;
623
+ display: flex;
624
+ justify-content: center;
914
625
  width: 100%;
915
- text-align: left;
916
- padding: 12px;
917
- }
918
- .gear-wrapper .go-back .arrow-left-icon {
919
- float: left;
920
- padding-top: 2px;
921
- padding-right: 2px;
922
- }
923
- .gear-wrapper .go-back .arrow-left-icon svg {
924
- height: 16px;
626
+ height: calc(100% - 50px);
627
+ margin: 0 auto;
628
+ opacity: 0.75;
629
+ transition: opacity 0.1s ease;
630
+ pointer-events: auto;
925
631
  }
926
- .gear-wrapper ul.gear-sub-menu {
927
- width: 100%;
928
- list-style-type: none;
929
- background-color: transparent;
930
- min-width: 60px;
931
- border-top: 2px solid rgb(36, 36, 36);
632
+ .big-mute-icon-wrapper[data-big-mute].hide {
633
+ display: none;
932
634
  }
933
- .gear-wrapper ul.gear-sub-menu li {
934
- font-size: 12px;
935
- text-align: left;
936
- }
937
- .gear-wrapper ul.gear-sub-menu li[data-title] {
938
- background-color: #c3c2c2;
939
- padding: 5px;
940
- }
941
- .gear-wrapper ul.gear-sub-menu li a {
942
- display: block;
943
- text-decoration: none;
944
- height: 32px;
945
- padding: 5px 10px;
946
- line-height: 22px;
947
- color: #fffffe;
948
- }
949
- .gear-wrapper ul.gear-sub-menu li a:hover {
950
- color: white;
951
- background-color: rgba(0, 0, 0, 0.4);
952
- }
953
- .gear-wrapper ul.gear-sub-menu li a:hover a {
954
- color: white;
955
- text-decoration: none;
956
- }
957
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
958
- width: 30px;
959
- height: 20px;
960
- float: left;
961
- display: block;
962
- }
963
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
964
- display: none;
965
- }
966
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
967
- display: inline;
968
- }
969
- .gear-wrapper svg {
970
- height: 20px;
971
- }.media-control-pip button {
972
- float: right;
973
- height: 40px;
974
- margin-right: 20px;
975
- }
976
- .media-control-pip button svg {
977
- height: 20px;
978
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
979
- height: 0;
635
+ .big-mute-icon-wrapper[data-big-mute]:hover {
636
+ cursor: pointer;
980
637
  }
981
638
 
982
- .skip_time_plugin[data-skip-time] {
983
- position: absolute;
984
- width: 100%;
985
- height: calc(100% - 50px);
986
- z-index: 9998;
987
- background-color: transparent;
988
- font-family: Roboto, "Open Sans", Arial, sans-serif;
989
- }
990
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
991
- width: 100%;
992
- height: 100%;
639
+ .big-mute-icon[data-big-mute-icon] {
993
640
  display: flex;
994
- justify-content: space-between;
995
- }
996
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
997
- width: 33.3%;
998
- height: 100%;
999
- }.level-disabled {
1000
- opacity: 0.5;
1001
- pointer-events: none;
1002
- }.seek-time[data-seek-time] {
1003
- position: absolute;
1004
- white-space: nowrap;
1005
- height: 20px;
1006
- line-height: 20px;
1007
- font-size: 0;
1008
- left: -100%;
1009
- bottom: 55px;
1010
- background-color: rgba(2, 2, 2, 0.5);
1011
- z-index: 9999;
1012
- transition: opacity 0.1s ease;
1013
- }
1014
- .seek-time[data-seek-time].hidden[data-seek-time] {
1015
- opacity: 0;
1016
- }
1017
- .seek-time[data-seek-time] [data-seek-time] {
1018
- display: inline-block;
1019
- color: white;
1020
- font-size: 10px;
1021
- padding-left: 7px;
1022
- padding-right: 7px;
1023
- vertical-align: top;
1024
- }
1025
- .seek-time[data-seek-time] [data-duration] {
1026
- display: inline-block;
1027
- color: rgba(255, 255, 255, 0.5);
1028
- font-size: 10px;
1029
- padding-right: 7px;
1030
- vertical-align: top;
1031
- }
1032
- .seek-time[data-seek-time] [data-duration]::before {
1033
- content: "|";
1034
- margin-right: 7px;
1035
- }[data-player] {
1036
- --bottom-panel: 40px;
1037
- }
1038
-
1039
- .container .media-control-notransition {
1040
- transition: none !important;
1041
- }
1042
- .container .player-poster[data-poster] .play-wrapper[data-poster] {
1043
- opacity: 1;
1044
- }
1045
- .container.crop-video [data-html5-video] {
1046
- object-fit: cover;
1047
- }
1048
- .container .subtitle-string {
1049
- position: absolute;
1050
- bottom: calc(var(--bottom-panel) + 5px);
1051
- width: 100%;
1052
- }
1053
- .container .subtitle-string p {
1054
- width: auto;
1055
- background-color: rgba(0, 0, 0, 0.4);
1056
- color: white;
1057
- display: inline-block;
1058
- }
1059
- .container .circle-poster[data-poster] {
1060
- top: 50%;
1061
- margin-top: -60px;
1062
- left: 50%;
1063
- margin-left: -60px;
1064
- position: absolute;
641
+ align-items: center;
642
+ justify-content: center;
643
+ align-self: center;
1065
644
  width: 120px;
1066
645
  height: 120px;
1067
646
  border: 2px solid white;
@@ -1070,81 +649,344 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1070
649
  filter: alpha(opacity=60);
1071
650
  opacity: 1;
1072
651
  box-shadow: 0 0 1px 0 white;
652
+ background: rgba(240, 243, 247, 0.9411764706);
653
+ z-index: 10000;
1073
654
  }
1074
- .container .circle-poster[data-poster] svg {
655
+ .big-mute-icon[data-big-mute-icon] svg {
1075
656
  margin-left: 5px;
1076
657
  width: 80px;
1077
658
  height: 80px;
1078
659
  }
1079
- .container .spinner-three-bounce[data-spinner] > div {
1080
- background-color: #ff5700;
660
+ .big-mute-icon[data-big-mute-icon] svg path {
661
+ fill: #1f1e1e !important;
662
+ }
663
+ .big-mute-icon[data-big-mute-icon]:hover {
664
+ background: rgba(240, 243, 247, 0.8784313725);
665
+ }
666
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
667
+ fill: #151515 !important;
668
+ }*, :focus, :visited {
669
+ outline: none !important;
1081
670
  }
1082
671
 
1083
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1084
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audio-tracks {
1085
- display: none;
672
+ .multicamera[data-multicamera] {
673
+ float: right;
674
+ margin-top: 4px;
675
+ position: relative;
676
+ margin-right: 20px;
677
+ width: 20px;
1086
678
  }
1087
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1088
- transform: rotate(270deg);
1089
- float: none;
1090
- display: block;
1091
- position: absolute;
1092
- /* bottom: 12px; */
1093
- margin: 0;
1094
- top: -40px;
679
+ .multicamera[data-multicamera] button {
680
+ background-color: transparent;
681
+ color: #fff;
682
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
683
+ -webkit-font-smoothing: antialiased;
684
+ border: none;
685
+ font-size: 14px;
1095
686
  padding: 0;
1096
- /* right: 20px; */
1097
- margin-left: -32px;
1098
- margin-top: -3px;
1099
- width: 80px;
1100
- /* padding-left: 12px; */
1101
687
  }
1102
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
1103
- position: absolute;
1104
- width: 100%;
1105
- height: 100%;
1106
- left: -5px;
688
+ .multicamera[data-multicamera] button svg {
689
+ height: 20px;
690
+ position: relative;
691
+ margin-top: 6px;
1107
692
  }
1108
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1109
- display: none;
693
+ .multicamera[data-multicamera] button:hover {
694
+ color: #c9c9c9;
1110
695
  }
1111
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
1112
- margin-left: 11px;
1113
- top: 7px;
1114
- width: 80px;
696
+ .multicamera[data-multicamera] button.changing {
697
+ animation: pulse 0.5s infinite alternate;
1115
698
  }
1116
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
1117
- margin-left: 11px;
1118
- top: 1px;
699
+ .multicamera[data-multicamera] button span.quality-arrow {
700
+ width: 9px;
701
+ height: 6px;
702
+ margin-top: 11px;
703
+ margin-left: 5px;
1119
704
  }
1120
-
1121
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] {
1122
- width: 28px;
705
+ .multicamera[data-multicamera] > ul {
706
+ padding: 6px 0;
707
+ right: -24px;
708
+ width: 245px;
709
+ list-style-type: none;
710
+ position: absolute;
711
+ bottom: 48px;
712
+ border-radius: 4px;
713
+ display: none;
714
+ background-color: rgba(74, 74, 74, 0.9);
1123
715
  }
1124
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] svg {
1125
- height: 17px;
716
+ .multicamera[data-multicamera] > ul::after {
717
+ content: "";
718
+ position: absolute;
719
+ top: 100%;
720
+ left: 85%;
721
+ margin-left: -10px;
722
+ width: 0;
723
+ height: 0;
724
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
725
+ border-right: 10px solid transparent;
726
+ border-left: 10px solid transparent;
1126
727
  }
1127
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
1128
- top: calc(50% - 150px);
1129
- left: calc(50% - 125px);
1130
- width: 250px;
1131
- height: calc(100% - 32px);
1132
- max-height: 300px;
1133
- transform: none;
728
+ .multicamera[data-multicamera] li {
729
+ font-size: 10px;
730
+ cursor: pointer;
1134
731
  }
1135
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
1136
- border: none;
732
+ .multicamera[data-multicamera] li .multicamera-item {
733
+ display: flex;
734
+ padding: 10px 0;
735
+ justify-content: center;
736
+ position: relative;
1137
737
  }
1138
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1139
- visibility: hidden;
738
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
739
+ pointer-events: none;
1140
740
  }
1141
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
1142
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks {
1143
- display: block;
741
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
742
+ opacity: 0.5;
1144
743
  }
1145
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector],
1146
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector],
1147
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector],
744
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
745
+ opacity: 0.5;
746
+ }
747
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
748
+ background-color: rgba(0, 0, 0, 0);
749
+ }
750
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
751
+ background-color: rgba(0, 0, 0, 0.3);
752
+ }
753
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
754
+ width: 80px;
755
+ height: 60px;
756
+ }
757
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
758
+ width: 80px;
759
+ height: 60px;
760
+ }
761
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
762
+ width: 120px;
763
+ text-align: left;
764
+ margin-left: 15px;
765
+ }
766
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
767
+ width: 120px;
768
+ height: 20px;
769
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
770
+ font-size: 14px;
771
+ font-weight: normal;
772
+ font-style: normal;
773
+ font-stretch: normal;
774
+ line-height: 1.43;
775
+ letter-spacing: normal;
776
+ text-align: left;
777
+ color: #fff;
778
+ text-overflow: ellipsis;
779
+ overflow: hidden;
780
+ }
781
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
782
+ opacity: 0.6;
783
+ }
784
+ .multicamera[data-multicamera] li[data-title] {
785
+ background-color: #c3c2c2;
786
+ padding: 5px;
787
+ }
788
+ .multicamera[data-multicamera] li a {
789
+ color: #444;
790
+ padding: 2px 10px;
791
+ display: block;
792
+ text-decoration: none;
793
+ }
794
+ .multicamera[data-multicamera] li a:hover {
795
+ background-color: #555;
796
+ color: white;
797
+ }
798
+ .multicamera[data-multicamera] li a:hover a {
799
+ color: white;
800
+ text-decoration: none;
801
+ }
802
+ .multicamera[data-multicamera] li.current a {
803
+ color: #f00;
804
+ }
805
+
806
+ @keyframes pulse {
807
+ 0% {
808
+ color: #fff;
809
+ }
810
+ 50% {
811
+ color: #ff0101;
812
+ }
813
+ 100% {
814
+ color: #B80000;
815
+ }
816
+ }.level-disabled {
817
+ opacity: 0.5;
818
+ pointer-events: none;
819
+ }.context-menu {
820
+ z-index: 999;
821
+ position: absolute;
822
+ top: 0;
823
+ left: 0;
824
+ text-align: center;
825
+ }
826
+ .context-menu .context-menu-list {
827
+ font-family: "Proxima Nova", sans-serif;
828
+ font-size: 12px;
829
+ line-height: 12px;
830
+ list-style-type: none;
831
+ text-align: left;
832
+ padding: 5px;
833
+ margin-left: auto;
834
+ margin-right: auto;
835
+ background-color: rgba(0, 0, 0, 0.75);
836
+ border: 1px solid #666;
837
+ border-radius: 4px;
838
+ }
839
+ .context-menu .context-menu-list .context-menu-list-item {
840
+ color: white;
841
+ padding: 5px;
842
+ cursor: pointer;
843
+ }.player-poster[data-poster] {
844
+ display: flex;
845
+ justify-content: center;
846
+ align-items: center;
847
+ position: absolute;
848
+ height: 100%;
849
+ width: 100%;
850
+ z-index: 998;
851
+ top: 0;
852
+ left: 0;
853
+ background-color: #000;
854
+ background-size: cover;
855
+ background-repeat: no-repeat;
856
+ background-position: 50% 50%;
857
+ }
858
+ .player-poster[data-poster].clickable {
859
+ cursor: pointer;
860
+ }
861
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
862
+ opacity: 1;
863
+ }
864
+ .player-poster[data-poster] .play-wrapper[data-poster] {
865
+ width: 100%;
866
+ height: 25%;
867
+ margin: 0 auto;
868
+ opacity: 0.75;
869
+ transition: opacity 0.1s ease;
870
+ }
871
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
872
+ height: 100%;
873
+ display: inline;
874
+ }
875
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
876
+ fill: #fff;
877
+ }[data-player] {
878
+ --bottom-panel: 40px;
879
+ }
880
+
881
+ .container .media-control-notransition {
882
+ transition: none !important;
883
+ }
884
+ .container .player-poster[data-poster] .play-wrapper[data-poster] {
885
+ opacity: 1;
886
+ }
887
+ .container.crop-video [data-html5-video] {
888
+ object-fit: cover;
889
+ }
890
+ .container .subtitle-string {
891
+ position: absolute;
892
+ bottom: calc(var(--bottom-panel) + 5px);
893
+ width: 100%;
894
+ }
895
+ .container .subtitle-string p {
896
+ width: auto;
897
+ background-color: rgba(0, 0, 0, 0.4);
898
+ color: white;
899
+ display: inline-block;
900
+ }
901
+ .container .circle-poster[data-poster] {
902
+ top: 50%;
903
+ margin-top: -60px;
904
+ left: 50%;
905
+ margin-left: -60px;
906
+ position: absolute;
907
+ width: 120px;
908
+ height: 120px;
909
+ border: 2px solid white;
910
+ border-radius: 50%;
911
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
912
+ filter: alpha(opacity=60);
913
+ opacity: 1;
914
+ box-shadow: 0 0 1px 0 white;
915
+ }
916
+ .container .circle-poster[data-poster] svg {
917
+ margin-left: 5px;
918
+ width: 80px;
919
+ height: 80px;
920
+ }
921
+ .container .spinner-three-bounce[data-spinner] > div {
922
+ background-color: #ff5700;
923
+ }
924
+
925
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
926
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audio-tracks {
927
+ display: none;
928
+ }
929
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
930
+ transform: rotate(270deg);
931
+ float: none;
932
+ display: block;
933
+ position: absolute;
934
+ /* bottom: 12px; */
935
+ margin: 0;
936
+ top: -40px;
937
+ padding: 0;
938
+ /* right: 20px; */
939
+ margin-left: -32px;
940
+ margin-top: -3px;
941
+ width: 80px;
942
+ /* padding-left: 12px; */
943
+ }
944
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
945
+ position: absolute;
946
+ width: 100%;
947
+ height: 100%;
948
+ left: -5px;
949
+ }
950
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
951
+ display: none;
952
+ }
953
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
954
+ margin-left: 11px;
955
+ top: 7px;
956
+ width: 80px;
957
+ }
958
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
959
+ margin-left: 11px;
960
+ top: 1px;
961
+ }
962
+
963
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] {
964
+ width: 28px;
965
+ }
966
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] svg {
967
+ height: 17px;
968
+ }
969
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
970
+ top: calc(50% - 150px);
971
+ left: calc(50% - 125px);
972
+ width: 250px;
973
+ height: calc(100% - 32px);
974
+ max-height: 300px;
975
+ transform: none;
976
+ }
977
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
978
+ border: none;
979
+ }
980
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
981
+ visibility: hidden;
982
+ }
983
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
984
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks {
985
+ display: block;
986
+ }
987
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector],
988
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector],
989
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector],
1148
990
  .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] {
1149
991
  margin-top: 3px;
1150
992
  margin-right: 10px;
@@ -1305,556 +1147,810 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1305
1147
  .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1306
1148
  display: none;
1307
1149
  }
1308
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1150
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1151
+ width: 0;
1152
+ height: 12px;
1153
+ top: 9px;
1154
+ padding: 0;
1155
+ }
1156
+
1157
+ .media-control-skin-1[data-media-control-skin-1] {
1158
+ position: absolute;
1159
+ width: 100%;
1160
+ height: 100%;
1161
+ z-index: 9999;
1162
+ pointer-events: none;
1163
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1164
+ }
1165
+ .media-control-skin-1[data-media-control-skin-1].dragging {
1166
+ pointer-events: auto;
1167
+ cursor: grabbing !important;
1168
+ cursor: url("closed-hand.cur"), move;
1169
+ }
1170
+ .media-control-skin-1[data-media-control-skin-1].dragging * {
1171
+ cursor: grabbing !important;
1172
+ cursor: url("closed-hand.cur"), move;
1173
+ }
1174
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1175
+ line-height: 0;
1176
+ letter-spacing: 0;
1177
+ speak: none;
1178
+ color: #fff;
1179
+ vertical-align: middle;
1180
+ text-align: left;
1181
+ transition: all 0.1s ease;
1182
+ }
1183
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1184
+ color: white;
1185
+ }
1186
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1187
+ opacity: 0;
1188
+ }
1189
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1190
+ bottom: -50px;
1191
+ }
1192
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1193
+ opacity: 0;
1194
+ }
1195
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1196
+ position: absolute;
1197
+ bottom: 0;
1198
+ width: 100%;
1199
+ height: var(--bottom-panel);
1200
+ font-size: 0;
1201
+ vertical-align: middle;
1202
+ pointer-events: auto;
1203
+ transition: bottom 0.4s ease-out;
1204
+ }
1205
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel[data-media-control-skin-1] {
1206
+ position: absolute;
1207
+ top: 0;
1208
+ left: 4px;
1209
+ height: 100%;
1210
+ }
1211
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel[data-media-control-skin-1] {
1212
+ height: 100%;
1213
+ text-align: center;
1214
+ line-height: var(--bottom-panel);
1215
+ }
1216
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel[data-media-control-skin-1] {
1217
+ position: absolute;
1218
+ top: 0;
1219
+ right: 4px;
1220
+ height: 100%;
1221
+ }
1222
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1223
+ background-color: transparent;
1224
+ border: 0;
1225
+ padding: 0;
1226
+ cursor: pointer;
1227
+ display: inline-block;
1228
+ height: 40px;
1229
+ width: 20px;
1230
+ }
1231
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1232
+ height: 20px;
1233
+ }
1234
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1235
+ fill: white;
1236
+ }
1237
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1238
+ outline: none;
1239
+ }
1240
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1241
+ float: left;
1242
+ height: 100%;
1243
+ }
1244
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1245
+ float: left;
1246
+ height: 100%;
1247
+ }
1248
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1249
+ float: left;
1250
+ height: 100%;
1251
+ }
1252
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1253
+ float: right;
1254
+ background-color: transparent;
1255
+ border: 0;
1256
+ margin-right: 12px;
1257
+ height: 40px;
1258
+ }
1259
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1260
+ background-color: transparent;
1261
+ border: 0;
1262
+ cursor: default;
1263
+ display: none !important;
1264
+ float: right;
1265
+ height: 100%;
1266
+ }
1267
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playpause], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playstop] {
1268
+ float: left;
1269
+ margin-left: 8px;
1270
+ margin-right: 14px;
1271
+ }
1272
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1273
+ display: inline-block;
1274
+ float: left;
1275
+ font-size: 14px;
1276
+ color: white;
1277
+ cursor: default;
1278
+ line-height: var(--bottom-panel);
1279
+ position: relative;
1280
+ }
1281
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1282
+ margin: 1px 6px 0 7px;
1283
+ }
1284
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1285
+ color: rgb(255, 255, 255);
1286
+ opacity: 0.5;
1287
+ margin-top: 1px;
1288
+ margin-right: 6px;
1289
+ }
1290
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1291
+ content: "|";
1292
+ margin-right: 7px;
1293
+ }
1294
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container {
1295
+ display: none;
1296
+ }
1297
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1298
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1299
+ text-overflow: ellipsis;
1300
+ white-space: nowrap;
1301
+ overflow: hidden;
1302
+ display: inline-block;
1303
+ float: left;
1304
+ font-size: 14px;
1305
+ color: white;
1306
+ cursor: default;
1307
+ line-height: var(--bottom-panel);
1308
+ position: relative;
1309
+ }
1310
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1311
+ margin-right: 6px;
1312
+ }
1313
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1314
+ max-width: calc(80% - 240px);
1315
+ }
1316
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1317
+ position: absolute;
1318
+ top: -11px;
1319
+ left: 0;
1320
+ display: inline-block;
1321
+ vertical-align: middle;
1322
+ width: 100%;
1323
+ height: 20px;
1324
+ cursor: pointer;
1325
+ }
1326
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1327
+ width: 100%;
1328
+ height: 3px;
1329
+ position: relative;
1330
+ top: 8px;
1331
+ background-color: #666;
1332
+ }
1333
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
1334
+ position: absolute;
1335
+ top: 0;
1336
+ left: 0;
1337
+ width: 0;
1338
+ height: 100%;
1339
+ background-color: white;
1340
+ transition: all 0.1s ease-out;
1341
+ }
1342
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1343
+ position: absolute;
1344
+ top: 0;
1345
+ left: 0;
1346
+ width: 0;
1347
+ height: 100%;
1348
+ background-color: #ff5700;
1349
+ transition: all 0.1s ease-out;
1350
+ }
1351
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1352
+ cursor: default;
1353
+ display: none;
1354
+ }
1355
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1356
+ cursor: default;
1357
+ display: none;
1358
+ }
1359
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1360
+ position: absolute;
1361
+ transform: translateX(-50%);
1362
+ top: -11.5px;
1363
+ left: 0;
1364
+ width: 20px;
1365
+ height: 20px;
1366
+ opacity: 1;
1367
+ transition: all 0.1s ease-out;
1368
+ }
1369
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1370
+ position: absolute;
1371
+ left: 4.5px;
1372
+ top: 4.5px;
1373
+ width: 11px;
1374
+ height: 11px;
1375
+ border-radius: 50%;
1376
+ background-color: white;
1377
+ }
1378
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1379
+ float: left;
1380
+ display: inline-block;
1381
+ height: var(--bottom-panel);
1382
+ cursor: pointer;
1383
+ box-sizing: border-box;
1384
+ margin-right: 20px;
1385
+ }
1386
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1387
+ float: left;
1388
+ bottom: 0;
1389
+ }
1390
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1391
+ background-color: transparent;
1392
+ border: 0;
1393
+ box-sizing: content-box;
1394
+ height: var(--bottom-panel);
1395
+ width: 20px;
1396
+ }
1397
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1398
+ height: 20px;
1399
+ position: relative;
1400
+ top: 3px;
1401
+ margin-top: 7px;
1402
+ }
1403
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1404
+ fill: white;
1405
+ }
1406
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1407
+ margin-left: 2px;
1408
+ }
1409
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1410
+ float: left;
1411
+ position: relative;
1412
+ margin-left: 10px;
1413
+ top: 8px;
1414
+ width: 80px;
1415
+ height: 23px;
1416
+ padding: 3px 0;
1417
+ transition: width 0.2s ease-out;
1418
+ }
1419
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1420
+ height: 3px;
1421
+ border-radius: 100px;
1422
+ position: relative;
1423
+ top: 7px;
1424
+ background-color: #666;
1425
+ }
1426
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
1427
+ position: absolute;
1428
+ top: 0;
1429
+ left: 0;
1309
1430
  width: 0;
1310
- height: 12px;
1311
- top: 9px;
1312
- padding: 0;
1431
+ height: 100%;
1432
+ border-radius: 100px;
1433
+ background-color: white;
1434
+ transition: all 0.1s ease-out;
1313
1435
  }
1314
-
1315
- .media-control-skin-1[data-media-control-skin-1] {
1436
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
1316
1437
  position: absolute;
1317
- width: 100%;
1438
+ top: 0;
1439
+ left: 0;
1440
+ width: 0;
1318
1441
  height: 100%;
1319
- z-index: 9999;
1320
- pointer-events: none;
1321
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1322
- }
1323
- .media-control-skin-1[data-media-control-skin-1].dragging {
1324
- pointer-events: auto;
1325
- cursor: grabbing !important;
1326
- cursor: url("closed-hand.cur"), move;
1442
+ background-color: #005aff;
1443
+ transition: all 0.1s ease-out;
1327
1444
  }
1328
- .media-control-skin-1[data-media-control-skin-1].dragging * {
1329
- cursor: grabbing !important;
1330
- cursor: url("closed-hand.cur"), move;
1445
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1446
+ position: absolute;
1447
+ transform: translateX(-50%);
1448
+ top: 3px;
1449
+ margin-left: 3px;
1450
+ width: 16px;
1451
+ height: 16px;
1452
+ opacity: 1;
1453
+ transition: all 0.1s ease-out;
1331
1454
  }
1332
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1333
- line-height: 0;
1334
- letter-spacing: 0;
1335
- speak: none;
1336
- color: #fff;
1337
- vertical-align: middle;
1338
- text-align: left;
1339
- transition: all 0.1s ease;
1455
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1456
+ position: absolute;
1457
+ left: 3px;
1458
+ top: 5px;
1459
+ width: 7px;
1460
+ height: 7px;
1461
+ border-radius: 50%;
1462
+ background-color: white;
1340
1463
  }
1341
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1342
- color: white;
1464
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1465
+ float: left;
1466
+ width: 4px;
1467
+ padding-left: 2px;
1468
+ height: 12px;
1469
+ opacity: 0.5;
1470
+ box-shadow: inset 2px 0 0 white;
1471
+ transition: transform 0.2s ease-out;
1343
1472
  }
1344
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1345
- opacity: 0;
1473
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1474
+ box-shadow: inset 2px 0 0 #fff;
1475
+ opacity: 1;
1346
1476
  }
1347
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1348
- bottom: -50px;
1477
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1478
+ padding-left: 0;
1349
1479
  }
1350
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1351
- opacity: 0;
1480
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1481
+ transform: scaleY(1.5);
1482
+ }.dvr-controls[data-dvr-controls] {
1483
+ display: inline-block;
1484
+ float: left;
1485
+ color: #fff;
1486
+ line-height: 32px;
1487
+ font-size: 10px;
1488
+ font-weight: bold;
1489
+ margin-left: 6px;
1352
1490
  }
1353
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1354
- position: absolute;
1355
- bottom: 0;
1356
- width: 100%;
1357
- height: var(--bottom-panel);
1358
- font-size: 0;
1359
- vertical-align: middle;
1360
- pointer-events: auto;
1361
- transition: bottom 0.4s ease-out;
1491
+ .dvr-controls[data-dvr-controls] .live-info {
1492
+ cursor: default;
1493
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
1494
+ text-transform: uppercase;
1362
1495
  }
1363
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel[data-media-control-skin-1] {
1364
- position: absolute;
1365
- top: 0;
1366
- left: 4px;
1367
- height: 100%;
1496
+ .dvr-controls[data-dvr-controls] .live-info:before {
1497
+ content: "";
1498
+ display: inline-block;
1499
+ position: relative;
1500
+ width: 7px;
1501
+ height: 7px;
1502
+ border-radius: 3.5px;
1503
+ margin-right: 3.5px;
1504
+ background-color: #ff0101;
1368
1505
  }
1369
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel[data-media-control-skin-1] {
1370
- height: 100%;
1371
- text-align: center;
1372
- line-height: var(--bottom-panel);
1506
+ .dvr-controls[data-dvr-controls] .live-info.disabled {
1507
+ opacity: 0.3;
1373
1508
  }
1374
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel[data-media-control-skin-1] {
1375
- position: absolute;
1376
- top: 0;
1377
- right: 4px;
1378
- height: 100%;
1509
+ .dvr-controls[data-dvr-controls] .live-info.disabled:before {
1510
+ background-color: #fff;
1379
1511
  }
1380
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1381
- background-color: transparent;
1512
+ .dvr-controls[data-dvr-controls] .live-button {
1513
+ cursor: pointer;
1514
+ outline: none;
1515
+ display: none;
1382
1516
  border: 0;
1517
+ color: #fff;
1518
+ background-color: transparent;
1519
+ height: 32px;
1383
1520
  padding: 0;
1384
- cursor: pointer;
1521
+ opacity: 0.7;
1522
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
1523
+ text-transform: uppercase;
1524
+ transition: all 0.1s ease;
1525
+ }
1526
+ .dvr-controls[data-dvr-controls] .live-button:before {
1527
+ content: "";
1385
1528
  display: inline-block;
1386
- height: 40px;
1387
- width: 20px;
1529
+ position: relative;
1530
+ width: 7px;
1531
+ height: 7px;
1532
+ border-radius: 3.5px;
1533
+ margin-right: 3.5px;
1534
+ background-color: #fff;
1388
1535
  }
1389
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1390
- height: 20px;
1536
+ .dvr-controls[data-dvr-controls] .live-button:hover {
1537
+ opacity: 1;
1538
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
1391
1539
  }
1392
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1393
- fill: white;
1540
+
1541
+ .dvr-controls[data-dvr-controls] {
1542
+ height: 40px;
1543
+ line-height: 40px;
1544
+ margin-left: 0;
1394
1545
  }
1395
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1396
- outline: none;
1546
+ .dvr-controls[data-dvr-controls] .live-info {
1547
+ font-size: 14px;
1548
+ letter-spacing: 0.8px;
1549
+ font-weight: 500;
1550
+ color: #fffffe;
1551
+ margin-left: 21px;
1397
1552
  }
1398
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1399
- float: left;
1400
- height: 100%;
1553
+ .dvr-controls[data-dvr-controls] .live-info::before {
1554
+ width: 10px;
1555
+ height: 10px;
1556
+ border-radius: 50%;
1557
+ margin-right: 8px;
1558
+ background-color: #ed4f4a;
1401
1559
  }
1402
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1403
- float: left;
1404
- height: 100%;
1560
+ .dvr-controls[data-dvr-controls] .live-button {
1561
+ height: 40px;
1562
+ opacity: 1;
1563
+ font-size: 14px;
1564
+ letter-spacing: 0.8px;
1565
+ font-weight: 500;
1566
+ margin-left: 20px;
1405
1567
  }
1406
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1407
- float: left;
1408
- height: 100%;
1568
+ .dvr-controls[data-dvr-controls] .live-button::before {
1569
+ width: 10px;
1570
+ height: 10px;
1571
+ border-radius: 50%;
1572
+ margin-right: 8px;
1573
+ background-color: #cacaca;
1409
1574
  }
1410
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1411
- float: right;
1412
- background-color: transparent;
1413
- border: 0;
1414
- margin-right: 12px;
1415
- height: 40px;
1575
+
1576
+ .dvr .dvr-controls[data-dvr-controls] .live-info {
1577
+ display: none;
1416
1578
  }
1417
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1418
- background-color: transparent;
1419
- border: 0;
1420
- cursor: default;
1421
- display: none !important;
1422
- float: right;
1423
- height: 100%;
1579
+ .dvr .dvr-controls[data-dvr-controls] .live-button {
1580
+ display: block;
1424
1581
  }
1425
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playpause], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playstop] {
1426
- float: left;
1427
- margin-left: 8px;
1428
- margin-right: 14px;
1582
+ .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1583
+ background-color: #005aff;
1429
1584
  }
1430
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1431
- display: inline-block;
1432
- float: left;
1433
- font-size: 14px;
1434
- color: white;
1435
- cursor: default;
1436
- line-height: var(--bottom-panel);
1437
- position: relative;
1585
+
1586
+ .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1587
+ background-color: #ff0101;
1588
+ }.clips.bar-container[data-seekbar] {
1589
+ clip-path: url("#myClip");
1590
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1591
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1592
+ display: block;
1438
1593
  }
1439
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1440
- margin: 1px 6px 0 7px;
1594
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1595
+ width: 40px;
1596
+ margin-top: 0;
1441
1597
  }
1442
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1443
- color: rgb(255, 255, 255);
1444
- opacity: 0.5;
1445
- margin-top: 1px;
1446
- margin-right: 6px;
1598
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1599
+ display: flex;
1600
+ justify-content: center;
1601
+ padding: 0;
1602
+ align-items: center;
1447
1603
  }
1448
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1449
- content: "|";
1450
- margin-right: 7px;
1604
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1605
+ color: white;
1451
1606
  }
1452
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container {
1453
- display: none;
1607
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1608
+ background-color: rgba(74, 74, 74, 0.6);
1609
+ border: none;
1610
+ width: auto;
1611
+ transform: rotate(180deg);
1612
+ border-radius: 4px;
1613
+ bottom: 52px;
1614
+ margin-left: -28px;
1454
1615
  }
1455
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1456
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1457
- text-overflow: ellipsis;
1616
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1617
+ transform: rotate(-180deg);
1618
+ font-size: 16px;
1619
+ text-align: center;
1458
1620
  white-space: nowrap;
1459
- overflow: hidden;
1460
- display: inline-block;
1461
- float: left;
1462
- font-size: 14px;
1463
- color: white;
1464
- cursor: default;
1465
- line-height: var(--bottom-panel);
1466
- position: relative;
1621
+ height: 30px;
1467
1622
  }
1468
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1469
- margin-right: 6px;
1623
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1624
+ height: 30px;
1625
+ padding: 5px 10px;
1626
+ color: #fffffe;
1470
1627
  }
1471
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1472
- max-width: calc(80% - 240px);
1628
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1629
+ background-color: rgba(0, 0, 0, 0.4);
1473
1630
  }
1474
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1475
- position: absolute;
1476
- top: -11px;
1477
- left: 0;
1478
- display: inline-block;
1479
- vertical-align: middle;
1480
- width: 100%;
1481
- height: 20px;
1482
- cursor: pointer;
1631
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1632
+ background-color: rgba(0, 0, 0, 0.4);
1483
1633
  }
1484
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1485
- width: 100%;
1486
- height: 3px;
1487
- position: relative;
1488
- top: 8px;
1489
- background-color: #666;
1634
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1635
+ border-bottom-left-radius: 4px;
1636
+ border-bottom-right-radius: 4px;
1490
1637
  }
1491
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
1492
- position: absolute;
1493
- top: 0;
1494
- left: 0;
1495
- width: 0;
1496
- height: 100%;
1497
- background-color: white;
1498
- transition: all 0.1s ease-out;
1638
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1639
+ border-top-left-radius: 4px;
1640
+ border-top-right-radius: 4px;
1499
1641
  }
1500
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1642
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1643
+ height: 26px;
1644
+ line-height: 26px;
1645
+ bottom: 52px;
1646
+ border-radius: 3px;
1647
+ background-color: rgba(74, 74, 74, 0.7);
1648
+ }
1649
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1650
+ letter-spacing: 0.8px;
1651
+ font-size: 14px;
1652
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1653
+ }
1654
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1655
+ padding-left: 8px;
1656
+ padding-right: 8px;
1657
+ }
1658
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1659
+ display: none !important;
1660
+ }div.player-error-screen, [data-player] div.player-error-screen {
1661
+ color: #CCCACA;
1501
1662
  position: absolute;
1502
1663
  top: 0;
1503
- left: 0;
1504
- width: 0;
1505
1664
  height: 100%;
1506
- background-color: #ff5700;
1507
- transition: all 0.1s ease-out;
1665
+ width: 100%;
1666
+ background-color: rgba(0, 0, 0, 0.7);
1667
+ z-index: 2000;
1668
+ display: flex;
1669
+ flex-direction: column;
1670
+ justify-content: center;
1508
1671
  }
1509
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1510
- cursor: default;
1511
- display: none;
1672
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1673
+ font-size: 14px;
1674
+ color: #CCCACA;
1675
+ margin-top: 45px;
1512
1676
  }
1513
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1514
- cursor: default;
1515
- display: none;
1677
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1678
+ font-weight: bold;
1679
+ line-height: 30px;
1680
+ font-size: 18px;
1516
1681
  }
1517
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1518
- position: absolute;
1519
- transform: translateX(-50%);
1520
- top: -11.5px;
1521
- left: 0;
1522
- width: 20px;
1523
- height: 20px;
1524
- opacity: 1;
1525
- transition: all 0.1s ease-out;
1682
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1683
+ width: 90%;
1684
+ margin: 0 auto;
1526
1685
  }
1527
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1528
- position: absolute;
1529
- left: 4.5px;
1530
- top: 4.5px;
1531
- width: 11px;
1532
- height: 11px;
1533
- border-radius: 50%;
1534
- background-color: white;
1686
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1687
+ font-size: 13px;
1688
+ margin-top: 15px;
1535
1689
  }
1536
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1537
- float: left;
1538
- display: inline-block;
1539
- height: var(--bottom-panel);
1690
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1540
1691
  cursor: pointer;
1541
- box-sizing: border-box;
1692
+ width: 30px;
1693
+ margin: 15px auto 0;
1694
+ }.media-control-pip button {
1695
+ float: right;
1696
+ height: 40px;
1542
1697
  margin-right: 20px;
1543
1698
  }
1544
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1545
- float: left;
1546
- bottom: 0;
1547
- }
1548
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1549
- background-color: transparent;
1550
- border: 0;
1551
- box-sizing: content-box;
1552
- height: var(--bottom-panel);
1553
- width: 20px;
1554
- }
1555
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1699
+ .media-control-pip button svg {
1556
1700
  height: 20px;
1557
- position: relative;
1558
- top: 3px;
1559
- margin-top: 7px;
1560
- }
1561
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1562
- fill: white;
1701
+ }.share_plugin[data-share] {
1702
+ pointer-events: auto;
1703
+ z-index: 5;
1704
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1563
1705
  }
1564
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1565
- margin-left: 2px;
1706
+ .share_plugin[data-share].share-hide .share-button-container {
1707
+ right: -50px;
1566
1708
  }
1567
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1568
- float: left;
1569
- position: relative;
1570
- margin-left: 10px;
1571
- top: 8px;
1572
- width: 80px;
1573
- height: 23px;
1574
- padding: 3px 0;
1575
- transition: width 0.2s ease-out;
1709
+ .share_plugin[data-share] .share-button-container {
1710
+ cursor: pointer;
1711
+ width: 36px;
1712
+ height: 36px;
1713
+ background-color: rgba(74, 74, 74, 0.6);
1714
+ border-radius: 4px;
1715
+ position: absolute;
1716
+ right: 10px;
1717
+ top: 10px;
1718
+ padding-top: 6px;
1719
+ transition: all 0.3s ease-out;
1576
1720
  }
1577
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1578
- height: 3px;
1579
- border-radius: 100px;
1580
- position: relative;
1581
- top: 7px;
1582
- background-color: #666;
1721
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1722
+ background-color: transparent;
1723
+ border: 0;
1724
+ margin: 0 6px;
1725
+ padding: 0;
1726
+ cursor: pointer;
1727
+ display: inline-block;
1728
+ width: 19px;
1729
+ height: 20px;
1583
1730
  }
1584
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
1731
+ .share_plugin[data-share] .share-container {
1732
+ pointer-events: auto;
1585
1733
  position: absolute;
1586
- top: 0;
1587
- left: 0;
1588
- width: 0;
1589
- height: 100%;
1590
- border-radius: 100px;
1734
+ width: 280px;
1591
1735
  background-color: white;
1592
- transition: all 0.1s ease-out;
1736
+ transform: translate(0, 50%);
1737
+ transform: translate(-50%, -50%);
1738
+ left: 50%;
1739
+ /* margin-left: -140px; */
1740
+ top: calc(50% - 20px);
1741
+ /* margin-top: -170px; */
1593
1742
  }
1594
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
1595
- position: absolute;
1596
- top: 0;
1597
- left: 0;
1598
- width: 0;
1599
- height: 100%;
1600
- background-color: #005aff;
1601
- transition: all 0.1s ease-out;
1743
+ .share_plugin[data-share] .share-container .share-container-header {
1744
+ text-align: left;
1745
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1602
1746
  }
1603
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1604
- position: absolute;
1605
- transform: translateX(-50%);
1606
- top: 3px;
1607
- margin-left: 3px;
1608
- width: 16px;
1609
- height: 16px;
1610
- opacity: 1;
1611
- transition: all 0.1s ease-out;
1747
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1748
+ display: inline-block;
1749
+ font-size: 16px;
1750
+ margin: 5px;
1751
+ }
1752
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1753
+ display: inline-block;
1754
+ width: 24px;
1755
+ float: right;
1756
+ margin: 5px;
1757
+ cursor: pointer;
1612
1758
  }
1613
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1614
- position: absolute;
1615
- left: 3px;
1616
- top: 5px;
1617
- width: 7px;
1618
- height: 7px;
1619
- border-radius: 50%;
1620
- background-color: white;
1759
+ .share_plugin[data-share] .share-container .share-container-main {
1760
+ margin-bottom: 8px;
1621
1761
  }
1622
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1623
- float: left;
1624
- width: 4px;
1625
- padding-left: 2px;
1626
- height: 12px;
1627
- opacity: 0.5;
1628
- box-shadow: inset 2px 0 0 white;
1629
- transition: transform 0.2s ease-out;
1762
+ .share_plugin[data-share] .share-container .share-container-main > div {
1763
+ text-align: left;
1764
+ font-size: 14px;
1765
+ padding: 5px;
1630
1766
  }
1631
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1632
- box-shadow: inset 2px 0 0 #fff;
1633
- opacity: 1;
1767
+ .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 {
1768
+ overflow: hidden;
1769
+ text-overflow: ellipsis;
1770
+ color: #818181;
1771
+ border: solid 1px #d3d3d3;
1772
+ width: calc(100% - 10px);
1773
+ padding: 5px;
1634
1774
  }
1635
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1636
- padding-left: 0;
1775
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1776
+ max-height: 90px;
1777
+ resize: none;
1637
1778
  }
1638
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1639
- transform: scaleY(1.5);
1779
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1780
+ width: 32px;
1781
+ display: inline-block;
1782
+ margin-right: 5px;
1783
+ cursor: pointer;
1640
1784
  }*, :focus, :visited {
1641
1785
  outline: none !important;
1642
1786
  }
1643
1787
 
1644
- .multicamera[data-multicamera] {
1788
+ .audio_selector[data-track-selector] {
1645
1789
  float: right;
1646
1790
  margin-top: 4px;
1647
1791
  position: relative;
1648
- margin-right: 20px;
1649
- width: 20px;
1792
+ width: 50px;
1793
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1650
1794
  }
1651
- .multicamera[data-multicamera] button {
1795
+ .audio_selector[data-track-selector] button {
1652
1796
  background-color: transparent;
1653
1797
  color: #fff;
1654
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1655
1798
  -webkit-font-smoothing: antialiased;
1656
1799
  border: none;
1657
1800
  font-size: 14px;
1658
- padding: 0;
1801
+ cursor: pointer;
1659
1802
  }
1660
- .multicamera[data-multicamera] button svg {
1661
- height: 20px;
1662
- position: relative;
1663
- margin-top: 6px;
1803
+ .audio_selector[data-track-selector] button .audio-text {
1804
+ text-overflow: ellipsis;
1805
+ overflow: hidden;
1806
+ white-space: nowrap;
1807
+ max-width: 100px;
1808
+ background-color: transparent;
1809
+ -webkit-font-smoothing: antialiased;
1810
+ border: none;
1811
+ font-size: 14px;
1812
+ cursor: pointer;
1813
+ padding-top: 5px;
1664
1814
  }
1665
- .multicamera[data-multicamera] button:hover {
1815
+ .audio_selector[data-track-selector] button:hover {
1666
1816
  color: #c9c9c9;
1667
1817
  }
1668
- .multicamera[data-multicamera] button.changing {
1818
+ .audio_selector[data-track-selector] button.changing {
1669
1819
  animation: pulse 0.5s infinite alternate;
1670
1820
  }
1671
- .multicamera[data-multicamera] button span.quality-arrow {
1821
+ .audio_selector[data-track-selector] button span.audio-arrow {
1672
1822
  width: 9px;
1673
1823
  height: 6px;
1674
1824
  margin-top: 11px;
1675
1825
  margin-left: 5px;
1676
1826
  }
1677
- .multicamera[data-multicamera] > ul {
1678
- padding: 6px 0;
1679
- right: -24px;
1680
- width: 245px;
1827
+ .audio_selector[data-track-selector] > ul {
1828
+ max-width: 114px;
1681
1829
  list-style-type: none;
1682
1830
  position: absolute;
1683
- bottom: 48px;
1684
- border-radius: 4px;
1831
+ bottom: 25px;
1832
+ border: 1px solid black;
1685
1833
  display: none;
1686
- background-color: rgba(74, 74, 74, 0.9);
1687
- }
1688
- .multicamera[data-multicamera] > ul::after {
1689
- content: "";
1690
- position: absolute;
1691
- top: 100%;
1692
- left: 85%;
1693
- margin-left: -10px;
1694
- width: 0;
1695
- height: 0;
1696
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1697
- border-right: 10px solid transparent;
1698
- border-left: 10px solid transparent;
1834
+ background-color: #e6e6e6;
1699
1835
  }
1700
- .multicamera[data-multicamera] li {
1836
+ .audio_selector[data-track-selector] li {
1701
1837
  font-size: 10px;
1702
- cursor: pointer;
1703
- }
1704
- .multicamera[data-multicamera] li .multicamera-item {
1705
- display: flex;
1706
- padding: 10px 0;
1707
- justify-content: center;
1708
- position: relative;
1709
- }
1710
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1711
- pointer-events: none;
1712
- }
1713
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1714
- opacity: 0.5;
1715
- }
1716
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1717
- opacity: 0.5;
1718
- }
1719
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1720
- background-color: rgba(0, 0, 0, 0);
1721
- }
1722
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1723
- background-color: rgba(0, 0, 0, 0.3);
1724
1838
  }
1725
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1726
- width: 80px;
1727
- height: 60px;
1728
- }
1729
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1730
- width: 80px;
1731
- height: 60px;
1732
- }
1733
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1734
- width: 120px;
1735
- text-align: left;
1736
- margin-left: 15px;
1737
- }
1738
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1739
- width: 120px;
1740
- height: 20px;
1741
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1742
- font-size: 14px;
1743
- font-weight: normal;
1744
- font-style: normal;
1745
- font-stretch: normal;
1746
- line-height: 1.43;
1747
- letter-spacing: normal;
1748
- text-align: left;
1749
- color: #fff;
1750
- text-overflow: ellipsis;
1751
- overflow: hidden;
1752
- }
1753
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1754
- opacity: 0.6;
1755
- }
1756
- .multicamera[data-multicamera] li[data-title] {
1839
+ .audio_selector[data-track-selector] li[data-title] {
1757
1840
  background-color: #c3c2c2;
1758
1841
  padding: 5px;
1759
1842
  }
1760
- .multicamera[data-multicamera] li a {
1843
+ .audio_selector[data-track-selector] li a {
1761
1844
  color: #444;
1762
1845
  padding: 2px 10px;
1763
1846
  display: block;
1764
1847
  text-decoration: none;
1848
+ text-overflow: ellipsis;
1849
+ overflow: hidden;
1850
+ white-space: nowrap;
1765
1851
  }
1766
- .multicamera[data-multicamera] li a:hover {
1852
+ .audio_selector[data-track-selector] li a:hover {
1767
1853
  background-color: #555;
1768
1854
  color: white;
1769
1855
  }
1770
- .multicamera[data-multicamera] li a:hover a {
1856
+ .audio_selector[data-track-selector] li a:hover a {
1771
1857
  color: white;
1772
1858
  text-decoration: none;
1773
1859
  }
1774
- .multicamera[data-multicamera] li.current a {
1860
+ .audio_selector[data-track-selector] li.current a {
1775
1861
  color: #f00;
1776
1862
  }
1777
1863
 
1778
- @keyframes pulse {
1779
- 0% {
1780
- color: #fff;
1781
- }
1782
- 50% {
1783
- color: #ff0101;
1784
- }
1785
- 100% {
1786
- color: #B80000;
1787
- }
1788
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1789
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1790
- display: block;
1791
- }
1792
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1793
- width: 40px;
1794
- margin-top: 0;
1864
+ .audio_selector[data-track-selector] {
1865
+ width: auto;
1866
+ margin-top: 7px;
1867
+ margin-right: 20px;
1795
1868
  }
1796
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1869
+ .audio_selector[data-track-selector] button[data-level-selector-button],
1870
+ .audio_selector[data-track-selector] button[data-track-selector-button] {
1797
1871
  display: flex;
1798
1872
  justify-content: center;
1799
1873
  padding: 0;
1800
- align-items: center;
1801
1874
  }
1802
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1875
+ .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
1876
+ .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
1803
1877
  color: white;
1804
1878
  }
1805
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1879
+ .audio_selector[data-track-selector] ul {
1806
1880
  background-color: rgba(74, 74, 74, 0.6);
1807
1881
  border: none;
1808
- width: auto;
1882
+ min-width: 60px;
1809
1883
  transform: rotate(180deg);
1810
1884
  border-radius: 4px;
1811
- bottom: 52px;
1812
- margin-left: -28px;
1885
+ bottom: 40px;
1886
+ right: -2px;
1813
1887
  }
1814
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1888
+ .audio_selector[data-track-selector] ul li {
1815
1889
  transform: rotate(-180deg);
1816
1890
  font-size: 16px;
1817
- text-align: center;
1818
- white-space: nowrap;
1891
+ text-align: right;
1819
1892
  height: 30px;
1820
1893
  }
1821
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1894
+ .audio_selector[data-track-selector] ul li a {
1822
1895
  height: 30px;
1823
1896
  padding: 5px 10px;
1824
1897
  color: #fffffe;
1825
1898
  }
1826
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1827
- background-color: rgba(0, 0, 0, 0.4);
1828
- }
1829
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1899
+ .audio_selector[data-track-selector] ul li a:hover {
1830
1900
  background-color: rgba(0, 0, 0, 0.4);
1831
1901
  }
1832
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1902
+ .audio_selector[data-track-selector] ul li:first-child a {
1833
1903
  border-bottom-left-radius: 4px;
1834
1904
  border-bottom-right-radius: 4px;
1835
1905
  }
1836
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1906
+ .audio_selector[data-track-selector] ul li:last-child a {
1837
1907
  border-top-left-radius: 4px;
1838
1908
  border-top-right-radius: 4px;
1839
1909
  }
1840
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1841
- height: 26px;
1842
- line-height: 26px;
1843
- bottom: 52px;
1844
- border-radius: 3px;
1845
- background-color: rgba(74, 74, 74, 0.7);
1910
+
1911
+ @keyframes pulse {
1912
+ 0% {
1913
+ color: #fff;
1914
+ }
1915
+ 50% {
1916
+ color: #ff0101;
1917
+ }
1918
+ 100% {
1919
+ color: #B80000;
1920
+ }
1921
+ }.seek-time[data-seek-time] {
1922
+ position: absolute;
1923
+ white-space: nowrap;
1924
+ height: 20px;
1925
+ line-height: 20px;
1926
+ font-size: 0;
1927
+ left: -100%;
1928
+ bottom: 55px;
1929
+ background-color: rgba(2, 2, 2, 0.5);
1930
+ z-index: 9999;
1931
+ transition: opacity 0.1s ease;
1846
1932
  }
1847
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1848
- letter-spacing: 0.8px;
1849
- font-size: 14px;
1850
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1933
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1934
+ opacity: 0;
1851
1935
  }
1852
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1853
- padding-left: 8px;
1854
- padding-right: 8px;
1936
+ .seek-time[data-seek-time] [data-seek-time] {
1937
+ display: inline-block;
1938
+ color: white;
1939
+ font-size: 10px;
1940
+ padding-left: 7px;
1941
+ padding-right: 7px;
1942
+ vertical-align: top;
1855
1943
  }
1856
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1857
- display: none !important;
1944
+ .seek-time[data-seek-time] [data-duration] {
1945
+ display: inline-block;
1946
+ color: rgba(255, 255, 255, 0.5);
1947
+ font-size: 10px;
1948
+ padding-right: 7px;
1949
+ vertical-align: top;
1950
+ }
1951
+ .seek-time[data-seek-time] [data-duration]::before {
1952
+ content: "|";
1953
+ margin-right: 7px;
1858
1954
  }*, :focus, :visited {
1859
1955
  outline: none !important;
1860
1956
  }
@@ -1936,170 +2032,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1936
2032
  .ios-fullscreen::cue {
1937
2033
  visibility: visible !important;
1938
2034
  font-size: 1em !important;
1939
- }.share_plugin[data-share] {
1940
- pointer-events: auto;
1941
- z-index: 5;
1942
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1943
- }
1944
- .share_plugin[data-share].share-hide .share-button-container {
1945
- right: -50px;
1946
- }
1947
- .share_plugin[data-share] .share-button-container {
1948
- cursor: pointer;
1949
- width: 36px;
1950
- height: 36px;
1951
- background-color: rgba(74, 74, 74, 0.6);
1952
- border-radius: 4px;
1953
- position: absolute;
1954
- right: 10px;
1955
- top: 10px;
1956
- padding-top: 6px;
1957
- transition: all 0.3s ease-out;
1958
- }
1959
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1960
- background-color: transparent;
1961
- border: 0;
1962
- margin: 0 6px;
1963
- padding: 0;
1964
- cursor: pointer;
1965
- display: inline-block;
1966
- width: 19px;
1967
- height: 20px;
1968
- }
1969
- .share_plugin[data-share] .share-container {
1970
- pointer-events: auto;
1971
- position: absolute;
1972
- width: 280px;
1973
- background-color: white;
1974
- transform: translate(0, 50%);
1975
- transform: translate(-50%, -50%);
1976
- left: 50%;
1977
- /* margin-left: -140px; */
1978
- top: calc(50% - 20px);
1979
- /* margin-top: -170px; */
1980
- }
1981
- .share_plugin[data-share] .share-container .share-container-header {
1982
- text-align: left;
1983
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1984
- }
1985
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1986
- display: inline-block;
1987
- font-size: 16px;
1988
- margin: 5px;
1989
- }
1990
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1991
- display: inline-block;
1992
- width: 24px;
1993
- float: right;
1994
- margin: 5px;
1995
- cursor: pointer;
1996
- }
1997
- .share_plugin[data-share] .share-container .share-container-main {
1998
- margin-bottom: 8px;
1999
- }
2000
- .share_plugin[data-share] .share-container .share-container-main > div {
2001
- text-align: left;
2002
- font-size: 14px;
2003
- padding: 5px;
2004
- }
2005
- .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 {
2006
- overflow: hidden;
2007
- text-overflow: ellipsis;
2008
- color: #818181;
2009
- border: solid 1px #d3d3d3;
2010
- width: calc(100% - 10px);
2011
- padding: 5px;
2012
- }
2013
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
2014
- max-height: 90px;
2015
- resize: none;
2016
- }
2017
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
2018
- width: 32px;
2019
- display: inline-block;
2020
- margin-right: 5px;
2021
- cursor: pointer;
2022
- }.spinner-three-bounce[data-spinner] {
2023
- position: absolute;
2024
- width: 70px;
2025
- text-align: center;
2026
- z-index: 999;
2027
- left: 0;
2028
- right: 0;
2029
- margin: 0 auto;
2030
- margin-left: auto;
2031
- margin-right: auto;
2032
- /* center vertically */
2033
- top: 50%;
2034
- transform: translateY(-50%);
2035
- }
2036
- .spinner-three-bounce[data-spinner] > div {
2037
- width: 18px;
2038
- height: 18px;
2039
- background-color: #FFF;
2040
- border-radius: 100%;
2041
- display: inline-block;
2042
- animation: bouncedelay 1.4s infinite ease-in-out;
2043
- /* Prevent first frame from flickering when animation starts */
2044
- animation-fill-mode: both;
2045
- }
2046
- .spinner-three-bounce[data-spinner] [data-bounce1] {
2047
- animation-delay: -0.32s;
2048
- }
2049
- .spinner-three-bounce[data-spinner] [data-bounce2] {
2050
- animation-delay: -0.16s;
2051
- }
2052
-
2053
- @keyframes bouncedelay {
2054
- 0%, 80%, 100% {
2055
- transform: scale(0);
2056
- }
2057
- 40% {
2058
- transform: scale(1);
2059
- }
2060
- }.player-logo[data-logo] {
2061
- position: absolute;
2062
- z-index: 2;
2063
- width: 100%;
2064
- height: 100%;
2065
- }
2066
-
2067
- .clappr-logo {
2068
- position: absolute;
2069
- }.player-poster[data-poster] {
2070
- display: flex;
2071
- justify-content: center;
2072
- align-items: center;
2073
- position: absolute;
2074
- height: 100%;
2075
- width: 100%;
2076
- z-index: 998;
2077
- top: 0;
2078
- left: 0;
2079
- background-color: #000;
2080
- background-size: cover;
2081
- background-repeat: no-repeat;
2082
- background-position: 50% 50%;
2083
- }
2084
- .player-poster[data-poster].clickable {
2085
- cursor: pointer;
2086
- }
2087
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
2088
- opacity: 1;
2089
- }
2090
- .player-poster[data-poster] .play-wrapper[data-poster] {
2091
- width: 100%;
2092
- height: 25%;
2093
- margin: 0 auto;
2094
- opacity: 0.75;
2095
- transition: opacity 0.1s ease;
2096
- }
2097
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
2098
- height: 100%;
2099
- display: inline;
2100
- }
2101
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2102
- fill: #fff;
2103
2035
  }.scrub-thumbnails {
2104
2036
  position: absolute;
2105
2037
  bottom: 52px;
@@ -2161,4 +2093,72 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2161
2093
  }
2162
2094
  .scrub-thumbnails .backdrop .carousel img {
2163
2095
  width: auto;
2096
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
2097
+ height: 0;
2098
+ }
2099
+
2100
+ .skip_time_plugin[data-skip-time] {
2101
+ position: absolute;
2102
+ width: 100%;
2103
+ height: calc(100% - 50px);
2104
+ z-index: 9998;
2105
+ background-color: transparent;
2106
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
2107
+ }
2108
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
2109
+ width: 100%;
2110
+ height: 100%;
2111
+ display: flex;
2112
+ justify-content: space-between;
2113
+ }
2114
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
2115
+ width: 33.3%;
2116
+ height: 100%;
2117
+ }.spinner-three-bounce[data-spinner] {
2118
+ position: absolute;
2119
+ width: 70px;
2120
+ text-align: center;
2121
+ z-index: 999;
2122
+ left: 0;
2123
+ right: 0;
2124
+ margin: 0 auto;
2125
+ margin-left: auto;
2126
+ margin-right: auto;
2127
+ /* center vertically */
2128
+ top: 50%;
2129
+ transform: translateY(-50%);
2130
+ }
2131
+ .spinner-three-bounce[data-spinner] > div {
2132
+ width: 18px;
2133
+ height: 18px;
2134
+ background-color: #FFF;
2135
+ border-radius: 100%;
2136
+ display: inline-block;
2137
+ animation: bouncedelay 1.4s infinite ease-in-out;
2138
+ /* Prevent first frame from flickering when animation starts */
2139
+ animation-fill-mode: both;
2140
+ }
2141
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
2142
+ animation-delay: -0.32s;
2143
+ }
2144
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
2145
+ animation-delay: -0.16s;
2146
+ }
2147
+
2148
+ @keyframes bouncedelay {
2149
+ 0%, 80%, 100% {
2150
+ transform: scale(0);
2151
+ }
2152
+ 40% {
2153
+ transform: scale(1);
2154
+ }
2155
+ }.player-logo[data-logo] {
2156
+ position: absolute;
2157
+ z-index: 2;
2158
+ width: 100%;
2159
+ height: 100%;
2160
+ }
2161
+
2162
+ .clappr-logo {
2163
+ position: absolute;
2164
2164
  }