@mux/mux-player 0.1.0-beta.23 → 0.1.0-beta.24

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 (70) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +9 -9
  3. package/coverage/lcov-report/index.html +29 -29
  4. package/coverage/lcov-report/src/dialog.ts.html +1 -1
  5. package/coverage/lcov-report/src/errors.ts.html +1 -1
  6. package/coverage/lcov-report/src/helpers.ts.html +30 -9
  7. package/coverage/lcov-report/src/html.ts.html +159 -9
  8. package/coverage/lcov-report/src/index.html +52 -52
  9. package/coverage/lcov-report/src/index.ts.html +108 -24
  10. package/coverage/lcov-report/src/logger.ts.html +1 -1
  11. package/coverage/lcov-report/src/media-chrome/dialog.ts.html +1 -1
  12. package/coverage/lcov-report/src/media-chrome/index.html +1 -1
  13. package/coverage/lcov-report/src/media-chrome/time-display.ts.html +1 -1
  14. package/coverage/lcov-report/src/media-theme-mux/icons/airplay.svg.html +1 -1
  15. package/coverage/lcov-report/src/media-theme-mux/icons/captions-off.svg.html +1 -1
  16. package/coverage/lcov-report/src/media-theme-mux/icons/captions-on.svg.html +1 -1
  17. package/coverage/lcov-report/src/media-theme-mux/icons/cast-enter.svg.html +103 -0
  18. package/coverage/lcov-report/src/media-theme-mux/icons/cast-exit.svg.html +106 -0
  19. package/coverage/lcov-report/src/media-theme-mux/icons/fullscreen-enter.svg.html +1 -1
  20. package/coverage/lcov-report/src/media-theme-mux/icons/fullscreen-exit.svg.html +1 -1
  21. package/coverage/lcov-report/src/media-theme-mux/icons/index.html +33 -3
  22. package/coverage/lcov-report/src/media-theme-mux/icons/pause.svg.html +1 -1
  23. package/coverage/lcov-report/src/media-theme-mux/icons/pip-enter.svg.html +1 -1
  24. package/coverage/lcov-report/src/media-theme-mux/icons/pip-exit.svg.html +1 -1
  25. package/coverage/lcov-report/src/media-theme-mux/icons/play.svg.html +1 -1
  26. package/coverage/lcov-report/src/media-theme-mux/icons/seek-backward.svg.html +1 -1
  27. package/coverage/lcov-report/src/media-theme-mux/icons/seek-forward.svg.html +1 -1
  28. package/coverage/lcov-report/src/media-theme-mux/icons/volume-high.svg.html +1 -1
  29. package/coverage/lcov-report/src/media-theme-mux/icons/volume-low.svg.html +1 -1
  30. package/coverage/lcov-report/src/media-theme-mux/icons/volume-medium.svg.html +1 -1
  31. package/coverage/lcov-report/src/media-theme-mux/icons/volume-off.svg.html +1 -1
  32. package/coverage/lcov-report/src/media-theme-mux/icons.ts.html +18 -6
  33. package/coverage/lcov-report/src/media-theme-mux/index.html +24 -24
  34. package/coverage/lcov-report/src/media-theme-mux/media-theme-mux.ts.html +120 -132
  35. package/coverage/lcov-report/src/media-theme-mux/styles.css.html +117 -18
  36. package/coverage/lcov-report/src/styles.css.html +1 -1
  37. package/coverage/lcov-report/src/template.ts.html +108 -63
  38. package/coverage/lcov-report/src/utils.ts.html +1 -1
  39. package/coverage/lcov-report/src/video-api.ts.html +91 -13
  40. package/coverage/lcov.info +1451 -1227
  41. package/dist/index.cjs.js +448 -310
  42. package/dist/index.mjs +243 -197
  43. package/dist/mux-player.js +476 -338
  44. package/dist/mux-player.mjs +476 -338
  45. package/dist/tsconfig.tsbuildinfo +1 -1
  46. package/dist/types/helpers.d.ts +1 -0
  47. package/dist/types/html.d.ts +5 -0
  48. package/dist/types/index.d.ts +3 -3
  49. package/dist/types/media-theme-mux/icons.d.ts +2 -0
  50. package/dist/types/media-theme-mux/media-theme-mux.d.ts +12 -12
  51. package/dist/types/video-api.d.ts +4 -0
  52. package/dist/types-ts3.4/helpers.d.ts +1 -0
  53. package/dist/types-ts3.4/html.d.ts +5 -0
  54. package/dist/types-ts3.4/index.d.ts +3 -3
  55. package/dist/types-ts3.4/media-theme-mux/icons.d.ts +2 -0
  56. package/dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts +12 -12
  57. package/dist/types-ts3.4/video-api.d.ts +2 -0
  58. package/package.json +5 -5
  59. package/src/helpers.ts +7 -0
  60. package/src/html.ts +50 -0
  61. package/src/index.ts +41 -13
  62. package/src/media-theme-mux/icons/cast-enter.svg +6 -0
  63. package/src/media-theme-mux/icons/cast-exit.svg +7 -0
  64. package/src/media-theme-mux/icons.ts +4 -0
  65. package/src/media-theme-mux/media-theme-mux.ts +69 -73
  66. package/src/media-theme-mux/styles.css +47 -14
  67. package/src/template.ts +70 -55
  68. package/src/types.d.ts +1 -0
  69. package/src/video-api.ts +27 -1
  70. package/test/player.test.js +34 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.1.0-beta.24](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.23...@mux/mux-player@0.1.0-beta.24) (2022-07-21)
7
+
8
+ ### Bug Fixes
9
+
10
+ - add Mux flavor cast icon & fix xs size bug ([#299](https://github.com/muxinc/elements/issues/299)) ([8374ff1](https://github.com/muxinc/elements/commit/8374ff17e294cbe3ad899749ab0361b78ffe0274))
11
+ - **mux-player:** Clean up how metadata is set from mux-player to underlying mux-video element. Force upgrades and init when setting metadata. ([d3b2347](https://github.com/muxinc/elements/commit/d3b2347b1d4d7ebbbd882879f69e9d082f12dd80))
12
+ - upgrade MC to v0.8.0 and adjust time range styles ([#294](https://github.com/muxinc/elements/issues/294)) ([030fdc6](https://github.com/muxinc/elements/commit/030fdc649517a538fc89c5b3d9edca42e58634ef))
13
+ - upgrade MC v0.8.1 ([#298](https://github.com/muxinc/elements/issues/298)) ([fc4a74c](https://github.com/muxinc/elements/commit/fc4a74cfaadf90ee8d4ed89751755d56e77df79e))
14
+
15
+ ### Features
16
+
17
+ - add ability to choose a Media Theme via attribute ([#269](https://github.com/muxinc/elements/issues/269)) ([77d0386](https://github.com/muxinc/elements/commit/77d0386606d5ecccb7c322ce487c9287d16374fd))
18
+ - add defaultMuted, defaultPlaybackRate props ([#252](https://github.com/muxinc/elements/issues/252)) ([1a72165](https://github.com/muxinc/elements/commit/1a7216545cba27b34bc743cf5dd6225d4dcae738))
19
+ - **mux-player:** Add textTracks prop alongside add/remove tracks methods. ([c041a72](https://github.com/muxinc/elements/commit/c041a72ce414fc52fcd90e22cc7730ef2e349c31))
20
+ - **playback-core, mux-player:** Add support to removeTextTrack. Remove all identified tracks on hls destroy. Add methods to mux-player. ([d090b06](https://github.com/muxinc/elements/commit/d090b060a8b8b3772e74762176af9881299bf894))
21
+
6
22
  # [0.1.0-beta.23](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.22...@mux/mux-player@0.1.0-beta.23) (2022-07-11)
7
23
 
8
24
  **Note:** Version bump only for package @mux/mux-player
package/README.md CHANGED
@@ -78,7 +78,6 @@ Now you are free to use this web component in your HTML, just as you would with
78
78
  metadata-video-title="Big Buck Bunny"
79
79
  metadata-viewer-user-id="user-id-1234"
80
80
  stream-type="on-demand"
81
- controls
82
81
  ></mux-player>
83
82
  </body>
84
83
  ```
@@ -95,7 +94,6 @@ To set other available metadata fields use the `metadata` property on the `<mux-
95
94
  env-key="mux-data-env-key"
96
95
  metadata-video-title="Big Buck Bunny"
97
96
  metadata-viewer-user-id="user-id-1234"
98
- controls
99
97
  >
100
98
  </mux-player>
101
99
 
@@ -131,7 +129,6 @@ If you prefer to use the in-code MSE-based engine (currently hls.js) whenever po
131
129
  metadata-video-title="Big Buck Bunny"
132
130
  metadata-viewer-user-id="user-id-1234"
133
131
  prefer-mse
134
- controls
135
132
  >
136
133
  </mux-player>
137
134
  ```
@@ -162,10 +159,11 @@ If you prefer to use the in-code MSE-based engine (currently hls.js) whenever po
162
159
  | `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
163
160
  | `muted` | `boolean` | Toggles the muted state of the player. | Varies |
164
161
  | `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false |
165
- | `playback-rate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
162
+ | `playbackrate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
166
163
  | `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
167
164
  | `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
168
165
  | `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A |
166
+ | `custom-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Video. | N/A |
169
167
 
170
168
  ### Methods
171
169
 
@@ -178,27 +176,29 @@ If you prefer to use the in-code MSE-based engine (currently hls.js) whenever po
178
176
 
179
177
  | Prop | Description | Default |
180
178
  | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
181
- | `autoplay` | A `Boolean` that reflects the autoplay HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption. | `false` |
179
+ | `autoplay` | A `Boolean` that reflects the `autoplay` HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption. | `false` |
182
180
  | `buffered` <sub><sup>Read only</sup></sub> | Returns a `TimeRanges` object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed. | `undefined` |
183
- | `controls` | Is a Boolean that reflects the controls HTML attribute, indicating whether user interface items for controlling the resource should be displayed. | `false` |
184
181
  | `crossOrigin` | A DOMString indicating the CORS setting for this media element. | `null` |
185
182
  | `currentTime` | A double-precision floating-point value indicating the current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline. | `0` |
183
+ | `defaultMuted` | Is a `Boolean` that reflects the `muted` HTML attribute, determines whether audio is muted by default. `true` if the audio output should be muted by default and `false` otherwise. | `false` |
184
+ | `defaultPlaybackRate` | Is a double that reflects the `playbackrate` HTML attribute, it indicates the default playback rate for the media. | `1` |
186
185
  | `duration` <sub><sup>Read only</sup></sub> | A read-only double-precision floating-point value indicating the total duration of the media in seconds. If no media data is available, the returned value is `NaN`. If the media is of indefinite length (such as streamed live media, a WebRTC call's media, or similar), the value is `+Infinity`. | `NaN` |
187
186
  | `ended` <sub><sup>Read only</sup></sub> | Returns a `Boolean` that indicates whether the media element has finished playing. | `false` |
188
- | `loop` | A `Boolean` that reflects the loop HTML attribute, which indicates whether the media element should start over when it reaches the end. | `false` |
187
+ | `loop` | A `Boolean` that reflects the `loop` HTML attribute, which indicates whether the media element should start over when it reaches the end. | `false` |
189
188
  | `metadata` | The metadata property can be used to set the Mux Data metadata properties in an easy way. Take a look at the [metadata guide](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata) to view an exhaustive list of available values. | `{}` |
190
189
  | `muted` | Is a `Boolean` that determines whether audio is muted. `true` if the audio is muted and `false` otherwise. | `false` |
191
190
  | `paused` <sub><sup>Read only</sup></sub> | Returns a `Boolean` that indicates whether the media element is paused. | `true` |
192
191
  | `playbackRate` | Is a double that indicates the rate at which the media is being played back. | `1` |
193
192
  | `playsInline` | A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen. | `false` |
194
- | `preload` | Is a `DOMString` that reflects the preload HTML attribute, indicating what data should be preloaded, if any. Possible values are: `none`, `metadata`, `auto`. | `undefined` |
195
- | `src` | Is a `String` that reflects the src HTML attribute, which contains the URL of a media resource to use. | `undefined` |
193
+ | `preload` | Is a `DOMString` that reflects the `preload` HTML attribute, indicating what data should be preloaded, if any. Possible values are: `none`, `metadata`, `auto`. | `undefined` |
194
+ | `src` | Is a `String` that reflects the `src` HTML attribute, which contains the URL of a media resource to use. | `undefined` |
196
195
  | `startTime` | `Number` that specifies where in the media's timeline you want playback to start (in seconds). | `0` |
197
196
  | `thumbnailTime` | `Number` offset (in seconds) for the poster image you want to show before loading media. If no `thumbnailTime` is specified, `startTime` will be used by default. NOTE: This feature currently cannot be used with `tokens.thumbnail`. | `0` |
198
197
  | `tokens` | The tokens property accepts an object with the following signature `{ playback: string, thumbnail: string, storyboard: string }`. Use it to set all the signing URL tokens in one go. | `{}` |
199
198
  | `videoHeight` <sub><sup>Read only</sup></sub> | Returns an unsigned integer value indicating the intrinsic height of the resource in CSS pixels, or 0 if no media is available yet. | `0` |
200
199
  | `videoWidth` <sub><sup>Read only</sup></sub> | Returns an unsigned integer value indicating the intrinsic width of the resource in CSS pixels, or 0 if no media is available yet. | `0` |
201
200
  | `volume` | Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest). | `1` |
201
+ | `customDomain` | Is a `String` that assigns a custom domain to be used for Mux Video. | `undefined` |
202
202
 
203
203
  ### Events
204
204
 
package/coverage/lcov-report/index.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">82.9% </span>
26
+ <span class="strong">82.88% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>2454/2960</span>
28
+ <span class='fraction'>2596/3132</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">83.17% </span>
33
+ <span class="strong">81.95% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>262/315</span>
35
+ <span class='fraction'>268/327</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">76.38% </span>
40
+ <span class="strong">75.77% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>165/216</span>
42
+ <span class='fraction'>172/227</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">82.9% </span>
47
+ <span class="strong">82.88% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>2454/2960</span>
49
+ <span class='fraction'>2596/3132</span>
50
50
  </div>
51
51
 
52
52
 
@@ -80,17 +80,17 @@
80
80
  </thead>
81
81
  <tbody><tr>
82
82
  <td class="file high" data-value="src"><a href="src/index.html">src</a></td>
83
- <td data-value="82.48" class="pic high">
83
+ <td data-value="82.11" class="pic high">
84
84
  <div class="chart"><div class="cover-fill" style="width: 82%"></div><div class="cover-empty" style="width: 18%"></div></div>
85
85
  </td>
86
- <td data-value="82.48" class="pct high">82.48%</td>
87
- <td data-value="2004" class="abs high">1653/2004</td>
88
- <td data-value="82.44" class="pct high">82.44%</td>
89
- <td data-value="262" class="abs high">216/262</td>
90
- <td data-value="75" class="pct medium">75%</td>
91
- <td data-value="164" class="abs medium">123/164</td>
92
- <td data-value="82.48" class="pct high">82.48%</td>
93
- <td data-value="2004" class="abs high">1653/2004</td>
86
+ <td data-value="82.11" class="pct high">82.11%</td>
87
+ <td data-value="2130" class="abs high">1749/2130</td>
88
+ <td data-value="80.95" class="pct high">80.95%</td>
89
+ <td data-value="273" class="abs high">221/273</td>
90
+ <td data-value="74.13" class="pct medium">74.13%</td>
91
+ <td data-value="174" class="abs medium">129/174</td>
92
+ <td data-value="82.11" class="pct high">82.11%</td>
93
+ <td data-value="2130" class="abs high">1749/2130</td>
94
94
  </tr>
95
95
 
96
96
  <tr>
@@ -110,17 +110,17 @@
110
110
 
111
111
  <tr>
112
112
  <td class="file high" data-value="src/media-theme-mux"><a href="src/media-theme-mux/index.html">src/media-theme-mux</a></td>
113
- <td data-value="86.24" class="pic high">
113
+ <td data-value="86.96" class="pic high">
114
114
  <div class="chart"><div class="cover-fill" style="width: 86%"></div><div class="cover-empty" style="width: 14%"></div></div>
115
115
  </td>
116
- <td data-value="86.24" class="pct high">86.24%</td>
117
- <td data-value="596" class="abs high">514/596</td>
118
- <td data-value="92.5" class="pct high">92.5%</td>
119
- <td data-value="40" class="abs high">37/40</td>
120
- <td data-value="87.17" class="pct high">87.17%</td>
121
- <td data-value="39" class="abs high">34/39</td>
122
- <td data-value="86.24" class="pct high">86.24%</td>
123
- <td data-value="596" class="abs high">514/596</td>
116
+ <td data-value="86.96" class="pct high">86.96%</td>
117
+ <td data-value="629" class="abs high">547/629</td>
118
+ <td data-value="92.68" class="pct high">92.68%</td>
119
+ <td data-value="41" class="abs high">38/41</td>
120
+ <td data-value="87.5" class="pct high">87.5%</td>
121
+ <td data-value="40" class="abs high">35/40</td>
122
+ <td data-value="86.96" class="pct high">86.96%</td>
123
+ <td data-value="629" class="abs high">547/629</td>
124
124
  </tr>
125
125
 
126
126
  <tr>
@@ -129,13 +129,13 @@
129
129
  <div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
130
130
  </td>
131
131
  <td data-value="100" class="pct high">100%</td>
132
- <td data-value="98" class="abs high">98/98</td>
132
+ <td data-value="111" class="abs high">111/111</td>
133
133
  <td data-value="100" class="pct high">100%</td>
134
134
  <td data-value="0" class="abs high">0/0</td>
135
135
  <td data-value="100" class="pct high">100%</td>
136
136
  <td data-value="0" class="abs high">0/0</td>
137
137
  <td data-value="100" class="pct high">100%</td>
138
- <td data-value="98" class="abs high">98/98</td>
138
+ <td data-value="111" class="abs high">111/111</td>
139
139
  </tr>
140
140
 
141
141
  </tbody>
@@ -146,7 +146,7 @@
146
146
  <div class='footer quiet pad2 space-top1 center small'>
147
147
  Code coverage generated by
148
148
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
149
- at Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
149
+ at Thu Jul 21 2022 15:31:01 GMT+0000 (Coordinated Universal Time)
150
150
  </div>
151
151
  <script src="prettify.js"></script>
152
152
  <script>
package/coverage/lcov-report/src/dialog.ts.html CHANGED
@@ -232,7 +232,7 @@ export default MxpDialog;
232
232
  <div class='footer quiet pad2 space-top1 center small'>
233
233
  Code coverage generated by
234
234
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
235
- at Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
235
+ at Thu Jul 21 2022 15:31:01 GMT+0000 (Coordinated Universal Time)
236
236
  </div>
237
237
  <script src="../prettify.js"></script>
238
238
  <script>
package/coverage/lcov-report/src/errors.ts.html CHANGED
@@ -559,7 +559,7 @@ export function getErrorLogs(
559
559
  <div class='footer quiet pad2 space-top1 center small'>
560
560
  Code coverage generated by
561
561
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
562
- at Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
562
+ at Thu Jul 21 2022 15:31:01 GMT+0000 (Coordinated Universal Time)
563
563
  </div>
564
564
  <script src="../prettify.js"></script>
565
565
  <script>
package/coverage/lcov-report/src/helpers.ts.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">97.19% </span>
26
+ <span class="strong">96.49% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>104/107</span>
28
+ <span class='fraction'>110/114</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">88.88% </span>
33
+ <span class="strong">80.95% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>16/18</span>
35
+ <span class='fraction'>17/21</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>9/9</span>
42
+ <span class='fraction'>10/10</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">97.19% </span>
47
+ <span class="strong">96.49% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>104/107</span>
49
+ <span class='fraction'>110/114</span>
50
50
  </div>
51
51
 
52
52
 
@@ -170,7 +170,14 @@
170
170
  <a name='L105'></a><a href='#L105'>105</a>
171
171
  <a name='L106'></a><a href='#L106'>106</a>
172
172
  <a name='L107'></a><a href='#L107'>107</a>
173
- <a name='L108'></a><a href='#L108'>108</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
173
+ <a name='L108'></a><a href='#L108'>108</a>
174
+ <a name='L109'></a><a href='#L109'>109</a>
175
+ <a name='L110'></a><a href='#L110'>110</a>
176
+ <a name='L111'></a><a href='#L111'>111</a>
177
+ <a name='L112'></a><a href='#L112'>112</a>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
174
181
  <span class="cline-any cline-yes">4x</span>
175
182
  <span class="cline-any cline-yes">4x</span>
176
183
  <span class="cline-any cline-yes">4x</span>
@@ -229,6 +236,13 @@
229
236
  <span class="cline-any cline-yes">4x</span>
230
237
  <span class="cline-any cline-yes">4x</span>
231
238
  <span class="cline-any cline-yes">4x</span>
239
+ <span class="cline-any cline-yes">3x</span>
240
+ <span class="cline-any cline-no">&nbsp;</span>
241
+ <span class="cline-any cline-yes">3x</span>
242
+ <span class="cline-any cline-yes">3x</span>
243
+ <span class="cline-any cline-yes">4x</span>
244
+ <span class="cline-any cline-yes">4x</span>
245
+ <span class="cline-any cline-yes">4x</span>
232
246
  <span class="cline-any cline-yes">4x</span>
233
247
  <span class="cline-any cline-yes">4x</span>
234
248
  <span class="cline-any cline-yes">4x</span>
@@ -335,6 +349,13 @@ export const getStoryboardURLFromPlaybackId = (
335
349
  })}`;
336
350
  };
337
351
  &nbsp;
352
+ export function castThemeName(themeName?: string): string | undefined {
353
+ if (<span class="branch-0 cbranch-no" title="branch not covered" >themeName &amp;&amp; /^media-theme-[\w-]+$/.test(themeName)) <span class="branch-0 cbranch-no" title="branch not covered" >{</span></span>
354
+ <span class="cstat-no" title="statement not covered" > return themeName;</span>
355
+ }
356
+ return undefined;
357
+ }
358
+ &nbsp;
338
359
  const attrToPropNameMap: Record&lt;string, string&gt; = {
339
360
  crossorigin: 'crossOrigin',
340
361
  playsinline: 'playsInline',
@@ -391,7 +412,7 @@ export const isInLiveWindow = (el: MuxPlayerElement) =&gt; {
391
412
  <div class='footer quiet pad2 space-top1 center small'>
392
413
  Code coverage generated by
393
414
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
394
- at Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
415
+ at Thu Jul 21 2022 15:31:01 GMT+0000 (Coordinated Universal Time)
395
416
  </div>
396
417
  <script src="../prettify.js"></script>
397
418
  <script>
package/coverage/lcov-report/src/html.ts.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">98.18% </span>
26
+ <span class="strong">98.6% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>162/165</span>
28
+ <span class='fraction'>212/215</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">91.66% </span>
33
+ <span class="strong">87.09% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>22/24</span>
35
+ <span class='fraction'>27/31</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
40
  <span class="strong">100% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>16/16</span>
42
+ <span class='fraction'>18/18</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">98.18% </span>
47
+ <span class="strong">98.6% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>162/165</span>
49
+ <span class='fraction'>212/215</span>
50
50
  </div>
51
51
 
52
52
 
@@ -228,7 +228,57 @@
228
228
  <a name='L163'></a><a href='#L163'>163</a>
229
229
  <a name='L164'></a><a href='#L164'>164</a>
230
230
  <a name='L165'></a><a href='#L165'>165</a>
231
- <a name='L166'></a><a href='#L166'>166</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a>
243
+ <a name='L178'></a><a href='#L178'>178</a>
244
+ <a name='L179'></a><a href='#L179'>179</a>
245
+ <a name='L180'></a><a href='#L180'>180</a>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a>
262
+ <a name='L197'></a><a href='#L197'>197</a>
263
+ <a name='L198'></a><a href='#L198'>198</a>
264
+ <a name='L199'></a><a href='#L199'>199</a>
265
+ <a name='L200'></a><a href='#L200'>200</a>
266
+ <a name='L201'></a><a href='#L201'>201</a>
267
+ <a name='L202'></a><a href='#L202'>202</a>
268
+ <a name='L203'></a><a href='#L203'>203</a>
269
+ <a name='L204'></a><a href='#L204'>204</a>
270
+ <a name='L205'></a><a href='#L205'>205</a>
271
+ <a name='L206'></a><a href='#L206'>206</a>
272
+ <a name='L207'></a><a href='#L207'>207</a>
273
+ <a name='L208'></a><a href='#L208'>208</a>
274
+ <a name='L209'></a><a href='#L209'>209</a>
275
+ <a name='L210'></a><a href='#L210'>210</a>
276
+ <a name='L211'></a><a href='#L211'>211</a>
277
+ <a name='L212'></a><a href='#L212'>212</a>
278
+ <a name='L213'></a><a href='#L213'>213</a>
279
+ <a name='L214'></a><a href='#L214'>214</a>
280
+ <a name='L215'></a><a href='#L215'>215</a>
281
+ <a name='L216'></a><a href='#L216'>216</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
232
282
  <span class="cline-any cline-yes">3x</span>
233
283
  <span class="cline-any cline-yes">3x</span>
234
284
  <span class="cline-any cline-yes">3x</span>
@@ -389,10 +439,60 @@
389
439
  <span class="cline-any cline-yes">3x</span>
390
440
  <span class="cline-any cline-yes">3x</span>
391
441
  <span class="cline-any cline-yes">3x</span>
442
+ <span class="cline-any cline-yes">3x</span>
443
+ <span class="cline-any cline-yes">3x</span>
444
+ <span class="cline-any cline-yes">3x</span>
445
+ <span class="cline-any cline-yes">3x</span>
446
+ <span class="cline-any cline-yes">3x</span>
447
+ <span class="cline-any cline-yes">3x</span>
448
+ <span class="cline-any cline-yes">3x</span>
449
+ <span class="cline-any cline-yes">3x</span>
450
+ <span class="cline-any cline-yes">3x</span>
451
+ <span class="cline-any cline-yes">3x</span>
452
+ <span class="cline-any cline-yes">3x</span>
453
+ <span class="cline-any cline-yes">3x</span>
454
+ <span class="cline-any cline-yes">3x</span>
455
+ <span class="cline-any cline-yes">3x</span>
456
+ <span class="cline-any cline-yes">3x</span>
457
+ <span class="cline-any cline-yes">3x</span>
458
+ <span class="cline-any cline-yes">3x</span>
459
+ <span class="cline-any cline-yes">3x</span>
460
+ <span class="cline-any cline-yes">3x</span>
461
+ <span class="cline-any cline-yes">3x</span>
462
+ <span class="cline-any cline-yes">3x</span>
463
+ <span class="cline-any cline-yes">3x</span>
464
+ <span class="cline-any cline-yes">3x</span>
465
+ <span class="cline-any cline-yes">3x</span>
466
+ <span class="cline-any cline-yes">3x</span>
467
+ <span class="cline-any cline-yes">3x</span>
468
+ <span class="cline-any cline-yes">3x</span>
469
+ <span class="cline-any cline-yes">3x</span>
470
+ <span class="cline-any cline-yes">3x</span>
471
+ <span class="cline-any cline-yes">3x</span>
472
+ <span class="cline-any cline-yes">3x</span>
473
+ <span class="cline-any cline-yes">3x</span>
474
+ <span class="cline-any cline-yes">3x</span>
475
+ <span class="cline-any cline-yes">3x</span>
476
+ <span class="cline-any cline-yes">3x</span>
477
+ <span class="cline-any cline-yes">3x</span>
478
+ <span class="cline-any cline-yes">3x</span>
479
+ <span class="cline-any cline-yes">3x</span>
480
+ <span class="cline-any cline-yes">3x</span>
481
+ <span class="cline-any cline-yes">3x</span>
482
+ <span class="cline-any cline-yes">3x</span>
392
483
  <span class="cline-any cline-yes">2x</span>
393
484
  <span class="cline-any cline-yes">2x</span>
394
485
  <span class="cline-any cline-yes">2x</span>
395
486
  <span class="cline-any cline-yes">3x</span>
487
+ <span class="cline-any cline-yes">3x</span>
488
+ <span class="cline-any cline-yes">3x</span>
489
+ <span class="cline-any cline-yes">3x</span>
490
+ <span class="cline-any cline-yes">3x</span>
491
+ <span class="cline-any cline-yes">3x</span>
492
+ <span class="cline-any cline-yes">3x</span>
493
+ <span class="cline-any cline-yes">3x</span>
494
+ <span class="cline-any cline-yes">3x</span>
495
+ <span class="cline-any cline-yes">3x</span>
396
496
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { TemplateInstance, NodeTemplatePart, createProcessor, AttributeTemplatePart } from '@github/template-parts';
397
497
  import type { TemplatePart, TemplateTypeInit } from '@github/template-parts';
398
498
  &nbsp;
@@ -544,8 +644,49 @@ export class TemplateResult {
544
644
  }
545
645
  }
546
646
  &nbsp;
647
+ const stringsCache = new Map();
547
648
  const defaultProcessor = createProcessor(processPart);
548
649
  export function html(strings: TemplateStringsArray, ...values: unknown[]): TemplateResult {
650
+ const staticStrings: any = [''];
651
+ const dynamicValues: any[] = [];
652
+ let staticValues;
653
+ let hasStatics = false;
654
+ &nbsp;
655
+ // Here the unsafe static values are moved from the string expressions
656
+ // to the static strings so they can be used in the cache key and later
657
+ // be used to generate the HTML via the &lt;template&gt; element.
658
+ const join = (strs: TemplateStringsArray, vals: any[] = []) =&gt; {
659
+ staticStrings[staticStrings.length - 1] = staticStrings[staticStrings.length - 1] + strs[0];
660
+ &nbsp;
661
+ vals.forEach((dynamicValue, i) =&gt; {
662
+ if ((staticValues = dynamicValue?.$static$) !== undefined) {
663
+ staticValues.forEach((staticValue: TemplateResult) =&gt; {
664
+ join(staticValue.strings, staticValue.values);
665
+ });
666
+ &nbsp;
667
+ staticStrings[staticStrings.length - 1] = staticStrings[staticStrings.length - 1] + strs[i + 1];
668
+ hasStatics = true;
669
+ } else {
670
+ dynamicValues.push(dynamicValue);
671
+ staticStrings.push(strs[i + 1]);
672
+ }
673
+ });
674
+ };
675
+ &nbsp;
676
+ join(strings, values);
677
+ &nbsp;
678
+ if (hasStatics) {
679
+ // Tagged template literals with the same static strings return the same
680
+ // TemplateStringsArray, aka they are cached. emulate this behavior w/ a Map.
681
+ const key = staticStrings.join('$$html$$');
682
+ strings = stringsCache.get(key);
683
+ if (strings === undefined) {
684
+ (staticStrings as any).raw = staticStrings;
685
+ stringsCache.set(key, (strings = staticStrings));
686
+ }
687
+ values = dynamicValues;
688
+ }
689
+ &nbsp;
549
690
  return new TemplateResult(strings, values, defaultProcessor);
550
691
  }
551
692
  &nbsp;
@@ -558,6 +699,15 @@ export function createTemplateInstance(content: string, props?: any) {
558
699
  template.innerHTML = content;
559
700
  return new TemplateInstance(template, props);
560
701
  }
702
+ &nbsp;
703
+ export const unsafeStatic = (...values: any[]) =&gt; ({
704
+ ['$static$']: values.map((value) =&gt; {
705
+ if (value instanceof TemplateResult) <span class="branch-0 cbranch-no" title="branch not covered" >return value;</span>
706
+ // Only allow word characters and dashes for security.
707
+ if (!/\w-/.test(value)) <span class="branch-0 cbranch-no" title="branch not covered" >return { strings: [] };</span>
708
+ return { strings: [value] };
709
+ }),
710
+ });
561
711
  &nbsp;</pre></td></tr></table></pre>
562
712
 
563
713
  <div class='push'></div><!-- for sticky footer -->
@@ -565,7 +715,7 @@ export function createTemplateInstance(content: string, props?: any) {
565
715
  <div class='footer quiet pad2 space-top1 center small'>
566
716
  Code coverage generated by
567
717
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
568
- at Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
718
+ at Thu Jul 21 2022 15:31:01 GMT+0000 (Coordinated Universal Time)
569
719
  </div>
570
720
  <script src="../prettify.js"></script>
571
721
  <script>