@theoplayer/web-ui 1.13.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +107 -102
- package/README.md +10 -10
- package/dist/THEOplayerUI.d.ts +11 -11
- package/dist/THEOplayerUI.es5.js +2 -2
- package/dist/THEOplayerUI.es5.mjs +2 -2
- package/dist/THEOplayerUI.js +3 -3
- package/dist/THEOplayerUI.js.map +1 -1
- package/dist/THEOplayerUI.mjs +3 -3
- package/dist/THEOplayerUI.mjs.map +1 -1
- package/dist/THEOplayerUI.node.mjs +2 -2
- package/dist/THEOplayerUI.node.mjs.map +1 -1
- package/package.json +5 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,156 +1,161 @@
|
|
|
1
|
-
|
|
2
|
-
description: Find out what's new in Open Video UI for Web.
|
|
3
|
-
sidebar_custom_props: { 'icon': '📰' }
|
|
4
|
-
---
|
|
1
|
+
# @theoplayer/web-ui
|
|
5
2
|
|
|
6
|
-
|
|
3
|
+
## 1.14.0
|
|
7
4
|
|
|
8
|
-
|
|
9
|
-
>
|
|
10
|
-
> - 💥 Breaking Change
|
|
11
|
-
> - 🚀 New Feature
|
|
12
|
-
> - 🐛 Bug Fix
|
|
13
|
-
> - 👎 Deprecation
|
|
14
|
-
> - 📝 Documentation
|
|
15
|
-
> - 🏠 Internal
|
|
16
|
-
> - 💅 Polish
|
|
5
|
+
### ✨ Features
|
|
17
6
|
|
|
18
|
-
|
|
7
|
+
- `<theoplayer-default-ui>` now hides all controls except the center play button when the player size is very small on desktop.
|
|
8
|
+
- Add `--theoplayer-centered-chrome-button-icon-width` CSS property to change the icon width of _only_ the buttons in the center slot in a `<theoplayer-default-ui>`.
|
|
9
|
+
- Add `--theoplayer-aspect-ratio` CSS property to change the aspect ratio of a `<theoplayer-default-ui>` or `<theoplayer-ui>`.
|
|
10
|
+
- Add `--theoplayer-min-width` CSS property to override the `min-width` of a `<theoplayer-default-ui>` or `<theoplayer-ui>`.
|
|
11
|
+
- Add `--theoplayer-height` CSS property to override the height of the inner `<theoplayer-ui>` within a `<theoplayer-default-ui>`.
|
|
19
12
|
|
|
20
|
-
|
|
13
|
+
### 🐛 Issues
|
|
21
14
|
|
|
22
|
-
|
|
15
|
+
- Fixed an issue where the menus didn't cover the entire player when the player is too small.
|
|
23
16
|
|
|
24
|
-
|
|
25
|
-
- 🐛 Fix settings menu and subtitle options menu not displaying correctly on older smart TVs. ([#108](https://github.com/THEOplayer/web-ui/pull/108), [#109](https://github.com/THEOplayer/web-ui/pull/109))
|
|
17
|
+
## 1.13.1
|
|
26
18
|
|
|
27
|
-
|
|
19
|
+
### 🐛 Issues
|
|
28
20
|
|
|
29
|
-
-
|
|
21
|
+
- When entering fullscreen, the player will now always hide the browser's navigation UI. (This can be overridden by setting [`ui.fullscreenOptions.navigationUI`](https://optiview.dolby.com/docs/theoplayer/v10/api-reference/web/interfaces/FullscreenOptions.html#navigationUI) in your player configuration.)
|
|
30
22
|
|
|
31
|
-
##
|
|
23
|
+
## 1.13.0 (2025-09-12)
|
|
32
24
|
|
|
33
|
-
-
|
|
34
|
-
- 🚀 Add `--theoplayer-center-play-button-icon-color` CSS property to change the icon color of _only_ the centered play button in a `<theoplayer-default-ui>`. ([#104](https://github.com/THEOplayer/web-ui/pull/104))
|
|
25
|
+
- 🚀 Added support for THEOplayer 10.0. ([#112](https://github.com/THEOplayer/web-ui/pull/112))
|
|
35
26
|
|
|
36
|
-
##
|
|
27
|
+
## 1.12.0 (2025-09-10)
|
|
37
28
|
|
|
38
|
-
-
|
|
39
|
-
-
|
|
29
|
+
- 🚀 Fill the entire window when fullscreen is not natively supported. ([#94](https://github.com/THEOplayer/web-ui/issues/94), [#110](https://github.com/THEOplayer/web-ui/pull/110))
|
|
30
|
+
- 🐛 Fix settings menu and subtitle options menu not displaying correctly on older smart TVs. ([#108](https://github.com/THEOplayer/web-ui/pull/108), [#109](https://github.com/THEOplayer/web-ui/pull/109))
|
|
40
31
|
|
|
41
|
-
##
|
|
32
|
+
## 1.11.3 (2025-07-22)
|
|
42
33
|
|
|
43
|
-
-
|
|
34
|
+
- 🐛 Fix issue with the `<theoplayer-ad-clickthrough-button>` component that was triggering the error `Failed to execute 'createElement' on 'Document': The result must not have attributes` when loaded into a React application. ([#106](https://github.com/THEOplayer/web-ui/pull/106))
|
|
44
35
|
|
|
45
|
-
##
|
|
36
|
+
## 1.11.2 (2025-06-30)
|
|
46
37
|
|
|
47
|
-
-
|
|
38
|
+
- 🚀 Add `--theoplayer-play-button-icon-color` CSS property to change the icon color of _only_ the `<theoplayer-play-button>`. ([#104](https://github.com/THEOplayer/web-ui/pull/104))
|
|
39
|
+
- 🚀 Add `--theoplayer-center-play-button-icon-color` CSS property to change the icon color of _only_ the centered play button in a `<theoplayer-default-ui>`. ([#104](https://github.com/THEOplayer/web-ui/pull/104))
|
|
48
40
|
|
|
49
|
-
##
|
|
41
|
+
## 1.11.1 (2025-06-30)
|
|
50
42
|
|
|
51
|
-
-
|
|
43
|
+
- 🐛 Fix pressing `Enter` on TV remote triggering click twice. ([#101](https://github.com/THEOplayer/web-ui/pull/101))
|
|
44
|
+
- 🚀 Add `error` slot to default UI, to allow for a custom error display. ([#102](https://github.com/THEOplayer/web-ui/pull/102))
|
|
52
45
|
|
|
53
|
-
##
|
|
46
|
+
## 1.11.0 (2025-06-12)
|
|
54
47
|
|
|
55
|
-
-
|
|
48
|
+
- 🚀 Add settings menu button to default UI. ([#99](https://github.com/THEOplayer/web-ui/pull/99))
|
|
56
49
|
|
|
57
|
-
##
|
|
50
|
+
## 1.10.0 (2025-04-02)
|
|
58
51
|
|
|
59
|
-
-
|
|
52
|
+
- 🚀 Added support for THEOplayer 9.0. ([#95](https://github.com/THEOplayer/web-ui/pull/95))
|
|
60
53
|
|
|
61
|
-
##
|
|
54
|
+
## 1.9.5 (2025-03-20)
|
|
62
55
|
|
|
63
|
-
-
|
|
56
|
+
- 💅 Forced subtitles are no longer shown in the subtitle menu. ([#92](https://github.com/THEOplayer/web-ui/pull/92))
|
|
64
57
|
|
|
65
|
-
##
|
|
58
|
+
## 1.9.4 (2025-02-19)
|
|
66
59
|
|
|
67
|
-
-
|
|
60
|
+
- No changes
|
|
68
61
|
|
|
69
|
-
##
|
|
62
|
+
## 1.9.3 (2024-12-03)
|
|
70
63
|
|
|
71
|
-
-
|
|
64
|
+
- 🚀 Added support for MBR Millicast streams. ([#81](https://github.com/THEOplayer/web-ui/pull/81))
|
|
72
65
|
|
|
73
|
-
##
|
|
66
|
+
## 1.9.2 (2024-11-20)
|
|
74
67
|
|
|
75
|
-
-
|
|
76
|
-
- 💅 Optimized performance of `<theoplayer-time-range>`. ([#70](https://github.com/THEOplayer/web-ui/issues/70))
|
|
77
|
-
- Optimized the `requestAnimationFrame` callback used to update the seekbar's progress
|
|
78
|
-
to avoid synchronous re-layouts as much as possible.
|
|
79
|
-
- When playing a long video, the seek bar no longer uses `requestAnimationFrame` at all to update its progress.
|
|
80
|
-
Instead, it updates using only less frequent `timeupdate` events.
|
|
68
|
+
- 🐛 Fixed live UI not showing for Millicast streams. ([#79](https://github.com/THEOplayer/web-ui/pull/79))
|
|
81
69
|
|
|
82
|
-
##
|
|
70
|
+
## 1.9.1 (2024-09-27)
|
|
83
71
|
|
|
84
|
-
-
|
|
72
|
+
- 🐛 Fixed <kbd>Enter</kbd> and <kbd>Space</kbd> keys not working to activate buttons in the UI. ([#76](https://github.com/THEOplayer/web-ui/pull/76))
|
|
85
73
|
|
|
86
|
-
##
|
|
74
|
+
## 1.9.0 (2024-09-06)
|
|
87
75
|
|
|
88
|
-
-
|
|
89
|
-
- 🚀 Added `<theolive-default-ui>` that provides a default UI for THEOlive streams. ([#58](https://github.com/THEOplayer/web-ui/pull/58))
|
|
76
|
+
- 🚀 Added support for THEOplayer 8.0. ([#72](https://github.com/THEOplayer/web-ui/pull/72))
|
|
90
77
|
|
|
91
|
-
##
|
|
78
|
+
## 1.8.2 (2024-08-29)
|
|
92
79
|
|
|
93
|
-
-
|
|
80
|
+
- 🐛 Fixed blank space below UI when using `<theoplayer-default-ui>`.
|
|
81
|
+
- 💅 Optimized performance of `<theoplayer-time-range>`. ([#70](https://github.com/THEOplayer/web-ui/issues/70))
|
|
82
|
+
- Optimized the `requestAnimationFrame` callback used to update the seekbar's progress
|
|
83
|
+
to avoid synchronous re-layouts as much as possible.
|
|
84
|
+
- When playing a long video, the seek bar no longer uses `requestAnimationFrame` at all to update its progress.
|
|
85
|
+
Instead, it updates using only less frequent `timeupdate` events.
|
|
94
86
|
|
|
95
|
-
##
|
|
87
|
+
## 1.8.1 (2024-04-18)
|
|
96
88
|
|
|
97
|
-
-
|
|
98
|
-
- 💅 Allow importing `@theoplayer/web-ui/package.json`. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
|
|
89
|
+
- 🐛 Fixed `ui.player.destroy()` not working. ([#59](https://github.com/THEOplayer/web-ui/issues/59), [#62](https://github.com/THEOplayer/web-ui/pull/62))
|
|
99
90
|
|
|
100
|
-
##
|
|
91
|
+
## 1.8.0 (2024-04-12)
|
|
101
92
|
|
|
102
|
-
-
|
|
103
|
-
|
|
104
|
-
- This should always be used together with an SSG or SSR solution. For example, you can use [Open Video UI for React](https://www.npmjs.com/package/@theoplayer/react-ui) together with [React server rendering](https://react.dev/reference/react-dom/server).
|
|
105
|
-
- 🐛 Fixed an issue where `<theoplayer-ui>` could throw an error when the player changes sources before all custom elements are properly registered. ([#49](https://github.com/THEOplayer/web-ui/pull/49))
|
|
93
|
+
- 💥 **Breaking Change**: This project now requires THEOplayer version 7.0.0 or higher. ([#60](https://github.com/THEOplayer/web-ui/pull/60))
|
|
94
|
+
- 🚀 Added `<theolive-default-ui>` that provides a default UI for THEOlive streams. ([#58](https://github.com/THEOplayer/web-ui/pull/58))
|
|
106
95
|
|
|
107
|
-
##
|
|
96
|
+
## 1.7.2 (2024-03-18)
|
|
108
97
|
|
|
109
|
-
-
|
|
110
|
-
- Idiomatic React components make the Open Video UI feel right at home in your existing React web app.
|
|
111
|
-
- 🚀 Added support for advertisements while casting to Chromecast. This requires THEOplayer version 6.8.0 or higher. ([#47](https://github.com/THEOplayer/web-ui/pull/47))
|
|
112
|
-
- 🚀 Added `theoplayerready` event to `<theoplayer-default-ui>` and `<theoplayer-ui>`, which is fired once the backing THEOplayer instance is created. ([#48](https://github.com/THEOplayer/web-ui/pull/48)).
|
|
98
|
+
- 🚀 Added `<theoplayer-slot-container>`. ([#55](https://github.com/THEOplayer/web-ui/pull/55))
|
|
113
99
|
|
|
114
|
-
##
|
|
100
|
+
## 1.7.1 (2024-02-15)
|
|
115
101
|
|
|
116
|
-
-
|
|
117
|
-
|
|
118
|
-
For custom UIs using `<theoplayer-ui>`, you can use the `tv-only` and `tv-hidden` attributes to show or hide specific UI elements on smart TVs.
|
|
119
|
-
- Added support for navigating the UI using a TV remote control.
|
|
120
|
-
- Added a `tv-focus` attribute to specify which UI element should receive the initial focus when showing the controls on a TV.
|
|
121
|
-
In the default UI, initial focus is on the seek bar.
|
|
122
|
-
- 🚀 Allow overriding more CSS properties of `<theoplayer-default-ui>`. ([#42](https://github.com/THEOplayer/web-ui/pull/42))
|
|
123
|
-
- 💅 Renamed project to "THEOplayer Open Video UI for Web". ([#43](https://github.com/THEOplayer/web-ui/pull/43))
|
|
102
|
+
- 💅 Export `version` in public API. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
|
|
103
|
+
- 💅 Allow importing `@theoplayer/web-ui/package.json`. ([#53](https://github.com/THEOplayer/web-ui/pull/53))
|
|
124
104
|
|
|
125
|
-
##
|
|
105
|
+
## 1.7.0 (2024-02-15)
|
|
126
106
|
|
|
127
|
-
-
|
|
128
|
-
-
|
|
129
|
-
|
|
130
|
-
-
|
|
107
|
+
- 🚀 Added support for loading in Node for static site generation (SSG) or server-side rendering (SSR). ([#50](https://github.com/THEOplayer/web-ui/pull/50))
|
|
108
|
+
- ⚠️ Although the Node entry point exports all custom element classes as usual, attempting to actually construct those classes will result in errors. Most dependencies are either replaced with stubs (using [`@lit-labs/ssr-dom-shim`](https://lit.dev/docs/ssr/dom-emulation/)) or removed altogether (such as THEOplayer itself).
|
|
109
|
+
- This should always be used together with an SSG or SSR solution. For example, you can use [Open Video UI for React](https://www.npmjs.com/package/@theoplayer/react-ui) together with [React server rendering](https://react.dev/reference/react-dom/server).
|
|
110
|
+
- 🐛 Fixed an issue where `<theoplayer-ui>` could throw an error when the player changes sources before all custom elements are properly registered. ([#49](https://github.com/THEOplayer/web-ui/pull/49))
|
|
131
111
|
|
|
132
|
-
##
|
|
112
|
+
## 1.6.0 (2024-02-08)
|
|
133
113
|
|
|
134
|
-
-
|
|
135
|
-
-
|
|
136
|
-
-
|
|
114
|
+
- 🚀 Introducing [Open Video UI for React](https://www.npmjs.com/package/@theoplayer/react-ui). ([#48](https://github.com/THEOplayer/web-ui/pull/48))
|
|
115
|
+
- Idiomatic React components make the Open Video UI feel right at home in your existing React web app.
|
|
116
|
+
- 🚀 Added support for advertisements while casting to Chromecast. This requires THEOplayer version 6.8.0 or higher. ([#47](https://github.com/THEOplayer/web-ui/pull/47))
|
|
117
|
+
- 🚀 Added `theoplayerready` event to `<theoplayer-default-ui>` and `<theoplayer-ui>`, which is fired once the backing THEOplayer instance is created. ([#48](https://github.com/THEOplayer/web-ui/pull/48)).
|
|
137
118
|
|
|
138
|
-
##
|
|
119
|
+
## 1.5.0 (2023-11-27)
|
|
139
120
|
|
|
140
|
-
-
|
|
141
|
-
-
|
|
142
|
-
|
|
143
|
-
-
|
|
144
|
-
-
|
|
121
|
+
- 🚀 Added support for smart TVs. ([#40](https://github.com/THEOplayer/web-ui/pull/40))
|
|
122
|
+
- Updated `<theoplayer-default-ui>` to automatically switch to an optimized layout when running on a smart TV.
|
|
123
|
+
For custom UIs using `<theoplayer-ui>`, you can use the `tv-only` and `tv-hidden` attributes to show or hide specific UI elements on smart TVs.
|
|
124
|
+
- Added support for navigating the UI using a TV remote control.
|
|
125
|
+
- Added a `tv-focus` attribute to specify which UI element should receive the initial focus when showing the controls on a TV.
|
|
126
|
+
In the default UI, initial focus is on the seek bar.
|
|
127
|
+
- 🚀 Allow overriding more CSS properties of `<theoplayer-default-ui>`. ([#42](https://github.com/THEOplayer/web-ui/pull/42))
|
|
128
|
+
- 💅 Renamed project to "THEOplayer Open Video UI for Web". ([#43](https://github.com/THEOplayer/web-ui/pull/43))
|
|
145
129
|
|
|
146
|
-
##
|
|
130
|
+
## 1.4.0 (2023-10-04)
|
|
147
131
|
|
|
148
|
-
-
|
|
149
|
-
-
|
|
150
|
-
|
|
151
|
-
-
|
|
152
|
-
- 🐛 Ensure `player` property is initialized immediately when calling `new UIContainer(configuration)` with a valid player configuration ([#24](https://github.com/THEOplayer/web-ui/pull/24))
|
|
132
|
+
- 💥 **Breaking Change**: This project now requires THEOplayer version 6.0.0 or higher.
|
|
133
|
+
- 🚀 Open Video UI now imports THEOplayer as a JavaScript module using `import from 'theoplayer/chromeless'`.
|
|
134
|
+
See the [README](https://github.com/THEOplayer/web-ui/blob/v1.4.0/README.md#installation) for updated installation instructions.
|
|
135
|
+
- 🐛 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))
|
|
153
136
|
|
|
154
|
-
##
|
|
137
|
+
## 1.3.0 (2023-05-16)
|
|
155
138
|
|
|
156
|
-
-
|
|
139
|
+
- 💥 **Breaking Change**: This project now requires THEOplayer version 5.1.0 or higher.
|
|
140
|
+
- 🏠 This project now depends on the chromeless version of THEOplayer, rather than the full version which includes the old video.js-based UI. ([#31](https://github.com/THEOplayer/web-ui/pull/31))
|
|
141
|
+
- 🐛 Fix `has-error` attribute not cleared on source change ([#29](https://github.com/THEOplayer/web-ui/pull/29))
|
|
142
|
+
|
|
143
|
+
## 1.2.0 (2023-04-26)
|
|
144
|
+
|
|
145
|
+
- 🚀 Improved support for advertisements ([#28](https://github.com/THEOplayer/web-ui/pull/28))
|
|
146
|
+
- Reworked the ad control bar in `<theoplayer-default-ui>`.
|
|
147
|
+
- Added a `show-ad-markers` attribute to `<theoplayer-time-range>`, to show markers on the progress bar indicating when the content will be interrupted by an advertisement.
|
|
148
|
+
- `<theoplayer-ad-skip-button>` and `<theoplayer-ad-clickthrough-button>` are automatically hidden while playing a Google IMA ad. (This is unfortunately necessary, because Google IMA doesn't provide a way to modify or replace its own buttons.)
|
|
149
|
+
- 🐛 When the player changes sources, any open menu is now automatically closed
|
|
150
|
+
|
|
151
|
+
## 1.1.0 (2023-04-12)
|
|
152
|
+
|
|
153
|
+
- 💥 **Breaking Change**: This project now targets modern browsers, so `dist/THEOplayerUI.js` and `dist/THEOplayerUI.mjs` now use ES2017 syntax (such as `class` and `async`/`await`). See "Legacy browser support" in the [README](https://github.com/THEOplayer/web-ui/blob/v1.1.0/README.md) for more information about targeting older browsers. ([#26](https://github.com/THEOplayer/web-ui/issues/26), [#27](https://github.com/THEOplayer/web-ui/pull/27))
|
|
154
|
+
- 🚀 Added support for THEOplayer 5.0
|
|
155
|
+
- 💅 Improved accessibility ([#21](https://github.com/THEOplayer/web-ui/pull/21))
|
|
156
|
+
- 💅 Make menus fill entire player when player is small ([#22](https://github.com/THEOplayer/web-ui/pull/22))
|
|
157
|
+
- 🐛 Ensure `player` property is initialized immediately when calling `new UIContainer(configuration)` with a valid player configuration ([#24](https://github.com/THEOplayer/web-ui/pull/24))
|
|
158
|
+
|
|
159
|
+
## 1.0.0 (2023-04-05)
|
|
160
|
+
|
|
161
|
+
- 🚀 Initial release
|
package/README.md
CHANGED
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
A component library for building a world-class video player experience powered by
|
|
9
9
|
the [THEOplayer Web SDK](https://www.theoplayer.com/product/theoplayer).
|
|
10
10
|
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
11
|
+
- Use the default UI for a great out-of-the-box experience, or use the individual components to build your own custom UI.
|
|
12
|
+
- Built using [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so works great with (or without) any app framework.
|
|
13
|
+
- Easy to customize: use HTML to lay out your controls, and CSS to style them.
|
|
14
14
|
|
|
15
15
|
|  |  |
|
|
16
16
|
| :---------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------: |
|
|
@@ -20,9 +20,9 @@ the [THEOplayer Web SDK](https://www.theoplayer.com/product/theoplayer).
|
|
|
20
20
|
|
|
21
21
|
The current THEOplayer Web SDK comes with a built-in UI based on [video.js](https://github.com/videojs/video.js) through [the `Player` constructor](https://www.theoplayer.com/docs/theoplayer/v8/api-reference/web/classes/Player.html). This new UI aims to solve some limitations from the old approach:
|
|
22
22
|
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
23
|
+
- 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.
|
|
24
|
+
- 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.
|
|
25
|
+
- 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.
|
|
26
26
|
|
|
27
27
|
> [!NOTE]
|
|
28
28
|
> 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.
|
|
@@ -73,7 +73,7 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
|
|
|
73
73
|
|
|
74
74
|
`<theoplayer-default-ui>` provides a fully-featured video player experience with minimal setup, and allows for small customizations such as changing colors or fonts.
|
|
75
75
|
|
|
76
|
-
-
|
|
76
|
+
- Option 1: in your HTML.
|
|
77
77
|
```html
|
|
78
78
|
<theoplayer-default-ui
|
|
79
79
|
configuration='{"libraryLocation":"/path/to/node_modules/theoplayer/","license":"your_theoplayer_license_goes_here"}'
|
|
@@ -85,7 +85,7 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
|
|
|
85
85
|
ui.player.addEventListener('playing', () => console.log('THEOplayer is now playing'));
|
|
86
86
|
</script>
|
|
87
87
|
```
|
|
88
|
-
-
|
|
88
|
+
- Option 2: in your JavaScript.
|
|
89
89
|
```js
|
|
90
90
|
import { DefaultUI } from '@theoplayer/web-ui';
|
|
91
91
|
const ui = new DefaultUI({
|
|
@@ -133,7 +133,7 @@ By default, Open Video UI for Web targets modern browsers that support modern Ja
|
|
|
133
133
|
|
|
134
134
|
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 [the Cloudflare mirror of Polyfill.io](https://cdnjs.cloudflare.com/polyfill/) and [Web Components Polyfills](https://github.com/webcomponents/polyfills) for these.
|
|
135
135
|
|
|
136
|
-
-
|
|
136
|
+
- 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`).
|
|
137
137
|
|
|
138
138
|
```html
|
|
139
139
|
<!-- Modern browsers -->
|
|
@@ -155,7 +155,7 @@ On older browsers (such as Internet Explorer 11 and older smart TVs), you need t
|
|
|
155
155
|
<script nomodule src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.es5.js"></script>
|
|
156
156
|
```
|
|
157
157
|
|
|
158
|
-
-
|
|
158
|
+
- 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.
|
|
159
159
|
|
|
160
160
|
```js
|
|
161
161
|
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
|
package/dist/THEOplayerUI.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* THEOplayer Open Video UI for Web (v1.
|
|
2
|
+
* THEOplayer Open Video UI for Web (v1.14.0)
|
|
3
3
|
* License: MIT
|
|
4
4
|
*/
|
|
5
|
-
import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState,
|
|
5
|
+
import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, UIPlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* `<theoplayer-control-bar>` - A horizontal control bar that can contain other controls.
|
|
@@ -1807,7 +1807,7 @@ declare const READY_EVENT: "theoplayerready";
|
|
|
1807
1807
|
*
|
|
1808
1808
|
* The styling can be controlled using CSS custom properties (see below).
|
|
1809
1809
|
*
|
|
1810
|
-
* @attribute `configuration` - The THEOplayer {@link theoplayer!
|
|
1810
|
+
* @attribute `configuration` - The THEOplayer {@link theoplayer!UIPlayerConfiguration | UIPlayerConfiguration}, as a JSON string.
|
|
1811
1811
|
* @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
|
|
1812
1812
|
* @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
|
|
1813
1813
|
* @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
|
|
@@ -1885,7 +1885,7 @@ declare class UIContainer extends HTMLElement {
|
|
|
1885
1885
|
* the underlying THEOplayer instance.
|
|
1886
1886
|
* Can also be set later on through the {@link UIContainer.configuration} property.
|
|
1887
1887
|
*/
|
|
1888
|
-
constructor(configuration?:
|
|
1888
|
+
constructor(configuration?: UIPlayerConfiguration);
|
|
1889
1889
|
private _upgradeProperty;
|
|
1890
1890
|
/**
|
|
1891
1891
|
* The underlying THEOplayer player instance.
|
|
@@ -1898,8 +1898,8 @@ declare class UIContainer extends HTMLElement {
|
|
|
1898
1898
|
*
|
|
1899
1899
|
* Used to create the underlying THEOplayer instance.
|
|
1900
1900
|
*/
|
|
1901
|
-
get configuration():
|
|
1902
|
-
set configuration(playerConfiguration:
|
|
1901
|
+
get configuration(): UIPlayerConfiguration;
|
|
1902
|
+
set configuration(playerConfiguration: UIPlayerConfiguration);
|
|
1903
1903
|
private _setConfiguration;
|
|
1904
1904
|
/**
|
|
1905
1905
|
* The player's current source.
|
|
@@ -2044,7 +2044,7 @@ declare global {
|
|
|
2044
2044
|
* For more extensive customizations, we recommend defining your own custom UI using
|
|
2045
2045
|
* a {@link UIContainer | `<theoplayer-ui>`}.
|
|
2046
2046
|
*
|
|
2047
|
-
* @attribute `configuration` - The THEOplayer {@link theoplayer!
|
|
2047
|
+
* @attribute `configuration` - The THEOplayer {@link theoplayer!UIPlayerConfiguration | UIPlayerConfiguration}, as a JSON string.
|
|
2048
2048
|
* @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
|
|
2049
2049
|
* @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
|
|
2050
2050
|
* @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
|
|
@@ -2092,7 +2092,7 @@ declare class DefaultUI extends HTMLElement {
|
|
|
2092
2092
|
* the underlying THEOplayer instance.
|
|
2093
2093
|
* Can also be set later on through the {@link DefaultUI.configuration} property.
|
|
2094
2094
|
*/
|
|
2095
|
-
constructor(configuration?:
|
|
2095
|
+
constructor(configuration?: UIPlayerConfiguration);
|
|
2096
2096
|
protected initShadowRoot(): ShadowRoot;
|
|
2097
2097
|
private _upgradeProperty;
|
|
2098
2098
|
/**
|
|
@@ -2106,8 +2106,8 @@ declare class DefaultUI extends HTMLElement {
|
|
|
2106
2106
|
*
|
|
2107
2107
|
* Used to create the underlying THEOplayer instance.
|
|
2108
2108
|
*/
|
|
2109
|
-
get configuration():
|
|
2110
|
-
set configuration(configuration:
|
|
2109
|
+
get configuration(): UIPlayerConfiguration;
|
|
2110
|
+
set configuration(configuration: UIPlayerConfiguration);
|
|
2111
2111
|
private setConfiguration_;
|
|
2112
2112
|
/**
|
|
2113
2113
|
* The player's current source.
|
|
@@ -2220,7 +2220,7 @@ declare class THEOliveDefaultUI extends DefaultUI {
|
|
|
2220
2220
|
private readonly _errorDisplay;
|
|
2221
2221
|
private readonly _playButton;
|
|
2222
2222
|
private readonly _root;
|
|
2223
|
-
constructor(configuration?:
|
|
2223
|
+
constructor(configuration?: UIPlayerConfiguration);
|
|
2224
2224
|
protected initShadowRoot(): ShadowRoot;
|
|
2225
2225
|
private readonly onReady;
|
|
2226
2226
|
private onLoadChannelStart;
|