Overview

The following points outline all the necessary changes to successfully migrate to Bitmovin Player UI v4 and take advantage of the new version.

Version 4 of the Player UI marks a new milestone in our design. Find out more in What's new in Bitmovin Player UI v4.

Setup

The entry point to our per-default provided UI layouts has changed by removing the terms default and modern. In case you were using one of them to initialize the UIManager you need to rename them based on the following mapping:

Changes

Tooling Changes

For our new version, we switched to webpack to align with an up-to-date build tooling. The following commands changed:

We also integrated prettier to format our codebase. This could cause additional merge conflicts in case you forked our UI. We recommend running prettier on your version first before merging the updated version.

API Changes

This table lists all API changes from version 3 to version 4. (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 version 3 to version 4. (Including their files)

CSS variables

CSS classes that changed based on the file renaming are not listed here.

File Names and Project Structure

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

Additionally, we made the file names more human-readable by renaming them from all lowercase to CamelCase for TypeScript files and kebab-case for CSS (SCSS) files and class names.

Font and Icon Sizing

The Icon size standardized to 24x24px. To match the text, the default font size changed from 16px to 18px. Both can now be customized by setting a custom value for the corresponding variable in _variables.scss.

Color Scheme

The user interface elements now use white as the accent color instead of the previous legacy Bitmovin blue. Customizing the accent color. Change the accent color of your user interface by modifying the $color-highlight variable in _variables.scss.

Button and Label Styling

Buttons and Labels now feature a dedicated Icon component to allow separate styling of icons, text, and backgrounds. The Icon placement can be adapted with the new styling options for Buttons and Labels. See ButtonStyle and LabelStyle for details.

Behavior Changes

Touch Interactions

New touch interactions have been added for touch input devices:

• Single-tap anywhere on empty space to hide the User Interface and tap anywhere to show it.
• Double-tap to skip forward/backward functionality
• Controls immediately hide on mouse leave in web browsers by default
• Small Screen UI variant activates on web browsers when the document width is less than 800px

Safe-Area Support

Out-of-the-box safe-area support for non-rectangular displays using CSS env() functions to prevent elements from being cut off by device shapes.

Layout/style changes

🚧

Layout and style changes could affect your customization.

To improve our layout we had to change the styling (CSS) of it. This may affect custom styling for certain components and could lead to unexpected styling.

This section covers the parts of our Bitmovin Player UI that undergo the most changes, where potential styling or other conflicts could occur. If you have customized any styling or behavior in any of the sections, review our changes and adapt them to your needs.

Settings

The settings menu has undergone a complete overhaul and now shines with a new look and feel. This was achieved by introducing a new component that dynamically builds the content 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.

We will not prevent you from sticking with the 2010-like select boxes (use SettingsPanelItem instead of DynamicSettingsPanelItem, if you wish). However, we recommend updating to the new designs, which is the new default.

Ads UI

Our old, clunky Ads UI variant was thrown out the window and entirely replaced with a modern, up-to-date-looking Ads User Interface, 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 design.

Watermark

The Bitmovin watermark is no longer included by default and therefore does not need to be explicitly removed when customizing the Bitmovin Player UI to your needs.

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

UIConfig.includeWatermark = true;

This is useful when you want to have your own logo as a watermark in your Player. Replace the logo.svg to achieve this easily.

TV UI

The TV UI variant received a complete overhaul featuring a cleaner, more modern look specifically optimized for TV displays and remote control navigation.

This includes:

• Enhanced out-of-the-box spatial navigation for multiple layouts
• Improved focus indicators for elements such as Buttons
• Optimized layout for large screens
• Consistent design language matching the web and mobile experiences

SeekBar

One of the most interacted elements in any Player might be the Seekbar to skip forward or rewind the best moments of the video. The new Seekbar features a more rounded design, accompanied by enhanced text elements placement for improved readability. It also aligns better with the overall design by rounding a few rough edges.

Buffer indicator

Updated buffering indicator with new design, animation, and color. It became a lot simpler by simply showing a regular three-dot indicator with a subtitle loading animation.

RecommendationOverlay

The recommendation overlay was always kind of the black sheep feature. It was never designed with the overall layout picture in mind. It received the biggest changes in the new version through a complete design and API overhaul. The new design features a:

• New scrollable list design supporting more recommendations
• Updated API with support for redirect to an external website via ExternalRecommendationLink and support for SourceConfig to directly load new content in the current player instance

📘

Find all updates in our CHANGELOG