Fixed <theoplayer-time-range> repeatedly triggering seeks when updating its value from the player's current time, which caused noticeable stutters on Safari.
All components now extend LitElement and use reactive rendering, making it much easier to build custom UI components. While existing custom UI components should mostly continue to work, we highly recommend updating them to use a render() method instead.
For older browsers that don't support Custom Elements, we recommend loading our new polyfills library from @theoplayer/web-ui/polyfills.
The UI now takes SourceDescription.streamType into account when computing its own stream-type attribute. This is now the preferred method of overriding the stream type.
Fixed <theolive-default-ui> to stop using deprecated OptiView Live events.
Fixed an issue where the <theoplayer-time-range> inside the default UI could accidentally be clicked even when it was hidden because of user inactivity.
<theoplayer-default-ui> now hides all controls except the center play button when the player size is very small on desktop.
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>.
Add --theoplayer-aspect-ratio CSS property to change the aspect ratio of a <theoplayer-default-ui> or <theoplayer-ui>.
Add --theoplayer-min-width CSS property to override the min-width of a <theoplayer-default-ui> or <theoplayer-ui>.
Add --theoplayer-height CSS property to override the height of the inner <theoplayer-ui> within a <theoplayer-default-ui>.
When entering fullscreen, the player will now always hide the browser's navigation UI. (This can be overridden by setting ui.fullscreenOptions.navigationUI in your player configuration.)
🐛 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)
🚀 Add --theoplayer-play-button-icon-color CSS property to change the icon color of only the <theoplayer-play-button>. (#104)
🚀 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)
🐛 Fixed blank space below UI when using <theoplayer-default-ui>.
💅 Optimized performance of <theoplayer-time-range>. (#70)
Optimized the requestAnimationFrame callback used to update the seekbar's progress
to avoid synchronous re-layouts as much as possible.
When playing a long video, the seek bar no longer uses requestAnimationFrame at all to update its progress.
Instead, it updates using only less frequent timeupdate events.
🚀 Added support for loading in Node for static site generation (SSG) or server-side rendering (SSR). (#50)
⚠️ 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) or removed altogether (such as THEOplayer itself).
Updated <theoplayer-default-ui> to automatically switch to an optimized layout when running on a smart TV.
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.
Added support for navigating the UI using a TV remote control.
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)
💅 Renamed project to "THEOplayer Open Video UI for Web". (#43)
💥 Breaking Change: This project now requires THEOplayer version 6.0.0 or higher.
🚀 Open Video UI now imports THEOplayer as a JavaScript module using import from 'theoplayer/chromeless'.
See the README for updated installation instructions.
🐛 When the player's source is empty, the UI will no longer attempt to play when clicked. (#37)
Reworked the ad control bar in <theoplayer-default-ui>.
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.
<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.)
🐛 When the player changes sources, any open menu is now automatically closed
💥 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 for more information about targeting older browsers. (#26, #27)