fix: upgrade media-chrome v2 & castable-video v1

packages/mux-player/package.json

@@ -96,7 +96,7 @@
   "dependencies": {
     "@mux/mux-video": "0.17.0",
     "@mux/playback-core": "0.21.0",
-    "media-chrome": "~1.6.0"
+    "media-chrome": "~2.0.0"
   },
   "devDependencies": {
     "@mux/esbuilder": "0.1.0",

packages/mux-video/package.json

@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@mux/playback-core": "0.21.0",
-    "castable-video": "0.5.2",
+    "castable-video": "1.0.3",
     "custom-media-element": "1.1.0",
     "media-tracks": "0.2.4"
   },

packages/mux-video/src/index.ts

@@ -36,21 +36,14 @@ import type {
 } from '@mux/playback-core';
 import { getPlayerVersion } from './env';
 // this must be imported after playback-core for the polyfill to be included
-import 'castable-video';
-import { CustomMediaMixin, Events as VideoEvents } from 'custom-media-element';
+import { CustomVideoElement, Events as VideoEvents } from 'custom-media-element';
+import { CastableMediaMixin } from 'castable-video/castable-mixin.js';
 import { MediaTracksMixin } from 'media-tracks';
 import type { HlsConfig } from 'hls.js';
 
 // Must mutate so the added events are available in custom-media-element.
 VideoEvents.push('castchange', 'entercast', 'leavecast');
 
-const CustomVideoElement = MediaTracksMixin(
-  CustomMediaMixin(globalThis.HTMLElement, {
-    tag: 'video',
-    is: 'castable-video',
-  })
-);
-
 export const Attributes = {
   BEACON_COLLECTION_DOMAIN: 'beacon-collection-domain',
   CUSTOM_DOMAIN: 'custom-domain',
@@ -78,7 +71,7 @@ const AttributeNameValues = Object.values(Attributes);
 const playerSoftwareVersion = getPlayerVersion();
 const playerSoftwareName = 'mux-video';
 
-class MuxVideoElement extends CustomVideoElement implements Partial<MuxMediaProps> {
+class MuxVideoBaseElement extends CustomVideoElement implements Partial<MuxMediaProps> {
   static get observedAttributes() {
     return [...AttributeNameValues, ...(CustomVideoElement.observedAttributes ?? [])];
   }
@@ -634,6 +627,9 @@ class MuxVideoElement extends CustomVideoElement implements Partial<MuxMediaProp
   }
 }
 
+// castable-video should be mixed in last so that it can override load().
+class MuxVideoElement extends CastableMediaMixin(MediaTracksMixin(MuxVideoBaseElement)) {}
+
 type MuxVideoElementType = typeof MuxVideoElement;
 declare global {
   var MuxVideoElement: MuxVideoElementType; // eslint-disable-line

yarn.lock

@@ -5564,10 +5564,12 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
-castable-video@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/castable-video/-/castable-video-0.5.2.tgz#cb0d3ec7336cbf163370c3d4e63bd14219c097b3"
-  integrity sha512-eP19NY8AF9G+Xj87R447GMkWuUc0W3DSNx5qOypH/+mr2aaHRONaIK5H4bxMgpXZslZ2vNNvCuVuKi3VdCUGEA==
+castable-video@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/castable-video/-/castable-video-1.0.3.tgz#53532ee57f7161e23b2766557c88e50e1fef8c6a"
+  integrity sha512-jFHgzt3/ivoBxdbiDht2muXEC7BpxQ7Yj4ST6QUdapYTRYlpA518bzjtIXrcip0Hgy8MBzVGaTM1IKKxWYXIpA==
+  dependencies:
+    custom-media-element "^1.0.2"
 
 chai-a11y-axe@^1.3.2:
   version "1.4.0"
@@ -6400,7 +6402,7 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
-custom-media-element@1.1.0:
+custom-media-element@1.1.0, custom-media-element@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/custom-media-element/-/custom-media-element-1.1.0.tgz#13c9848fcdb96ee9847e22bd5cb11df1bf29cae6"
   integrity sha512-G/SLCdlrZPqboB7TvK7Vk3lAC5Q2WF2CsqSUoMD9XMwEB7X8eOH8Iy+ipPofHSCU/6wYLC3O9gHtcI1oimwoTg==
@@ -10534,10 +10536,10 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-media-chrome@~1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-1.6.0.tgz#992fdf5c2403c10b6050015a090738416d06ed91"
-  integrity sha512-mnlr5s36z3Rd6gwtb4T6habK3IhgNBxFk/FCand0HEYREzThXSQ/j1aDT0iZIDnYU32phzNTqAR63MHqsZtKOw==
+media-chrome@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-2.0.0.tgz#ce9227070b1064329fd2b646008f95c2fa02cc57"
+  integrity sha512-UIeBzZ3QQFoSLjz6SR1EXAX1nVbUWKDVXyNZRnb6HXQw19prk/MVWgBflDUx+IRR9UzRuJTHwYk/fbxwMgMg4g==
 
 media-tracks@0.2.4:
   version "0.2.4"