Migration Guide - v3 to v4 (Bitmovin Player UI)

Overview

The following guide will explain all the necessary changes when updating from v3 to a v4 UI.

v4 of our UI features an updated design that enhances the overall user experience with a more contemporary look.

// TODO: insert screenshot from old and new layout

Changes

File Names and project structure

Working with our UI was sometimes quite overwhelming as there was no clear project structure. To address this we introduced a folder structure which should better describe which components belong together and where to place new files.

In addition to that we also made the file names more human readible by renaming them from everything lowercased to CamelCase for typescript files and kebab-case for css (scss) files.

Layout/style changes

🚧

Layout and style changes could affect your customization.

To improve our UI layout we had to change the styling (CSS) of it. In case you implemented custom styling for certain components already, this could lead to unexpected styling.

This section covers the parts of our UI that undergo the most changes where potential styling conflicts could occur.

Settings

The settings menu got a complete overhaul and shines with a new look and feel now. This was achieved by introducing a new component that dynamically builds the UI based on the selected setting. With this, we also had to change the CSS of the settings panel. The existing style was extracted into a dedicated settings-panel-item.scss file.

No one will prevent you from sticking with the 2010-like select boxes. However, we recommend updating to the new DynamicSettingsPanelItems, which is the new default, instead.

Ads UI

Our old, clunky Ads UI was thrown out and fully replaced with a modern, up-to-date-looking Ads explicit UI designed from the ground up. It no longer overlays the majority of the Player when playing on a mobile device and fits better in our overall UI design. To enable this, we had to change its layout and styling.

Watermark

The Bitmovin watermark was removed by default and no longer needs to be explicitly removed when customizing the UI.

To get the watermark back easily, we introduced a new UIConfig that enables it again.

UIConfig.includeWatermark = true;

TV UI

// TODO: still to be defined how it will look and what the impact will be

Seekbar

// TODO: still to be defined how it will look and what the impact will be

API Changes

This table lists all API changes from v3 to v4. (See Renamings for additional low-effort changes)

Renamings

This table lists all naming changes in Typescript APIs from v3 to v4.

Typescript APIs

CSS classes

This table lists all naming changes for CSS classes from v3 to v4. (Including their files)