diff --git a/docs/tutorials/ui-customization.md b/docs/tutorials/ui-customization.md
index 20949940a..717e318fc 100644
--- a/docs/tutorials/ui-customization.md
+++ b/docs/tutorials/ui-customization.md
@@ -3,15 +3,22 @@
#### Configuring the layout
-When creating the UI via code, you can pass in configuration options that change
+Once the UI is created, you can pass in configuration options that change
the look and functioning of the UI bar. For example, if you wanted to not have
a seek bar, you could add the following line to the init() function from the UI
-basic usage tutorial, right before creating the UI overlay:
+basic usage tutorial, after creating the UI overlay:
```js
-uiConfig['addSeekBar'] = false;
+const video = document.getElementById('video');
+const ui = video['ui'];
+const config = {
+ addSeekBar: false;
+};
+ui.configure(config);
```
+Controls will fire a {@link shaka.Controls.UIUpdatedEvent} event once the config
+takes effect.
See the docs for {@link shaka.extern.UIConfiguration} for more information.
#### Customizing the number and order of controls
@@ -60,6 +67,7 @@ The following buttons can be added to the overflow menu:
that support it. Button is invisible on other browsers.
+UI layout can be reconfigured at any point after it's been created.
Please note that custom layouts might need CSS adjustments to look good.
#### Changing seek bar progress colors
diff --git a/docs/tutorials/ui.md b/docs/tutorials/ui.md
index f7670972a..b07e74a94 100644
--- a/docs/tutorials/ui.md
+++ b/docs/tutorials/ui.md
@@ -9,7 +9,7 @@ declarative style of setup.
Setting up a project with the UI library is even easier than setting one up without.
-Option 1: Set up controls with HTML data attributes:
+Set up controls with HTML data attributes:
```html
@@ -123,92 +123,6 @@ Next, let's add a listener to the 'caststatuschanged' event in myapp.js:
```
-#### Option 2: Setting the UI element programmatically
-
-The most basic way to make an element host the Shaka Player UI is to use the
-data-shaka-player tags in the HTML.
-However, that approach won't necessarily work for every application. For
-instance, if your site lays itself out programmatically, that is not an option.
-In addition, when using data-shaka-player tags, advanced customization options
-are not available.
-For more advanced use, the UI can be assigned to an element in code.
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```js
-// myapp.js
-
-var manifestUri =
- 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd';
-
-async function init() {
- // Create the UI manually.
- const video = document.getElementById('video');
- const videoContainer = document.getElementById('videoContainer');
- const player = new shaka.Player(video);
- // Use this to pass in desired config values. Config values not passed in
- // will be filled out according to the default config.
- // See more info on the configuration in the section below.
- const uiConfig = {};
- const ui = new shaka.ui.Overlay(player, videoContainer, video, uiConfig);
- const controls = ui.getControls();
-
- // Listen for error events.
- player.addEventListener('error', onPlayerErrorEvent);
- controls.addEventListener('error', onUIErrorEvent);
- controls.addEventListener('caststatuschanged', onCastStatusChanged);
-
- // Try to load a manifest.
- // This is an asynchronous process.
- try {
- await player.load(manifestUri);
- // This runs if the asynchronous load is successful.
- console.log('The video has now been loaded!');
- } catch (error) {
- onError(error);
- }
-}
-
-function onPlayerErrorEvent(errorEvent) {
- // Extract the shaka.util.Error object from the event.
- onPlayerError(event.detail);
-}
-
-function onPlayerError(error) {
- // Handle player error
-}
-
-function onUIErrorEvent(errorEvent) {
- // Handle UI error
-}
-
-function onCastStatusChanged(event) {
- // Handle cast status change
-}
-
-// The shaka-ui-loaded event won't fire if there are no tagged UI elements to
-// set up, so listen to DOMContentLoaded instead.
-document.addEventListener('DOMContentLoaded', init);
-```
-
#### Continue the Tutorials
Next, check out {@tutorial ui-customization}.