@mux/mux-player 0.1.0-beta.24 → 0.1.0-beta.27
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.
- package/README.md +153 -29
- package/dist/index.cjs.js +560 -459
- package/dist/index.mjs +413 -254
- package/dist/mux-player.js +563 -462
- package/dist/mux-player.mjs +563 -462
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/helpers.d.ts +18 -0
- package/dist/types/index.d.ts +16 -1
- package/dist/types/media-chrome/dialog.d.ts +2 -1
- package/dist/types/media-chrome/time-display.d.ts +6 -1
- package/dist/types/media-theme-mux/media-theme-mux.d.ts +7 -1
- package/dist/types/video-api.d.ts +2 -1
- package/dist/types-ts3.4/helpers.d.ts +17 -0
- package/dist/types-ts3.4/index.d.ts +12 -1
- package/dist/types-ts3.4/media-chrome/dialog.d.ts +2 -1
- package/dist/types-ts3.4/media-chrome/time-display.d.ts +6 -1
- package/dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts +7 -1
- package/dist/types-ts3.4/video-api.d.ts +2 -1
- package/package.json +8 -7
- package/CHANGELOG.md +0 -305
- package/coverage/lcov-report/base.css +0 -224
- package/coverage/lcov-report/block-navigation.js +0 -87
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/index.html +0 -161
- package/coverage/lcov-report/prettify.css +0 -1
- package/coverage/lcov-report/prettify.js +0 -2
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +0 -196
- package/coverage/lcov-report/src/dialog.ts.html +0 -247
- package/coverage/lcov-report/src/errors.ts.html +0 -574
- package/coverage/lcov-report/src/helpers.ts.html +0 -427
- package/coverage/lcov-report/src/html.ts.html +0 -730
- package/coverage/lcov-report/src/index.html +0 -251
- package/coverage/lcov-report/src/index.ts.html +0 -2941
- package/coverage/lcov-report/src/logger.ts.html +0 -163
- package/coverage/lcov-report/src/media-chrome/dialog.ts.html +0 -661
- package/coverage/lcov-report/src/media-chrome/index.html +0 -131
- package/coverage/lcov-report/src/media-chrome/time-display.ts.html +0 -295
- package/coverage/lcov-report/src/media-theme-mux/icons/airplay.svg.html +0 -109
- package/coverage/lcov-report/src/media-theme-mux/icons/captions-off.svg.html +0 -100
- package/coverage/lcov-report/src/media-theme-mux/icons/captions-on.svg.html +0 -100
- package/coverage/lcov-report/src/media-theme-mux/icons/cast-enter.svg.html +0 -103
- package/coverage/lcov-report/src/media-theme-mux/icons/cast-exit.svg.html +0 -106
- package/coverage/lcov-report/src/media-theme-mux/icons/fullscreen-enter.svg.html +0 -100
- package/coverage/lcov-report/src/media-theme-mux/icons/fullscreen-exit.svg.html +0 -100
- package/coverage/lcov-report/src/media-theme-mux/icons/index.html +0 -356
- package/coverage/lcov-report/src/media-theme-mux/icons/pause.svg.html +0 -100
- package/coverage/lcov-report/src/media-theme-mux/icons/pip-enter.svg.html +0 -100
- package/coverage/lcov-report/src/media-theme-mux/icons/pip-exit.svg.html +0 -100
- package/coverage/lcov-report/src/media-theme-mux/icons/play.svg.html +0 -100
- package/coverage/lcov-report/src/media-theme-mux/icons/seek-backward.svg.html +0 -124
- package/coverage/lcov-report/src/media-theme-mux/icons/seek-forward.svg.html +0 -124
- package/coverage/lcov-report/src/media-theme-mux/icons/volume-high.svg.html +0 -103
- package/coverage/lcov-report/src/media-theme-mux/icons/volume-low.svg.html +0 -103
- package/coverage/lcov-report/src/media-theme-mux/icons/volume-medium.svg.html +0 -103
- package/coverage/lcov-report/src/media-theme-mux/icons/volume-off.svg.html +0 -103
- package/coverage/lcov-report/src/media-theme-mux/icons.ts.html +0 -196
- package/coverage/lcov-report/src/media-theme-mux/index.html +0 -146
- package/coverage/lcov-report/src/media-theme-mux/media-theme-mux.ts.html +0 -1258
- package/coverage/lcov-report/src/media-theme-mux/styles.css.html +0 -688
- package/coverage/lcov-report/src/styles.css.html +0 -211
- package/coverage/lcov-report/src/template.ts.html +0 -505
- package/coverage/lcov-report/src/utils.ts.html +0 -385
- package/coverage/lcov-report/src/video-api.ts.html +0 -1057
- package/coverage/lcov.info +0 -4201
- package/lang/en.json +0 -32
- package/lang/nl.json +0 -31
- package/src/dialog.ts +0 -54
- package/src/errors.ts +0 -163
- package/src/helpers.ts +0 -114
- package/src/html.ts +0 -215
- package/src/index.ts +0 -952
- package/src/logger.ts +0 -26
- package/src/media-chrome/dialog.ts +0 -192
- package/src/media-chrome/time-display.ts +0 -70
- package/src/media-theme-mux/icons/airplay.svg +0 -8
- package/src/media-theme-mux/icons/captions-off.svg +0 -5
- package/src/media-theme-mux/icons/captions-on.svg +0 -5
- package/src/media-theme-mux/icons/cast-enter.svg +0 -6
- package/src/media-theme-mux/icons/cast-exit.svg +0 -7
- package/src/media-theme-mux/icons/fullscreen-enter.svg +0 -5
- package/src/media-theme-mux/icons/fullscreen-exit.svg +0 -5
- package/src/media-theme-mux/icons/pause.svg +0 -5
- package/src/media-theme-mux/icons/pip-enter.svg +0 -5
- package/src/media-theme-mux/icons/pip-exit.svg +0 -5
- package/src/media-theme-mux/icons/play.svg +0 -5
- package/src/media-theme-mux/icons/seek-backward.svg +0 -13
- package/src/media-theme-mux/icons/seek-forward.svg +0 -13
- package/src/media-theme-mux/icons/volume-high.svg +0 -6
- package/src/media-theme-mux/icons/volume-low.svg +0 -6
- package/src/media-theme-mux/icons/volume-medium.svg +0 -6
- package/src/media-theme-mux/icons/volume-off.svg +0 -6
- package/src/media-theme-mux/icons.ts +0 -37
- package/src/media-theme-mux/media-theme-mux.ts +0 -391
- package/src/media-theme-mux/styles.css +0 -201
- package/src/styles.css +0 -42
- package/src/template.ts +0 -140
- package/src/types.d.ts +0 -50
- package/src/utils.ts +0 -100
- package/src/video-api.ts +0 -324
- package/test/errors.test.js +0 -169
- package/test/helpers.test.js +0 -78
- package/test/player.test.js +0 -730
- package/test/template.test.js +0 -70
- package/test/utils.test.js +0 -21
- package/test/web-test-runner.config.mjs +0 -29
- package/tsconfig.json +0 -21
package/README.md
CHANGED
|
@@ -117,6 +117,119 @@ Enable the [Google Cast](https://developers.google.com/cast) button in the contr
|
|
|
117
117
|
<script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
|
|
118
118
|
```
|
|
119
119
|
|
|
120
|
+
### Hiding controls
|
|
121
|
+
|
|
122
|
+
By default, Mux Player will show all the controls associated with the current player size and stream type.
|
|
123
|
+
|
|
124
|
+
To hide certain controls, use CSS variables like this:
|
|
125
|
+
`--play-button` will control the display of the play button. Set it to `none` to hide it completely.
|
|
126
|
+
|
|
127
|
+
```css
|
|
128
|
+
mux-player {
|
|
129
|
+
--play-button: none;
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
CSS vars can also be passed inline
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<mux-player style="--play-button: none;"></mux-player>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
#### Controls sections
|
|
140
|
+
|
|
141
|
+
It's possible to target specific sections of the player by prefixing the CSS vars.
|
|
142
|
+
The following sections are available:
|
|
143
|
+
|
|
144
|
+
- `top` the top control bar that shows on the small player size
|
|
145
|
+
- `center` the center controls that show the seek forward/backward button and play button
|
|
146
|
+
- `bottom` the bottom control bar
|
|
147
|
+
|
|
148
|
+
```html
|
|
149
|
+
<mux-player style="--center-controls: none; --top-captions-button: none;"></mux-player>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
#### Available CSS variables
|
|
153
|
+
|
|
154
|
+
The below CSS selector shows all available CSS vars for hiding, each one can be prefixed with a section.
|
|
155
|
+
|
|
156
|
+
```css
|
|
157
|
+
mux-player {
|
|
158
|
+
/* Hide all controls at once */
|
|
159
|
+
--controls: none;
|
|
160
|
+
|
|
161
|
+
/* Target all sections by excluding the section prefix */
|
|
162
|
+
--play-button: none;
|
|
163
|
+
--seek-live-button: none;
|
|
164
|
+
--seek-backward-button: none;
|
|
165
|
+
--seek-forward-button: none;
|
|
166
|
+
--mute-button: none;
|
|
167
|
+
--captions-button: none;
|
|
168
|
+
--airplay-button: none;
|
|
169
|
+
--pip-button: none;
|
|
170
|
+
--fullscreen-button: none;
|
|
171
|
+
--cast-button: none;
|
|
172
|
+
--playback-rate-button: none;
|
|
173
|
+
--volume-range: none;
|
|
174
|
+
--time-range: none;
|
|
175
|
+
--time-display: none;
|
|
176
|
+
--duration-display: none;
|
|
177
|
+
|
|
178
|
+
/* Target a specific section by prefixing the CSS var with (top|center|bottom) */
|
|
179
|
+
--center-controls: none;
|
|
180
|
+
--bottom-play-button: none;
|
|
181
|
+
}
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### CSS Parts
|
|
185
|
+
|
|
186
|
+
Mux Player uses a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
|
|
187
|
+
to encapsulate its styles and behaviors.
|
|
188
|
+
As a result, it's not possible to target its internals with the usual CSS selectors.
|
|
189
|
+
Instead, some components expose **parts** that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
|
|
190
|
+
, or `::part()`.
|
|
191
|
+
|
|
192
|
+
```html
|
|
193
|
+
<style>
|
|
194
|
+
mux-player::part(center play button) {
|
|
195
|
+
display: none;
|
|
196
|
+
}
|
|
197
|
+
</style>
|
|
198
|
+
<mux-player playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"></mux-player>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
Supported **parts**:
|
|
202
|
+
`seek-live`, `layer`, `media-layer`, `poster-layer`, `vertical-layer`, `centered-layer`,
|
|
203
|
+
`top`, `center`, `bottom`, `play`, `button`, `seek-backward`, `seek-forward`, `mute`,
|
|
204
|
+
`captions`, `airplay`, `pip`, `cast`, `fullscreen`, `playback-rate`, `volume`, `range`, `time`, `display`
|
|
205
|
+
|
|
206
|
+
CSS parts allow you to style each part individually with a selector like `::part(center play button)`
|
|
207
|
+
or target multiple elements if the part is assigned to multiple elements internally, usage `::part(button)`.
|
|
208
|
+
Every CSS property can be declared in the selector, this makes it a very powerful API.
|
|
209
|
+
|
|
210
|
+
### hotkeys
|
|
211
|
+
|
|
212
|
+
Offers a way to turn off keyboard shortcuts that should not be enabled.
|
|
213
|
+
The `hotkeys` attribute accepts a blocklist as a space separated string.
|
|
214
|
+
|
|
215
|
+
Supported **tokens**:
|
|
216
|
+
`nof`, `nok`, `nom`, `noarrowleft`, `noarrowright`, `nospace`
|
|
217
|
+
|
|
218
|
+
```html
|
|
219
|
+
<mux-player playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe" hotkeys="noarrowleft noarrowright"></mux-player>
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
#### Default hotkeys
|
|
223
|
+
|
|
224
|
+
| Key | Behavior |
|
|
225
|
+
| ----- | ----------------- |
|
|
226
|
+
| Space | Toggle Playback |
|
|
227
|
+
| `k` | Toggle Playback |
|
|
228
|
+
| `m` | Toggle mute |
|
|
229
|
+
| `f` | Toggle fullscreen |
|
|
230
|
+
| ⬅ | Seek back 10s |
|
|
231
|
+
| ➡ | Seek forward 10s |
|
|
232
|
+
|
|
120
233
|
### prefer-mse
|
|
121
234
|
|
|
122
235
|
By default `<mux-player>` will try to use native playback via the underlying `<video/>` tag whenever possible. However, it can also instead use an in-code player when the browser browser supports [Media Source Extension](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API). This includes MSE in Mac OS Safari.
|
|
@@ -135,35 +248,40 @@ If you prefer to use the in-code MSE-based engine (currently hls.js) whenever po
|
|
|
135
248
|
|
|
136
249
|
### Attributes
|
|
137
250
|
|
|
138
|
-
| Attribute
|
|
139
|
-
|
|
|
140
|
-
| `playback-id`
|
|
141
|
-
| `env-key`
|
|
142
|
-
| `playback-token`
|
|
143
|
-
| `thumbnail-token`
|
|
144
|
-
| `storyboard-token`
|
|
145
|
-
| `stream-type`
|
|
146
|
-
| `audio`
|
|
147
|
-
| `metadata-video-title`
|
|
148
|
-
| `metadata-viewer-user-id`
|
|
149
|
-
| `metadata-video-id`
|
|
150
|
-
| `debug`
|
|
151
|
-
| `start-time`
|
|
152
|
-
| `thumbnail-time`
|
|
153
|
-
| `prefer-mse`
|
|
154
|
-
| `default-hidden-captions`
|
|
155
|
-
| `
|
|
156
|
-
| `
|
|
157
|
-
| `
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
162
|
-
| `
|
|
163
|
-
| `
|
|
164
|
-
| `
|
|
165
|
-
| `
|
|
166
|
-
| `
|
|
251
|
+
| Attribute | Type | Description | Default |
|
|
252
|
+
| ----------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
|
|
253
|
+
| `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 |
|
|
254
|
+
| `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` |
|
|
255
|
+
| `playback-token` | `string` | The playback token for signing the `src` URL. | N/A |
|
|
256
|
+
| `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A |
|
|
257
|
+
| `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A |
|
|
258
|
+
| `stream-type` | `"on-demand" \| "live" \| "ll-live" \| "live:dvr" \| "ll-live: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"` |
|
|
259
|
+
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` |
|
|
260
|
+
| `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 |
|
|
261
|
+
| `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 |
|
|
262
|
+
| `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A |
|
|
263
|
+
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` |
|
|
264
|
+
| `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
|
|
265
|
+
| `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` |
|
|
266
|
+
| `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` |
|
|
267
|
+
| `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
|
|
268
|
+
| `default-show-remaining-time` | `boolean` | Show remaining playback time (instead of current playback time) by default | `false` |
|
|
269
|
+
| `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` |
|
|
270
|
+
| `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` |
|
|
271
|
+
| `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A |
|
|
272
|
+
| `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A |
|
|
273
|
+
| `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies |
|
|
274
|
+
| `muted` | `boolean` | Toggles the muted state of the player. | Varies |
|
|
275
|
+
| `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false |
|
|
276
|
+
| `playbackrate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` |
|
|
277
|
+
| `playbackrates` | `string` | A space separated string of playback rates used by the playback rate button. | N/A |
|
|
278
|
+
| `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` |
|
|
279
|
+
| `title` | `string` | Show the title for your content. | `""` |
|
|
280
|
+
| `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived |
|
|
281
|
+
| `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A |
|
|
282
|
+
| `custom-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Video. | N/A |
|
|
283
|
+
| `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player | `false` |
|
|
284
|
+
| `hotkeys` | `string` | Offers a way to disable certain keyboard shortcuts. For more, see the section on [`hotkeys`](#hotkeys) | N/A |
|
|
167
285
|
|
|
168
286
|
### Methods
|
|
169
287
|
|
|
@@ -183,15 +301,21 @@ If you prefer to use the in-code MSE-based engine (currently hls.js) whenever po
|
|
|
183
301
|
| `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
302
|
| `defaultPlaybackRate` | Is a double that reflects the `playbackrate` HTML attribute, it indicates the default playback rate for the media. | `1` |
|
|
185
303
|
| `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` |
|
|
304
|
+
| `defaultHiddenCaptions` | Hide captions by default instead of showing them on initial load (when available) | `false` |
|
|
305
|
+
| `defaultShowRemainingTime` | Show remaining playback time (instead of current playback time) by default | `false` |
|
|
186
306
|
| `ended` <sub><sup>Read only</sup></sub> | Returns a `Boolean` that indicates whether the media element has finished playing. | `false` |
|
|
187
307
|
| `loop` | A `Boolean` that reflects the `loop` HTML attribute, which indicates whether the media element should start over when it reaches the end. | `false` |
|
|
308
|
+
| `nohotkeys` | A `Boolean` that reflects the `nohotkeys` HTML attribute, which indicates whether Mux Player accepts keboard shortcuts. | `false` |
|
|
309
|
+
| `hotkeys` | Is a read-only `DOMTokenList` similar to `classList` which offers a way to turn off keyboard shortcuts. For more, see the section on [`hotkeys`](#hotkeys) | `''` |
|
|
188
310
|
| `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. | `{}` |
|
|
189
311
|
| `muted` | Is a `Boolean` that determines whether audio is muted. `true` if the audio is muted and `false` otherwise. | `false` |
|
|
190
312
|
| `paused` <sub><sup>Read only</sup></sub> | Returns a `Boolean` that indicates whether the media element is paused. | `true` |
|
|
191
313
|
| `playbackRate` | Is a double that indicates the rate at which the media is being played back. | `1` |
|
|
314
|
+
| `playbackRates` | Is an array of numbers that will be used by the playback rate button while toggling through rates. | N/A |
|
|
192
315
|
| `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` |
|
|
193
316
|
| `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
317
|
| `src` | Is a `String` that reflects the `src` HTML attribute, which contains the URL of a media resource to use. | `undefined` |
|
|
318
|
+
| `title` | `String` that specifies the title text you want displayed for your video. | `0` |
|
|
195
319
|
| `startTime` | `Number` that specifies where in the media's timeline you want playback to start (in seconds). | `0` |
|
|
196
320
|
| `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` |
|
|
197
321
|
| `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. | `{}` |
|