feat: v1 preparations (#40)

* fix: upgrade custom-media-element to v1

* chore: upgrade test asset

* fix: add audio track rendition switch workaround

* fix: hls.js string audioTrack id bug
related https://github.com/muxinc/elements/pull/759/files#diff-c685396a5424b33db29b48c7784a8c29ad62660d2a952995977558ee462157b2R39-R41

* docs: update readme

README.md

@@ -14,7 +14,7 @@ for [hls.js](https://github.com/video-dev/hls.js) with an API that matches the
 
 <!-- prettier-ignore -->
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/hls-video-element@0.4/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/hls-video-element@1.0/+esm"></script>
 <hls-video controls src="https://stream.mux.com/r4rOE02cc95tbe3I00302nlrHfT023Q3IedFJW029w018KxZA.m3u8"></hls-video>
 ```
 
@@ -36,7 +36,7 @@ Optionally, you can load the script directly from a CDN using [jsDelivr](https:/
 
 <!-- prettier-ignore -->
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/hls-video-element@0.4/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/hls-video-element@1.0/+esm"></script>
 ```
 
 This will register the custom elements with the browser so they can be used as HTML.

hls-video-element.js

@@ -120,7 +120,10 @@ class HLSVideoElement extends MediaTracksMixin(CustomVideoElement) {
       });
 
       this.audioTracks.addEventListener('change', () => {
-        this.api.audioTrack = [...this.audioTracks].find(t => t.enabled).id;
+        const audioTrackId = [...this.audioTracks].find(t => t.enabled)?.id;
+        if (audioTrackId != null && audioTrackId != this.api.audioTrack) {
+          this.api.audioTrack = +audioTrackId;
+        }
       });
 
       // Fired when a level is removed after calling `removeLevel()`
@@ -142,14 +145,37 @@ class HLSVideoElement extends MediaTracksMixin(CustomVideoElement) {
       // 1. if all renditions are enabled it's auto selection.
       // 2. if 1 of the renditions is disabled we assume a selection was made
       //    and lock it to the first rendition that is enabled.
-      const switchRendition = ({ target: renditions }) => {
-        const level = renditions.selectedIndex;
+      const switchRendition = (event) => {
+        const level = event.target.selectedIndex;
         if (level != this.api.nextLevel) {
-          this.api.nextLevel = level;
+          smoothSwitch(level);
+        }
+      };
+
+      // Workaround for issue changing renditions on an alternative audio track.
+      // https://github.com/video-dev/hls.js/issues/5749#issuecomment-1684629437
+      const smoothSwitch = (levelIndex) => {
+        const currentTime = this.currentTime;
+        let flushedFwdBuffer = false;
+
+        const callback = (event, data) => {
+          flushedFwdBuffer ||= !Number.isFinite(data.endOffset);
+        };
+
+        this.api.on(Hls.Events.BUFFER_FLUSHING, callback);
+        this.api.nextLevel = levelIndex;
+        this.api.off(Hls.Events.BUFFER_FLUSHING, callback);
+
+        if (!flushedFwdBuffer) {
+          this.api.trigger(Hls.Events.BUFFER_FLUSHING, {
+            startOffset: currentTime + 10,
+            endOffset: Infinity,
+            type: 'video',
+          });
         }
       };
 
-      this.videoRenditions.addEventListener('change', switchRendition);
+      this.videoRenditions?.addEventListener('change', switchRendition);
 
       const removeAllMediaTracks = () => {
         for (const videoTrack of this.videoTracks) {

index.html

@@ -24,7 +24,7 @@
 <script type="importmap">
   {
     "imports": {
-      "custom-media-element": "https://cdn.jsdelivr.net/npm/custom-media-element@0.2",
+      "custom-media-element": "https://cdn.jsdelivr.net/npm/custom-media-element@1.0/+esm",
       "media-tracks": "https://cdn.jsdelivr.net/npm/media-tracks@0.2/+esm",
       "hls.js/": "https://cdn.jsdelivr.net/npm/hls.js@1.4/"
     }
@@ -39,7 +39,8 @@ <h2>On-demand</h2>
 <hls-video
   id="myVideo"
   controls
-  src="https://playertest.longtailvideo.com/adaptive/elephants_dream_v4/index.m3u8"
+  src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8"
+  poster="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp"
   crossorigin
   playsinline
 ></hls-video>

package.json

@@ -21,7 +21,7 @@
     "url": "https://github.com/muxinc/hls-video-element/issues"
   },
   "dependencies": {
-    "custom-media-element": "^0.2.0",
+    "custom-media-element": "^1.0.0",
     "hls.js": "^1.4.9",
     "media-tracks": "^0.2.3"
   },

test/index.html

@@ -4,7 +4,7 @@
   {
     "imports": {
       "zora": "https://cdn.jsdelivr.net/npm/zora/dist/index.js",
-      "custom-media-element": "https://cdn.jsdelivr.net/npm/custom-media-element/+esm",
+      "custom-media-element": "https://cdn.jsdelivr.net/npm/custom-media-element@1.0/+esm",
       "media-tracks": "https://cdn.jsdelivr.net/npm/media-tracks@0.2/+esm",
       "hls.js/": "https://cdn.jsdelivr.net/npm/hls.js@1.4/"
     }

yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-custom-media-element@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-0.2.0.tgz#bc25ee504d126c8fca9bfde81c8abc26f4d46e99"
-  integrity sha512-N++UzR1COFip4DrtZkS99VDCcQvVCJmbqI7qaxZtHWKdAv/RUYIOnmJbP/HHk2un0PjvtFNKHfNLiFsd9BmnMQ==
+custom-media-element@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.0.0.tgz#6b04f62cb7187268ab2622251a52f7539de912eb"
+  integrity sha512-wVruLAFUOtJuTaemcXPGlweGLI5efwUoctUQzMqSJRZdtetNQzrfy3CPF3daOJoJnq2OLY9Byknrv1+hruW+cw==
 
 hls.js@^1.4.9:
   version "1.4.9"