From cbff44b1335839db503c67c432d709800e4f4a80 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Tue, 26 Nov 2024 12:25:05 -0600
Subject: [PATCH] fix: tracks updating after load new playback id fix #936

---
 .../vanilla-ts-esm/public/mux-player.html     | 12 +++++
 packages/mux-audio/package.json               |  2 +-
 packages/mux-video/package.json               |  4 +-
 yarn.lock                                     | 49 +++++--------------
 4 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/examples/vanilla-ts-esm/public/mux-player.html b/examples/vanilla-ts-esm/public/mux-player.html
index 11c97b2a9..d2c0e7135 100644
--- a/examples/vanilla-ts-esm/public/mux-player.html
+++ b/examples/vanilla-ts-esm/public/mux-player.html
@@ -38,11 +38,23 @@ <h1><a href="/">Elements</a></h1>
       </div>
     </header>
 
+    <h2>On-demand</h2>
+
     <mux-player
       stream-type="on-demand"
       playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
     ></mux-player>
 
+    <button id="load-new-playback-id">Load new playback id</button>
+    <script>
+      document.getElementById('load-new-playback-id').addEventListener('click', () => {
+        const player = document.querySelector('mux-player');
+        player.playbackId = 'VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA';
+      });
+    </script>
+
+    <h2>Live</h2>
+
     <mux-player
       stream-type="live"
       target-live-window="Infinity"
diff --git a/packages/mux-audio/package.json b/packages/mux-audio/package.json
index 1912d3270..d14f7caca 100644
--- a/packages/mux-audio/package.json
+++ b/packages/mux-audio/package.json
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@mux/playback-core": "0.27.0",
-    "custom-media-element": "~1.3.1"
+    "custom-media-element": "~1.4.1"
   },
   "devDependencies": {
     "@open-wc/testing": "^4.0.0",
diff --git a/packages/mux-video/package.json b/packages/mux-video/package.json
index ce843bdbb..bdd5a2b20 100644
--- a/packages/mux-video/package.json
+++ b/packages/mux-video/package.json
@@ -67,8 +67,8 @@
   },
   "dependencies": {
     "@mux/playback-core": "0.27.0",
-    "castable-video": "~1.1.0",
-    "custom-media-element": "~1.3.1",
+    "castable-video": "~1.1.3",
+    "custom-media-element": "~1.4.1",
     "media-tracks": "~0.3.2"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index ea03c38ac..a2fcc1e05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6627,12 +6627,12 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
-castable-video@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/castable-video/-/castable-video-1.1.0.tgz#f578f2f4c3bcfabaa795aface7b7061b8909c491"
-  integrity sha512-64/roq+vieXz8aOEvSs5bohHRym1fxhvHQMZXPn8/s8z0oi7XD5B67fnt9gFyCsfzH8RnuYJ0PxMSYjbMPHOtw==
+castable-video@~1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/castable-video/-/castable-video-1.1.3.tgz#d43d34e9cecc1eed3f9c71fe0e7682887247952b"
+  integrity sha512-FouzepsK6q1cUxBgKX6I2SaYN4OXZ/A3G+HS0Urpj8DPXfSRhdGOuHLk4ijOxuHxmQd6Se4V70M6Rn9fLUh0AA==
   dependencies:
-    custom-media-element "~1.3.2"
+    custom-media-element "~1.4.1"
 
 chai-a11y-axe@^1.5.0:
   version "1.5.0"
@@ -7586,10 +7586,10 @@ csstype@^3.0.2, csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-custom-media-element@~1.3.1, custom-media-element@~1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.3.2.tgz#392c8e2910ebaa3c405c49a49ca51586329946bd"
-  integrity sha512-nDyMobZgoAVqz7mA8rsn7i1/6bjH6N9ab2Ge7LyyNxrvxAq7zQJPg8i3u2VH7wEB+Y1T1+C3/h1G774/D+ZLag==
+custom-media-element@~1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.4.1.tgz#799d86e91d5feaa60fa351e649d8d577826aa407"
+  integrity sha512-kWPRk+6tEebklkd9QWbeCAEOzgL72Uhra4ZSmjN3R9mxg4emqh/0vKyKgxzLtuak76SiaSstzCY6zFrBZ8kyJg==
 
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
@@ -16108,7 +16108,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -16126,15 +16126,6 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -16244,7 +16235,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -16258,13 +16249,6 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -18044,7 +18028,7 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -18062,15 +18046,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"