@mux/mux-player 0.1.0-beta.22 → 0.1.0-beta.25

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 (73) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/README.md +38 -36
  3. package/coverage/lcov-report/index.html +31 -31
  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 +20 -71
  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 +123 -78
  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 +26 -26
  34. package/coverage/lcov-report/src/media-theme-mux/media-theme-mux.ts.html +348 -192
  35. package/coverage/lcov-report/src/media-theme-mux/styles.css.html +121 -19
  36. package/coverage/lcov-report/src/styles.css.html +1 -1
  37. package/coverage/lcov-report/src/template.ts.html +126 -66
  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 +1556 -1313
  41. package/dist/index.cjs.js +505 -345
  42. package/dist/index.mjs +298 -230
  43. package/dist/mux-player.js +556 -396
  44. package/dist/mux-player.mjs +556 -396
  45. package/dist/tsconfig.tsbuildinfo +1 -1
  46. package/dist/types/helpers.d.ts +1 -3
  47. package/dist/types/html.d.ts +5 -0
  48. package/dist/types/index.d.ts +5 -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 +32 -13
  51. package/dist/types/template.d.ts +0 -1
  52. package/dist/types/video-api.d.ts +4 -0
  53. package/dist/types-ts3.4/helpers.d.ts +1 -3
  54. package/dist/types-ts3.4/html.d.ts +5 -0
  55. package/dist/types-ts3.4/index.d.ts +4 -3
  56. package/dist/types-ts3.4/media-theme-mux/icons.d.ts +2 -0
  57. package/dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts +32 -13
  58. package/dist/types-ts3.4/template.d.ts +0 -1
  59. package/dist/types-ts3.4/video-api.d.ts +2 -0
  60. package/package.json +5 -5
  61. package/src/helpers.ts +7 -24
  62. package/src/html.ts +50 -0
  63. package/src/index.ts +57 -42
  64. package/src/media-theme-mux/icons/cast-enter.svg +6 -0
  65. package/src/media-theme-mux/icons/cast-exit.svg +7 -0
  66. package/src/media-theme-mux/icons.ts +4 -0
  67. package/src/media-theme-mux/media-theme-mux.ts +186 -134
  68. package/src/media-theme-mux/styles.css +49 -15
  69. package/src/template.ts +78 -58
  70. package/src/types.d.ts +3 -3
  71. package/src/video-api.ts +27 -1
  72. package/test/player.test.js +34 -0
  73. package/test/template.test.js +6 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,40 @@
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.25](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.24...@mux/mux-player@0.1.0-beta.25) (2022-08-02)
7
+
8
+ ### Bug Fixes
9
+
10
+ - move nohotkeys type to more appropriate place ([49f9c4e](https://github.com/muxinc/elements/commit/49f9c4e4d43f463aa4960a40c94e715d86c4304b))
11
+ - **mux-player:** Account for attr vs. 'prop' naming overlap in state propogation. ([5c05af8](https://github.com/muxinc/elements/commit/5c05af8c257806662bc6402baba03b7090cbe699))
12
+
13
+ ### Features
14
+
15
+ - add CSS parts for controls ([#310](https://github.com/muxinc/elements/issues/310)) ([e28c71e](https://github.com/muxinc/elements/commit/e28c71eed11423951dbac9faf2518ca7cbb2f9e2))
16
+ - nohotkeys prop, only use the template ([4cde791](https://github.com/muxinc/elements/commit/4cde791a4664b11501ad48125bd5ed80e3970ff0))
17
+ - support media-chrome keyboard shortcuts, use nohotkeys to turn off ([b8ed7f5](https://github.com/muxinc/elements/commit/b8ed7f5180aab60bb896842fb7037bce0069ad2c))
18
+ - upgrade to media-chrome 0.9.0 ([f257e0d](https://github.com/muxinc/elements/commit/f257e0d6583de19d0f29859b512e12654f235f3a))
19
+
20
+ # [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)
21
+
22
+ ### Bug Fixes
23
+
24
+ - 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))
25
+ - **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))
26
+ - 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))
27
+ - upgrade MC v0.8.1 ([#298](https://github.com/muxinc/elements/issues/298)) ([fc4a74c](https://github.com/muxinc/elements/commit/fc4a74cfaadf90ee8d4ed89751755d56e77df79e))
28
+
29
+ ### Features
30
+
31
+ - 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))
32
+ - add defaultMuted, defaultPlaybackRate props ([#252](https://github.com/muxinc/elements/issues/252)) ([1a72165](https://github.com/muxinc/elements/commit/1a7216545cba27b34bc743cf5dd6225d4dcae738))
33
+ - **mux-player:** Add textTracks prop alongside add/remove tracks methods. ([c041a72](https://github.com/muxinc/elements/commit/c041a72ce414fc52fcd90e22cc7730ef2e349c31))
34
+ - **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))
35
+
36
+ # [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)
37
+
38
+ **Note:** Version bump only for package @mux/mux-player
39
+
6
40
  # [0.1.0-beta.22](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.21...@mux/mux-player@0.1.0-beta.22) (2022-07-05)
7
41
 
8
42
  **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,41 +129,42 @@ 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
  ```
138
135
 
139
136
  ### Attributes
140
137
 
141
- | Attribute | Type | Description | Default |
142
- | -------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
143
- | `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
144
- | `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` |
145
- | `playback-token` | `string` | The playback token for signing the `src` URL. | N/A |
146
- | `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A |
147
- | `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A |
148
- | `stream-type` | `"on-demand" \| "live" \| "ll-live"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` |
149
- | `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
150
- | `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A |
151
- | `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A |
152
- | `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A |
153
- | `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
154
- | `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
155
- | `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` |
156
- | `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` |
157
- | `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
158
- | `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` |
159
- | `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` |
160
- | `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A |
161
- | `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A |
162
- | `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
163
- | `muted` | `boolean` | Toggles the muted state of the player. | Varies |
164
- | `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` |
166
- | `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
167
- | `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
168
- | `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A |
138
+ | Attribute | Type | Description | Default |
139
+ | -------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
140
+ | `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
141
+ | `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` |
142
+ | `playback-token` | `string` | The playback token for signing the `src` URL. | N/A |
143
+ | `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A |
144
+ | `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A |
145
+ | `stream-type` | `"on-demand" \| "live" \| "ll-live" \| "dvr" \| "ll-dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` |
146
+ | `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
147
+ | `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A |
148
+ | `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A |
149
+ | `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A |
150
+ | `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
151
+ | `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
152
+ | `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` |
153
+ | `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` |
154
+ | `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
155
+ | `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` |
156
+ | `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` |
157
+ | `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A |
158
+ | `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A |
159
+ | `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
160
+ | `muted` | `boolean` | Toggles the muted state of the player. | Varies |
161
+ | `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false |
162
+ | `playbackrate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
163
+ | `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
164
+ | `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
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 |
167
+ | `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player | `false` |
169
168
 
170
169
  ### Methods
171
170
 
@@ -178,27 +177,30 @@ If you prefer to use the in-code MSE-based engine (currently hls.js) whenever po
178
177
 
179
178
  | Prop | Description | Default |
180
179
  | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
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` |
180
+ | `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
181
  | `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
182
  | `crossOrigin` | A DOMString indicating the CORS setting for this media element. | `null` |
185
183
  | `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` |
184
+ | `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` |
185
+ | `defaultPlaybackRate` | Is a double that reflects the `playbackrate` HTML attribute, it indicates the default playback rate for the media. | `1` |
186
186
  | `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
187
  | `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` |
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` |
189
+ | `nohotkeys` | A `Boolean` that reflects the `nohotkeys` HTML attribute, which indicates whether Mux Player accepts keboard shortcuts. | `false` |
189
190
  | `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
191
  | `muted` | Is a `Boolean` that determines whether audio is muted. `true` if the audio is muted and `false` otherwise. | `false` |
191
192
  | `paused` <sub><sup>Read only</sup></sub> | Returns a `Boolean` that indicates whether the media element is paused. | `true` |
192
193
  | `playbackRate` | Is a double that indicates the rate at which the media is being played back. | `1` |
193
194
  | `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` |
195
+ | `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` |
196
+ | `src` | Is a `String` that reflects the `src` HTML attribute, which contains the URL of a media resource to use. | `undefined` |
196
197
  | `startTime` | `Number` that specifies where in the media's timeline you want playback to start (in seconds). | `0` |
197
198
  | `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
199
  | `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
200
  | `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
201
  | `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
202
  | `volume` | Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest). | `1` |
203
+ | `customDomain` | Is a `String` that assigns a custom domain to be used for Mux Video. | `undefined` |
202
204
 
203
205
  ### Events
204
206
 
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">83.01% </span>
26
+ <span class="strong">82.78% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>2503/3015</span>
28
+ <span class='fraction'>2659/3212</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">82.01% </span>
33
+ <span class="strong">82.33% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>269/328</span>
35
+ <span class='fraction'>275/334</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">76.57% </span>
40
+ <span class="strong">75.53% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>170/222</span>
42
+ <span class='fraction'>176/233</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">83.01% </span>
47
+ <span class="strong">82.78% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>2503/3015</span>
49
+ <span class='fraction'>2659/3212</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.64" class="pic high">
84
- <div class="chart"><div class="cover-fill" style="width: 82%"></div><div class="cover-empty" style="width: 18%"></div></div>
83
+ <td data-value="81.77" class="pic high">
84
+ <div class="chart"><div class="cover-fill" style="width: 81%"></div><div class="cover-empty" style="width: 19%"></div></div>
85
85
  </td>
86
- <td data-value="82.64" class="pct high">82.64%</td>
87
- <td data-value="2057" class="abs high">1700/2057</td>
88
- <td data-value="82.28" class="pct high">82.28%</td>
89
- <td data-value="271" class="abs high">223/271</td>
90
- <td data-value="75.29" class="pct medium">75.29%</td>
91
- <td data-value="170" class="abs medium">128/170</td>
92
- <td data-value="82.64" class="pct high">82.64%</td>
93
- <td data-value="2057" class="abs high">1700/2057</td>
86
+ <td data-value="81.77" class="pct high">81.77%</td>
87
+ <td data-value="2151" class="abs high">1759/2151</td>
88
+ <td data-value="81.15" class="pct high">81.15%</td>
89
+ <td data-value="276" class="abs high">224/276</td>
90
+ <td data-value="73.29" class="pct medium">73.29%</td>
91
+ <td data-value="176" class="abs medium">129/176</td>
92
+ <td data-value="81.77" class="pct high">81.77%</td>
93
+ <td data-value="2151" class="abs high">1759/2151</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.28" class="pic high">
114
- <div class="chart"><div class="cover-fill" style="width: 86%"></div><div class="cover-empty" style="width: 14%"></div></div>
113
+ <td data-value="87.2" class="pic high">
114
+ <div class="chart"><div class="cover-fill" style="width: 87%"></div><div class="cover-empty" style="width: 13%"></div></div>
115
115
  </td>
116
- <td data-value="86.28" class="pct high">86.28%</td>
117
- <td data-value="598" class="abs high">516/598</td>
118
- <td data-value="84.09" class="pct high">84.09%</td>
119
- <td data-value="44" class="abs high">37/44</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.28" class="pct high">86.28%</td>
123
- <td data-value="598" class="abs high">516/598</td>
116
+ <td data-value="87.2" class="pct high">87.2%</td>
117
+ <td data-value="688" class="abs high">600/688</td>
118
+ <td data-value="93.33" class="pct high">93.33%</td>
119
+ <td data-value="45" class="abs high">42/45</td>
120
+ <td data-value="88.63" class="pct high">88.63%</td>
121
+ <td data-value="44" class="abs high">39/44</td>
122
+ <td data-value="87.2" class="pct high">87.2%</td>
123
+ <td data-value="688" class="abs high">600/688</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 Tue Jul 05 2022 23:20:21 GMT+0000 (Coordinated Universal Time)
149
+ at Tue Aug 02 2022 16:29:26 GMT+0000 (Coordinated Universal Time)
150
150
  </div>
151
151
  <script src="prettify.js"></script>
152
152
  <script>
@@ -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 Tue Jul 05 2022 23:20:21 GMT+0000 (Coordinated Universal Time)
235
+ at Tue Aug 02 2022 16:29:26 GMT+0000 (Coordinated Universal Time)
236
236
  </div>
237
237
  <script src="../prettify.js"></script>
238
238
  <script>
@@ -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 Tue Jul 05 2022 23:20:21 GMT+0000 (Coordinated Universal Time)
562
+ at Tue Aug 02 2022 16:29:26 GMT+0000 (Coordinated Universal Time)
563
563
  </div>
564
564
  <script src="../prettify.js"></script>
565
565
  <script>
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">97.7% </span>
26
+ <span class="strong">96.49% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>128/131</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% </span>
33
+ <span class="strong">80.95% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>22/25</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'>12/12</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.7% </span>
47
+ <span class="strong">96.49% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>128/131</span>
49
+ <span class='fraction'>110/114</span>
50
50
  </div>
51
51
 
52
52
 
@@ -177,24 +177,7 @@
177
177
  <a name='L112'></a><a href='#L112'>112</a>
178
178
  <a name='L113'></a><a href='#L113'>113</a>
179
179
  <a name='L114'></a><a href='#L114'>114</a>
180
- <a name='L115'></a><a href='#L115'>115</a>
181
- <a name='L116'></a><a href='#L116'>116</a>
182
- <a name='L117'></a><a href='#L117'>117</a>
183
- <a name='L118'></a><a href='#L118'>118</a>
184
- <a name='L119'></a><a href='#L119'>119</a>
185
- <a name='L120'></a><a href='#L120'>120</a>
186
- <a name='L121'></a><a href='#L121'>121</a>
187
- <a name='L122'></a><a href='#L122'>122</a>
188
- <a name='L123'></a><a href='#L123'>123</a>
189
- <a name='L124'></a><a href='#L124'>124</a>
190
- <a name='L125'></a><a href='#L125'>125</a>
191
- <a name='L126'></a><a href='#L126'>126</a>
192
- <a name='L127'></a><a href='#L127'>127</a>
193
- <a name='L128'></a><a href='#L128'>128</a>
194
- <a name='L129'></a><a href='#L129'>129</a>
195
- <a name='L130'></a><a href='#L130'>130</a>
196
- <a name='L131'></a><a href='#L131'>131</a>
197
- <a name='L132'></a><a href='#L132'>132</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
180
+ <a name='L115'></a><a href='#L115'>115</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
198
181
  <span class="cline-any cline-yes">4x</span>
199
182
  <span class="cline-any cline-yes">4x</span>
200
183
  <span class="cline-any cline-yes">4x</span>
@@ -253,32 +236,15 @@
253
236
  <span class="cline-any cline-yes">4x</span>
254
237
  <span class="cline-any cline-yes">4x</span>
255
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>
256
243
  <span class="cline-any cline-yes">4x</span>
257
244
  <span class="cline-any cline-yes">4x</span>
258
245
  <span class="cline-any cline-yes">4x</span>
259
246
  <span class="cline-any cline-yes">4x</span>
260
247
  <span class="cline-any cline-yes">4x</span>
261
- <span class="cline-any cline-yes">2x</span>
262
- <span class="cline-any cline-yes">4x</span>
263
- <span class="cline-any cline-yes">4x</span>
264
- <span class="cline-any cline-yes">4x</span>
265
- <span class="cline-any cline-yes">4x</span>
266
- <span class="cline-any cline-yes">2x</span>
267
- <span class="cline-any cline-yes">2x</span>
268
- <span class="cline-any cline-yes">2x</span>
269
- <span class="cline-any cline-yes">2x</span>
270
- <span class="cline-any cline-yes">2x</span>
271
- <span class="cline-any cline-yes">4x</span>
272
- <span class="cline-any cline-yes">4x</span>
273
- <span class="cline-any cline-yes">4x</span>
274
- <span class="cline-any cline-yes">2x</span>
275
- <span class="cline-any cline-yes">2x</span>
276
- <span class="cline-any cline-yes">2x</span>
277
- <span class="cline-any cline-yes">2x</span>
278
- <span class="cline-any cline-yes">2x</span>
279
- <span class="cline-any cline-yes">2x</span>
280
- <span class="cline-any cline-yes">2x</span>
281
- <span class="cline-any cline-yes">4x</span>
282
248
  <span class="cline-any cline-yes">4x</span>
283
249
  <span class="cline-any cline-yes">4x</span>
284
250
  <span class="cline-any cline-yes">4x</span>
@@ -383,6 +349,13 @@ export const getStoryboardURLFromPlaybackId = (
383
349
  })}`;
384
350
  };
385
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;
386
359
  const attrToPropNameMap: Record&lt;string, string&gt; = {
387
360
  crossorigin: 'crossOrigin',
388
361
  playsinline: 'playsInline',
@@ -392,30 +365,6 @@ export function toPropName(attrName: string) {
392
365
  return attrToPropNameMap[attrName] ?? camelCase(attrName);
393
366
  }
394
367
  &nbsp;
395
- let testMediaEl: HTMLMediaElement | undefined;
396
- export const getTestMediaEl = (nodeName = 'video') =&gt; {
397
- if (testMediaEl) return testMediaEl;
398
- if (typeof window !== 'undefined') {
399
- testMediaEl = document.createElement(nodeName as 'video' | 'audio');
400
- }
401
- return testMediaEl;
402
- };
403
- &nbsp;
404
- export const hasVolumeSupportAsync = async (mediaEl: HTMLMediaElement | undefined = getTestMediaEl()) =&gt; {
405
- if (!mediaEl) <span class="branch-0 cbranch-no" title="branch not covered" >return false;</span>
406
- const prevVolume = mediaEl.volume;
407
- mediaEl.volume = prevVolume / 2 + 0.1;
408
- return new Promise&lt;boolean&gt;((resolve, reject) =&gt; {
409
- setTimeout(() =&gt; {
410
- resolve(mediaEl.volume !== prevVolume);
411
- }, 0);
412
- });
413
- };
414
- &nbsp;
415
- export function getCcSubTracks(el: MuxPlayerElement) {
416
- return Array.from(el.media?.textTracks ?? []).filter(({ kind }) =&gt; kind === 'subtitles' || kind === 'captions');
417
- }
418
- &nbsp;
419
368
  export const getLiveTime = (el: MuxPlayerElement) =&gt; {
420
369
  const { media } = el;
421
370
  return (
@@ -463,7 +412,7 @@ export const isInLiveWindow = (el: MuxPlayerElement) =&gt; {
463
412
  <div class='footer quiet pad2 space-top1 center small'>
464
413
  Code coverage generated by
465
414
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
466
- at Tue Jul 05 2022 23:20:21 GMT+0000 (Coordinated Universal Time)
415
+ at Tue Aug 02 2022 16:29:26 GMT+0000 (Coordinated Universal Time)
467
416
  </div>
468
417
  <script src="../prettify.js"></script>
469
418
  <script>