## @brightcove/web-sdk - v1.0.2

# Brightcove Web and Smart TV SDK

The Brightcove Web and Smart TV SDK is a general-purpose SDK for implementing the Brightcove Player in modern applications on web-based platforms - desktop browsers, mobile browsers, and web-based Smart TVs.

## Table of Content

- Brightcove Web and Smart TV SDK
  - API Reference
  - Installation
    - NPM
    - CDN
      - Specifying a Version
      - Playback-only Player
      - Playback + UI player
      - Thumbnails Integration
      - Pinning Integration
      - Custom End Screen Integration
      - Social End Screen Integration
      - Social Sharing Integration
      - IMA Client Side Integration
      - SSAI Integration
  - Usage
    - Importing the Player
      - Playback-Only
        - NPM
        - CDN
      - Playback with UI
        - NPM
        - CDN
    - Initializing a Player
    - Attach and Detach
    - Update Configuration
    - Loading Media
      - Video Cloud VOD
      - Video Cloud Playlist
      - Video Cloud Related Videos
      - Video Cloud Search
      - Remote Source
    - `IntegrationsManager`
      - NPM
      - CDN
    - `NetworkingManager`
    - `UiManager` and UI Components
      - Overriding Default Components
        - NPM
        - CDN
      - Custom Components
        - NPM
        - CDN
    - `PlaylistManager` and `Playlist`
    - Events
    - Errors
    - Styling
      - CSS Variables
    - Spatial Navigation and Smart TV Usage
      - Enabling Spatial Navigation
      - Spatial Navigation Events
    - Localizations

## API Reference

    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/docs/index.html

    # use v{major} - latest API reference within a major version
    # use v{major}.{minor} - latest API reference within a minor version
    # use v{major}.{minor}.{patch} - API reference for a specific version

    # Examples:
    # latest API reference for v1.x.x:
    https://players.brightcove.net/sdk/v1/web-sdk/docs/index.html
    # latest API reference for v1.0.x
    https://players.brightcove.net/sdk/v1.0/web-sdk/docs/index.html
    # API reference for v1.0.0
    https://players.brightcove.net/sdk/v1.0.0/web-sdk/docs/index.html

## Installation

### NPM

    npm install @brightcove/web-sdk

### CDN

    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.iife.min.js"></script>

#### Specifying a Version

As you may notice, CDN urls have a placeholder for version: `{VERSION}`.

To specify a version in the CDN URL:

- Use `v{major}` to include the latest updates within a major version.
- Use `v{major}.{minor}` to include the latest updates within a minor version.
- Use `v{major}.{minor}.{patch}` to include a specific version.

For example:

    <script src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v1.1/web-sdk/playback/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v1.1.1/web-sdk/playback/index.iife.min.js"></script>

Here is a list of all available CDN resources:

#### Playback-only Player

    # Playback-only player CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.iife.min.js
    # Playback-only player CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.es.js

#### Playback + UI player

    # Playback + UI player CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js
    # Playback + UI player CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.es.js
    # Playback + UI player CDN CSS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css
    # Playback + UI player CDN language packs:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/ar.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/de.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/en.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/es.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/fr.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/ja.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/ko.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/zh-Hans.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/languagePacks/zh-Hant.js

#### Thumbnails Integration

    # Thumbnails integration CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.iife.min.js
    # Thumbnails integration CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.es.js
    # Thumbnails integration CDN CSS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.css

#### Pinning Integration

    # Pinning integration CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.iife.min.js
    # Pinning integration CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.es.js
    # Pinning integration CDN CSS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.css

#### Custom End Screen Integration

    # Custom End Screen integration CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.iife.min.js
    # Custom End Screen integration CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.es.js
    # Custom End Screen integration CDN CSS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.css
    # Custom End Screen integration CDN language packs:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/ar.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/de.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/en.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/es.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/fr.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/ja.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/ko.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/zh-Hans.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/languagePacks/zh-Hant.js

#### Social End Screen Integration

    # Social End Screen integration CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.iife.min.js
    # Social End Screen integration CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.es.js
    # Social End Screen integration CDN CSS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.css
    # Social End Screen integration CDN language packs:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/ar.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/de.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/en.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/es.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/fr.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/ja.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/ko.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/zh-Hans.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/languagePacks/zh-Hant.js

#### Social Sharing Integration

    # Social Sharing integration CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.iife.min.js
    # Social Sharing integration CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.es.js
    # Social Sharing integration CDN CSS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.css
    # Social Sharing integration CDN language packs:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/ar.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/de.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/en.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/es.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/fr.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/ja.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/ko.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/zh-Hans.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/languagePacks/zh-Hant.js

#### IMA Client Side Integration

    # IMA Client Side integration CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.iife.min.js
    # IMA Client Side integration CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.es.js
    # IMA Client Side integration CDN CSS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.css

#### SSAI Integration

    # SSAI integration CDN JS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.iife.min.js
    # SSAI integration CDN JS alternative bundles:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.cjs.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.es.js
    # SSAI integration CDN CSS bundle:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.css
    # SSAI integration CDN language packs:
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/ar.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/de.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/en.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/es.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/fr.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/ja.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/ko.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/zh-Hans.js
    https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/languagePacks/zh-Hant.js

## Usage

### Importing the Player

#### Playback-Only

SDK provides a lightweight playback-only player. You can use it to build your own Player UI on top of it.

##### NPM

    import { Player } from '@brightcove/web-sdk/playback';

##### CDN

    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/playback/index.iife.min.js"></script>
    <script>
      // BrightcoveWebSdkPlayback is globally available namespace
      const { Player } = BrightcoveWebSdkPlayback;
    </script>

#### Playback with UI

For applications that need playback functionality along with a UI, use the following player entry point:

##### NPM

    import { Player } from '@brightcove/web-sdk/ui';
    import '@brightcove/web-sdk/ui/styles';

##### CDN

    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css">
    <!--...-->
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js"></script>
    <script>
      // BrightcoveWebSdkUi is globally available namespace
      const { Player } = BrightcoveWebSdkUi;
    </script>

### Initializing a Player

    // Account ID is required to initialize a player
    const player = new Player({ accountId: '<ACCOUNT_ID>' });

### Attach and Detach

    // you should "mount" player to some DOM element presented on the page, to start using it:
    const root = document.querySelector('#player-mount-root');

    player.attach(root);

    // you can "unmount" player from the DOM during runtime:
    player.detach();

### Update Configuration

    // you can update player configuration during runtime, example:
    player.updateConfiguration({
      brightcove: {
        policyKey: '<POLICY_KEY>'
      },
      ui: {
        language: 'en',
        playsinline: true
      }
    });

### Loading Media

#### Video Cloud VOD

    // you should pass policy key or authToken before using any Brightcove API:
    player.updateConfiguration({
      brightcove: {
        policyKey: '<POLICY_KEY>',
        // authToken: '<AUTH_TOKEN>' // or authToken
      },
    });

    async function loadVideo(videoId) {
      // you can also abort request by calling abort()
      const { abort, promise } = player.getVideoByIdFromPlaybackApi({ videoId: '<VIDEO_ID>' });

      try {
        let brightcoveVideoModel = await promise;

        player.loadBrightcoveVideoModel(brightcoveVideoModel);
      } catch (error) {
        // Handle error
        console.error('Error loading video:', error);
      }
    }

    loadVideo('<VIDEO_ID>');

#### Video Cloud Playlist

    // you should pass policy key or authToken before using any Brightcove API:
    player.updateConfiguration({
      brightcove: {
        policyKey: '<POLICY_KEY>',
        // authToken: '<AUTH_TOKEN>' // or authToken
      },
    });

    async function loadPlaylist(playlistId) {
      // you can also abort request by calling abort()
      const { abort, promise } = player.getPlaylistByIdFromPlaybackApi({ playlistId });

      try {
        const playlistModel = await promise;
        const playlistManager = player.getPlaylistManager();

        // Create playlist object
        const playlist = playlistManager.createPlaylistFromBrightcoveVideoModels(playlistModel.videos);

        // Pass the playlist object to the PlaylistManager
        playlistManager.setPlaylist(playlist);

        // Load the first playlist item
        player.loadBrightcoveVideoModel(playlist.getCurrentItem());
      } catch (error) {
        // Handle error
        console.error('Error loading playlist:', error);
      }
    }

    loadPlaylist('<PLAYLIST_ID>');

    function advanceToNextItem() {
      const playlistManager = player.getPlaylistManager();
      const playlist = playlistManager.getPlaylist();

      // Advance to the next item
      playlist.moveToNext();
      player.loadBrightcoveVideoModel(playlist.getCurrentItem());
    }

    advanceToNextItem();

#### Video Cloud Related Videos

    // you should pass policy key or authToken before using any Brightcove API:
    player.updateConfiguration({
      brightcove: {
        policyKey: '<POLICY_KEY>',
        // authToken: '<AUTH_TOKEN>' // or authToken
      },
    });

    async function loadRelatedVideos(videoId) {
      // you can also abort request by calling abort()
      const { abort, promise } = player.getRelatedVideosByVideoIdFromPlaybackApi({ videoId });

      try {
        const relatedVideos = await promise;
        const playlistManager = player.getPlaylistManager();

        // Create playlist object
        const playlist = playlistManager.createPlaylistFromBrightcoveVideoModels(relatedVideos);

        // Pass the playlist object to the PlaylistManager
        playlistManager.setPlaylist(playlist);

        // Load the first playlist item
        player.loadBrightcoveVideoModel(playlist.getCurrentItem());
      } catch (error) {
        // Handle error
        console.error('Error loading playlist:', error);
      }
    }

    loadRelatedVideos('<VIDEO_ID>');

    function advanceToNextItem() {
      const playlistManager = player.getPlaylistManager();
      const playlist = playlistManager.getPlaylist();

      // Advance to the next item
      playlist.moveToNext();
      player.loadBrightcoveVideoModel(playlist.getCurrentItem());
    }

    advanceToNextItem();

#### Video Cloud Search

    // you should pass policy key or authToken before using any Brightcove API:
    player.updateConfiguration({
      brightcove: {
        policyKey: '<POLICY_KEY>',
        // authToken: '<AUTH_TOKEN>' // or authToken
      },
    });

    async function loadSearchVideos(query) {
      // you can also abort request by calling abort()
      const { abort, promise } = player.getVideosBySearchFromPlaybackApi({ q: query });

      try {
        const searchVideos = await promise;
        const playlistManager = player.getPlaylistManager();

        // Create playlist object
        const playlist = playlistManager.createPlaylistFromBrightcoveVideoModels(searchVideos);

        // Pass the playlist object to the PlaylistManager
        playlistManager.setPlaylist(playlist);

        // Load the first playlist item
        player.loadBrightcoveVideoModel(playlist.getCurrentItem());
      } catch (error) {
        // Handle error
        console.error('Error loading playlist:', error);
      }
    }

    // see https://apis.support.brightcove.com/playback/references/reference_v2.html#tag/Videos/operation/Get_Videos
    // for query guide
    loadSearchVideos('<QUERY>');

    function advanceToNextItem() {
      const playlistManager = player.getPlaylistManager();
      const playlist = playlistManager.getPlaylist();

      // Advance to the next item
      playlist.moveToNext();
      player.loadBrightcoveVideoModel(playlist.getCurrentItem());
    }

    advanceToNextItem();

#### Remote Source

    const source = {
      url: 'http://video.com/index.m3u8'
    };

    player.loadRemoteVideo(source);

### `IntegrationsManager`

You can integrate specific features using modular imports and the `IntegrationsManager`:

#### NPM

    import { Player, IntegrationsManager } from '@brightcove/web-sdk/ui';
    import { ThumbnailsIntegrationFactory } from '@brightcove/web-sdk/integrations/thumbnails';
    import { PinningIntegrationFactory } from '@brightcove/web-sdk/integrations/pinning';
    import '@brightcove/web-sdk/ui/styles';
    import '@brightcove/web-sdk/integrations/thumbnails/styles';
    import '@brightcove/web-sdk/integrations/pinning/styles';

    // Register integrations before creating a Player
    IntegrationsManager.registerThumbnailsIntegrationFactory(ThumbnailsIntegrationFactory);
    IntegrationsManager.registerPinningIntegrationFactory(PinningIntegrationFactory);

    const player = new Player({ accountId: '<ACCOUNT_ID>' });

    player.updateConfiguration({
      // Integrations can have their own configuration options
      integrations: {
        pinning: {
          posX: 'left',
          posY: 'top',
          closeable: true
        }
      }
    });

    const root = document.querySelector('#player-mount-root');

    player.attach(root);

    // Access individual integrations via the IntegrationsManager
    const { pinningIntegration } = player.getIntegrationsManager();

    // Perform integration-specific operations
    pinningIntegration.togglePinning();

#### CDN

    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css">
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.css">
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.css">
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.css">
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.css">
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.css">
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.css">
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.css">
    <!--...-->
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/thumbnails/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/pinning/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/imaClientSide/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialSharing/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/socialEndScreen/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/customEndScreen/index.iife.min.js"></script>
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/integrations/ssai/index.iife.min.js"></script>
    <script>
      // BrightcoveWebSdkUi is available when including web-sdk/ui/index.iife.min.js
      // BrightcoveWebSdkThumbnailsIntegration is available when including web-sdk/integrations/thumbnails/index.iife.min.js
      // BrightcoveWebSdkImaClientSideIntegration is available when including web-sdk/integrations/imaClientSide/index.iife.min.js
      // BrightcoveWebSdkSocialSharingIntegration is available when including web-sdk/integrations/socialSharing/index.iife.min.js
      // BrightcoveWebSdkPinningIntegration is available when including web-sdk/integrations/pinning/index.iife.min.js
      // BrightcoveWebSdkSocialEndScreenIntegration is available when including web-sdk/integrations/socialEndScreen/index.iife.min.js
      // BrightcoveWebSdkCustomEndScreenIntegration is available when including web-sdk/integrations/customEndScreen/index.iife.min.js
      // BrightcoveWebSdkSsaiIntegration is available when including web-sdk/integrations/ssai/index.iife.min.js

      // NOTE! this example is just a demonstration of the IntegrationsManager's available API for each integration.
      // Some integrations might conflict with each other, for example: custom end screen and social end screen.
      // Please do not use this snippet in production.

      const { Player, IntegrationsManager } = BrightcoveWebSdkUi;

      const { ThumbnailsIntegrationFactory } = BrightcoveWebSdkThumbnailsIntegration;
      const { ImaClientSideIntegrationFactory } = BrightcoveWebSdkImaClientSideIntegration;
      const { SocialSharingIntegrationFactory  } = BrightcoveWebSdkSocialSharingIntegration;
      const { PinningIntegrationFactory } = BrightcoveWebSdkPinningIntegration;
      const { SocialEndScreenIntegrationFactory } = BrightcoveWebSdkSocialEndScreenIntegration;
      const { CustomEndScreenIntegrationFactory } = BrightcoveWebSdkCustomEndScreenIntegration;
      const { BrightcoveWebSdkSsaiIntegrationFactory } = BrightcoveWebSdkSsaiIntegration;

      // Register integrations before creating a Player
      IntegrationsManager.registerThumbnailsIntegrationFactory(ThumbnailsIntegrationFactory);
      IntegrationsManager.registerImaClientSideIntegrationFactory(ImaClientSideIntegrationFactory);
      IntegrationsManager.registerSocialSharingIntegrationFactory(SocialSharingIntegrationFactory);
      IntegrationsManager.registerPinningIntegrationFactory(PinningIntegrationFactory);
      IntegrationsManager.registerSsaiIntegrationFactory(BrightcoveWebSdkSsaiIntegrationFactory);
      // you can register only one end screen:
      IntegrationsManager.registerEndScreenIntegrationFactory(SocialEndScreenIntegrationFactory);
      // or
      IntegrationsManager.registerEndScreenIntegrationFactory(CustomEndScreenIntegrationFactory);

      const player = new Player({ accountId: '<ACCOUNT_ID>' });

      player.updateConfiguration({
        // Integrations can have their own configuration options
        integrations: {
          pinning: {
            posX: 'left',
            posY: 'top',
            closeable: true
          }
        }
      });

      const root = document.querySelector('#player-mount-root');

      player.attach(root);

      // Access individual integrations via the IntegrationsManager
      const { pinningIntegration } = player.getIntegrationsManager();

      // Perform integration-specific operations
      pinningIntegration.togglePinning();
    </script>

### `NetworkingManager`

The `NetworkingManager` can be used to hook into the SDK's request/response cycle:

    const networkingManager = player.getNetworkingManager();

    networkingManager.addRequestInterceptor(Player.RequestType.HlsPlaylist, (request) => {
      console.log('HLS Playlist request interceptor ', request);

      // you can modify request, but you have to return request object:
      return request;
    });

    networkingManager.addResponseInterceptor(Player.RequestType.HlsPlaylist, (response) => {
      console.log('HLS Playlist response interceptor ', response);

      // you can modify response, but you have to return response object:
      return response;
    });

### `UiManager` and UI Components

The UiManager can be used to create and manage UI Components. All SDK UI Components extend the `UiComponent` class, which has an extensive API.

See the UiComponentDependencies interface for the basic list of options that can be passed to components. Note that different component types can have additional options.

#### Overriding Default Components

The SDK has the ability to override preexisting default player components. Note that only default player components can be overridden.

##### NPM

    import { UiManager, BigPlayButtonUiComponent, UiComponentType } from '@brightcove/web-sdk/ui';

    class CustomPlayButton extends BigPlayButtonUiComponent {
       // ... custom play button code
    }

    UiManager.overrideDefaultComponent(UiComponentType.BigPlayButton, CustomPlayButton);

##### CDN

    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css">
    <!--...-->
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js"></script>
    <script>
      // BrightcoveWebSdkUi is globally available namespace
      const { UiManager, BigPlayButtonUiComponent, UiComponentType } = BrightcoveWebSdkUi;

      class CustomPlayButton extends BigPlayButtonUiComponent {
        // ... custom play button code
      }

      UiManager.overrideDefaultComponent(UiComponentType.BigPlayButton, CustomPlayButton);
    </script>

#### Custom Components

Custom Components can be made from scratch by using the BaseUiComponent class.

Note that each instance of a custom component should have a unique `name` property.

##### NPM

    import { BaseUiComponent } from '@brightcove/web-sdk/ui';

    // import and initialize UI Player

    const uiManager = player.getUiManager();
    const playerComponent = uiManager.getPlayerContainerUiComponent();

    // create a DOM element for the custom component
    const customElement = document.createElement('div');

    const customComponent = new BaseUiComponent({
      // add a unique name
      name: 'CustomUiComponent',
      componentOptions: {
        // pass the custom DOM element as an option
        el: customElement,
      },
    });

    // Add the custom component as a child of the player component
    playerComponent.addChild(customComponent);

    // Or add it as a child of another component, for example the ControlBar
    const controlBarComponent = playerComponent.getChild('ControlBar');

    controlBarComponent.addChild(customComponent);

##### CDN

    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.css">
    <!--...-->
    <script src="https://players.brightcove.net/sdk/v{VERSION}/web-sdk/ui/index.iife.min.js"></script>
    <script>
      // BrightcoveWebSdkUi is globally available namespace
      const { BaseUiComponent } = BrightcoveWebSdkUi;

      // ...

      const uiManager = player.getUiManager();
      const playerComponent = uiManager.getPlayerContainerUiComponent();

      // create a DOM element for the custom component
      const customElement = document.createElement('div');

      const customComponent = new BaseUiComponent({
        // add a unique name
        name: 'CustomUiComponent',
        componentOptions: {
          // pass the custom DOM element as an option
          el: customElement,
        },
      });

      // Add the custom component as a child of the player component
      playerComponent.addChild(customComponent);

      // Or add it as a child of another component, for example the ControlBar
      const controlBarComponent = playerComponent.getChild('ControlBar');

      controlBarComponent.addChild(customComponent);
    </script>

### `PlaylistManager` and `Playlist`

The `PlaylistManager` is used for manipulation of a `Playlist` object, comprising a list of media sources:

    const playlistManager = player.getPlaylistManager();

    // Create playlist object from a Playback API response
    const videoCloudPlaylist = playlistManager.createPlaylistFromBrightcoveVideoModels(/* Array<BrightcoveVideoModel> */);

    // Create playlist object from remote sources
    const remotePlaylist = playlistManager.createPlaylistFromRemoteSources(/* Array<Source> */);

    // Pass the playlist object to the PlaylistManager
    playlistManager.setPlaylist(/* videoCloudPlaylist | remotePlaylist */);

    // Load the first playlist item
    player.loadBrightcoveVideoModel(playlist.getCurrentItem());

    // Playlist methods to set a new item index as the current index
    playlist.moveToNext();
    playlist.moveToPrevious();
    playlist.moveTo(/* index number */)
    playlist.shuffle();

    // Load the new playlist item
    player.loadBrightcoveVideoModel(playlist.getCurrentItem());

### Events

    // Handle only the first emission of the PlayerPlaying event
    player.once(Player.Event.PlayerPlaying, (event) => {
      console.log('PlayerPlaying event: ', event);
    });

    const handlePlayerQualityLevelsChanged = (event) => console.log('PlayerQualityLevelsChanged event: ', event);

    // Handle every emission of the PlayerQualityLevelsChanged event
    player.addEventListener(Player.Event.PlayerQualityLevelsChanged, handlePlayerQualityLevelsChanged);

    // Remove one specific event listener
    player.removeEventListener(Player.Event.PlayerQualityLevelsChanged, handlePlayerQualityLevelsChanged);

    // Remove all listeners for a specific event
    player.removeAllEventListenersForType(Player.Event.PlayerQualityLevelsChanged);

    // Remove all event listeners
    player.removeAllEventListeners();

### Errors

    // Listening for error events
    this.player.addEventListener(Player.Event.PlayerError, (event) => {
      const error = event.error;

      console.log('An error occurred:', error);
    });

### Styling

The SDK provides CSS for the specific modules that have UI features.

If importing the UI-supported `Player` class from the `'@brightcove/web-sdk/ui'` entrypoint, you must import the associated CSS from `'@brightcove/web-sdk/ui/styles'`.

Additionally, if importing any of the integrations with UI features, you must import the styles specific to that integration from `'@brightcove/web-sdk/integrations/<integration-name>/styles'`

#### CSS Variables

The CSS from `'@brightcove/web-sdk/ui/styles'` comes with a set of preset CSS variables to control certain aspects of the player's styling. These CSS variables can be overriden by resetting the value.

    .bc-sdk {
      /* Override the default control bar color */
      --bc-sdk-control-bar-color: red;
    }

The following are all available CSS variables, along with their default values.

`--bc-sdk-control-color`

- The color of buttons and text.
- Default: `#fff`

`--bc-sdk-progress-color`

- The color of the progress bar.
- Default: `#08088c`

`--bc-sdk-control-bar-transparency`

- The transparency of the background color of the control bar and the big play button.
- Default: `0.45`;

`--bc-sdk-control-bar-color`

- The background color of the control bar and the big play button.
- Default: `rgba(0, 0, 0, var(--bc-sdk-control-bar-transparency))`;

`--bc-sdk-big-play-button--border`

- The border of the big play button.
- Default: `none`;

`--bc-sdk-big-play-button--width`

- The width of the big play button.
- Default: `2em`;

`--bc-sdk-big-play-button--height`

- The height of the big play button.
- Default: `2em`;

### Spatial Navigation and Smart TV Usage

Spatial Navigation in the SDK enhances user experience and accessibility on Smart TV devices by enabling navigation through interactive elements within the player using remote control arrow keys.

#### Enabling Spatial Navigation

    player.updateConfiguration({
      ui: {
        spatialNavigation: {
          // Enable Spatial Navigation
          enabled: true,

          // Enable horizontal navigation seek functionality, using right and left RCU arrow keys.
          horizontalSeek: true,
        }
      }
    });

    const spatialNavigationManager = player.getSpatialNavigationManager()

    // Start listening for keydown events
    spatialNavigationManager.start();

    // Pause listening for keydown events without removing listeners
    spatialNavigationManager.pause();

    // Resume listening for keydown events after pausing
    spatialNavigationManager.resume();

    // Disable Spatial Navigation by removing all keydown listeners
    spatialNavigationManager.stop();

#### Spatial Navigation Events

Spatial Navigation provides two events that you can listen to:

- `Player.Event.SpatialNavigation.EndOfFocusableComponents` - fired when there are no more focusable components available in the desired direction within the player interface.
- `Player.Event.SpatialNavigation.FocusableComponentsChanged` - fired when the list of focusable components changes

### Localizations

Support for multiple languages and localizations can be included as follows:

    // Import general player localizations
    import mainJapanese from '@brightcove/web-sdk/ui/languagePacks/ja';

    // Import integration-specific localizations
    import ssaiJapanese from '@brightcove/web-sdk/integrations/ssai/languagePacks/ja';

    // .. other imports and code

    const uiManager = player.getUiManager();

    uiManager.addLanguagePack('ja', mainJapanese);
    uiManager.addLanguagePack('ja', ssaiJapanese);