@mux/mux-player 3.5.1 → 3.5.2-canary.1

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 (4) hide show
  1. package/dist/themes/news/index.cjs.js +62 -37
  2. package/dist/themes/news/index.js +62 -37
  3. package/dist/themes/news/index.mjs +62 -37
  4. package/package.json +1 -1
package/dist/themes/news/index.cjs.js CHANGED
@@ -93,7 +93,7 @@ var news_default = `<template id="media-theme-news">
93
93
  </style>
94
94
 
95
95
  <media-controller
96
- breakpoints="md:480"
96
+ breakpoints="sm:300 md:480"
97
97
  defaultsubtitles="{{defaultsubtitles}}"
98
98
  defaultduration="{{defaultduration}}"
99
99
  gesturesdisabled="{{disabled}}"
@@ -106,23 +106,6 @@ var news_default = `<template id="media-theme-news">
106
106
  <slot name="poster" slot="poster"></slot>
107
107
  <media-error-dialog slot="dialog"></media-error-dialog>
108
108
 
109
- <!-- Gradient -->
110
- <style>
111
- .nw-gradient-bottom {
112
- padding-top: 37px;
113
- position: absolute;
114
- width: 100%;
115
- height: 170px;
116
- bottom: 0;
117
- z-index: 2;
118
- pointer-events: none;
119
- background-position: bottom;
120
- background-repeat: repeat-x;
121
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACqCAYAAABsziWkAAAAAXNSR0IArs4c6QAAAQVJREFUOE9lyNdHBQAAhfHb3nvvuu2997jNe29TJJEkkkgSSSSJJJJEEkkiifRH5jsP56Xz8PM5gcC/xfDEmjhKxEOCSaREEiSbFEqkQppJpzJMJiWyINvkUCIX8kw+JQqg0BRRxaaEEqVQZsopUQGVpooS1VBjglStqaNEPTSYRko0QbNpoUQrtJl2qsN0UqILuk0PJXqhz/RTYgAGzRA1bEYoMQpjZpwSExAyk5SYgmkzQ82aOUqEIWKilJiHBbNIiSVYhhVYhTVYhw3YhC3Yhh3YhT3YhwM4hCM4hhM4hTM4hwu4hCu4hhu4hTu4hwd4hCd4hhd4hTd4hw/4hC/4hh/4/QM2/id28uIEJAAAAABJRU5ErkJggg==');
122
- }
123
- </style>
124
- <div class="nw-gradient-bottom"></div>
125
-
126
109
  <!-- Rendition Menu -->
127
110
  <style>
128
111
  media-rendition-menu,
@@ -188,6 +171,11 @@ var news_default = `<template id="media-theme-news">
188
171
  font-weight: 400;
189
172
  text-transform: uppercase;
190
173
  margin: 0;
174
+ scale: 0.7;
175
+ }
176
+
177
+ [breakpointsm] media-play-button[slot='centered-chrome'] {
178
+ scale: 1;
191
179
  }
192
180
 
193
181
  media-play-button[slot='centered-chrome'] {
@@ -310,22 +298,44 @@ var news_default = `<template id="media-theme-news">
310
298
  <!-- Control Bar -->
311
299
  <style>
312
300
  media-control-bar {
313
- position: absolute;
314
301
  height: 36px;
315
302
  line-height: 36px;
316
- bottom: 0;
317
- left: 12px;
318
- right: 12px;
319
- z-index: 3;
303
+ padding-inline: 6px;
320
304
  }
305
+
321
306
  [breakpointmd] media-control-bar {
322
307
  height: 48px;
323
308
  line-height: 48px;
324
309
  }
310
+
325
311
  [mediaisfullscreen] media-control-bar {
326
312
  height: 54px;
327
313
  line-height: 54px;
328
314
  }
315
+
316
+ media-control-bar {
317
+ --gradient-steps:
318
+ hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%, hsl(0 0% 0% / 0.104) 22.5%,
319
+ hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%, hsl(0 0% 0% / 0.45) 47.1%,
320
+ hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%, hsl(0 0% 0% / 0.825) 71%,
321
+ hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%, hsl(0 0% 0%) 100%;
322
+ }
323
+
324
+ media-control-bar::before {
325
+ content: '';
326
+ position: absolute;
327
+ width: 100%;
328
+ bottom: 0;
329
+ left: 0;
330
+ padding-bottom: min(100px, 25%);
331
+ background: linear-gradient(to bottom, var(--gradient-steps));
332
+ opacity: 0.8;
333
+ pointer-events: none;
334
+ }
335
+
336
+ media-control-bar > * {
337
+ position: relative;
338
+ }
329
339
  </style>
330
340
  <media-control-bar>
331
341
  <!-- Play/Pause -->
@@ -378,15 +388,17 @@ var news_default = `<template id="media-theme-news">
378
388
  </svg>
379
389
  </media-play-button>
380
390
 
381
- <template if="mediaadbreak == null">
382
- <media-seek-backward-button seekoffset="10">
383
- <svg slot="icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
384
- <path
385
- d="M16.908 21.7465C16.616 21.2426 16.2047 20.8212 15.7116 20.5206C15.2185 20.22 14.6594 20.0499 14.0851 20.0257C13.5109 20.0499 12.9518 20.22 12.4587 20.5206C11.9656 20.8212 11.5543 21.2426 11.2623 21.7465C10.5893 22.8804 10.2336 24.18 10.2336 25.5047C10.2336 26.8295 10.5893 28.129 11.2623 29.2629C11.5543 29.7668 11.9656 30.1882 12.4587 30.4888C12.9518 30.7894 13.5109 30.9595 14.0851 30.9838C14.6594 30.9595 15.2185 30.7894 15.7116 30.4888C16.2047 30.1882 16.616 29.7668 16.908 29.2629C17.581 28.129 17.9367 26.8295 17.9367 25.5047C17.9367 24.18 17.581 22.8804 16.908 21.7465ZM14.0851 29.409C12.8412 29.409 11.7886 27.6233 11.7886 25.4966C11.7886 23.3699 12.8412 21.5841 14.0851 21.5841C15.3291 21.5841 16.3817 23.3699 16.3817 25.4966C16.3817 27.6233 15.3451 29.409 14.0851 29.409ZM7.16351 30.9838V22.7043L6.39798 23.4836L5.31349 22.3796L7.38679 20.2692C7.49386 20.1598 7.63043 20.0853 7.77917 20.0551C7.92792 20.0248 8.08213 20.0403 8.22225 20.0994C8.36236 20.1585 8.48206 20.2587 8.56615 20.3872C8.65024 20.5157 8.69493 20.6667 8.69456 20.8211V31L7.16351 30.9838ZM33 9.8468V30.1883C32.9972 30.3941 32.9157 30.5907 32.7727 30.7362C32.6298 30.8817 32.4366 30.9647 32.2345 30.9675H22.2348V27.8343H29.9219V12.1845H11.4696V15.3177C11.4696 16.1782 10.8954 16.4866 10.1937 16.0158L3.52726 11.4865C3.30225 11.371 3.13094 11.17 3.05035 10.927C2.96977 10.6839 2.98641 10.4184 3.09666 10.1877C3.18836 9.99697 3.33987 9.84275 3.52726 9.7494L10.1937 5.22005C10.8954 4.74926 11.4696 5.05771 11.4696 5.91812V9.05133H32.2185C32.4248 9.05443 32.6218 9.13923 32.7677 9.28775C32.9136 9.43626 32.997 9.6368 33 9.8468Z"
386
- fill="currentColor"
387
- />
388
- </svg>
389
- </media-seek-backward-button>
391
+ <template if="breakpointsm">
392
+ <template if="mediaadbreak == null">
393
+ <media-seek-backward-button seekoffset="10">
394
+ <svg slot="icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
395
+ <path
396
+ d="M16.908 21.7465C16.616 21.2426 16.2047 20.8212 15.7116 20.5206C15.2185 20.22 14.6594 20.0499 14.0851 20.0257C13.5109 20.0499 12.9518 20.22 12.4587 20.5206C11.9656 20.8212 11.5543 21.2426 11.2623 21.7465C10.5893 22.8804 10.2336 24.18 10.2336 25.5047C10.2336 26.8295 10.5893 28.129 11.2623 29.2629C11.5543 29.7668 11.9656 30.1882 12.4587 30.4888C12.9518 30.7894 13.5109 30.9595 14.0851 30.9838C14.6594 30.9595 15.2185 30.7894 15.7116 30.4888C16.2047 30.1882 16.616 29.7668 16.908 29.2629C17.581 28.129 17.9367 26.8295 17.9367 25.5047C17.9367 24.18 17.581 22.8804 16.908 21.7465ZM14.0851 29.409C12.8412 29.409 11.7886 27.6233 11.7886 25.4966C11.7886 23.3699 12.8412 21.5841 14.0851 21.5841C15.3291 21.5841 16.3817 23.3699 16.3817 25.4966C16.3817 27.6233 15.3451 29.409 14.0851 29.409ZM7.16351 30.9838V22.7043L6.39798 23.4836L5.31349 22.3796L7.38679 20.2692C7.49386 20.1598 7.63043 20.0853 7.77917 20.0551C7.92792 20.0248 8.08213 20.0403 8.22225 20.0994C8.36236 20.1585 8.48206 20.2587 8.56615 20.3872C8.65024 20.5157 8.69493 20.6667 8.69456 20.8211V31L7.16351 30.9838ZM33 9.8468V30.1883C32.9972 30.3941 32.9157 30.5907 32.7727 30.7362C32.6298 30.8817 32.4366 30.9647 32.2345 30.9675H22.2348V27.8343H29.9219V12.1845H11.4696V15.3177C11.4696 16.1782 10.8954 16.4866 10.1937 16.0158L3.52726 11.4865C3.30225 11.371 3.13094 11.17 3.05035 10.927C2.96977 10.6839 2.98641 10.4184 3.09666 10.1877C3.18836 9.99697 3.33987 9.84275 3.52726 9.7494L10.1937 5.22005C10.8954 4.74926 11.4696 5.05771 11.4696 5.91812V9.05133H32.2185C32.4248 9.05443 32.6218 9.13923 32.7677 9.28775C32.9136 9.43626 32.997 9.6368 33 9.8468Z"
397
+ fill="currentColor"
398
+ />
399
+ </svg>
400
+ </media-seek-backward-button>
401
+ </template>
390
402
  </template>
391
403
 
392
404
  <!-- Time Display -->
@@ -402,13 +414,26 @@ var news_default = `<template id="media-theme-news">
402
414
  }
403
415
  </style>
404
416
 
405
- <template if="mediaadbreak == null">
406
- <media-time-display showduration></media-time-display>
417
+ <template if="breakpointsm">
418
+ <template if="mediaadbreak == null">
419
+ <media-time-display showduration></media-time-display>
420
+ </template>
421
+
422
+ <template if="mediaadbreak != null">
423
+ <span>Advertisement</span>
424
+ <media-time-display remaining></media-time-display>
425
+ </template>
407
426
  </template>
408
427
 
409
- <template if="mediaadbreak != null">
410
- Advertisement
411
- <media-time-display remaining></media-time-display>
428
+ <template if="!breakpointsm">
429
+ <template if="mediaadbreak == null">
430
+ <media-time-display></media-time-display>
431
+ </template>
432
+
433
+ <template if="mediaadbreak != null">
434
+ <span>Ad</span>
435
+ <media-time-display remaining></media-time-display>
436
+ </template>
412
437
  </template>
413
438
 
414
439
  <!-- Control Spacer -->
package/dist/themes/news/index.js CHANGED
@@ -93,7 +93,7 @@ var mediaThemeNews = (() => {
93
93
  </style>
94
94
 
95
95
  <media-controller
96
- breakpoints="md:480"
96
+ breakpoints="sm:300 md:480"
97
97
  defaultsubtitles="{{defaultsubtitles}}"
98
98
  defaultduration="{{defaultduration}}"
99
99
  gesturesdisabled="{{disabled}}"
@@ -106,23 +106,6 @@ var mediaThemeNews = (() => {
106
106
  <slot name="poster" slot="poster"></slot>
107
107
  <media-error-dialog slot="dialog"></media-error-dialog>
108
108
 
109
- <!-- Gradient -->
110
- <style>
111
- .nw-gradient-bottom {
112
- padding-top: 37px;
113
- position: absolute;
114
- width: 100%;
115
- height: 170px;
116
- bottom: 0;
117
- z-index: 2;
118
- pointer-events: none;
119
- background-position: bottom;
120
- background-repeat: repeat-x;
121
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACqCAYAAABsziWkAAAAAXNSR0IArs4c6QAAAQVJREFUOE9lyNdHBQAAhfHb3nvvuu2997jNe29TJJEkkkgSSSSJJJJEEkkiifRH5jsP56Xz8PM5gcC/xfDEmjhKxEOCSaREEiSbFEqkQppJpzJMJiWyINvkUCIX8kw+JQqg0BRRxaaEEqVQZsopUQGVpooS1VBjglStqaNEPTSYRko0QbNpoUQrtJl2qsN0UqILuk0PJXqhz/RTYgAGzRA1bEYoMQpjZpwSExAyk5SYgmkzQ82aOUqEIWKilJiHBbNIiSVYhhVYhTVYhw3YhC3Yhh3YhT3YhwM4hCM4hhM4hTM4hwu4hCu4hhu4hTu4hwd4hCd4hhd4hTd4hw/4hC/4hh/4/QM2/id28uIEJAAAAABJRU5ErkJggg==');
122
- }
123
- </style>
124
- <div class="nw-gradient-bottom"></div>
125
-
126
109
  <!-- Rendition Menu -->
127
110
  <style>
128
111
  media-rendition-menu,
@@ -188,6 +171,11 @@ var mediaThemeNews = (() => {
188
171
  font-weight: 400;
189
172
  text-transform: uppercase;
190
173
  margin: 0;
174
+ scale: 0.7;
175
+ }
176
+
177
+ [breakpointsm] media-play-button[slot='centered-chrome'] {
178
+ scale: 1;
191
179
  }
192
180
 
193
181
  media-play-button[slot='centered-chrome'] {
@@ -310,22 +298,44 @@ var mediaThemeNews = (() => {
310
298
  <!-- Control Bar -->
311
299
  <style>
312
300
  media-control-bar {
313
- position: absolute;
314
301
  height: 36px;
315
302
  line-height: 36px;
316
- bottom: 0;
317
- left: 12px;
318
- right: 12px;
319
- z-index: 3;
303
+ padding-inline: 6px;
320
304
  }
305
+
321
306
  [breakpointmd] media-control-bar {
322
307
  height: 48px;
323
308
  line-height: 48px;
324
309
  }
310
+
325
311
  [mediaisfullscreen] media-control-bar {
326
312
  height: 54px;
327
313
  line-height: 54px;
328
314
  }
315
+
316
+ media-control-bar {
317
+ --gradient-steps:
318
+ hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%, hsl(0 0% 0% / 0.104) 22.5%,
319
+ hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%, hsl(0 0% 0% / 0.45) 47.1%,
320
+ hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%, hsl(0 0% 0% / 0.825) 71%,
321
+ hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%, hsl(0 0% 0%) 100%;
322
+ }
323
+
324
+ media-control-bar::before {
325
+ content: '';
326
+ position: absolute;
327
+ width: 100%;
328
+ bottom: 0;
329
+ left: 0;
330
+ padding-bottom: min(100px, 25%);
331
+ background: linear-gradient(to bottom, var(--gradient-steps));
332
+ opacity: 0.8;
333
+ pointer-events: none;
334
+ }
335
+
336
+ media-control-bar > * {
337
+ position: relative;
338
+ }
329
339
  </style>
330
340
  <media-control-bar>
331
341
  <!-- Play/Pause -->
@@ -378,15 +388,17 @@ var mediaThemeNews = (() => {
378
388
  </svg>
379
389
  </media-play-button>
380
390
 
381
- <template if="mediaadbreak == null">
382
- <media-seek-backward-button seekoffset="10">
383
- <svg slot="icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
384
- <path
385
- d="M16.908 21.7465C16.616 21.2426 16.2047 20.8212 15.7116 20.5206C15.2185 20.22 14.6594 20.0499 14.0851 20.0257C13.5109 20.0499 12.9518 20.22 12.4587 20.5206C11.9656 20.8212 11.5543 21.2426 11.2623 21.7465C10.5893 22.8804 10.2336 24.18 10.2336 25.5047C10.2336 26.8295 10.5893 28.129 11.2623 29.2629C11.5543 29.7668 11.9656 30.1882 12.4587 30.4888C12.9518 30.7894 13.5109 30.9595 14.0851 30.9838C14.6594 30.9595 15.2185 30.7894 15.7116 30.4888C16.2047 30.1882 16.616 29.7668 16.908 29.2629C17.581 28.129 17.9367 26.8295 17.9367 25.5047C17.9367 24.18 17.581 22.8804 16.908 21.7465ZM14.0851 29.409C12.8412 29.409 11.7886 27.6233 11.7886 25.4966C11.7886 23.3699 12.8412 21.5841 14.0851 21.5841C15.3291 21.5841 16.3817 23.3699 16.3817 25.4966C16.3817 27.6233 15.3451 29.409 14.0851 29.409ZM7.16351 30.9838V22.7043L6.39798 23.4836L5.31349 22.3796L7.38679 20.2692C7.49386 20.1598 7.63043 20.0853 7.77917 20.0551C7.92792 20.0248 8.08213 20.0403 8.22225 20.0994C8.36236 20.1585 8.48206 20.2587 8.56615 20.3872C8.65024 20.5157 8.69493 20.6667 8.69456 20.8211V31L7.16351 30.9838ZM33 9.8468V30.1883C32.9972 30.3941 32.9157 30.5907 32.7727 30.7362C32.6298 30.8817 32.4366 30.9647 32.2345 30.9675H22.2348V27.8343H29.9219V12.1845H11.4696V15.3177C11.4696 16.1782 10.8954 16.4866 10.1937 16.0158L3.52726 11.4865C3.30225 11.371 3.13094 11.17 3.05035 10.927C2.96977 10.6839 2.98641 10.4184 3.09666 10.1877C3.18836 9.99697 3.33987 9.84275 3.52726 9.7494L10.1937 5.22005C10.8954 4.74926 11.4696 5.05771 11.4696 5.91812V9.05133H32.2185C32.4248 9.05443 32.6218 9.13923 32.7677 9.28775C32.9136 9.43626 32.997 9.6368 33 9.8468Z"
386
- fill="currentColor"
387
- />
388
- </svg>
389
- </media-seek-backward-button>
391
+ <template if="breakpointsm">
392
+ <template if="mediaadbreak == null">
393
+ <media-seek-backward-button seekoffset="10">
394
+ <svg slot="icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
395
+ <path
396
+ d="M16.908 21.7465C16.616 21.2426 16.2047 20.8212 15.7116 20.5206C15.2185 20.22 14.6594 20.0499 14.0851 20.0257C13.5109 20.0499 12.9518 20.22 12.4587 20.5206C11.9656 20.8212 11.5543 21.2426 11.2623 21.7465C10.5893 22.8804 10.2336 24.18 10.2336 25.5047C10.2336 26.8295 10.5893 28.129 11.2623 29.2629C11.5543 29.7668 11.9656 30.1882 12.4587 30.4888C12.9518 30.7894 13.5109 30.9595 14.0851 30.9838C14.6594 30.9595 15.2185 30.7894 15.7116 30.4888C16.2047 30.1882 16.616 29.7668 16.908 29.2629C17.581 28.129 17.9367 26.8295 17.9367 25.5047C17.9367 24.18 17.581 22.8804 16.908 21.7465ZM14.0851 29.409C12.8412 29.409 11.7886 27.6233 11.7886 25.4966C11.7886 23.3699 12.8412 21.5841 14.0851 21.5841C15.3291 21.5841 16.3817 23.3699 16.3817 25.4966C16.3817 27.6233 15.3451 29.409 14.0851 29.409ZM7.16351 30.9838V22.7043L6.39798 23.4836L5.31349 22.3796L7.38679 20.2692C7.49386 20.1598 7.63043 20.0853 7.77917 20.0551C7.92792 20.0248 8.08213 20.0403 8.22225 20.0994C8.36236 20.1585 8.48206 20.2587 8.56615 20.3872C8.65024 20.5157 8.69493 20.6667 8.69456 20.8211V31L7.16351 30.9838ZM33 9.8468V30.1883C32.9972 30.3941 32.9157 30.5907 32.7727 30.7362C32.6298 30.8817 32.4366 30.9647 32.2345 30.9675H22.2348V27.8343H29.9219V12.1845H11.4696V15.3177C11.4696 16.1782 10.8954 16.4866 10.1937 16.0158L3.52726 11.4865C3.30225 11.371 3.13094 11.17 3.05035 10.927C2.96977 10.6839 2.98641 10.4184 3.09666 10.1877C3.18836 9.99697 3.33987 9.84275 3.52726 9.7494L10.1937 5.22005C10.8954 4.74926 11.4696 5.05771 11.4696 5.91812V9.05133H32.2185C32.4248 9.05443 32.6218 9.13923 32.7677 9.28775C32.9136 9.43626 32.997 9.6368 33 9.8468Z"
397
+ fill="currentColor"
398
+ />
399
+ </svg>
400
+ </media-seek-backward-button>
401
+ </template>
390
402
  </template>
391
403
 
392
404
  <!-- Time Display -->
@@ -402,13 +414,26 @@ var mediaThemeNews = (() => {
402
414
  }
403
415
  </style>
404
416
 
405
- <template if="mediaadbreak == null">
406
- <media-time-display showduration></media-time-display>
417
+ <template if="breakpointsm">
418
+ <template if="mediaadbreak == null">
419
+ <media-time-display showduration></media-time-display>
420
+ </template>
421
+
422
+ <template if="mediaadbreak != null">
423
+ <span>Advertisement</span>
424
+ <media-time-display remaining></media-time-display>
425
+ </template>
407
426
  </template>
408
427
 
409
- <template if="mediaadbreak != null">
410
- Advertisement
411
- <media-time-display remaining></media-time-display>
428
+ <template if="!breakpointsm">
429
+ <template if="mediaadbreak == null">
430
+ <media-time-display></media-time-display>
431
+ </template>
432
+
433
+ <template if="mediaadbreak != null">
434
+ <span>Ad</span>
435
+ <media-time-display remaining></media-time-display>
436
+ </template>
412
437
  </template>
413
438
 
414
439
  <!-- Control Spacer -->
package/dist/themes/news/index.mjs CHANGED
@@ -68,7 +68,7 @@ var news_default = `<template id="media-theme-news">
68
68
  </style>
69
69
 
70
70
  <media-controller
71
- breakpoints="md:480"
71
+ breakpoints="sm:300 md:480"
72
72
  defaultsubtitles="{{defaultsubtitles}}"
73
73
  defaultduration="{{defaultduration}}"
74
74
  gesturesdisabled="{{disabled}}"
@@ -81,23 +81,6 @@ var news_default = `<template id="media-theme-news">
81
81
  <slot name="poster" slot="poster"></slot>
82
82
  <media-error-dialog slot="dialog"></media-error-dialog>
83
83
 
84
- <!-- Gradient -->
85
- <style>
86
- .nw-gradient-bottom {
87
- padding-top: 37px;
88
- position: absolute;
89
- width: 100%;
90
- height: 170px;
91
- bottom: 0;
92
- z-index: 2;
93
- pointer-events: none;
94
- background-position: bottom;
95
- background-repeat: repeat-x;
96
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACqCAYAAABsziWkAAAAAXNSR0IArs4c6QAAAQVJREFUOE9lyNdHBQAAhfHb3nvvuu2997jNe29TJJEkkkgSSSSJJJJEEkkiifRH5jsP56Xz8PM5gcC/xfDEmjhKxEOCSaREEiSbFEqkQppJpzJMJiWyINvkUCIX8kw+JQqg0BRRxaaEEqVQZsopUQGVpooS1VBjglStqaNEPTSYRko0QbNpoUQrtJl2qsN0UqILuk0PJXqhz/RTYgAGzRA1bEYoMQpjZpwSExAyk5SYgmkzQ82aOUqEIWKilJiHBbNIiSVYhhVYhTVYhw3YhC3Yhh3YhT3YhwM4hCM4hhM4hTM4hwu4hCu4hhu4hTu4hwd4hCd4hhd4hTd4hw/4hC/4hh/4/QM2/id28uIEJAAAAABJRU5ErkJggg==');
97
- }
98
- </style>
99
- <div class="nw-gradient-bottom"></div>
100
-
101
84
  <!-- Rendition Menu -->
102
85
  <style>
103
86
  media-rendition-menu,
@@ -163,6 +146,11 @@ var news_default = `<template id="media-theme-news">
163
146
  font-weight: 400;
164
147
  text-transform: uppercase;
165
148
  margin: 0;
149
+ scale: 0.7;
150
+ }
151
+
152
+ [breakpointsm] media-play-button[slot='centered-chrome'] {
153
+ scale: 1;
166
154
  }
167
155
 
168
156
  media-play-button[slot='centered-chrome'] {
@@ -285,22 +273,44 @@ var news_default = `<template id="media-theme-news">
285
273
  <!-- Control Bar -->
286
274
  <style>
287
275
  media-control-bar {
288
- position: absolute;
289
276
  height: 36px;
290
277
  line-height: 36px;
291
- bottom: 0;
292
- left: 12px;
293
- right: 12px;
294
- z-index: 3;
278
+ padding-inline: 6px;
295
279
  }
280
+
296
281
  [breakpointmd] media-control-bar {
297
282
  height: 48px;
298
283
  line-height: 48px;
299
284
  }
285
+
300
286
  [mediaisfullscreen] media-control-bar {
301
287
  height: 54px;
302
288
  line-height: 54px;
303
289
  }
290
+
291
+ media-control-bar {
292
+ --gradient-steps:
293
+ hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%, hsl(0 0% 0% / 0.104) 22.5%,
294
+ hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%, hsl(0 0% 0% / 0.45) 47.1%,
295
+ hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%, hsl(0 0% 0% / 0.825) 71%,
296
+ hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%, hsl(0 0% 0%) 100%;
297
+ }
298
+
299
+ media-control-bar::before {
300
+ content: '';
301
+ position: absolute;
302
+ width: 100%;
303
+ bottom: 0;
304
+ left: 0;
305
+ padding-bottom: min(100px, 25%);
306
+ background: linear-gradient(to bottom, var(--gradient-steps));
307
+ opacity: 0.8;
308
+ pointer-events: none;
309
+ }
310
+
311
+ media-control-bar > * {
312
+ position: relative;
313
+ }
304
314
  </style>
305
315
  <media-control-bar>
306
316
  <!-- Play/Pause -->
@@ -353,15 +363,17 @@ var news_default = `<template id="media-theme-news">
353
363
  </svg>
354
364
  </media-play-button>
355
365
 
356
- <template if="mediaadbreak == null">
357
- <media-seek-backward-button seekoffset="10">
358
- <svg slot="icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
359
- <path
360
- d="M16.908 21.7465C16.616 21.2426 16.2047 20.8212 15.7116 20.5206C15.2185 20.22 14.6594 20.0499 14.0851 20.0257C13.5109 20.0499 12.9518 20.22 12.4587 20.5206C11.9656 20.8212 11.5543 21.2426 11.2623 21.7465C10.5893 22.8804 10.2336 24.18 10.2336 25.5047C10.2336 26.8295 10.5893 28.129 11.2623 29.2629C11.5543 29.7668 11.9656 30.1882 12.4587 30.4888C12.9518 30.7894 13.5109 30.9595 14.0851 30.9838C14.6594 30.9595 15.2185 30.7894 15.7116 30.4888C16.2047 30.1882 16.616 29.7668 16.908 29.2629C17.581 28.129 17.9367 26.8295 17.9367 25.5047C17.9367 24.18 17.581 22.8804 16.908 21.7465ZM14.0851 29.409C12.8412 29.409 11.7886 27.6233 11.7886 25.4966C11.7886 23.3699 12.8412 21.5841 14.0851 21.5841C15.3291 21.5841 16.3817 23.3699 16.3817 25.4966C16.3817 27.6233 15.3451 29.409 14.0851 29.409ZM7.16351 30.9838V22.7043L6.39798 23.4836L5.31349 22.3796L7.38679 20.2692C7.49386 20.1598 7.63043 20.0853 7.77917 20.0551C7.92792 20.0248 8.08213 20.0403 8.22225 20.0994C8.36236 20.1585 8.48206 20.2587 8.56615 20.3872C8.65024 20.5157 8.69493 20.6667 8.69456 20.8211V31L7.16351 30.9838ZM33 9.8468V30.1883C32.9972 30.3941 32.9157 30.5907 32.7727 30.7362C32.6298 30.8817 32.4366 30.9647 32.2345 30.9675H22.2348V27.8343H29.9219V12.1845H11.4696V15.3177C11.4696 16.1782 10.8954 16.4866 10.1937 16.0158L3.52726 11.4865C3.30225 11.371 3.13094 11.17 3.05035 10.927C2.96977 10.6839 2.98641 10.4184 3.09666 10.1877C3.18836 9.99697 3.33987 9.84275 3.52726 9.7494L10.1937 5.22005C10.8954 4.74926 11.4696 5.05771 11.4696 5.91812V9.05133H32.2185C32.4248 9.05443 32.6218 9.13923 32.7677 9.28775C32.9136 9.43626 32.997 9.6368 33 9.8468Z"
361
- fill="currentColor"
362
- />
363
- </svg>
364
- </media-seek-backward-button>
366
+ <template if="breakpointsm">
367
+ <template if="mediaadbreak == null">
368
+ <media-seek-backward-button seekoffset="10">
369
+ <svg slot="icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
370
+ <path
371
+ d="M16.908 21.7465C16.616 21.2426 16.2047 20.8212 15.7116 20.5206C15.2185 20.22 14.6594 20.0499 14.0851 20.0257C13.5109 20.0499 12.9518 20.22 12.4587 20.5206C11.9656 20.8212 11.5543 21.2426 11.2623 21.7465C10.5893 22.8804 10.2336 24.18 10.2336 25.5047C10.2336 26.8295 10.5893 28.129 11.2623 29.2629C11.5543 29.7668 11.9656 30.1882 12.4587 30.4888C12.9518 30.7894 13.5109 30.9595 14.0851 30.9838C14.6594 30.9595 15.2185 30.7894 15.7116 30.4888C16.2047 30.1882 16.616 29.7668 16.908 29.2629C17.581 28.129 17.9367 26.8295 17.9367 25.5047C17.9367 24.18 17.581 22.8804 16.908 21.7465ZM14.0851 29.409C12.8412 29.409 11.7886 27.6233 11.7886 25.4966C11.7886 23.3699 12.8412 21.5841 14.0851 21.5841C15.3291 21.5841 16.3817 23.3699 16.3817 25.4966C16.3817 27.6233 15.3451 29.409 14.0851 29.409ZM7.16351 30.9838V22.7043L6.39798 23.4836L5.31349 22.3796L7.38679 20.2692C7.49386 20.1598 7.63043 20.0853 7.77917 20.0551C7.92792 20.0248 8.08213 20.0403 8.22225 20.0994C8.36236 20.1585 8.48206 20.2587 8.56615 20.3872C8.65024 20.5157 8.69493 20.6667 8.69456 20.8211V31L7.16351 30.9838ZM33 9.8468V30.1883C32.9972 30.3941 32.9157 30.5907 32.7727 30.7362C32.6298 30.8817 32.4366 30.9647 32.2345 30.9675H22.2348V27.8343H29.9219V12.1845H11.4696V15.3177C11.4696 16.1782 10.8954 16.4866 10.1937 16.0158L3.52726 11.4865C3.30225 11.371 3.13094 11.17 3.05035 10.927C2.96977 10.6839 2.98641 10.4184 3.09666 10.1877C3.18836 9.99697 3.33987 9.84275 3.52726 9.7494L10.1937 5.22005C10.8954 4.74926 11.4696 5.05771 11.4696 5.91812V9.05133H32.2185C32.4248 9.05443 32.6218 9.13923 32.7677 9.28775C32.9136 9.43626 32.997 9.6368 33 9.8468Z"
372
+ fill="currentColor"
373
+ />
374
+ </svg>
375
+ </media-seek-backward-button>
376
+ </template>
365
377
  </template>
366
378
 
367
379
  <!-- Time Display -->
@@ -377,13 +389,26 @@ var news_default = `<template id="media-theme-news">
377
389
  }
378
390
  </style>
379
391
 
380
- <template if="mediaadbreak == null">
381
- <media-time-display showduration></media-time-display>
392
+ <template if="breakpointsm">
393
+ <template if="mediaadbreak == null">
394
+ <media-time-display showduration></media-time-display>
395
+ </template>
396
+
397
+ <template if="mediaadbreak != null">
398
+ <span>Advertisement</span>
399
+ <media-time-display remaining></media-time-display>
400
+ </template>
382
401
  </template>
383
402
 
384
- <template if="mediaadbreak != null">
385
- Advertisement
386
- <media-time-display remaining></media-time-display>
403
+ <template if="!breakpointsm">
404
+ <template if="mediaadbreak == null">
405
+ <media-time-display></media-time-display>
406
+ </template>
407
+
408
+ <template if="mediaadbreak != null">
409
+ <span>Ad</span>
410
+ <media-time-display remaining></media-time-display>
411
+ </template>
387
412
  </template>
388
413
 
389
414
  <!-- Control Spacer -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mux/mux-player",
3
- "version": "3.5.1",
3
+ "version": "3.5.2-canary.1",
4
4
  "description": "An open source Mux player web component that Just Works™",
5
5
  "homepage": "https://mux.com/player",
6
6
  "keywords": [