@theoplayer/web-ui 1.8.1 → 1.8.2

package/CHANGELOG.md

@@ -15,6 +15,15 @@ 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))

package/README.md

@@ -131,7 +131,7 @@ See [custom-ui/demo.html](https://github.com/THEOplayer/web-ui/blob/main/docs/st
 
 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.1)
+ * 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';
@@ -1197,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;
@@ -1236,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.
      */
@@ -1257,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;
@@ -1371,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;
@@ -1379,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;