hls-video-element - npm Package Compare versions

Comparing version 1.2.7 to 1.2.8

hls-video-element.js

@@ -6,3 +6,2 @@ import { CustomVideoElement } from 'custom-media-element';
 const HlsVideoMixin = (superclass) => {
-
   return class HlsVideo extends superclass {
@@ -16,2 +15,4 @@ static shadowRootOptions = { ...superclass.shadowRootOptions };
 
+    #airplaySourceEl = null;
+
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -28,2 +29,9 @@ if (attrName !== 'src') {
     #destroy() {
+      this.#airplaySourceEl?.remove();
+
+      this.nativeEl?.removeEventListener(
+        'webkitcurrentplaybacktargetiswirelesschanged',
+        this.#toggleHlsLoad
+      );
+
       if (this.api) {
@@ -45,6 +53,7 @@ this.api.detachMedia();
       if (Hls.isSupported()) {
-
         this.api = new Hls({
           // Mimic the media element with an Infinity duration for live streams.
-          liveDurationInfinity: true
+          liveDurationInfinity: true,
+          // Disable auto quality level/fragment loading.
+          autoStartLoad: false,
         });
@@ -55,2 +64,5 @@
 
+        this.api.loadSource(this.src);
+        this.api.attachMedia(this.nativeEl);
+
         // Set up preload
@@ -60,3 +72,3 @@ switch (this.nativeEl.preload) {
             // when preload is none, load the source on first play
-            const loadSourceOnPlay = () => this.api.loadSource(this.src);
+            const loadSourceOnPlay = () => this.api.startLoad();
             this.nativeEl.addEventListener('play', loadSourceOnPlay, {
@@ -87,3 +99,3 @@ once: true,
             });
-            this.api.loadSource(this.src);
+            this.api.startLoad();
             break;
@@ -93,7 +105,22 @@ }
             // load source immediately for any other preload value
-            this.api.loadSource(this.src);
+            this.api.startLoad();
         }
 
-        this.api.attachMedia(this.nativeEl);
+        // Stop loading the HLS stream when AirPlay is active.
+        // https://github.com/video-dev/hls.js/issues/6482#issuecomment-2159399478
+        if (this.nativeEl.webkitCurrentPlaybackTargetIsWireless) {
+          this.api.stopLoad();
+        }
 
+        this.nativeEl.addEventListener(
+          'webkitcurrentplaybacktargetiswirelesschanged',
+          this.#toggleHlsLoad
+        );
+
+        this.#airplaySourceEl = document.createElement('source');
+        this.#airplaySourceEl.setAttribute('type', 'application/x-mpegURL');
+        this.#airplaySourceEl.setAttribute('src', this.src);
+        this.nativeEl.disableRemotePlayback = false;
+        this.nativeEl.append(this.#airplaySourceEl);
+
         // Set up tracks & renditions
@@ -145,4 +172,4 @@
           // Cast to number, hls.js uses numeric id's.
-          const audioTrackId = +[...this.audioTracks].find(t => t.enabled)?.id;
-          const availableIds = this.api.audioTracks.map(t => t.id);
+          const audioTrackId = +[...this.audioTracks].find((t) => t.enabled)?.id;
+          const availableIds = this.api.audioTracks.map((t) => t.id);
           if (audioTrackId != this.api.audioTrack && availableIds.includes(audioTrackId)) {
@@ -223,6 +250,13 @@ this.api.audioTrack = audioTrackId;
       if (this.nativeEl.canPlayType('application/vnd.apple.mpegurl')) {
-
         this.nativeEl.src = this.src;
       }
     }
+
+    #toggleHlsLoad = () => {
+      if (this.nativeEl?.webkitCurrentPlaybackTargetIsWireless) {
+        this.api?.stopLoad();
+      } else {
+        this.api?.startLoad();
+      }
+    };
   };
@@ -239,6 +273,2 @@ };
 
-export {
-  Hls,
-  HlsVideoMixin,
-  HlsVideoElement,
-};
+export { Hls, HlsVideoMixin, HlsVideoElement };

package.json

 {
   "name": "hls-video-element",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "Custom element (web component) for playing video using the HTTP Live Streaming (HLS) format. Uses HLS.js.",
@@ -5,0 +5,0 @@ "author": "@muxinc",

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

Improved metrics

Total package byte prevSize

17427

increased by7.37%

Lines of code

328

increased by8.61%

No dependency changes