Merge pull request #71 from THEOplayer/release/1.8.2

Release 1.8.2
THEOplayer · Aug 29, 2024 · 52165fe · 52165fe
2 parents ff17511 + 1d54fbf
commit 52165fe
Show file tree

Hide file tree

Showing 10 changed files with 2,556 additions and 224 deletions.
diff --git a/CHANGELOG.md b/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))

diff --git a/examples/default-ui.html b/examples/default-ui.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>THEOplayer Open Video UI for Web: Default UI</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+        <style>
+            theoplayer-default-ui:not(:defined) {
+                display: inline-block;
+                box-sizing: border-box;
+            }
+
+            theoplayer-default-ui {
+                width: 100%;
+                aspect-ratio: 16 / 9;
+                font-family: 'Noto Sans', sans-serif;
+                background: #000;
+            }
+        </style>
+        <script type="importmap">
+            {
+                "imports": {
+                    "theoplayer/chromeless": "../node_modules/theoplayer/THEOplayer.chromeless.esm.js",
+                    "@theoplayer/web-ui": "../dist/THEOplayerUI.mjs"
+                }
+            }
+        </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">
+            import '@theoplayer/web-ui';
+        </script>
+    </head>
+    <body>
+        <h1>Default UI</h1>
+        <theoplayer-default-ui
+            configuration='{"libraryLocation":"../node_modules/theoplayer/","license":""}'
+            source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8"},"metadata":{"title":"Big Buck Bunny"},"textTracks":[{"default":true,"src":"https://cdn.theoplayer.com/video/big_buck_bunny/thumbnails.vtt","label":"thumbnails","kind":"metadata"}]}'
+        ></theoplayer-default-ui>
+    </body>
+</html>