@theoplayer/web-ui 1.3.0 → 1.4.0

package/README.md

@@ -42,15 +42,28 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
 3. Add `@theoplayer/web-ui` to your app:
     - Option 1: in your HTML.
         ```html
+        <script src="/path/to/node_modules/theoplayer/THEOplayer.chromeless.js"></script>
         <script src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.js"></script>
         ```
     - Option 2: in your JavaScript.
         ```js
         import { DefaultUI } from '@theoplayer/web-ui';
         ```
-
-> **Warning**
-> THEOplayer Web SDK currently only supports being loaded through a regular `<script>` tag or as a [UMD module](https://github.com/umdjs/umd), and does not support being `import`ed as a native JavaScript module. If you use `import` with THEOplayer Web UI, make sure to use a JavaScript bundler such as Webpack or Rollup to include THEOplayer in your app. We're hoping to fix this incompatibility soon.
+        The Web UI will import THEOplayer from `theoplayer/chromeless`.
+        If you're using a bundler such as Webpack or Rollup, this dependency should automatically get bundled with your web app.
+        Alternatively, you can use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to let the browser resolve it:
+        ```html
+        <script type="importmap">
+            {
+                "imports": {
+                    "theoplayer/chromeless": "/path/to/node_modules/theoplayer/THEOplayer.chromeless.esm.js"
+                }
+            }
+        </script>
+        <!-- Import maps polyfill for browsers without import maps support (e.g. Safari 16.3) -->
+        <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/my_app.js"></script>
+        ```
 
 ## Usage
 
@@ -118,15 +131,25 @@ By default, THEOplayer Web UI targets modern browsers that support modern JavaSc
 
 On older browsers (such as Internet Explorer 11 and older smart TVs), you need to load a different version of the THEOplayer Web 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.
 
--   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`).
+-   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`).
 
     ```html
-    <!-- Load polyfills -->
+    <!-- Modern browsers -->
+    <script type="importmap">
+        {
+            "imports": {
+                "theoplayer/chromeless": "/path/to/node_modules/theoplayer/THEOplayer.chromeless.esm.js"
+            }
+        }
+    </script>
+    <!-- Import maps polyfill for browsers without import maps support (e.g. Safari 16.3) -->
+    <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://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>
-    <!-- Load modern or legacy build -->
-    <script type="module" src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.js"></script>
+    <script nomodule src="/path/to/node_modules/theoplayer/THEOplayer.chromeless.js"></script>
     <script nomodule src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.es5.js"></script>
     ```
 

package/dist/THEOplayerUI.d.ts

@@ -1,8 +1,8 @@
 /*!
- * THEOplayer Web UI v1.3.0
+ * THEOplayer Web UI v1.4.0
  * License: MIT
  */
-import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, PlayerConfiguration, SourceDescription } from 'theoplayer/THEOplayer.chromeless';
+import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, PlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
 
 /**
  * A horizontal control bar that can contain other controls.
@@ -204,6 +204,7 @@ declare class PlayButton extends PlayButton_base {
     private readonly _onPause;
     private readonly _updateFromPlayer;
     private _updateEnded;
+    private readonly _updateDisabled;
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;