Bug: web component mux-player compilation errors in Angular ~v17

[lcottingham]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player

Which browsers are you using?

Chrome, Safari, Firefox

Which operating systems are you using?

macOS

Description

mux-player@2.2.0 fails to compile in angular 17.0. Seems to be related to the types being extended by the web component.

Reduced test case

https://codesandbox.io/p/devbox/smoosh-haze-73qh6g?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpqz952u00093b6tw4ne6rat%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpqz952t00023b6tt8mbr9xs%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpqz952t00073b6ttrrlatln%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpqz952t00083b6tfvawig6i%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpqz952t00023b6tt8mbr9xs%2522%253A%257B%2522id%2522%253A%2522clpqz952t00023b6tt8mbr9xs%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clpqz952t00083b6tfvawig6i%2522%253A%257B%2522id%2522%253A%2522clpqz952t00083b6tfvawig6i%2522%252C%2522activeTabId%2522%253A%2522clpqzari300nb3b6t5ppegknx%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A4200%252C%2522id%2522%253A%2522clpqzari300nb3b6t5ppegknx%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clpqz952t00073b6ttrrlatln%2522%253A%257B%2522id%2522%253A%2522clpqz952t00073b6ttrrlatln%2522%252C%2522activeTabId%2522%253A%2522clpqzef4a00yx3b6tnmyn2z2r%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522id%2522%253A%2522clpqzef4a00yx3b6tnmyn2z2r%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

1. Install latest angular version
2. Install mux-player 2.2.0 as a dependency
3. Allow custom schema provider in angular (to allow web component)
4. Import mux-player library to target component
5. Add mux player web component to html

Current Behavior

Throws a compilation error due to incorrect interface extends in the mux player @types

Expected Behavior

Should display web component

Errors

ERROR
node_modules/@mux/mux-player/dist/types/video-api.d.ts:19:11 - error TS2430: Interface 'VideoApiElement' incorrectly extends interface 'PartialHTMLVideoElement'.
  Types of property 'audioTracks' are incompatible.
    Type 'import("/Users/***/frontend/node_modules/media-tracks/dist/types/audio-track-list").AudioTrackList' is not assignable to type 'import("/Users/***/frontend/node_modules/@mux/playback-core/node_modules/media-tracks/dist/types/audio-track-list").AudioTrackList'.
      Property '#private' in type 'AudioTrackList' refers to a different member that cannot be accessed from within type 'AudioTrackList'.

19 interface VideoApiElement extends PartialHTMLVideoElement, HTMLElement {
             ~~~~~~~~~~~~~~~
ERROR
node_modules/media-tracks/dist/types/mixin.d.ts:10:9 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'VideoTrack' must be of type 'typeof VideoTrack', but here has type 'typeof VideoTrack'.

10     var VideoTrack: VideoTrackType;
           ~~~~~~~~~~

  node_modules/@mux/playback-core/node_modules/media-tracks/dist/types/mixin.d.ts:10:9
    10     var VideoTrack: VideoTrackType;
               ~~~~~~~~~~
    'VideoTrack' was also declared here.
ERROR
node_modules/media-tracks/dist/types/mixin.d.ts:11:9 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'AudioTrack' must be of type 'typeof AudioTrack', but here has type 'typeof AudioTrack'.

11     var AudioTrack: AudioTrackType;
           ~~~~~~~~~~

  node_modules/@mux/playback-core/node_modules/media-tracks/dist/types/mixin.d.ts:11:9
    11     var AudioTrack: AudioTrackType;
               ~~~~~~~~~~
    'AudioTrack' was also declared here.
ERROR
node_modules/media-tracks/dist/types/mixin.d.ts:13:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'videoTracks' must be of type 'VideoTrackList', but here has type 'VideoTrackList'.

13         videoTracks: VideoTrackList;
           ~~~~~~~~~~~

  node_modules/@mux/playback-core/node_modules/media-tracks/dist/types/mixin.d.ts:13:9
    13         videoTracks: VideoTrackList;
               ~~~~~~~~~~~
    'videoTracks' was also declared here.
ERROR
node_modules/media-tracks/dist/types/mixin.d.ts:14:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'audioTracks' must be of type 'AudioTrackList', but here has type 'AudioTrackList'.

14         audioTracks: AudioTrackList;
           ~~~~~~~~~~~

  node_modules/@mux/playback-core/node_modules/media-tracks/dist/types/mixin.d.ts:14:9
    14         audioTracks: AudioTrackList;
               ~~~~~~~~~~~
    'audioTracks' was also declared here.
ERROR
node_modules/media-tracks/dist/types/mixin.d.ts:19:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'videoRenditions' must be of type 'VideoRenditionList', but here has type 'VideoRenditionList'.

19         videoRenditions: VideoRenditionList;
           ~~~~~~~~~~~~~~~

  node_modules/@mux/playback-core/node_modules/media-tracks/dist/types/mixin.d.ts:19:9
    19         videoRenditions: VideoRenditionList;
               ~~~~~~~~~~~~~~~
    'videoRenditions' was also declared here.
ERROR
node_modules/media-tracks/dist/types/mixin.d.ts:20:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'audioRenditions' must be of type 'AudioRenditionList', but here has type 'AudioRenditionList'.

20         audioRenditions: AudioRenditionList;
           ~~~~~~~~~~~~~~~

  node_modules/@mux/playback-core/node_modules/media-tracks/dist/types/mixin.d.ts:20:9
    20         audioRenditions: AudioRenditionList;
               ~~~~~~~~~~~~~~~
    'audioRenditions' was also declared here.

What version of the package are you using?

2.2.0

[luwes]

thanks for reporting! could you try out @mux/mux-player@2.2.0-canary.0-411f382? that should fix it

[lcottingham]

@luwes fixed! Verified working here

Super quick 🙏🏼🚀 How soon to get this on a patch version update?

[luwes]

Cheers! should be early this week.