shaka-video-element 0.6.21 → 0.7.0

package/dist/cjs/shaka-video-element.js

@@ -31,6 +31,7 @@ __export(shaka_video_element_exports, {
 });
 module.exports = __toCommonJS(shaka_video_element_exports);
 var import_custom_media_element = require("custom-media-element");
+var import_media_tracks = require("media-tracks");
 var import_server_safe_globals = require("./server-safe-globals.js");
 var import_shaka_player = __toESM(require("shaka-player"), 1);
 function onErrorEvent(event) {
@@ -39,12 +40,13 @@ function onErrorEvent(event) {
 function onError(error) {
   console.error("Error code", error.code, "object", error);
 }
-class ShakaVideoElement extends import_custom_media_element.CustomVideoElement {
+class ShakaVideoElement extends (0, import_media_tracks.MediaTracksMixin)(import_custom_media_element.CustomVideoElement) {
   static shadowRootOptions = { ...import_custom_media_element.CustomVideoElement.shadowRootOptions };
   static getTemplateHTML = (attrs) => {
     const { src, ...rest } = attrs;
     return import_custom_media_element.CustomVideoElement.getTemplateHTML(rest);
   };
+  #hasTracksInit = false;
   constructor() {
     super();
     if (import_shaka_player.default.Player.isBrowserSupported()) {
@@ -70,18 +72,110 @@ class ShakaVideoElement extends import_custom_media_element.CustomVideoElement {
       this.setAttribute("src", val);
     }
   }
+  #removeAllMediaTracks = () => {
+    for (const videoTrack of this.videoTracks) {
+      this.removeVideoTrack(videoTrack);
+    }
+    for (const audioTrack of this.audioTracks) {
+      this.removeAudioTrack(audioTrack);
+    }
+  };
+  #addMediaTracks() {
+    this.#removeAllMediaTracks();
+    const variantTracks = this.api.getVariantTracks();
+    let videoTrack = this.videoTracks.getTrackById("main");
+    if (!videoTrack) {
+      videoTrack = this.addVideoTrack("main");
+      videoTrack.id = "main";
+      videoTrack.selected = true;
+    }
+    const seen = /* @__PURE__ */ new Set();
+    for (const [index, variant] of variantTracks.entries()) {
+      if (!variant.width && !variant.height) continue;
+      const key = `${variant.width}x${variant.height}@${variant.videoBandwidth ?? variant.bandwidth}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const rendition = videoTrack.addRendition(
+        variant.originalVideoId ?? `${variant.id}`,
+        variant.width,
+        variant.height,
+        variant.videoCodec,
+        variant.videoBandwidth ?? variant.bandwidth
+      );
+      rendition.id = `${index}`;
+      rendition.label = `${variant.height}p`;
+    }
+    const audioLanguages = this.api.getAudioLanguagesAndRoles();
+    for (let [id, audio] of audioLanguages.entries()) {
+      const kind = id === 0 ? "main" : "alternative";
+      const audioTrack = this.addAudioTrack(kind, audio.language, audio.language);
+      audioTrack.id = `${id}`;
+      if (id === 0) {
+        audioTrack.enabled = true;
+      }
+    }
+  }
+  #initTracksListeners() {
+    var _a;
+    if (this.#hasTracksInit) return;
+    this.#hasTracksInit = true;
+    const switchRendition = () => {
+      const selectedIndex = this.videoRenditions.selectedIndex;
+      if (selectedIndex >= 0) {
+        const variantTracks = this.api.getVariantTracks();
+        const variantTrack = variantTracks[selectedIndex];
+        if (variantTrack) {
+          this.api.configure({ abr: { enabled: false } });
+          this.api.selectVariantTrack(variantTrack, true);
+        }
+      } else {
+        this.api.configure({ abr: { enabled: true } });
+      }
+    };
+    (_a = this.videoRenditions) == null ? void 0 : _a.addEventListener("change", switchRendition);
+    this.audioTracks.addEventListener("change", () => {
+      const enabledTrack = [...this.audioTracks].find((t) => t.enabled);
+      if (enabledTrack) {
+        const audioLanguages = this.api.getAudioLanguagesAndRoles();
+        const audio = audioLanguages[+enabledTrack.id];
+        if (audio) {
+          this.api.selectAudioLanguage(audio.language, audio.role);
+        }
+      }
+    });
+    this.api.addEventListener("trackschanged", () => {
+      const videoTrack = this.videoTracks[this.videoTracks.selectedIndex ?? 0];
+      if (!videoTrack) return;
+      const variantTracks = this.api.getVariantTracks();
+      const variantIds = variantTracks.map((_, i) => `${i}`);
+      for (const rendition of this.videoRenditions) {
+        if (rendition.id && !variantIds.includes(rendition.id)) {
+          videoTrack.removeRendition(rendition);
+        }
+      }
+    });
+  }
   async load() {
     if (!this.api) return;
     await Promise.resolve();
     await this.api.attach(this.nativeEl);
     if (!this.src) {
+      this.#removeAllMediaTracks();
       this.api.unload();
     } else {
       try {
         await this.api.load(this.src);
       } catch (e) {
         onError(e);
+        return;
+      }
+      if (this.nativeEl.autoplay && this.nativeEl.paused) {
+        this.nativeEl.play().catch((err) => {
+          console.warn("Autoplay failed:", err);
+        });
       }
+      this.#addMediaTracks();
+      this.#initTracksListeners();
     }
   }
 }

package/dist/shaka-video-element.js

@@ -32077,6 +32077,706 @@ var CustomAudioElement = CustomMediaMixin(globalThis.HTMLElement ?? class {
   tag: "audio"
 });
 
+// ../media-tracks/dist/change-event.js
+var TrackEvent = class extends Event {
+  track;
+  constructor(type, init) {
+    super(type);
+    this.track = init.track;
+  }
+};
+
+// ../media-tracks/dist/utils.js
+var privateProps = /* @__PURE__ */ new WeakMap();
+function getPrivate(instance) {
+  return privateProps.get(instance) ?? setPrivate(instance, {});
+}
+function setPrivate(instance, props) {
+  let saved = privateProps.get(instance);
+  if (!saved) privateProps.set(instance, saved = {});
+  return Object.assign(saved, props);
+}
+
+// ../media-tracks/dist/video-track-list.js
+function addVideoTrack(media, track) {
+  const trackList = media.videoTracks;
+  getPrivate(track).media = media;
+  if (!getPrivate(track).renditionSet) {
+    getPrivate(track).renditionSet = /* @__PURE__ */ new Set();
+  }
+  const trackSet = getPrivate(trackList).trackSet;
+  trackSet.add(track);
+  const index = trackSet.size - 1;
+  if (!(index in VideoTrackList.prototype)) {
+    Object.defineProperty(VideoTrackList.prototype, index, {
+      get() {
+        return [...getPrivate(this).trackSet][index];
+      }
+    });
+  }
+  queueMicrotask(() => {
+    trackList.dispatchEvent(new TrackEvent("addtrack", { track }));
+  });
+}
+function removeVideoTrack(track) {
+  const trackList = getPrivate(track).media?.videoTracks;
+  if (!trackList) return;
+  const trackSet = getPrivate(trackList).trackSet;
+  trackSet.delete(track);
+  queueMicrotask(() => {
+    trackList.dispatchEvent(new TrackEvent("removetrack", { track }));
+  });
+}
+function selectedChanged(selected) {
+  const trackList = getPrivate(selected).media.videoTracks ?? [];
+  let hasUnselected = false;
+  for (const track of trackList) {
+    if (track === selected) continue;
+    track.selected = false;
+    hasUnselected = true;
+  }
+  if (hasUnselected) {
+    if (getPrivate(trackList).changeRequested) return;
+    getPrivate(trackList).changeRequested = true;
+    queueMicrotask(() => {
+      delete getPrivate(trackList).changeRequested;
+      trackList.dispatchEvent(new Event("change"));
+    });
+  }
+}
+var VideoTrackList = class extends EventTarget {
+  #addTrackCallback;
+  #removeTrackCallback;
+  #changeCallback;
+  constructor() {
+    super();
+    getPrivate(this).trackSet = /* @__PURE__ */ new Set();
+  }
+  get #tracks() {
+    return getPrivate(this).trackSet;
+  }
+  [Symbol.iterator]() {
+    return this.#tracks.values();
+  }
+  get length() {
+    return this.#tracks.size;
+  }
+  getTrackById(id) {
+    return [...this.#tracks].find((track) => track.id === id) ?? null;
+  }
+  get selectedIndex() {
+    return [...this.#tracks].findIndex((track) => track.selected);
+  }
+  get onaddtrack() {
+    return this.#addTrackCallback;
+  }
+  set onaddtrack(callback) {
+    if (this.#addTrackCallback) {
+      this.removeEventListener("addtrack", this.#addTrackCallback);
+      this.#addTrackCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#addTrackCallback = callback;
+      this.addEventListener("addtrack", callback);
+    }
+  }
+  get onremovetrack() {
+    return this.#removeTrackCallback;
+  }
+  set onremovetrack(callback) {
+    if (this.#removeTrackCallback) {
+      this.removeEventListener("removetrack", this.#removeTrackCallback);
+      this.#removeTrackCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#removeTrackCallback = callback;
+      this.addEventListener("removetrack", callback);
+    }
+  }
+  get onchange() {
+    return this.#changeCallback;
+  }
+  set onchange(callback) {
+    if (this.#changeCallback) {
+      this.removeEventListener("change", this.#changeCallback);
+      this.#changeCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#changeCallback = callback;
+      this.addEventListener("change", callback);
+    }
+  }
+};
+
+// ../media-tracks/dist/rendition-event.js
+var RenditionEvent = class extends Event {
+  rendition;
+  constructor(type, init) {
+    super(type);
+    this.rendition = init.rendition;
+  }
+};
+
+// ../media-tracks/dist/video-rendition-list.js
+function addRendition(track, rendition) {
+  const renditionList = getPrivate(track).media.videoRenditions;
+  getPrivate(rendition).media = getPrivate(track).media;
+  getPrivate(rendition).track = track;
+  const renditionSet = getPrivate(track).renditionSet;
+  renditionSet.add(rendition);
+  const index = renditionSet.size - 1;
+  if (!(index in VideoRenditionList.prototype)) {
+    Object.defineProperty(VideoRenditionList.prototype, index, {
+      get() {
+        return getCurrentRenditions(this)[index];
+      }
+    });
+  }
+  queueMicrotask(() => {
+    if (!track.selected) return;
+    renditionList.dispatchEvent(new RenditionEvent("addrendition", { rendition }));
+  });
+}
+function removeRendition(rendition) {
+  const renditionList = getPrivate(rendition).media.videoRenditions;
+  const track = getPrivate(rendition).track;
+  const renditionSet = getPrivate(track).renditionSet;
+  renditionSet.delete(rendition);
+  queueMicrotask(() => {
+    const track2 = getPrivate(rendition).track;
+    if (!track2.selected) return;
+    renditionList.dispatchEvent(new RenditionEvent("removerendition", { rendition }));
+  });
+}
+function selectedChanged2(rendition) {
+  const renditionList = getPrivate(rendition).media.videoRenditions;
+  if (!renditionList || getPrivate(renditionList).changeRequested) return;
+  getPrivate(renditionList).changeRequested = true;
+  queueMicrotask(() => {
+    delete getPrivate(renditionList).changeRequested;
+    const track = getPrivate(rendition).track;
+    if (!track.selected) return;
+    renditionList.dispatchEvent(new Event("change"));
+  });
+}
+function getCurrentRenditions(renditionList) {
+  const media = getPrivate(renditionList).media;
+  return [...media.videoTracks].filter((track) => track.selected).flatMap((track) => [...getPrivate(track).renditionSet]);
+}
+var VideoRenditionList = class extends EventTarget {
+  #addRenditionCallback;
+  #removeRenditionCallback;
+  #changeCallback;
+  [Symbol.iterator]() {
+    return getCurrentRenditions(this).values();
+  }
+  get length() {
+    return getCurrentRenditions(this).length;
+  }
+  getRenditionById(id) {
+    return getCurrentRenditions(this).find((rendition) => `${rendition.id}` === `${id}`) ?? null;
+  }
+  get selectedIndex() {
+    return getCurrentRenditions(this).findIndex((rendition) => rendition.selected);
+  }
+  set selectedIndex(index) {
+    for (const [i, rendition] of getCurrentRenditions(this).entries()) {
+      rendition.selected = i === index;
+    }
+  }
+  get onaddrendition() {
+    return this.#addRenditionCallback;
+  }
+  set onaddrendition(callback) {
+    if (this.#addRenditionCallback) {
+      this.removeEventListener("addrendition", this.#addRenditionCallback);
+      this.#addRenditionCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#addRenditionCallback = callback;
+      this.addEventListener("addrendition", callback);
+    }
+  }
+  get onremoverendition() {
+    return this.#removeRenditionCallback;
+  }
+  set onremoverendition(callback) {
+    if (this.#removeRenditionCallback) {
+      this.removeEventListener("removerendition", this.#removeRenditionCallback);
+      this.#removeRenditionCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#removeRenditionCallback = callback;
+      this.addEventListener("removerendition", callback);
+    }
+  }
+  get onchange() {
+    return this.#changeCallback;
+  }
+  set onchange(callback) {
+    if (this.#changeCallback) {
+      this.removeEventListener("change", this.#changeCallback);
+      this.#changeCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#changeCallback = callback;
+      this.addEventListener("change", callback);
+    }
+  }
+};
+
+// ../media-tracks/dist/video-rendition.js
+var VideoRendition = class {
+  src;
+  id;
+  width;
+  height;
+  bitrate;
+  frameRate;
+  codec;
+  #selected = false;
+  get selected() {
+    return this.#selected;
+  }
+  set selected(val) {
+    if (this.#selected === val) return;
+    this.#selected = val;
+    selectedChanged2(this);
+  }
+};
+
+// ../media-tracks/dist/video-track.js
+var VideoTrack = class {
+  id;
+  kind;
+  label = "";
+  language = "";
+  sourceBuffer;
+  #selected = false;
+  addRendition(src, width, height, codec, bitrate, frameRate) {
+    const rendition = new VideoRendition();
+    rendition.src = src;
+    rendition.width = width;
+    rendition.height = height;
+    rendition.frameRate = frameRate;
+    rendition.bitrate = bitrate;
+    rendition.codec = codec;
+    addRendition(this, rendition);
+    return rendition;
+  }
+  removeRendition(rendition) {
+    removeRendition(rendition);
+  }
+  get selected() {
+    return this.#selected;
+  }
+  set selected(val) {
+    if (this.#selected === val) return;
+    this.#selected = val;
+    if (val !== true) return;
+    selectedChanged(this);
+  }
+};
+
+// ../media-tracks/dist/audio-rendition-list.js
+function addRendition2(track, rendition) {
+  const renditionList = getPrivate(track).media.audioRenditions;
+  getPrivate(rendition).media = getPrivate(track).media;
+  getPrivate(rendition).track = track;
+  const renditionSet = getPrivate(track).renditionSet;
+  renditionSet.add(rendition);
+  const index = renditionSet.size - 1;
+  if (!(index in AudioRenditionList.prototype)) {
+    Object.defineProperty(AudioRenditionList.prototype, index, {
+      get() {
+        return getCurrentRenditions2(this)[index];
+      }
+    });
+  }
+  queueMicrotask(() => {
+    if (!track.enabled) return;
+    renditionList.dispatchEvent(new RenditionEvent("addrendition", { rendition }));
+  });
+}
+function removeRendition2(rendition) {
+  const renditionList = getPrivate(rendition).media.audioRenditions;
+  const track = getPrivate(rendition).track;
+  const renditionSet = getPrivate(track).renditionSet;
+  renditionSet.delete(rendition);
+  queueMicrotask(() => {
+    const track2 = getPrivate(rendition).track;
+    if (!track2.enabled) return;
+    renditionList.dispatchEvent(new RenditionEvent("removerendition", { rendition }));
+  });
+}
+function selectedChanged3(rendition) {
+  const renditionList = getPrivate(rendition).media.audioRenditions;
+  if (!renditionList || getPrivate(renditionList).changeRequested) return;
+  getPrivate(renditionList).changeRequested = true;
+  queueMicrotask(() => {
+    delete getPrivate(renditionList).changeRequested;
+    const track = getPrivate(rendition).track;
+    if (!track.enabled) return;
+    renditionList.dispatchEvent(new Event("change"));
+  });
+}
+function getCurrentRenditions2(renditionList) {
+  const media = getPrivate(renditionList).media;
+  return [...media.audioTracks].filter((track) => track.enabled).flatMap((track) => [...getPrivate(track).renditionSet]);
+}
+var AudioRenditionList = class extends EventTarget {
+  #addRenditionCallback;
+  #removeRenditionCallback;
+  #changeCallback;
+  [Symbol.iterator]() {
+    return getCurrentRenditions2(this).values();
+  }
+  get length() {
+    return getCurrentRenditions2(this).length;
+  }
+  getRenditionById(id) {
+    return getCurrentRenditions2(this).find((rendition) => `${rendition.id}` === `${id}`) ?? null;
+  }
+  get selectedIndex() {
+    return getCurrentRenditions2(this).findIndex((rendition) => rendition.selected);
+  }
+  set selectedIndex(index) {
+    for (const [i, rendition] of getCurrentRenditions2(this).entries()) {
+      rendition.selected = i === index;
+    }
+  }
+  get onaddrendition() {
+    return this.#addRenditionCallback;
+  }
+  set onaddrendition(callback) {
+    if (this.#addRenditionCallback) {
+      this.removeEventListener("addrendition", this.#addRenditionCallback);
+      this.#addRenditionCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#addRenditionCallback = callback;
+      this.addEventListener("addrendition", callback);
+    }
+  }
+  get onremoverendition() {
+    return this.#removeRenditionCallback;
+  }
+  set onremoverendition(callback) {
+    if (this.#removeRenditionCallback) {
+      this.removeEventListener("removerendition", this.#removeRenditionCallback);
+      this.#removeRenditionCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#removeRenditionCallback = callback;
+      this.addEventListener("removerendition", callback);
+    }
+  }
+  get onchange() {
+    return this.#changeCallback;
+  }
+  set onchange(callback) {
+    if (this.#changeCallback) {
+      this.removeEventListener("change", this.#changeCallback);
+      this.#changeCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#changeCallback = callback;
+      this.addEventListener("change", callback);
+    }
+  }
+};
+
+// ../media-tracks/dist/audio-rendition.js
+var AudioRendition = class {
+  src;
+  id;
+  bitrate;
+  codec;
+  #selected = false;
+  get selected() {
+    return this.#selected;
+  }
+  set selected(val) {
+    if (this.#selected === val) return;
+    this.#selected = val;
+    selectedChanged3(this);
+  }
+};
+
+// ../media-tracks/dist/audio-track-list.js
+function addAudioTrack(media, track) {
+  const trackList = media.audioTracks;
+  getPrivate(track).media = media;
+  if (!getPrivate(track).renditionSet) {
+    getPrivate(track).renditionSet = /* @__PURE__ */ new Set();
+  }
+  const trackSet = getPrivate(trackList).trackSet;
+  trackSet.add(track);
+  const index = trackSet.size - 1;
+  if (!(index in AudioTrackList.prototype)) {
+    Object.defineProperty(AudioTrackList.prototype, index, {
+      get() {
+        return [...getPrivate(this).trackSet][index];
+      }
+    });
+  }
+  queueMicrotask(() => {
+    trackList.dispatchEvent(new TrackEvent("addtrack", { track }));
+  });
+}
+function removeAudioTrack(track) {
+  const trackList = getPrivate(track).media?.audioTracks;
+  if (!trackList) return;
+  const trackSet = getPrivate(trackList).trackSet;
+  trackSet.delete(track);
+  queueMicrotask(() => {
+    trackList.dispatchEvent(new TrackEvent("removetrack", { track }));
+  });
+}
+function enabledChanged(track) {
+  const trackList = getPrivate(track).media.audioTracks;
+  if (!trackList || getPrivate(trackList).changeRequested) return;
+  getPrivate(trackList).changeRequested = true;
+  queueMicrotask(() => {
+    delete getPrivate(trackList).changeRequested;
+    trackList.dispatchEvent(new Event("change"));
+  });
+}
+var AudioTrackList = class extends EventTarget {
+  #addTrackCallback;
+  #removeTrackCallback;
+  #changeCallback;
+  constructor() {
+    super();
+    getPrivate(this).trackSet = /* @__PURE__ */ new Set();
+  }
+  get #tracks() {
+    return getPrivate(this).trackSet;
+  }
+  [Symbol.iterator]() {
+    return this.#tracks.values();
+  }
+  get length() {
+    return this.#tracks.size;
+  }
+  getTrackById(id) {
+    return [...this.#tracks].find((track) => track.id === id) ?? null;
+  }
+  get onaddtrack() {
+    return this.#addTrackCallback;
+  }
+  set onaddtrack(callback) {
+    if (this.#addTrackCallback) {
+      this.removeEventListener("addtrack", this.#addTrackCallback);
+      this.#addTrackCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#addTrackCallback = callback;
+      this.addEventListener("addtrack", callback);
+    }
+  }
+  get onremovetrack() {
+    return this.#removeTrackCallback;
+  }
+  set onremovetrack(callback) {
+    if (this.#removeTrackCallback) {
+      this.removeEventListener("removetrack", this.#removeTrackCallback);
+      this.#removeTrackCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#removeTrackCallback = callback;
+      this.addEventListener("removetrack", callback);
+    }
+  }
+  get onchange() {
+    return this.#changeCallback;
+  }
+  set onchange(callback) {
+    if (this.#changeCallback) {
+      this.removeEventListener("change", this.#changeCallback);
+      this.#changeCallback = void 0;
+    }
+    if (typeof callback == "function") {
+      this.#changeCallback = callback;
+      this.addEventListener("change", callback);
+    }
+  }
+};
+
+// ../media-tracks/dist/audio-track.js
+var AudioTrack = class {
+  id;
+  kind;
+  label = "";
+  language = "";
+  sourceBuffer;
+  #enabled = false;
+  addRendition(src, codec, bitrate) {
+    const rendition = new AudioRendition();
+    rendition.src = src;
+    rendition.codec = codec;
+    rendition.bitrate = bitrate;
+    addRendition2(this, rendition);
+    return rendition;
+  }
+  removeRendition(rendition) {
+    removeRendition2(rendition);
+  }
+  get enabled() {
+    return this.#enabled;
+  }
+  set enabled(val) {
+    if (this.#enabled === val) return;
+    this.#enabled = val;
+    enabledChanged(this);
+  }
+};
+
+// ../media-tracks/dist/mixin.js
+var nativeVideoTracksFn = getBaseMediaTracksFn(globalThis.HTMLMediaElement, "video");
+var nativeAudioTracksFn = getBaseMediaTracksFn(globalThis.HTMLMediaElement, "audio");
+function MediaTracksMixin(MediaElementClass) {
+  if (!MediaElementClass?.prototype) return MediaElementClass;
+  const videoTracksFn = getBaseMediaTracksFn(MediaElementClass, "video");
+  if (!videoTracksFn || `${videoTracksFn}`.includes("[native code]")) {
+    Object.defineProperty(MediaElementClass.prototype, "videoTracks", {
+      get() {
+        return getVideoTracks(this);
+      }
+    });
+  }
+  const audioTracksFn = getBaseMediaTracksFn(MediaElementClass, "audio");
+  if (!audioTracksFn || `${audioTracksFn}`.includes("[native code]")) {
+    Object.defineProperty(MediaElementClass.prototype, "audioTracks", {
+      get() {
+        return getAudioTracks(this);
+      }
+    });
+  }
+  if (!("addVideoTrack" in MediaElementClass.prototype)) {
+    MediaElementClass.prototype.addVideoTrack = function(kind, label = "", language = "") {
+      const track = new VideoTrack();
+      track.kind = kind;
+      track.label = label;
+      track.language = language;
+      addVideoTrack(this, track);
+      return track;
+    };
+  }
+  if (!("removeVideoTrack" in MediaElementClass.prototype)) {
+    MediaElementClass.prototype.removeVideoTrack = removeVideoTrack;
+  }
+  if (!("addAudioTrack" in MediaElementClass.prototype)) {
+    MediaElementClass.prototype.addAudioTrack = function(kind, label = "", language = "") {
+      const track = new AudioTrack();
+      track.kind = kind;
+      track.label = label;
+      track.language = language;
+      addAudioTrack(this, track);
+      return track;
+    };
+  }
+  if (!("removeAudioTrack" in MediaElementClass.prototype)) {
+    MediaElementClass.prototype.removeAudioTrack = removeAudioTrack;
+  }
+  if (!("videoRenditions" in MediaElementClass.prototype)) {
+    Object.defineProperty(MediaElementClass.prototype, "videoRenditions", {
+      get() {
+        return initVideoRenditions(this);
+      }
+    });
+  }
+  const initVideoRenditions = (media) => {
+    let renditions = getPrivate(media).videoRenditions;
+    if (!renditions) {
+      renditions = new VideoRenditionList();
+      getPrivate(renditions).media = media;
+      getPrivate(media).videoRenditions = renditions;
+    }
+    return renditions;
+  };
+  if (!("audioRenditions" in MediaElementClass.prototype)) {
+    Object.defineProperty(MediaElementClass.prototype, "audioRenditions", {
+      get() {
+        return initAudioRenditions(this);
+      }
+    });
+  }
+  const initAudioRenditions = (media) => {
+    let renditions = getPrivate(media).audioRenditions;
+    if (!renditions) {
+      renditions = new AudioRenditionList();
+      getPrivate(renditions).media = media;
+      getPrivate(media).audioRenditions = renditions;
+    }
+    return renditions;
+  };
+  return MediaElementClass;
+}
+function getBaseMediaTracksFn(MediaElementClass, type) {
+  if (MediaElementClass?.prototype) {
+    return Object.getOwnPropertyDescriptor(MediaElementClass.prototype, `${type}Tracks`)?.get;
+  }
+}
+function getVideoTracks(media) {
+  let tracks = getPrivate(media).videoTracks;
+  if (!tracks) {
+    tracks = new VideoTrackList();
+    getPrivate(media).videoTracks = tracks;
+    if (nativeVideoTracksFn) {
+      const nativeTracks = nativeVideoTracksFn.call(media.nativeEl ?? media);
+      for (const nativeTrack of nativeTracks) {
+        addVideoTrack(media, nativeTrack);
+      }
+      nativeTracks.addEventListener("change", () => {
+        tracks.dispatchEvent(new Event("change"));
+      });
+      nativeTracks.addEventListener("addtrack", (event) => {
+        if ([...tracks].some((t) => t instanceof VideoTrack)) {
+          for (const nativeTrack of nativeTracks) {
+            removeVideoTrack(nativeTrack);
+          }
+          return;
+        }
+        addVideoTrack(media, event.track);
+      });
+      nativeTracks.addEventListener("removetrack", (event) => {
+        removeVideoTrack(event.track);
+      });
+    }
+  }
+  return tracks;
+}
+function getAudioTracks(media) {
+  let tracks = getPrivate(media).audioTracks;
+  if (!tracks) {
+    tracks = new AudioTrackList();
+    getPrivate(media).audioTracks = tracks;
+    if (nativeAudioTracksFn) {
+      const nativeTracks = nativeAudioTracksFn.call(media.nativeEl ?? media);
+      for (const nativeTrack of nativeTracks) {
+        addAudioTrack(media, nativeTrack);
+      }
+      nativeTracks.addEventListener("change", () => {
+        tracks.dispatchEvent(new Event("change"));
+      });
+      nativeTracks.addEventListener("addtrack", (event) => {
+        if ([...tracks].some((t) => t instanceof AudioTrack)) {
+          for (const nativeTrack of nativeTracks) {
+            removeAudioTrack(nativeTrack);
+          }
+          return;
+        }
+        addAudioTrack(media, event.track);
+      });
+      nativeTracks.addEventListener("removetrack", (event) => {
+        removeAudioTrack(event.track);
+      });
+    }
+  }
+  return tracks;
+}
+
 // server-safe-globals.js
 globalThis.navigator ??= {
   languages: [],
@@ -32093,12 +32793,13 @@ function onErrorEvent(event) {
 function onError(error) {
   console.error("Error code", error.code, "object", error);
 }
-var ShakaVideoElement = class extends CustomVideoElement {
+var ShakaVideoElement = class extends MediaTracksMixin(CustomVideoElement) {
   static shadowRootOptions = { ...CustomVideoElement.shadowRootOptions };
   static getTemplateHTML = (attrs) => {
     const { src, ...rest } = attrs;
     return CustomVideoElement.getTemplateHTML(rest);
   };
+  #hasTracksInit = false;
   constructor() {
     super();
     if (import_shaka_player.default.Player.isBrowserSupported()) {
@@ -32124,18 +32825,109 @@ var ShakaVideoElement = class extends CustomVideoElement {
       this.setAttribute("src", val);
     }
   }
+  #removeAllMediaTracks = () => {
+    for (const videoTrack of this.videoTracks) {
+      this.removeVideoTrack(videoTrack);
+    }
+    for (const audioTrack of this.audioTracks) {
+      this.removeAudioTrack(audioTrack);
+    }
+  };
+  #addMediaTracks() {
+    this.#removeAllMediaTracks();
+    const variantTracks = this.api.getVariantTracks();
+    let videoTrack = this.videoTracks.getTrackById("main");
+    if (!videoTrack) {
+      videoTrack = this.addVideoTrack("main");
+      videoTrack.id = "main";
+      videoTrack.selected = true;
+    }
+    const seen = /* @__PURE__ */ new Set();
+    for (const [index, variant] of variantTracks.entries()) {
+      if (!variant.width && !variant.height) continue;
+      const key = `${variant.width}x${variant.height}@${variant.videoBandwidth ?? variant.bandwidth}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const rendition = videoTrack.addRendition(
+        variant.originalVideoId ?? `${variant.id}`,
+        variant.width,
+        variant.height,
+        variant.videoCodec,
+        variant.videoBandwidth ?? variant.bandwidth
+      );
+      rendition.id = `${index}`;
+      rendition.label = `${variant.height}p`;
+    }
+    const audioLanguages = this.api.getAudioLanguagesAndRoles();
+    for (let [id, audio] of audioLanguages.entries()) {
+      const kind = id === 0 ? "main" : "alternative";
+      const audioTrack = this.addAudioTrack(kind, audio.language, audio.language);
+      audioTrack.id = `${id}`;
+      if (id === 0) {
+        audioTrack.enabled = true;
+      }
+    }
+  }
+  #initTracksListeners() {
+    if (this.#hasTracksInit) return;
+    this.#hasTracksInit = true;
+    const switchRendition = () => {
+      const selectedIndex = this.videoRenditions.selectedIndex;
+      if (selectedIndex >= 0) {
+        const variantTracks = this.api.getVariantTracks();
+        const variantTrack = variantTracks[selectedIndex];
+        if (variantTrack) {
+          this.api.configure({ abr: { enabled: false } });
+          this.api.selectVariantTrack(variantTrack, true);
+        }
+      } else {
+        this.api.configure({ abr: { enabled: true } });
+      }
+    };
+    this.videoRenditions?.addEventListener("change", switchRendition);
+    this.audioTracks.addEventListener("change", () => {
+      const enabledTrack = [...this.audioTracks].find((t) => t.enabled);
+      if (enabledTrack) {
+        const audioLanguages = this.api.getAudioLanguagesAndRoles();
+        const audio = audioLanguages[+enabledTrack.id];
+        if (audio) {
+          this.api.selectAudioLanguage(audio.language, audio.role);
+        }
+      }
+    });
+    this.api.addEventListener("trackschanged", () => {
+      const videoTrack = this.videoTracks[this.videoTracks.selectedIndex ?? 0];
+      if (!videoTrack) return;
+      const variantTracks = this.api.getVariantTracks();
+      const variantIds = variantTracks.map((_, i) => `${i}`);
+      for (const rendition of this.videoRenditions) {
+        if (rendition.id && !variantIds.includes(rendition.id)) {
+          videoTrack.removeRendition(rendition);
+        }
+      }
+    });
+  }
   async load() {
     if (!this.api) return;
     await Promise.resolve();
     await this.api.attach(this.nativeEl);
     if (!this.src) {
+      this.#removeAllMediaTracks();
       this.api.unload();
     } else {
       try {
         await this.api.load(this.src);
       } catch (e) {
         onError(e);
+        return;
+      }
+      if (this.nativeEl.autoplay && this.nativeEl.paused) {
+        this.nativeEl.play().catch((err) => {
+          console.warn("Autoplay failed:", err);
+        });
       }
+      this.#addMediaTracks();
+      this.#initTracksListeners();
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shaka-video-element",
-  "version": "0.6.21",
+  "version": "0.7.0",
   "description": "Custom element (web component) for Shaka Player",
   "author": "@muxinc",
   "license": "MIT",
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "custom-media-element": "^1.4.5",
+    "media-tracks": "^0.3.3",
     "shaka-player": "~4.15.4"
   },
   "devDependencies": {