Skip to main content

@theoplayer/web-ui

2.0.0​

💥 Breaking Changes​

  • Open Video UI for Web is now built using Lit.
    • 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.

✨ Features​

  • Added settings menu to default UI.

1.16.3​

🐛 Issues​

  • Improve labels for text tracks and audio tracks in the <theoplayer-language-menu>.

1.16.2​

🐛 Issues​

  • Language names in the language menu are now capitalized according to that language's case mappings.

1.16.1​

🐛 Issues​

  • Fixed a regression where menus would always fill the entire player on desktop (rather than opening as a small popup in the bottom right corner).

1.16.0​

✨ Features​

  • Added centered-chrome slot to <theoplayer-default-ui> to replace all controls in the center of the player.

🐛 Issues​

  • Fixed an issue where buttons inside the default UI could accidentally be clicked even when they were hidden because of user inactivity.

1.15.0​

✨ Features​

  • 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.

🐛 Issues​

  • 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.

1.14.0​

✨ Features​

  • <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>.

🐛 Issues​

  • Fixed an issue where the menus didn't cover the entire player when the player is too small.

1.13.1​

🐛 Issues​

  • 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.)

1.13.0 (2025-09-12)​

  • 🚀 Added support for THEOplayer 10.0. (#112)

1.12.0 (2025-09-10)​

  • 🚀 Fill the entire window when fullscreen is not natively supported. (#94, #110)
  • 🐛 Fix settings menu and subtitle options menu not displaying correctly on older smart TVs. (#108, #109)

1.11.3 (2025-07-22)​

  • 🐛 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)

1.11.2 (2025-06-30)​

  • 🚀 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)

1.11.1 (2025-06-30)​

  • 🐛 Fix pressing Enter on TV remote triggering click twice. (#101)
  • 🚀 Add error slot to default UI, to allow for a custom error display. (#102)

1.11.0 (2025-06-12)​

  • 🚀 Add settings menu button to default UI. (#99)

1.10.0 (2025-04-02)​

  • 🚀 Added support for THEOplayer 9.0. (#95)

1.9.5 (2025-03-20)​

  • 💅 Forced subtitles are no longer shown in the subtitle menu. (#92)

1.9.4 (2025-02-19)​

  • No changes

1.9.3 (2024-12-03)​

  • 🚀 Added support for MBR Millicast streams. (#81)

1.9.2 (2024-11-20)​

  • 🐛 Fixed live UI not showing for Millicast streams. (#79)

1.9.1 (2024-09-27)​

  • 🐛 Fixed Enter and Space keys not working to activate buttons in the UI. (#76)

1.9.0 (2024-09-06)​

  • 🚀 Added support for THEOplayer 8.0. (#72)

1.8.2 (2024-08-29)​

  • 🐛 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.

1.8.1 (2024-04-18)​

  • 🐛 Fixed ui.player.destroy() not working. (#59, #62)

1.8.0 (2024-04-12)​

  • 💥 Breaking Change: This project now requires THEOplayer version 7.0.0 or higher. (#60)
  • 🚀 Added <theolive-default-ui> that provides a default UI for THEOlive streams. (#58)

1.7.2 (2024-03-18)​

  • 🚀 Added <theoplayer-slot-container>. (#55)

1.7.1 (2024-02-15)​

  • 💅 Export version in public API. (#53)
  • 💅 Allow importing @theoplayer/web-ui/package.json. (#53)

1.7.0 (2024-02-15)​

  • 🚀 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).
    • This should always be used together with an SSG or SSR solution. For example, you can use Open Video UI for React together with React server rendering.
  • 🐛 Fixed an issue where <theoplayer-ui> could throw an error when the player changes sources before all custom elements are properly registered. (#49)

1.6.0 (2024-02-08)​

  • 🚀 Introducing Open Video UI for React. (#48)
    • Idiomatic React components make the Open Video UI feel right at home in your existing React web app.
  • 🚀 Added support for advertisements while casting to Chromecast. This requires THEOplayer version 6.8.0 or higher. (#47)
  • 🚀 Added theoplayerready event to <theoplayer-default-ui> and <theoplayer-ui>, which is fired once the backing THEOplayer instance is created. (#48).

1.5.0 (2023-11-27)​

  • 🚀 Added support for smart TVs. (#40)
    • 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)

1.4.0 (2023-10-04)​

  • 💥 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)

1.3.0 (2023-05-16)​

  • 💥 Breaking Change: This project now requires THEOplayer version 5.1.0 or higher.
  • 🏠 This project now depends on the chromeless version of THEOplayer, rather than the full version which includes the old video.js-based UI. (#31)
  • 🐛 Fix has-error attribute not cleared on source change (#29)

1.2.0 (2023-04-26)​

  • 🚀 Improved support for advertisements (#28)
    • 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

1.1.0 (2023-04-12)​

  • 💥 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)
  • 🚀 Added support for THEOplayer 5.0
  • 💅 Improved accessibility (#21)
  • 💅 Make menus fill entire player when player is small (#22)
  • 🐛 Ensure player property is initialized immediately when calling new UIContainer(configuration) with a valid player configuration (#24)

1.0.0 (2023-04-05)​

  • 🚀 Initial release