hls-video-element - npm Package Compare versions

Comparing version 0.5.1 to 1.0.0

hls-video-element.js

@@ -123,3 +123,6 @@ import { CustomVideoElement } from 'custom-media-element';
       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;
+        }
       });
@@ -146,11 +149,34 @@
       //    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);
         }
       };
 
-      this.videoRenditions.addEventListener('change', switchRendition);
+      // 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);
+
       const removeAllMediaTracks = () => {
@@ -157,0 +183,0 @@ for (const videoTrack of this.videoTracks) {

package.json

 {
   "name": "hls-video-element",
-  "version": "0.5.1",
+  "version": "1.0.0",
   "description": "Custom element (web component) for playing video using the HTTP Live Streaming (HLS) format. Uses HLS.js.",
@@ -24,3 +24,3 @@ "type": "module",
   "dependencies": {
-    "custom-media-element": "^0.2.0",
+    "custom-media-element": "^1.0.0",
     "hls.js": "^1.4.9",
@@ -27,0 +27,0 @@ "media-tracks": "^0.2.3"

README.md

@@ -17,3 +17,3 @@ # `<hls-video>`
 ```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>
@@ -40,3 +40,3 @@ ```
 ```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>
 ```
@@ -43,0 +43,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12214

increased by8.07%

Lines of code

201

increased by12.29%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Addedcustom-media-element@1.4.1(transitive)

• - Removedcustom-media-element@0.2.0(transitive)

• Updatedcustom-media-element@^1.0.0