Migrating to Open Video UI for React 2.x

This article will guide you through updating to Open Video UI for React version 2 (from version 1), and the changes needed in your code.

Update dependencies

Run the following command to install Open Video UI for React version 2:

npm install @theoplayer/react-ui@2

Open Video UI for React now depends on Lit version 3. If your project already uses Lit, make sure you use a compatible version.

Update polyfill for legacy browsers

In version 1, we recommended loading the Web Components Polyfills on legacy browsers that do not natively support the Custom Elements API.

As of version 2, Open Video UI for React ships its own polyfill bundle, which includes:

• Web Components Polyfills
• Lit's polyfill-support module

We recommend switching to our polyfill bundle, so you'll always have all the necessary polyfills needed to support legacy browsers. Alternatively, you can load these polyfills manually.

- import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
- import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
+ import '@theoplayer/web-ui/polyfills';