Skip to content

Commit

Permalink
Merge pull request #43 from THEOplayer/rename-project
Browse files Browse the repository at this point in the history
Rename project to "THEOplayer Open Video UI for Web"
  • Loading branch information
MattiasBuelens authored Nov 21, 2023
2 parents c01ae1a + 3e8d6bb commit ec5a442
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 11 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@
- Added a `tv-focus` attribute to specify which UI element should receive the initial focus when showing the controls on a TV.
In the default UI, initial focus is on the seek bar.
- 🚀 Allow overriding more CSS properties of `<theoplayer-default-ui>`. ([#42](https://github.com/THEOplayer/web-ui/pull/42))
- 💅 Renamed project to "THEOplayer Open Video UI for Web". ([#43](https://github.com/THEOplayer/web-ui/pull/43))

## v1.4.0 (2023-10-04)

- 💥 **Breaking Change**: This project now requires THEOplayer version 6.0.0 or higher.
- 🚀 THEOplayer Web UI now imports THEOplayer as a JavaScript module using `import from 'theoplayer/chromeless'`.
- 🚀 Open Video UI now imports THEOplayer as a JavaScript module using `import from 'theoplayer/chromeless'`.
See the [README](./README.md#installation) for updated installation instructions.
- 🐛 When the player's source is empty, the UI will no longer attempt to play when clicked. ([#37](https://github.com/THEOplayer/web-ui/pull/37))

Expand Down
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# THEOplayer Web UI
# THEOplayer Open Video UI for Web

A component library for building a world-class video player experience powered by
the [THEOplayer Web SDK](https://www.theoplayer.com/product/theoplayer).
Expand All @@ -20,10 +20,10 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http

- Designed with customization in mind. With the old UI, customizing anything beyond changing some text and icon colors was difficult, and could break in unpredictable ways when updating to a new THEOplayer version. With the new UI, all components can be customized in a variety of ways with well-documented attributes and CSS custom properties.
- Built for the modern web. The old UI was built at a time when Internet Explorer was still a major browser, so it couldn't use newer web technologies. The new UI breaks with the past and takes full advantage of Web Components, so it works well in modern web apps.
- Developed in the open. Although the old UI is based on the open-source video.js library, any custom components bundled with THEOplayer remained closed-source. With the new UI, the source code of all components is publicly available. Advanced users can learn about the inner workings of each component, modify them, and even contribute their changes back to THEOplayer Web UI.
- Developed in the open. Although the old UI is based on the open-source video.js library, any custom components bundled with THEOplayer remained closed-source. With the new UI, the source code of all components is publicly available. Advanced users can learn about the inner workings of each component, modify them, and even contribute their changes back to Open Video UI.

> **Note**
> THEOplayer Web UI currently exists separately from the old THEOplayer UI. In the future, we hope to deprecate and remove the old UI, and ship this new UI as default UI for the THEOplayer Web SDK.
> THEOplayer Open Video UI for Web currently exists separately from the old THEOplayer UI. In the future, we hope to deprecate and remove the old UI, and ship this new UI as default UI for the THEOplayer Web SDK.
## Installation

Expand All @@ -35,7 +35,7 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
```sh
npm install theoplayer@npm:@theoplayer/basic-hls
```
2. Install the THEOplayer Web UI.
2. Install the Open Video UI for Web.
```sh
npm install @theoplayer/web-ui
```
Expand All @@ -49,7 +49,7 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
```js
import { DefaultUI } from '@theoplayer/web-ui';
```
The Web UI will import THEOplayer from `theoplayer/chromeless`.
Open Video UI will import THEOplayer from `theoplayer/chromeless`.
If you're using a bundler such as Webpack or Rollup, this dependency should automatically get bundled with your web app.
Alternatively, you can use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to let the browser resolve it:
```html
Expand Down Expand Up @@ -127,9 +127,9 @@ See [docs/examples/custom-ui.html](https://github.com/THEOplayer/web-ui/blob/mai
# Legacy browser support
By default, THEOplayer Web UI targets modern browsers that support modern JavaScript syntax (such as [async/await](https://caniuse.com/async-functions)) and native [Custom Elements](https://caniuse.com/custom-elementsv1). This keeps the download size small, so your viewers can spend less time waiting for your page to load and start watching their video faster.
By default, Open Video UI for Web targets modern browsers that support modern JavaScript syntax (such as [async/await](https://caniuse.com/async-functions)) and native [Custom Elements](https://caniuse.com/custom-elementsv1). This keeps the download size small, so your viewers can spend less time waiting for your page to load and start watching their video faster.
On older browsers (such as Internet Explorer 11 and older smart TVs), you need to load a different version of the THEOplayer Web UI that uses older JavaScript syntax. You also need to load additional polyfills for missing features such as Promises or Custom Elements. We recommend [Polyfill.io](https://polyfill.io/) and [Web Components Polyfills](https://github.com/webcomponents/polyfills) for these.
On older browsers (such as Internet Explorer 11 and older smart TVs), you need to load a different version of the Open Video UI that uses older JavaScript syntax. You also need to load additional polyfills for missing features such as Promises or Custom Elements. We recommend [Polyfill.io](https://polyfill.io/) and [Web Components Polyfills](https://github.com/webcomponents/polyfills) for these.
- Option 1: in your HTML. This uses [differential serving](https://css-tricks.com/differential-serving/) so modern browsers will load the modern build (with `type="module"`), while legacy browsers will load the legacy build (with `nomodule`).
Expand All @@ -153,7 +153,7 @@ On older browsers (such as Internet Explorer 11 and older smart TVs), you need t
<script nomodule src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.es5.js"></script>
```
- Option 2: in your JavaScript. This will load the legacy build on both modern and legacy browsers, which is suboptimal. Instead, we recommend configuring your bundler to produce a modern and legacy build of your entire web app, and to import the appropriate version of THEOplayer Web UI for each build flavor.
- Option 2: in your JavaScript. This will load the legacy build on both modern and legacy browsers, which is suboptimal. Instead, we recommend configuring your bundler to produce a modern and legacy build of your entire web app, and to import the appropriate version of Open Video UI for each build flavor.
```js
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Expand Down
2 changes: 1 addition & 1 deletion docs/_config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.

title: THEOplayer Web UI
title: THEOplayer Open Video UI for Web
description: >- # this means to ignore newlines until "baseurl:"
UI component library for the THEOplayer Web SDK
baseurl: /web-ui # the subpath of your site, e.g. /blog
Expand Down
2 changes: 1 addition & 1 deletion rollup.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const browserslistLegacy = ['last 2 versions', 'ie >= 11'];
const production = process.env.BUILD === 'production';

const banner = `/*!
* THEOplayer Web UI v${version}
* THEOplayer Open Video UI for Web (v${version})
* License: ${license}
*/`;
const theoplayerModule = 'theoplayer/chromeless';
Expand Down

0 comments on commit ec5a442

Please sign in to comment.