### Basic Player and UI Setup

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/README.md

A more complete example of setting up the Bitmovin Player and its UI manager, including player configuration and loading a video source. This is a common starting point for web applications.

```typescript
import { UIFactory } from 'bitmovin-player-ui';

const player = bitmovin.player({
  key: 'YOUR_LICENSE_KEY',
  container: document.getElementById('player')
});

const uiManager = UIFactory.buildUI(player);

player.load({
  sources: [{ url: 'https://example.com/video.mp4' }],
  title: 'My Video'
});
```

--------------------------------

### Minimal UI Setup

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/README.md

Demonstrates the basic steps to initialize the Bitmovin Player UI manager. This is the starting point for integrating the UI framework.

```typescript
import { UIFactory } from 'bitmovin-player-ui';

const player = bitmovin.player({ /* ... */ });
const uiManager = UIFactory.buildUI(player);

player.load({ sources: [{ url: 'video.mp4' }] });
```

--------------------------------

### Install Bitmovin Player UI via NPM

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/README.md

Use this command to install the UI framework from the NPM repository. It includes all source and distributable files.

```bash
npm install bitmovin-player-ui
```

--------------------------------

### Default UI Configuration Example

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/configuration.md

An example demonstrating the default configuration object for the UIManager, including imports and how to build the UI with default settings.

```typescript
import { UIFactory, UIManager, UIConfig } from 'bitmovin-player-ui';

const defaultConfig: UIConfig = {
  container: undefined,  // Use player's container
  metadata: {
    title: undefined,
    description: undefined,
    markers: [],
    recommendations: []
  },
  autoUiVariantResolve: true,
  playbackSpeedSelectionEnabled: true,
  disableAutoHideWhenHovered: false,
  seekbarSnappingEnabled: true,
  seekbarSnappingRange: 1,
  enableSeekPreview: true,
  enterFullscreenOnInitialPlayback: false,
  forceSubtitlesIntoViewContainer: false,
  disableStorageApi: false,
  ecoMode: false,
  includeWatermark: false,
  shadowDom: false,
  localization: {
    language: 'en',
    adaptLocalizationToSubtitleLanguage: false
  },
  cea608SmallPlayerHeightThreshold: 360
};

// Create UI with defaults
const uiManager = UIFactory.buildUI(player, defaultConfig);
```

--------------------------------

### Basic Container Initialization

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Container.md

Example of creating a Container with initial child components, CSS classes, and other configuration options.

```typescript
import { Container, PlaybackToggleButton, VolumeToggleButton, Spacer, FullscreenToggleButton } from 'bitmovin-player-ui';

const controlBar = new Container({
  cssClass: 'controlbar-bottom',
  components: [
    new PlaybackToggleButton(),
    new VolumeToggleButton(),
    new Spacer(),
    new FullscreenToggleButton()
  ]
});
```

--------------------------------

### Configuration Precedence Example

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/configuration.md

Demonstrates how different configuration sources are resolved, with SourceConfig from player.load() having the highest priority over the UIManager constructor's UIConfig. This example shows how a specific title overrides a default one.

```typescript
// Global UI config
const uiConfig = {
  metadata: { title: 'Default Title' }
};

// Source-specific config (overrides uiConfig)
player.load({
  sources: [...],
  title: 'Specific Title',  // This takes precedence
  markers: []
});

// Result: "Specific Title" is used
```

--------------------------------

### Run Development Server

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/README.md

Starts the development server, which opens a test page in the browser and automatically rebuilds and reloads on file changes.

```bash
npm start
```

--------------------------------

### Player Setup and UI Initialization

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/index.html

Demonstrates how to set up the Bitmovin Player and initialize the UI Manager with custom configurations. It includes loading sources and handling player events.

```javascript
var playerSetup = function (config) {
player = new bitmovin.player.Player(document.getElementById('player'), config);
// Update API methods when a module namespace becomes available
player.on(bitmovin.player.PlayerEvent.ModuleReady, function () {
updateApiMethods();
});
const playgroundConfig = getConfigFromStorage();
// Add UI
if (playgroundConfig.uiOption != null && bitmovin.playerui.UIFactory[playgroundConfig.uiOption] != null) {
uiManager = bitmovin.playerui.UIFactory[playgroundConfig.uiOption](player, uiConfig);
} else {
localStorage.clear();
uiManager = bitmovin.playerui.UIFactory.buildUI(player, uiConfig);
}
player.load(sources[playgroundConfig.source || 'fullyFeatured']).then(
function () {
console.log('source successfully loaded');
if (playgroundConfig.adsEnabled) {
scheduleAds();
}
},
function (errorEvent) {
console.log('error while loading source', errorEvent);
}
);
};
playerSetup(config);
```

--------------------------------

### UIContainer Configuration Example

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIContainer.md

Demonstrates how to instantiate and configure a UIContainer with custom components, CSS classes, auto-hide delay, and player state exceptions for visibility.

```typescript
import { UIContainer, Container, PlaybackToggleButton, ControlBar } from 'bitmovin-player-ui';
import { PlayerState } from 'bitmovin-player-ui';

const controlBar = new ControlBar({
  components: [
    new PlaybackToggleButton(),
    // ... more controls
  ]
});

const uiContainer = new UIContainer({
  components: [
    // Other overlays...
    controlBar
  ],
  cssClass: 'ui',
  cssClasses: ['my-custom-ui'],
  hideDelay: 3000,  // Auto-hide after 3 seconds
  
  // Keep UI visible in these player states
  hidePlayerStateExceptions: [
    PlayerUtils.PlayerState.Prepared,
    PlayerUtils.PlayerState.Paused,
    PlayerUtils.PlayerState.Finished
  ]
});

// Use with UIManager
const uiManager = new UIManager(player, uiContainer);
```

--------------------------------

### Button Constructor and setText Example

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Button.md

Demonstrates creating a button with initial text and updating it later, including usage with localization functions.

```typescript
const button = new Button({ text: 'Play' });
button.setText('Pause');

// With localization
button.setText(() => i18n.getLocalizer('play')());
```

--------------------------------

### Add Recommendation

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Example of adding a new recommendation to the UI. Ensure the recommendation object includes title, resource, and optionally a thumbnail.

```typescript
uiManager.recommendations.add({
  title: 'Next Episode',
  resource: { url: 'https://example.com/next' },
  thumbnail: 'https://example.com/thumb.jpg'
});
```

--------------------------------

### Component Hierarchy Example

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/OVERVIEW.md

Illustrates the hierarchical structure of UI components within the Bitmovin Player UI framework, from base classes to specific elements like buttons, labels, and overlays.

```text
Component (base)
├── Container (manages children)
│   ├── UIContainer (root UI wrapper)
│   ├── ControlBar (with auto-hide)
│   └── SettingsPanel (nested list)
├── Button (clickable)
│   ├── PlaybackToggleButton
│   ├── VolumeToggleButton
│   ├── FullscreenToggleButton
│   ├── SettingsToggleButton
│   ├── ToggleButton (base for binary state)
│   └── [13+ more button types]
├── Label (text display)
│   ├── MetadataLabel
│   ├── PlaybackTimeLabel
│   └── AdCounterLabel
├── SeekBar (timeline with markers)
│   └── VolumeSlider
├── Overlays (full-screen coverage)
│   ├── SubtitleOverlay
│   ├── BufferingOverlay
│   ├── PlaybackToggleOverlay
│   ├── RecommendationOverlay
│   ├── ErrorMessageOverlay
│   ├── TouchControlOverlay
│   └── [more overlays]
├── ListBox (scrollable lists)
│   ├── SubtitleListBox
│   ├── AudioTrackListBox
│   └── [more list types]
└── Settings (configuration UI)
    ├── SettingsPanel
    ├── SelectBox (dropdown)
    └── [subtitle customization]
```

--------------------------------

### Basic Event Subscription Example

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/EventDispatcher.md

Demonstrates a fundamental usage pattern of subscribing to an event using the `subscribe` method on a component's event property.

```typescript
import { PlaybackToggleButton } from 'bitmovin-player-ui';

const playButton = new PlaybackToggleButton();

playButton.onClick.subscribe((button, args) => {
  console.log('Play/pause requested');
});
```

--------------------------------

### Subscribe to UI Show Event

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIContainer.md

Example of subscribing to the `onShow` event of a UIContainer to execute a callback when the UI becomes visible.

```typescript
uiContainer.onShow.subscribe(() => {
  console.log('UI is now visible');
});
```

--------------------------------

### UI Variant Fallback Order Example

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/OVERVIEW.md

Illustrates the order in which UI variants are evaluated, with the last variant serving as the fallback for desktop content playback.

```typescript
// buildUI() creates ~7 variants evaluated in order:
1. Empty state (no source)
2. Small screen ads (mobile + ad)
3. Small screen (mobile, content)
4. TV ads (TV + ad)
5. TV (TV, content)
6. Ads (desktop + ad)
7. Main/Desktop (desktop, content) — fallback
```

--------------------------------

### Get Configuration from Local Storage

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/index.html

Retrieves the player configuration from local storage. Returns an empty object if no configuration is found or if there's an error parsing it.

```javascript
function getConfigFromStorage() {
  let config = {};
  try {
    const loadedEntry = window.localStorage.getItem('bmpui-playground-config');
    if (!loadedEntry) {
      console.log('No local storage entry found');
      return {};
    }
    config = JSON.parse(loadedEntry);
  } catch (e) {
    console.error('Problem loading playground config from localStorage', e);
  }
  return config || {};
}
```

--------------------------------

### Enable Initial Playback Fullscreen

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/configuration.md

Automatically enter fullscreen mode when the user starts playback for the first time. This is disabled by default.

```typescript
new UIManager(player, ui, {
  enterFullscreenOnInitialPlayback: true
});
```

--------------------------------

### Custom Button Subclass Example

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Component.md

Demonstrates how to extend the base `Component` class to create a custom button with specific behavior and DOM structure.

```typescript
import { Component, ComponentConfig, ViewMode } from 'bitmovin-player-ui';
import { PlayerAPI } from 'bitmovin-player';
import { UIInstanceManager } from 'bitmovin-player-ui';
import { DOM } from 'bitmovin-player-ui';

interface CustomButtonConfig extends ComponentConfig {
  label?: string;
}

export class CustomButton extends Component<CustomButtonConfig> {
  constructor(config: CustomButtonConfig = {}) {
    super(config);
    this.config = this.mergeConfig(config, { cssClass: 'custom-button' });
  }

  protected toDomElement(): DOM {
    return new DOM('button', { id: this.config.id }, this)
      .html(this.config.label || 'Click me');
  }

  configure(player: PlayerAPI, uiInstanceManager: UIInstanceManager): void {
    super.configure(player, uiInstanceManager);
    
    this.getDomElement().on('click', () => {
      console.log('Custom button clicked');
    });
  }

  release(): void {
    super.release();
  }
}

```

--------------------------------

### Mock Component for Testing

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/PATTERNS.md

Create mock components for testing purposes by extending base component classes and adding testing-specific methods. This example shows a `TestButton` with a `simulateClick` method.

```typescript
class TestButton extends Button {
  constructor(config: ButtonConfig = {}) {
    super({
      ...config,
      text: 'Test Button'
    });
  }

  // For testing
  simulateClick(): void {
    this.getDomElement().trigger('click');
  }
}
```

--------------------------------

### Log Seek Start Event

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/EventDispatcher.md

Subscribes to the `onSeek` event of the active UI to log a message when a seek operation begins. This can be used to pause playback or show buffering indicators.

```typescript
uiManager.activeUi.onSeek.subscribe(() => {
  console.log('Seeking started');
});
```

--------------------------------

### Get Localizer Function

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Returns a localizer function for translating UI strings dynamically. Call this function with a localization key to get the translated string.

```typescript
const playText = UIManager.localize('play');
```

--------------------------------

### Get Current View Mode

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Component.md

Retrieves the current view mode of the component, which dictates its auto-hiding behavior.

```typescript
getViewMode(): ViewMode
```

--------------------------------

### Initialize Bitmovin Player with UI

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/simple.html

Configure player settings such as muted and autoplay, then build and load the player with a source. Ensure the player element and UI manager are correctly initialized.

```javascript
var conf = { key: '', ui: false, playback: { muted: true, autoplay: true, }, }; var source = { dash: 'https://cdn.bitmovin.com/content/assets/MI201109210084/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd', hls: 'https://cdn.bitmovin.com/content/assets/MI201109210084/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8', progressive: 'https://cdn.bitmovin.com/content/assets/MI201109210084/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4', poster: 'https://cdn.bitmovin.com/content/assets/art-of-motion_drm/art-of-motion_poster.jpg', thumbnailTrack: { url: 'https://cdn.bitmovin.com/content/assets/MI201109210084/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt', }, }; var player = new bitmovin.player.Player(document.getElementById('player'), conf); var uiManager = bitmovin.playerui.UIFactory.buildUI(player, { includeWatermark: true }); player.load(source);
```

--------------------------------

### Label Component

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/INDEX.md

A text display component with methods for setting and getting text, and supporting various styles.

```APIDOC
## Label

### Description
Text display component.

### Methods
- `setText(text)`: Sets the label's text.
- `getText()`: Returns the label's text.
- `html()`: Returns the label's HTML content.

### Styles
Supports Standard, Emphasis, Accent styles.

### Subclasses
Includes MetadataLabel, PlaybackTimeLabel, AdCounterLabel.
```

--------------------------------

### Subscribe to onUiVariantResolve Event

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Example of subscribing to the onUiVariantResolve event. The callback receives the UIManager instance and the current UIConditionContext.

```typescript
uiManager.onUiVariantResolve.subscribe((manager, context) => {
  console.log('Resolving UI for:', context);
});
```

--------------------------------

### Apply Initial Configuration from Storage

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/index.html

Applies the initial player configuration loaded from local storage. This includes setting source, UI option, ad and portrait modes, and triggering a change event for portrait mode.

```javascript
(function applyInitialConfiguration() {
  const config = getConfigFromStorage();
  if ($('#config-source') && config.source) {
    $('#config-source').val(config.source);
  }
  if ($('#config-ui') && config.uiOption) {
    $('#config-ui').val(config.uiOption);
  }
  if ($('#config-ads') && config.adsEnabled !== undefined) {
    $('#config-ads').prop('checked', config.adsEnabled);
  }
  if ($('#display-portrait') && config.portraitEnabled !== undefined) {
    $('#display-portrait').prop('checked', config.portraitEnabled);
    $('#display-portrait').trigger('change');
  }
})();
```

--------------------------------

### Subscribe to UI Hide Event

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIContainer.md

Example of subscribing to the `onHide` event of a UIContainer to execute a callback when the UI is hidden.

```typescript
uiContainer.onHide.subscribe(() => {
  console.log('UI is now hidden');
});
```

--------------------------------

### Player Initialization and Configuration

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/tts-testing.html

Initializes the Bitmovin player with custom configurations, including advertising and disabling the default UI. Load a source and schedule ads.

```javascript
var player;
window.onload = function () {
  setupPlayer();
};

function setupPlayer() {
  bitmovin.player.Player.addModule(window.bitmovin.player['advertising-bitmovin'].default);
  const APP_ID = 'com.bitmovin.demo.webapp';
  const PLAYER_KEY = '7b49d26a-8609-45ad-96a0-46c22240cef2'; // daniel.weinberger@bitmovin.com

  const conf = new bitmovin.player.util.PlayerConfigBuilder(PLAYER_KEY)
    .optimizeForPlatform({ appId: APP_ID })
    .mergeWith({
      playback: {
        muted: true,
      },
      advertising: {},
    })
    .build();

  // disable the default UI
  conf.ui = false;

  var source = {
    dash: 'https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd',
  };

  var container = document.getElementById('player');
  player = new bitmovin.player.Player(container, conf);

  var uiManager = new bitmovin.playerui.UIManager(player, [buildCustomAdsTvUi(), buildCustomTvUi()], {});

  player.load(source).then(function () {
    player.ads.schedule({
      tag: {
        url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=' + Math.random(),
        type: 'vast',
      },
      position: '20',
    });
  });

  player.on(bitmovin.player.PlayerEvent.Warning, function (data) {
    console.log('Warning Event: ' + JSON.stringify(data));
  });

  player.on(bitmovin.player.PlayerEvent.Error, function (data) {
    console.log('Error Event: ' + JSON.stringify(data));
  });
}
```

--------------------------------

### Text-Only Button Configuration

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Button.md

Example of creating a button that displays only text, with a specified CSS class and ARIA role.

```typescript
const button = new Button({
  text: 'Settings',
  buttonStyle: ButtonStyle.Text,
  cssClass: 'ui-settings-button',
  role: 'button'
});
```

--------------------------------

### Icon-Only Button Configuration

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Button.md

Example of creating a button that displays only an icon, with custom text, aria-label, and CSS class.

```typescript
import { Button, ButtonStyle } from 'bitmovin-player-ui';

const playButton = new Button({
  text: 'Play',
  ariaLabel: 'Play video',
  buttonStyle: ButtonStyle.Icon,
  cssClass: 'ui-play-button'
});

playButton.onClick.subscribe(() => {
  console.log('Play requested');
});
```

--------------------------------

### Component Constructor

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Component.md

Initializes a new Component instance with a specific configuration.

```APIDOC
## Component Constructor

### Signature

```typescript
constructor(config: Config extends ComponentConfig)
```

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `config` | `Config extends ComponentConfig` | Yes | — | Configuration object specific to the component subclass |
```

--------------------------------

### Get Recommendations API

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Access the RecommendationsApi for managing recommendations displayed by the RecommendationOverlay. Use this to add, remove, or list recommendations.

```typescript
get recommendations(): RecommendationsApi
```

--------------------------------

### Create Main Desktop UI Layout

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates the main desktop UI layout including control bar, settings panel, title bar, and various overlays. Use this for standard desktop playback experiences.

```typescript
static main(config?: UIConfig): UIContainer
```

--------------------------------

### Retrieve Child Components from Container

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Container.md

Shows how to get an array of all child components currently managed by a container and iterate over their configurations.

```typescript
const children = container.getComponents();
children.forEach(child => console.log(child.getConfig()));
```

--------------------------------

### defaultLayouts.emptyState

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates the initial empty-state UI displayed before a source is loaded. Includes buffering, playback toggle, and error overlays.

```APIDOC
## UIFactory.defaultLayouts.emptyState

### Description
Creates the initial empty-state UI displayed before a source is loaded. Includes buffering, playback toggle, and error overlays.

### Method Signature
```typescript
static emptyState(): UIContainer
```

### Parameters
None.
```

--------------------------------

### Button with Leading Icon and Text

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Button.md

Example of creating a button that displays text with an icon preceding it, including aria-label and CSS class.

```typescript
const button = new Button({
  text: 'Download',
  ariaLabel: 'Download video',
  buttonStyle: ButtonStyle.TextWithLeadingIcon,
  cssClass: 'ui-download-button'
});
```

--------------------------------

### Build Production Version

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/README.md

Builds the project with minified files into the 'dist' directory for production use.

```bash
npm run build:prod
```

--------------------------------

### buildUI

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates a fully-featured UI with automatic variant switching for all contexts, intelligently adapting to device type, ad status, fullscreen state, and source availability.

```APIDOC
## buildUI

### Description
Creates a fully-featured UI with automatic variant switching for all contexts. The UI intelligently switches between variants based on device type (mobile/desktop/TV), ad status, fullscreen state, and source availability.

### Method
static buildUI

### Parameters
#### Path Parameters
- `player` (PlayerAPI) - Required - The player instance
- `config` (UIConfig) - Optional - Configuration for metadata, features, and behavior

### Returns
`UIManager` - Configured UI manager with 7 built-in variants

### Variants included:
1. Empty state (no source loaded)
2. Small screen ads (mobile with ad playback)
3. Small screen (mobile, content playback)
4. TV ads (TV device with ad playback)
5. TV (TV device, content playback)
6. Ads (desktop with ad playback)
7. Main/Desktop (desktop, content playback)

### Example
```typescript
const uiManager = UIFactory.buildUI(player, {
  metadata: {
    title: 'My Video',
    description: 'Video description'
  },
  localization: { language: 'en' }
});
```
```

--------------------------------

### Get onActiveUiChanged Event

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Access the onActiveUiChanged event dispatcher. Subscribe to this event to be notified after the UIManager has switched to a different UI variant.

```typescript
get onActiveUiChanged(): EventDispatcher<UIManager, ActiveUiChangedArgs>
```

--------------------------------

### defaultLayouts.main

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates the main desktop UI layout with control bar, settings panel, title bar, and overlays. It can be configured with options like ecoMode and includeWatermark.

```APIDOC
## UIFactory.defaultLayouts.main

### Description
Creates the main desktop UI layout with control bar, settings panel, title bar, and overlays. Includes subtitle, buffering, playback toggle, cast status, control bar, title bar, recommendation, and error message overlays.

### Method Signature
```typescript
static main(config?: UIConfig): UIContainer
```

### Parameters
#### config (`UIConfig`, optional)
Configuration including `ecoMode` and `includeWatermark` options.
```

--------------------------------

### UI Initialization Steps

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/OVERVIEW.md

The UI Manager orchestrates the initialization of the UI, including parsing configurations, setting up event listeners, and resolving the initial UI variant.

```plaintext
1. new UIManager(player, ui, config)
   ├─ Initialize UIInstanceManager for each variant
   ├─ Parse UIConfig, merge with source config
   ├─ Create subtitle settings manager
   ├─ Setup event listeners on player
   └─ Resolve initial UI variant based on context

2. uiManager.activeUi.onConfigured event
   ├─ Configure all components (initialize, link to player)
   ├─ Attach DOM to page
   └─ Component-specific setup (event listeners, initial state)

3. Player events trigger resolveUiVariant()
   ├─ Evaluate conditions for each UI variant
   ├─ Switch to matching variant (if changed)
   └─ Dispatch onActiveUiChanged event
```

--------------------------------

### Generate HTML Documentation

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/README.md

Generates the HTML documentation for the project.

```bash
npm run docs
```

--------------------------------

### Add Timeline Marker

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Example of adding a timeline marker, such as a chapter. Specify the time, duration, title, and optional CSS classes for styling.

```typescript
uiManager.timelineMarkers.add({
  time: 120,
  duration: 30,
  title: 'Chapter 2',
  cssClasses: ['chapter-marker']
});
```

--------------------------------

### Typical Bitmovin Player UI Integration

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/OVERVIEW.md

Integrate the Bitmovin Player UI by creating a player instance, building the UI with UIFactory, subscribing to events, managing recommendations, and loading content. Remember to clean up resources when no longer needed.

```typescript
import { UIFactory, UIManager } from 'bitmovin-player-ui';

// 1. Create player instance
const player = bitmovin.player({
  key: 'YOUR_KEY',
  container: document.getElementById('player'),
  playback: { autoplay: true }
});

// 2. Build UI with factory
const uiManager = UIFactory.buildUI(player, {
  metadata: {
    title: 'My Video',
    description: 'Video description'
  },
  localization: {
    language: 'en'
  },
  includeWatermark: false,
  playbackSpeedSelectionEnabled: true
});

// 3. Subscribe to UI events
uiManager.onActiveUiChanged.subscribe((manager, args) => {
  console.log('UI switched');
});

// 4. Manage dynamic recommendations
uiManager.recommendations.add({
  title: 'Next Episode',
  resource: { url: 'https://example.com/next' }
});

// 5. Load and play content
player.load({
  sources: [{ url: 'https://example.com/video.mp4' }],
  title: 'Episode 1'
});

// 6. Clean up (if needed)
// uiManager.release();
```

--------------------------------

### Configure Bitmovin Player Core Settings

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/index.html

This object sets up the core player configuration, including the license key, UI enablement, remote control, advertising, and playback settings like muting.

```javascript
var config = {
  key: 'YOUR KEY HERE',
  ui: false,
  remotecontrol: {
    type: 'googlecast',
  },
  advertising: {},
  playback: {
    muted: true,
  },
};
```

--------------------------------

### Main UI Entry Point

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/INDEX.md

Imports the main UIManager and UIFactory components from the bitmovin-player-ui library. This is the primary entry point for integrating the UI framework.

```typescript
import { UIManager, UIFactory, UIConfig, Component, ... } from 'bitmovin-player-ui';
```

--------------------------------

### Subscribe to onActiveUiChanged Event

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Example of subscribing to the onActiveUiChanged event. The callback receives the UIManager instance and ActiveUiChangedArgs containing previous and current UI information.

```typescript
uiManager.onActiveUiChanged.subscribe((manager, args) => {
  console.log('Switched from', args.previousUi, 'to', args.currentUi);
});
```

--------------------------------

### Basic Toggle Button Initialization

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/ToggleButton.md

Demonstrates how to create and configure a basic ToggleButton with initial text, state, and a CSS class.

```typescript
import { ToggleButton } from 'bitmovin-player-ui';

const optionButton = new ToggleButton({
  text: 'Feature On',
  toggled: false,
  cssClass: 'feature-toggle'
});

optionButton.onToggle.subscribe((button) => {
  console.log('Feature is now', button.isToggled() ? 'ON' : 'OFF');
});
```

--------------------------------

### Run Test Suite

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/README.md

Executes the test suite to ensure the stability and correctness of the UI framework.

```bash
npm test
```

--------------------------------

### Enable UI Features

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/configuration.md

Configure feature toggles for playback speed selection, eco-mode, and the Bitmovin watermark. Defaults are provided for each option.

```typescript
new UIManager(player, ui, {
  playbackSpeedSelectionEnabled: true,
  ecoMode: true,
  includeWatermark: true
});
```

--------------------------------

### Get onUiVariantResolve Event

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Access the onUiVariantResolve event dispatcher. Subscribe to this event to modify the UI context before UI variants are resolved and potentially switched.

```typescript
get onUiVariantResolve(): EventDispatcher<UIManager, UIConditionContext>
```

--------------------------------

### Get and Modify Component DOM Element

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Component.md

Retrieve the DOM element of a component and apply CSS classes to it. This is useful for custom styling or direct DOM manipulation.

```typescript
const button = new PlaybackToggleButton();
const domEl = button.getDomElement();
domEl.addClass('custom-class');
```

--------------------------------

### Dynamic Component Management

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Container.md

Demonstrates how to dynamically add, remove, and access components within a Container instance.

```APIDOC
## Dynamic Component Management

### Description
Manages the addition, removal, and retrieval of UI components within a container.

### Methods
- `addComponent(component: Component)`: Adds a UI component to the container.
- `removeComponent(component: Component)`: Removes a specified UI component from the container.
- `getComponents(): Component[]`: Returns an array of all components currently in the container.
- `getComponentByName(name: string): Component | undefined`: Retrieves a component by its name.
- `getComponentById(id: string): Component | undefined`: Retrieves a component by its HTML ID.

### Example
```typescript
const container = new Container({ cssClass: 'dynamic-panel' });

// Add components dynamically
container.addComponent(new Label({ text: 'Item 1' }));
container.addComponent(new Label({ text: 'Item 2' }));

// Remove a component
const firstComponent = container.getComponents()[0];
container.removeComponent(firstComponent);

// Access specific components
const label = container.getComponentByName('Label');
const byId = container.getComponentById('my-component-id');
```
```

--------------------------------

### Build Full-Featured UI

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates a comprehensive UI that automatically adapts to different contexts like mobile, desktop, TV, and ad playback. Use this for a general-purpose UI that handles various device types and states.

```typescript
const uiManager = UIFactory.buildUI(player, {
  metadata: {
    title: 'My Video',
    description: 'Video description'
  },
  localization: { language: 'en' }
});
```

--------------------------------

### Button Constructor and Configuration

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/Button.md

Instantiate a Button component with optional configuration for text, accessibility, style, and behavior. The `ButtonConfig` interface extends `ComponentConfig` and allows for detailed customization.

```APIDOC
## Constructor

### Signature

```typescript
constructor(config: ButtonConfig = {})
```

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `config` | `ButtonConfig` | No | `{}` | Configuration object for button text, style, and behavior |

## Configuration Interface

### ButtonConfig

```typescript
interface ButtonConfig extends ComponentConfig {
  /**
   * The button text as a string or localization function.
   */
  text?: LocalizableText;
  
  /**
   * WCAG aria label for the button.
   */
  ariaLabel?: LocalizableText;
  
  /**
   * Whether the button accepts the first touch event when UI is hidden.
   * Default: false
   */
  acceptsTouchWithUiHidden?: boolean;
  
  /**
   * The visual style of the button.
   * Default: ButtonStyle.Icon
   */
  buttonStyle?: ButtonStyle;
  
  /**
   * Inherited from ComponentConfig:
   * tag, id, cssClass, cssClasses, cssPrefix, hidden, disabled, role, tabIndex
   */
}
```

## Button Styles

### ButtonStyle Enum

```typescript
enum ButtonStyle {
  /**
   * Display only the icon.
   */
  Icon = 'icon',
  
  /**
   * Display only the text label.
   */
  Text = 'text',
  
  /**
   * Display icon before text.
   */
  TextWithLeadingIcon = 'text-icon-leading',
  
  /**
   * Display icon after text.
   */
  TextWithTrailingIcon = 'text-icon-trailing'
}
```
```

--------------------------------

### Get Timeline Markers API

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIManager.md

Access the TimelineMarkersApi for dynamically managing markers on the seek bar, such as chapters or ad breaks. Use this to add, remove, or list timeline markers.

```typescript
get timelineMarkers(): TimelineMarkersApi
```

--------------------------------

### buildSubtitleUI

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates a minimal UI containing only the subtitle overlay and supporting infrastructure for programmatic subtitle styling. No visible UI controls are displayed.

```APIDOC
## buildSubtitleUI

### Description
Creates a minimal UI containing only the subtitle overlay and supporting infrastructure for programmatic subtitle styling. No visible UI controls are displayed; subtitles must be enabled via Player API.

### Method
static buildSubtitleUI

### Parameters
#### Path Parameters
- `player` (PlayerAPI) - Required - The player instance
- `config` (UIConfig) - Optional - Configuration object

### Returns
`UIManager` - Configured UI manager with subtitle-only rendering

### Example
```typescript
const subtitleUI = UIFactory.buildSubtitleUI(player);
const subtitleMgr = subtitleUI.getSubtitleSettingsManager();
subtitleMgr.fontSize.value = '150'; // Customize subtitle styling
```
```

--------------------------------

### Custom Button and Container Configuration

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/configuration.md

Illustrates how to instantiate and configure custom UI components like Button and Container with specific properties. This includes setting text, CSS classes, accessibility roles, and nested components.

```typescript
new Button({
  text: 'Play',
  cssClass: 'my-custom-button',
  cssClasses: ['highlight'],
  ariaLabel: 'Play video',
  role: 'button',
  tabIndex: 0
});

new Container({
  components: [button1, button2],
  cssClass: 'control-bar',
  hidden: false
});
```

--------------------------------

### Cleanup Event Listeners in Component Release

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/EventDispatcher.md

Provides an example of how to properly unsubscribe event listeners within the `release` method of a custom component. This is essential for memory management and preventing leaks.

```typescript
class MyCustomComponent extends Component {
  private button: Button;
  private listener: EventListener<Button, NoArgs>;

  configure(player: PlayerAPI, uiInstanceManager: UIInstanceManager) {
    this.button = new Button();
    
    // Store reference to listener for cleanup
    this.listener = () => {
      console.log('Button clicked');
    };
    
    this.button.onClick.subscribe(this.listener);
  }

  release() {
    // Clean up event listeners on release
    this.button.onClick.unsubscribe(this.listener);
    super.release();
  }
}
```

--------------------------------

### Create Initial Empty State UI

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates the initial UI state displayed before any media source is loaded. Use this to provide immediate feedback to the user upon player initialization.

```typescript
static emptyState(): UIContainer
```

--------------------------------

### Assemble Custom UI Manager with Mixed Layouts

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Demonstrates how to create a custom UIManager by combining different UIFactory default layouts with specific conditions for their application. This allows for a highly customized UI behavior based on playback context.

```typescript
import { UIManager, UIFactory, UIConfig } from 'bitmovin-player-ui';

const player = bitmovin.player(/* ... */);

// Create custom UI manager with mixed layouts
const uiManager = new UIManager(
  player,
  [
    {
      ui: UIFactory.defaultLayouts.main({ includeWatermark: true }),
      condition: (ctx) => !ctx.isAd && !ctx.isMobile && ctx.isSourceLoaded
    },
    {
      ui: UIFactory.defaultLayouts.smallScreen(),
      condition: (ctx) => !ctx.isAd && ctx.isMobile && ctx.isSourceLoaded
    },
    {
      ...UIFactory.defaultLayouts.tv(),
      condition: (ctx) => ctx.isTv && !ctx.isAd
    },
    {
      ui: UIFactory.defaultLayouts.emptyState()
      // No condition = fallback/default
    }
  ],
  { localization: { language: 'en' } }
);
```

--------------------------------

### Access Player API from Component

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/PATTERNS.md

Access the Player API within a component's configure method to get player state or subscribe to events. Ensure the player is available before calling its methods.

```typescript
class MyComponent extends Component {
  configure(player: PlayerAPI, uiInstanceManager: UIInstanceManager): void {
    super.configure(player, uiInstanceManager);

    // Player is available during configure
    const currentTime = player.getCurrentTime();
    const duration = player.getDuration();
    const isPlaying = player.isPlaying();

    // Subscribe to player events
    player.on(player.exports.PlayerEvent.TimeUpdate, (event) => {
      console.log(`Current time: ${event.currentTime}`);
    });
  }
}
```

--------------------------------

### Component Isolation for Unit Testing

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/PATTERNS.md

Isolate a component for unit testing by creating a minimal UI container and configuring the component with a mock `UIInstanceManager`. This allows testing component logic without a full player setup.

```typescript
// Create minimal UI for testing specific component
const testButton = new PlaybackToggleButton();
const testContainer = new UIContainer({
  components: [testButton]
});

// Configure without full UIManager for unit testing
const mockUIInstanceManager = {
  getPlayer: () => mockPlayer,
  getConfig: () => ({})
} as UIInstanceManager;

testButton.configure(mockPlayer, mockUIInstanceManager);

// Test button behavior
testButton.onClick.subscribe(() => {
  // Verify expected action occurred
});
```

--------------------------------

### buildSmallScreenUI

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates a UI optimized exclusively for small screens (mobile devices) with touch-friendly controls and simplified layouts.

```APIDOC
## buildSmallScreenUI

### Description
Creates a UI optimized exclusively for small screens (mobile devices) with touch-friendly controls and simplified layouts.

### Method
static buildSmallScreenUI

### Parameters
#### Path Parameters
- `player` (PlayerAPI) - Required - The player instance
- `config` (UIConfig) - Optional - Configuration object

### Returns
`UIManager` - Configured UI manager with 2 variants (ads and content)

### Variants included:
1. Small screen ads
2. Small screen content

### Example
```typescript
const mobileUI = UIFactory.buildSmallScreenUI(player);
```
```

--------------------------------

### buildTvUI

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates a UI optimized for TV devices with spatial navigation (arrow key controls) and large, focus-friendly buttons.

```APIDOC
## buildTvUI

### Description
Creates a UI optimized for TV devices with spatial navigation (arrow key controls) and large, focus-friendly buttons.

### Method
static buildTvUI

### Parameters
#### Path Parameters
- `player` (PlayerAPI) - Required - The player instance
- `config` (UIConfig) - Optional - Configuration object

### Returns
`UIManager` - Configured UI manager with 2 variants (ads and content) and spatial navigation support

### Variants included:
1. TV ads (with spatial navigation)
2. TV content (with spatial navigation)

### Example
```typescript
const tvUI = UIFactory.buildTvUI(player);
```
```

--------------------------------

### Unsubscribe Multiple Listeners for Memory Management

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/EventDispatcher.md

Demonstrates the importance of unsubscribing from all relevant events within a component's `release` method to prevent memory leaks. This example shows unsubscribing from various component and player events.

```typescript
release(): void {
  // Unsubscribe from all events
  this.component.onShow.unsubscribe(this.showListener);
  this.component.onHide.unsubscribe(this.hideListener);
  this.player.on(PlayerEvent.Play, this.playListener);
  // ...
  super.release();
}
```

--------------------------------

### Creating a Custom UI Component

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/OVERVIEW.md

Demonstrates how to extend the base `Component` class to create a custom UI element, including defining its configuration, DOM structure, and lifecycle methods.

```typescript
import { Component, ComponentConfig, ViewMode } from 'bitmovin-player-ui';

interface MyComponentConfig extends ComponentConfig {
  customOption?: string;
}

export class MyComponent extends Component<MyComponentConfig> {
  constructor(config: MyComponentConfig = {}) {
    super(config);
    this.config = this.mergeConfig(config, { cssClass: 'my-component' });
  }

  protected toDomElement(): DOM {
    // Return the component's root DOM element
    return new DOM('div', { id: this.config.id }).html('My Component');
  }

  configure(player: PlayerAPI, uiInstanceManager: UIInstanceManager): void {
    super.configure(player, uiInstanceManager);
    // Hook up event listeners and player interactions
  }

  release(): void {
    // Clean up resources
    super.release();
  }
}
```

--------------------------------

### CEA-608 Subtitle Test Pattern (60 seconds)

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/index.html

Generates and displays CEA-608 subtitles for 60 seconds. This example uses a private method `fireEventInUI` and is not recommended for production use. It creates multiple cues across different rows and columns.

```javascript
var player = uiManager.currentUi.playerWrapper.getPlayer();
var cueEnter = function (text, row, column) {
  var cue = {
    text: text,
    position: { row: row, column: column, },
  };
  player.fireEventInUI(bitmovin.player.PlayerEvent.CueEnter, cue);
  return cue;
};
var cueExit = function (cue) {
  player.fireEventInUI(bitmovin.player.PlayerEvent.CueExit, cue);
};
var cues = [];
for (var row = 0; row < 15; row++) {
  var text = 'Test' + (row + 1);
  cues.push(cueEnter(text, row, 0));
  cues.push(cueEnter(text, row, 15 - text.length / 2 + 1));
  cues.push(cueEnter(text, row, 31 - text.length + 1));
}
setInterval(function () {
  cues.forEach(function (cue) {
    cueExit(cue);
  });
}, 60000);
```

--------------------------------

### Build Custom Ads TV UI Container

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/tts-testing.html

Creates a UI container specifically for ad playback in a TV environment. Includes an ad skip button and basic playback controls. Use this when displaying ads on TV interfaces.

```javascript
function buildCustomAdsTvUi() {
  const playbackToggleButton = new bitmovin.playerui.PlaybackToggleButton();
  const fullscreenBtn = new bitmovin.playerui.FullscreenToggleButton();
  const skipAdButton = new bitmovin.playerui.AdSkipButton({
    // skippableMessage:'Skip Ad',
    // untilSkippableMessage: 'Skip Ad in {remainingTime%mm:ss}',
  });
  const uiContainer = new bitmovin.playerui.UIContainer({
    components: [
      new bitmovin.playerui.ControlBar({
        components: [
          new bitmovin.playerui.Container({
            components: [
              playbackToggleButton,
              new bitmovin.playerui.Spacer(),
              skipAdButton,
              // fullscreenBtn,
            ],
            cssClasses: ['controlbar-bottom']
          }),
        ]
      }),
    ],
    cssClasses: ['ui-skin-tv'],
    hideDelay: 5000,
    hidePlayerStateExceptions: [
      bitmovin.playerui.PlayerUtils.PlayerState.Prepared,
      bitmovin.playerui.PlayerUtils.PlayerState.Paused,
      bitmovin.playerui.PlayerUtils.PlayerState.Finished,
    ]
  });

  const spatialNavigation = new bitmovin.playerui.SpatialNavigation(
    new bitmovin.playerui.RootNavigationGroup(uiContainer, playbackToggleButton, skipAdButton)
  );

  return { ui: uiContainer, spatialNavigation: spatialNavigation, condition: function (context) { return context.isAd; } };
}
```

--------------------------------

### CEA-608 Subtitle Test Pattern 2

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/src/html/index.html

Another CEA-608 subtitle test pattern that dynamically generates and displays subtitles. This example also uses the private `fireEventInUI` method and is for demonstration purposes only. It enqueues cues with varying text lengths and positions.

```javascript
var player = uiManager.currentUi.playerWrapper.getPlayer();
var cueEnter = function (text, row, column) {
  var cue = {
    text: text,
    position: { row: row, column: column, },
  };
  player.fireEventInUI(bitmovin.player.PlayerEvent.CueEnter, cue);
  return cue;
};
var cueExit = function (cue) {
  player.fireEventInUI(bitmovin.player.PlayerEvent.CueExit, cue);
};
var cues = [];
var column = 0;
var text = 'XOXOX XOXO OXOX XOXOXOXOXOX XOXO';
var enqueue = function () {
  for (var row = 0; row < 15; row++) {
    cues.push(cueEnter(text.substr(0, 32 - column), row, column));
    if (column >= 2) {
      cues.push(cueEnter(text.substr(0, column - 1), row, 0));
    }
  }
  setTimeout(function () {
    cues.forEach(function (cue) {
      cueExit(cue);
    });
    cues = [];
    if (column < 32) {
      enqueue();
    }
    column++;
  }, 500);
};
enqueue();
```

--------------------------------

### Apply Per-Source Configuration

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/PATTERNS.md

Override global UI configurations with source-specific settings for metadata, descriptions, markers, and recommendations. This allows for tailored content presentation.

```typescript
// Global configuration
const globalConfig: UIConfig = {
  metadata: { title: 'Default Title' },
  localization: { language: 'en' }
};

// Source-specific configuration
player.load({
  sources: [{ url: 'video.mp4' }],
  
  // Source metadata overrides global config
  title: 'Specific Video Title',
  description: 'Episode-specific description',
  markers: [
    { time: 10, title: 'Chapter 1' },
    { time: 120, title: 'Chapter 2' }
  ],
  recommendations: [
    { title: 'Next Episode', resource: { url: '...' } }
  ]
});
```

--------------------------------

### RecommendationConfig Interface

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/types.md

Defines the configuration for displaying video recommendations. It includes a title, the resource to link to (either an external URL or a player source configuration), and an optional duration.

```typescript
interface RecommendationConfig {
  title: string;
  resource: ExternalRecommendationLink | SourceConfig;
  duration?: number;
}
```

--------------------------------

### Build Subtitle UI and Customize

Source: https://github.com/bitmovin/bitmovin-player-ui/blob/develop/_autodocs/api-reference/UIFactory.md

Creates a minimal UI focused solely on displaying subtitles, with no visible controls. Use this when you need programmatic control over subtitle appearance and styling.

```typescript
const subtitleUI = UIFactory.buildSubtitleUI(player);
const subtitleMgr = subtitleUI.getSubtitleSettingsManager();
subtitleMgr.fontSize.value = '150'; // Customize subtitle styling
```