@theoplayer/web-ui 1.8.0 → 1.8.2

package/CHANGELOG.md

@@ -15,6 +15,19 @@ sidebar_custom_props: { 'icon': '📰' }
 > -   🏠 Internal
 > -   💅 Polish
 
+## v1.8.2 (2024-08-29)
+
+-   🐛 Fixed blank space below UI when using `<theoplayer-default-ui>`.
+-   💅 Optimized performance of `<theoplayer-time-range>`. ([#70](https://github.com/THEOplayer/web-ui/issues/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.
+
+## v1.8.1 (2024-04-18)
+
+-   🐛 Fixed `ui.player.destroy()` not working. ([#59](https://github.com/THEOplayer/web-ui/issues/59), [#62](https://github.com/THEOplayer/web-ui/pull/62))
+
 ## v1.8.0 (2024-04-12)
 
 -   💥 **Breaking Change**: This project now requires THEOplayer version 7.0.0 or higher. ([#60](https://github.com/THEOplayer/web-ui/pull/60))

package/README.md

@@ -102,7 +102,7 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
     ui.player.addEventListener('playing', () => console.log('THEOplayer is now playing'));
     ```
 
-See [docs/examples/default-ui.html](https://github.com/THEOplayer/web-ui/blob/main/docs/examples/default-ui.html) for a complete example.
+See [default-ui/demo.html](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v1/examples/web/default-ui/demo.html) for a complete example.
 
 ### Custom UI
 
@@ -125,13 +125,13 @@ If you want to fully customize your video player layout, you can use a `<theopla
 </theoplayer-ui>
 ```
 
-See [docs/examples/custom-ui.html](https://github.com/THEOplayer/web-ui/blob/main/docs/examples/custom-ui.html) for a complete example.
+See [custom-ui/demo.html](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v1/examples/web/custom-ui/demo.html) for a complete example.
 
 ### Legacy browser support
 
 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 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.
+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.
 
 -   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`).
 
@@ -148,7 +148,7 @@ On older browsers (such as Internet Explorer 11 and older smart TVs), you need t
     <script async src="https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js" crossorigin="anonymous"></script>
     <script type="module" src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.mjs"></script>
     <!-- Legacy browsers -->
-    <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>
+    <script nomodule src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es2015"></script>
     <script nomodule src="https://unpkg.com/@webcomponents/webcomponentsjs@2.8.0/custom-elements-es5-adapter.js"></script>
     <script nomodule src="https://unpkg.com/@webcomponents/webcomponentsjs@2.8.0/webcomponents-bundle.js"></script>
     <script nomodule src="/path/to/node_modules/theoplayer/THEOplayer.chromeless.js"></script>

package/dist/THEOplayerUI.d.ts

@@ -1,5 +1,5 @@
 /*!
- * THEOplayer Open Video UI for Web (v1.8.0)
+ * THEOplayer Open Video UI for Web (v1.8.2)
  * License: MIT
  */
 import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, PlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
@@ -777,6 +777,7 @@ declare class TextTrackStyleRadioGroup extends TextTrackStyleRadioGroup_base {
     private readonly _radioGroup;
     private readonly _optionsSlot;
     private _player;
+    private _textTrackStyle;
     private _value;
     constructor();
     connectedCallback(): void;
@@ -821,6 +822,7 @@ declare class TextTrackStyleDisplay extends TextTrackStyleDisplay_base {
     static get observedAttributes(): Attribute[];
     private readonly _spanEl;
     private _player;
+    private _textTrackStyle;
     constructor();
     connectedCallback(): void;
     protected _upgradeProperty(prop: keyof this): void;
@@ -866,6 +868,8 @@ declare const LanguageMenu_base: typeof MenuGroup & Constructor<StateReceiverEle
  */
 declare class LanguageMenu extends LanguageMenu_base {
     private _player;
+    private _audioTrackList;
+    private _textTrackList;
     static get observedAttributes(): Attribute[];
     constructor();
     get player(): ChromelessPlayer | undefined;
@@ -891,6 +895,8 @@ declare const LanguageMenuButton_base: typeof MenuButton & Constructor<StateRece
  */
 declare class LanguageMenuButton extends LanguageMenuButton_base {
     private _player;
+    private _audioTrackList;
+    private _textTrackList;
     constructor();
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
@@ -1071,6 +1077,7 @@ declare const QualityRadioGroup_base: {
 declare class QualityRadioGroup extends QualityRadioGroup_base {
     private readonly _radioGroup;
     private _player;
+    private _videoTracks;
     private _track;
     constructor();
     protected _upgradeProperty(prop: keyof this): void;
@@ -1190,7 +1197,8 @@ declare abstract class Range extends Range_base {
     static get observedAttributes(): Attribute[];
     protected readonly _rangeEl: HTMLInputElement;
     protected readonly _pointerEl: HTMLElement;
-    private _lastRangeWidth;
+    private _rangeWidth;
+    private _thumbWidth;
     constructor(options: RangeOptions);
     protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
@@ -1229,7 +1237,7 @@ declare abstract class Range extends Range_base {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private readonly _onInput;
     protected handleInput(): void;
-    protected update(): void;
+    protected update(useCachedWidth?: boolean): void;
     /**
      * The value for the `aria-label` attribute of the `<input type="range">` element.
      */
@@ -1250,6 +1258,8 @@ declare abstract class Range extends Range_base {
      * Creating an array so progress-bar can insert the buffered bar.
      */
     protected getBarColors(): ColorStops;
+    private updateCachedWidths_;
+    protected getMinimumStepForVisibleChange_(): number;
     private readonly _updatePointerBar;
     protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
     private readonly _onKeyDown;
@@ -1277,6 +1287,7 @@ declare class PreviewThumbnail extends PreviewThumbnail_base {
     private readonly _canvasContext;
     private readonly _thumbnailImageSource;
     private _player;
+    private _textTrackList;
     private _previewTime;
     private _thumbnailTextTrack;
     private _lastLoadedThumbnailUrl;
@@ -1349,6 +1360,7 @@ declare class TimeRange extends TimeRange_base {
     private readonly _previewRailEl;
     private readonly _previewBoxEl;
     private _player;
+    private _ads;
     private _pausedWhileScrubbing;
     private _autoAdvanceId;
     private _lastUpdateTime;
@@ -1362,7 +1374,7 @@ declare class TimeRange extends TimeRange_base {
     get streamType(): StreamType;
     set streamType(streamType: StreamType);
     private readonly _updateFromPlayer;
-    private readonly _updateDisabled;
+    private updateDisabled_;
     protected getAriaLabel(): string;
     protected getAriaValueText(): string;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
@@ -1370,6 +1382,7 @@ declare class TimeRange extends TimeRange_base {
     private readonly _pauseOnScrubStart;
     private readonly _playOnScrubEnd;
     private shouldAutoAdvance_;
+    private needToUpdateEveryFrame_;
     private readonly _toggleAutoAdvance;
     private readonly _autoAdvanceWhilePlaying;
     protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
@@ -1495,6 +1508,7 @@ declare const ChromecastDisplay_base: {
 declare class ChromecastDisplay extends ChromecastDisplay_base {
     private readonly _receiverNameEl;
     private _player;
+    private _castApi;
     constructor();
     protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
@@ -1570,6 +1584,7 @@ declare const GestureReceiver_base: {
  */
 declare class GestureReceiver extends GestureReceiver_base {
     private _player;
+    private _playerElement;
     private _pointerType;
     constructor();
     protected _upgradeProperty(prop: keyof this): void;
@@ -1660,6 +1675,7 @@ declare const AdDisplay_base: {
 declare class AdDisplay extends AdDisplay_base {
     private readonly _spanEl;
     private _player;
+    private _ads;
     constructor();
     protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
@@ -1685,6 +1701,7 @@ declare const AdCountdown_base: {
 declare class AdCountdown extends AdCountdown_base {
     private readonly _spanEl;
     private _player;
+    private _ads;
     constructor();
     protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
@@ -1707,6 +1724,7 @@ declare const AdClickThroughButton_base: typeof LinkButton & Constructor<StateRe
  */
 declare class AdClickThroughButton extends AdClickThroughButton_base {
     private _player;
+    private _ads;
     static get observedAttributes(): Attribute[];
     constructor();
     connectedCallback(): void;
@@ -1735,6 +1753,7 @@ declare class AdSkipButton extends AdSkipButton_base {
     private readonly _countdownEl;
     private readonly _skipEl;
     private _player;
+    private _ads;
     static get observedAttributes(): Attribute[];
     constructor();
     connectedCallback(): void;
@@ -1945,6 +1964,7 @@ declare class UIContainer extends HTMLElement {
     private readonly registerStateReceiver_;
     private readonly unregisterStateReceiver_;
     private propagateStateToReceiver_;
+    private propagatePlayerToAllReceivers_;
     private removeStateFromReceiver_;
     private openMenu_;
     private closeMenu_;
@@ -1985,6 +2005,9 @@ declare class UIContainer extends HTMLElement {
     private readonly _onChromeSlotTransition;
     private readonly _updateTextTrackMargins;
     private readonly _onPreviewTimeChange;
+    private addPlayerListeners_;
+    private removePlayerListeners_;
+    private readonly _onDestroy;
 }
 declare global {
     interface HTMLElementTagNameMap {