shaka-video-element 0.7.0 → 0.7.2

package/dist/shaka-video-element.js

@@ -31918,6 +31918,7 @@ function CustomMediaMixin(superclass, { tag, is }) {
     #nativeEl = null;
     #childMap = /* @__PURE__ */ new Map();
     #childObserver;
+    #slotChangeHandler;
     get;
     set;
     call;
@@ -31967,11 +31968,15 @@ function CustomMediaMixin(superclass, { tag, is }) {
       for (const prop of nativeElProps) {
         this.#upgradeProperty(prop);
       }
+      this.#setupListeners();
+    }
+    #setupListeners() {
       this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));
-      this.shadowRoot.addEventListener("slotchange", () => this.#syncMediaChildren());
+      this.#slotChangeHandler = () => this.#syncMediaChildren();
+      this.shadowRoot?.addEventListener("slotchange", this.#slotChangeHandler);
       this.#syncMediaChildren();
       for (const type of this.constructor.Events) {
-        this.shadowRoot.addEventListener(type, this, true);
+        this.shadowRoot?.addEventListener(type, this, true);
       }
     }
     handleEvent(event) {
@@ -32040,6 +32045,23 @@ function CustomMediaMixin(superclass, { tag, is }) {
     }
     connectedCallback() {
       this.#init();
+      if (!this.#slotChangeHandler) {
+        this.#setupListeners();
+      }
+    }
+    disconnectedCallback() {
+      this.#childObserver?.disconnect();
+      this.#childObserver = void 0;
+      if (this.#slotChangeHandler) {
+        this.shadowRoot?.removeEventListener("slotchange", this.#slotChangeHandler);
+        this.#slotChangeHandler = void 0;
+      }
+      for (const type of this.constructor.Events) {
+        this.shadowRoot?.removeEventListener(type, this, true);
+      }
+      this.#childMap.forEach((clone) => clone.remove());
+      this.#childMap.clear();
+      this.#nativeEl = null;
     }
   };
 }
@@ -32056,11 +32078,14 @@ function serializeAttributes(attrs) {
   for (const key in attrs) {
     if (!Attributes.includes(key)) continue;
     const value = attrs[key];
-    if (value === "") html += ` ${key}`;
-    else html += ` ${key}="${value}"`;
+    if (value === "") html += ` ${escapeHtml(key)}`;
+    else html += ` ${escapeHtml(key)}="${escapeHtml(`${value}`)}"`;
   }
   return html;
 }
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;").replace(/`/g, "&#x60;");
+}
 function namedNodeMapToObject(namedNodeMap) {
   const obj = {};
   for (const attr of namedNodeMap) {
@@ -32100,7 +32125,7 @@ function setPrivate(instance, props) {
 // ../media-tracks/dist/video-track-list.js
 function addVideoTrack(media, track) {
   const trackList = media.videoTracks;
-  getPrivate(track).media = media;
+  getPrivate(track).media = new WeakRef(media);
   if (!getPrivate(track).renditionSet) {
     getPrivate(track).renditionSet = /* @__PURE__ */ new Set();
   }
@@ -32119,7 +32144,7 @@ function addVideoTrack(media, track) {
   });
 }
 function removeVideoTrack(track) {
-  const trackList = getPrivate(track).media?.videoTracks;
+  const trackList = getPrivate(track).media?.deref()?.videoTracks;
   if (!trackList) return;
   const trackSet = getPrivate(trackList).trackSet;
   trackSet.delete(track);
@@ -32128,7 +32153,7 @@ function removeVideoTrack(track) {
   });
 }
 function selectedChanged(selected) {
-  const trackList = getPrivate(selected).media.videoTracks ?? [];
+  const trackList = getPrivate(selected).media?.deref()?.videoTracks ?? [];
   let hasUnselected = false;
   for (const track of trackList) {
     if (track === selected) continue;
@@ -32219,7 +32244,7 @@ var RenditionEvent = class extends Event {
 
 // ../media-tracks/dist/video-rendition-list.js
 function addRendition(track, rendition) {
-  const renditionList = getPrivate(track).media.videoRenditions;
+  const renditionList = getPrivate(track).media?.deref()?.videoRenditions;
   getPrivate(rendition).media = getPrivate(track).media;
   getPrivate(rendition).track = track;
   const renditionSet = getPrivate(track).renditionSet;
@@ -32233,23 +32258,23 @@ function addRendition(track, rendition) {
     });
   }
   queueMicrotask(() => {
-    if (!track.selected) return;
+    if (!renditionList || !track.selected) return;
     renditionList.dispatchEvent(new RenditionEvent("addrendition", { rendition }));
   });
 }
 function removeRendition(rendition) {
-  const renditionList = getPrivate(rendition).media.videoRenditions;
+  const renditionList = getPrivate(rendition).media?.deref()?.videoRenditions;
   const track = getPrivate(rendition).track;
   const renditionSet = getPrivate(track).renditionSet;
   renditionSet.delete(rendition);
   queueMicrotask(() => {
     const track2 = getPrivate(rendition).track;
-    if (!track2.selected) return;
+    if (!renditionList || !track2.selected) return;
     renditionList.dispatchEvent(new RenditionEvent("removerendition", { rendition }));
   });
 }
 function selectedChanged2(rendition) {
-  const renditionList = getPrivate(rendition).media.videoRenditions;
+  const renditionList = getPrivate(rendition).media?.deref()?.videoRenditions;
   if (!renditionList || getPrivate(renditionList).changeRequested) return;
   getPrivate(renditionList).changeRequested = true;
   queueMicrotask(() => {
@@ -32260,7 +32285,8 @@ function selectedChanged2(rendition) {
   });
 }
 function getCurrentRenditions(renditionList) {
-  const media = getPrivate(renditionList).media;
+  const media = getPrivate(renditionList).media?.deref();
+  if (!media) return [];
   return [...media.videoTracks].filter((track) => track.selected).flatMap((track) => [...getPrivate(track).renditionSet]);
 }
 var VideoRenditionList = class extends EventTarget {
@@ -32380,7 +32406,7 @@ var VideoTrack = class {
 
 // ../media-tracks/dist/audio-rendition-list.js
 function addRendition2(track, rendition) {
-  const renditionList = getPrivate(track).media.audioRenditions;
+  const renditionList = getPrivate(track).media?.deref()?.audioRenditions;
   getPrivate(rendition).media = getPrivate(track).media;
   getPrivate(rendition).track = track;
   const renditionSet = getPrivate(track).renditionSet;
@@ -32394,23 +32420,23 @@ function addRendition2(track, rendition) {
     });
   }
   queueMicrotask(() => {
-    if (!track.enabled) return;
+    if (!renditionList || !track.enabled) return;
     renditionList.dispatchEvent(new RenditionEvent("addrendition", { rendition }));
   });
 }
 function removeRendition2(rendition) {
-  const renditionList = getPrivate(rendition).media.audioRenditions;
+  const renditionList = getPrivate(rendition).media?.deref()?.audioRenditions;
   const track = getPrivate(rendition).track;
   const renditionSet = getPrivate(track).renditionSet;
   renditionSet.delete(rendition);
   queueMicrotask(() => {
     const track2 = getPrivate(rendition).track;
-    if (!track2.enabled) return;
+    if (!renditionList || !track2.enabled) return;
     renditionList.dispatchEvent(new RenditionEvent("removerendition", { rendition }));
   });
 }
 function selectedChanged3(rendition) {
-  const renditionList = getPrivate(rendition).media.audioRenditions;
+  const renditionList = getPrivate(rendition).media?.deref()?.audioRenditions;
   if (!renditionList || getPrivate(renditionList).changeRequested) return;
   getPrivate(renditionList).changeRequested = true;
   queueMicrotask(() => {
@@ -32421,7 +32447,8 @@ function selectedChanged3(rendition) {
   });
 }
 function getCurrentRenditions2(renditionList) {
-  const media = getPrivate(renditionList).media;
+  const media = getPrivate(renditionList).media?.deref();
+  if (!media) return [];
   return [...media.audioTracks].filter((track) => track.enabled).flatMap((track) => [...getPrivate(track).renditionSet]);
 }
 var AudioRenditionList = class extends EventTarget {
@@ -32506,7 +32533,7 @@ var AudioRendition = class {
 // ../media-tracks/dist/audio-track-list.js
 function addAudioTrack(media, track) {
   const trackList = media.audioTracks;
-  getPrivate(track).media = media;
+  getPrivate(track).media = new WeakRef(media);
   if (!getPrivate(track).renditionSet) {
     getPrivate(track).renditionSet = /* @__PURE__ */ new Set();
   }
@@ -32525,7 +32552,7 @@ function addAudioTrack(media, track) {
   });
 }
 function removeAudioTrack(track) {
-  const trackList = getPrivate(track).media?.audioTracks;
+  const trackList = getPrivate(track).media?.deref()?.audioTracks;
   if (!trackList) return;
   const trackSet = getPrivate(trackList).trackSet;
   trackSet.delete(track);
@@ -32534,7 +32561,7 @@ function removeAudioTrack(track) {
   });
 }
 function enabledChanged(track) {
-  const trackList = getPrivate(track).media.audioTracks;
+  const trackList = getPrivate(track).media?.deref()?.audioTracks;
   if (!trackList || getPrivate(trackList).changeRequested) return;
   getPrivate(trackList).changeRequested = true;
   queueMicrotask(() => {
@@ -32690,7 +32717,7 @@ function MediaTracksMixin(MediaElementClass) {
     let renditions = getPrivate(media).videoRenditions;
     if (!renditions) {
       renditions = new VideoRenditionList();
-      getPrivate(renditions).media = media;
+      getPrivate(renditions).media = new WeakRef(media);
       getPrivate(media).videoRenditions = renditions;
     }
     return renditions;
@@ -32706,7 +32733,7 @@ function MediaTracksMixin(MediaElementClass) {
     let renditions = getPrivate(media).audioRenditions;
     if (!renditions) {
       renditions = new AudioRenditionList();
-      getPrivate(renditions).media = media;
+      getPrivate(renditions).media = new WeakRef(media);
       getPrivate(media).audioRenditions = renditions;
     }
     return renditions;
@@ -32728,10 +32755,10 @@ function getVideoTracks(media) {
       for (const nativeTrack of nativeTracks) {
         addVideoTrack(media, nativeTrack);
       }
-      nativeTracks.addEventListener("change", () => {
+      const onChange = () => {
         tracks.dispatchEvent(new Event("change"));
-      });
-      nativeTracks.addEventListener("addtrack", (event) => {
+      };
+      const onAddTrack = (event) => {
         if ([...tracks].some((t) => t instanceof VideoTrack)) {
           for (const nativeTrack of nativeTracks) {
             removeVideoTrack(nativeTrack);
@@ -32739,10 +32766,13 @@ function getVideoTracks(media) {
           return;
         }
         addVideoTrack(media, event.track);
-      });
-      nativeTracks.addEventListener("removetrack", (event) => {
+      };
+      const onRemoveTrack = (event) => {
         removeVideoTrack(event.track);
-      });
+      };
+      nativeTracks.addEventListener("change", onChange);
+      nativeTracks.addEventListener("addtrack", onAddTrack);
+      nativeTracks.addEventListener("removetrack", onRemoveTrack);
     }
   }
   return tracks;
@@ -32757,10 +32787,10 @@ function getAudioTracks(media) {
       for (const nativeTrack of nativeTracks) {
         addAudioTrack(media, nativeTrack);
       }
-      nativeTracks.addEventListener("change", () => {
+      const onChange = () => {
         tracks.dispatchEvent(new Event("change"));
-      });
-      nativeTracks.addEventListener("addtrack", (event) => {
+      };
+      const onAddTrack = (event) => {
         if ([...tracks].some((t) => t instanceof AudioTrack)) {
           for (const nativeTrack of nativeTracks) {
             removeAudioTrack(nativeTrack);
@@ -32768,10 +32798,13 @@ function getAudioTracks(media) {
           return;
         }
         addAudioTrack(media, event.track);
-      });
-      nativeTracks.addEventListener("removetrack", (event) => {
+      };
+      const onRemoveTrack = (event) => {
         removeAudioTrack(event.track);
-      });
+      };
+      nativeTracks.addEventListener("change", onChange);
+      nativeTracks.addEventListener("addtrack", onAddTrack);
+      nativeTracks.addEventListener("removetrack", onRemoveTrack);
     }
   }
   return tracks;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaka-video-element",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Custom element (web component) for Shaka Player",
   "author": "@muxinc",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "build": "run-s build:*"
   },
   "dependencies": {
-    "custom-media-element": "^1.4.5",
-    "media-tracks": "^0.3.3",
+    "custom-media-element": "^1.4.7",
+    "media-tracks": "^0.3.5",
     "shaka-player": "~4.15.4"
   },
   "devDependencies": {