@mux/mux-player - npm Package Compare versions

Comparing version 0.1.0-beta.24 to 0.1.0-beta.25

CHANGELOG.md

@@ -6,2 +6,16 @@ # Change Log
 
+# [0.1.0-beta.25](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.24...@mux/mux-player@0.1.0-beta.25) (2022-08-02)
+
+### Bug Fixes
+
+- move nohotkeys type to more appropriate place ([49f9c4e](https://github.com/muxinc/elements/commit/49f9c4e4d43f463aa4960a40c94e715d86c4304b))
+- **mux-player:** Account for attr vs. 'prop' naming overlap in state propogation. ([5c05af8](https://github.com/muxinc/elements/commit/5c05af8c257806662bc6402baba03b7090cbe699))
+
+### Features
+
+- add CSS parts for controls ([#310](https://github.com/muxinc/elements/issues/310)) ([e28c71e](https://github.com/muxinc/elements/commit/e28c71eed11423951dbac9faf2518ca7cbb2f9e2))
+- nohotkeys prop, only use the template ([4cde791](https://github.com/muxinc/elements/commit/4cde791a4664b11501ad48125bd5ed80e3970ff0))
+- support media-chrome keyboard shortcuts, use nohotkeys to turn off ([b8ed7f5](https://github.com/muxinc/elements/commit/b8ed7f5180aab60bb896842fb7037bce0069ad2c))
+- upgrade to media-chrome 0.9.0 ([f257e0d](https://github.com/muxinc/elements/commit/f257e0d6583de19d0f29859b512e12654f235f3a))
+
 # [0.1.0-beta.24](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.23...@mux/mux-player@0.1.0-beta.24) (2022-07-21)
@@ -8,0 +22,0 @@

dist/types-ts3.4/index.d.ts

@@ -36,2 +36,3 @@ import '@mux/playback-core';
     audio: boolean;
+    nohotkeys: boolean;
     /*
@@ -38,0 +39,0 @@ * Get the thumbnailTime offset used for the poster image.

dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts

@@ -5,2 +5,3 @@ import { MediaTheme } from 'media-chrome';
     streamType: string | null;
+    nohotkeys?: boolean;
     audio: boolean;
@@ -12,2 +13,21 @@ playerSize: string | null;
 };
+export declare const parts: {
+    mediaChrome: string;
+    centerPlay: string;
+    centerSeekBackward: string;
+    centerSeekForward: string;
+    play: string;
+    seekBackward: string;
+    seekForward: string;
+    mute: string;
+    captions: string;
+    airplay: string;
+    pip: string;
+    fullscreen: string;
+    cast: string;
+    playbackRate: string;
+    volumeRange: string;
+    timeRange: string;
+    timeDisplay: string;
+};
 export default class MediaThemeMux extends MediaTheme {
@@ -14,0 +34,0 @@ static readonly observedAttributes: string[];

dist/types-ts3.4/template.d.ts

@@ -1,2 +0,1 @@
-import './media-theme-mux/media-theme-mux';
 import './dialog';
@@ -3,0 +2,0 @@ import { MuxTemplateProps } from './types';

dist/types/index.d.ts

@@ -37,2 +37,4 @@ import '@mux/playback-core';
     set audio(val: boolean);
+    get nohotkeys(): boolean;
+    set nohotkeys(val: boolean);
     /**
@@ -39,0 +41,0 @@ * Get the thumbnailTime offset used for the poster image.

dist/types/media-theme-mux/media-theme-mux.d.ts

@@ -5,2 +5,3 @@ import { MediaTheme } from 'media-chrome';
     streamType: string | null;
+    nohotkeys?: boolean;
     audio: boolean;
@@ -12,2 +13,21 @@ playerSize: string | null;
 };
+export declare const parts: {
+    mediaChrome: string;
+    centerPlay: string;
+    centerSeekBackward: string;
+    centerSeekForward: string;
+    play: string;
+    seekBackward: string;
+    seekForward: string;
+    mute: string;
+    captions: string;
+    airplay: string;
+    pip: string;
+    fullscreen: string;
+    cast: string;
+    playbackRate: string;
+    volumeRange: string;
+    timeRange: string;
+    timeDisplay: string;
+};
 export default class MediaThemeMux extends MediaTheme {
@@ -14,0 +34,0 @@ static get observedAttributes(): string[];

dist/types/template.d.ts

@@ -1,2 +0,1 @@
-import './media-theme-mux/media-theme-mux';
 import './dialog';
@@ -3,0 +2,0 @@ import type { MuxTemplateProps } from './types';

package.json

 {
   "name": "@mux/mux-player",
-  "version": "0.1.0-beta.24",
+  "version": "0.1.0-beta.25",
   "description": "An open source Mux player web component that Just Works™",
@@ -54,5 +54,5 @@ "main": "./dist/index.cjs.js",
     "@github/template-parts": "^0.5.3",
-    "@mux/mux-video": "0.8.2",
+    "@mux/mux-video": "0.8.3",
     "@mux/playback-core": "0.9.0",
-    "media-chrome": "0.8.1"
+    "media-chrome": "0.9.0"
   },
@@ -107,3 +107,3 @@ "devDependencies": {
   },
-  "gitHead": "2d61f80adc7037225c22e2ac87519881677702d3"
+  "gitHead": "4ef4afea4e82bf3558225d105dbab0cbff6aa6ce"
 }

README.md

@@ -167,2 +167,3 @@ <p align="center">
 | `custom-domain`            | `string` (domain name)                                    | Assigns a custom domain to be used for Mux Video.                                                                                                                                                                                                                                                                                                                                                | N/A           |
+| `nohotkeys`                | `boolean`                                                 | Toggles keyboard shortcut (hot keys) support when focus in inside the player                                                                                                                                                                                                                                                                                                                     | `false`       |
 
@@ -189,2 +190,3 @@ ### Methods
 | `loop`                                        | A `Boolean` that reflects the `loop` HTML attribute, which indicates whether the media element should start over when it reaches the end.                                                                                                                                                                           | `false`     |
+| `nohotkeys`                                   | A `Boolean` that reflects the `nohotkeys` HTML attribute, which indicates whether Mux Player accepts keboard shortcuts.                                                                                                                                                                                             | `false`     |
 | `metadata`                                    | The metadata property can be used to set the Mux Data metadata properties in an easy way. Take a look at the [metadata guide](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata) to view an exhaustive list of available values.                                                             | `{}`        |
@@ -191,0 +193,0 @@ | `muted`                                       | Is a `Boolean` that determines whether audio is muted. `true` if the audio is muted and `false` otherwise.                                                                                                                                                                                                          | `false`     |

src/index.ts

@@ -75,2 +75,3 @@ // import playback-core here to make sure that the polyfill is loaded
   AUDIO: 'audio',
+  NOHOTKEYS: 'nohotkeys',
 };
@@ -91,2 +92,5 @@
     loop: el.loop,
+    // NOTE: Renaming internal prop due to state (sometimes derived from attributeChangedCallback attr values)
+    // overwriting prop value (type mismatch: string vs. boolean) (CJP)
+    noHotKeys: el.hasAttribute(PlayerAttributes.NOHOTKEYS),
     muted: el.muted,
@@ -612,2 +616,13 @@ paused: el.paused,
 
+  get nohotkeys() {
+    return this.hasAttribute(PlayerAttributes.NOHOTKEYS);
+  }
+
+  set nohotkeys(val: boolean) {
+    if (!val) {
+      this.removeAttribute(PlayerAttributes.NOHOTKEYS);
+    }
+    this.setAttribute(PlayerAttributes.NOHOTKEYS, '');
+  }
+
   /**
@@ -614,0 +629,0 @@ * Get the thumbnailTime offset used for the poster image.

src/media-theme-mux/media-theme-mux.ts

@@ -18,2 +18,3 @@ import { MediaTheme } from 'media-chrome';
   streamType: string | null;
+  nohotkeys?: boolean;
   audio: boolean;
@@ -26,2 +27,22 @@ playerSize: string | null;
 
+export const parts = {
+  mediaChrome: 'layer media-layer poster-layer vertical-layer centered-layer',
+  centerPlay: 'center play button',
+  centerSeekBackward: 'center seek-backward button',
+  centerSeekForward: 'center seek-forward button',
+  play: 'play button',
+  seekBackward: 'seek-backward button',
+  seekForward: 'seek-forward button',
+  mute: 'mute button',
+  captions: 'captions button',
+  airplay: 'airplay button',
+  pip: 'pip button',
+  fullscreen: 'fullscreen button',
+  cast: 'cast button',
+  playbackRate: 'playbackrate button',
+  volumeRange: 'volume range',
+  timeRange: 'time range',
+  timeDisplay: 'time display',
+};
+
 export default class MediaThemeMux extends MediaTheme {
@@ -31,2 +52,3 @@ static get observedAttributes() {
       'audio',
+      'nohotkeys',
       'stream-type',
@@ -47,2 +69,3 @@ 'player-size',
       audio: this.hasAttribute('audio'),
+      nohotkeys: this.hasAttribute('nohotkeys'),
       streamType: this.getAttribute('stream-type'),
@@ -60,3 +83,8 @@ playerSize: this.getAttribute('player-size'),
         </style>
-        <media-controller audio="${props.audio || false}" class="size-${props.playerSize}">
+        <media-controller
+          nohotkeys="${props.nohotkeys || false}"
+          audio="${props.audio || false}"
+          class="size-${props.playerSize}"
+          exportparts="${parts.mediaChrome.split(' ').join(', ')}"
+        >
           <slot name="media" slot="media"></slot>
@@ -135,4 +163,4 @@ <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
 // prettier-ignore
-const MediaPlayButton = () => html`
-  <media-play-button>
+const MediaPlayButton = ({ part = parts.play } = {}) => html`
+  <media-play-button part="${part}">
     ${icons.Play()}
@@ -144,5 +172,6 @@ ${icons.Pause()}
 // prettier-ignore
-const MediaSeekBackwardButton = (props: Partial<ThemeMuxTemplateProps>) => html`
-  <media-seek-backward-button seek-offset="${props.backwardSeekOffset}">
-    ${icons.SeekBackward({ value: props.backwardSeekOffset })}
+type SeekBackwardButtonProps = { backwardSeekOffset: string, part?: string };
+const MediaSeekBackwardButton = ({ backwardSeekOffset, part = parts.seekBackward }: SeekBackwardButtonProps) => html`
+  <media-seek-backward-button seek-offset="${backwardSeekOffset}" part="${part}">
+    ${icons.SeekBackward({ value: backwardSeekOffset })}
   </media-seek-backward-button>
@@ -152,5 +181,6 @@ `;
 // prettier-ignore
-const MediaSeekForwardButton = (props: Partial<ThemeMuxTemplateProps>) => html`
-  <media-seek-forward-button seek-offset="${props.forwardSeekOffset}">
-    ${icons.SeekForward({ value: props.forwardSeekOffset })}
+type SeekForwardButtonProps = { forwardSeekOffset: string, part?: string };
+const MediaSeekForwardButton = ({ forwardSeekOffset, part = parts.seekForward }: SeekForwardButtonProps) => html`
+  <media-seek-forward-button seek-offset="${forwardSeekOffset}" part="${part}">
+    ${icons.SeekForward({ value: forwardSeekOffset })}
   </media-seek-forward-button>
@@ -161,3 +191,3 @@ `;
 const MediaMuteButton = () => html`
-  <media-mute-button>
+  <media-mute-button part="${parts.mute}">
     ${icons.VolumeHigh()}
@@ -172,3 +202,3 @@ ${icons.VolumeMedium()}
 const MediaCaptionsButton = (props: ThemeMuxTemplateProps) => html`
-<media-captions-button default-showing="${!props.defaultHiddenCaptions}" >
+<media-captions-button default-showing="${!props.defaultHiddenCaptions}" part="${parts.captions}">
   ${icons.CaptionsOff()}
@@ -180,3 +210,3 @@ ${icons.CaptionsOn()}
 const MediaAirplayButton = () => html`
-<media-airplay-button>
+<media-airplay-button part="${parts.airplay}">
   ${icons.Airplay()}
@@ -187,3 +217,3 @@ </media-airplay-button>`;
 const MediaPipButton = () => html`
-<media-pip-button>
+<media-pip-button part="${parts.pip}">
   ${icons.PipEnter()}
@@ -195,3 +225,3 @@ ${icons.PipExit()}
 const MediaFullscreenButton = () => html`
-<media-fullscreen-button>
+<media-fullscreen-button part="${parts.fullscreen}">
   ${icons.FullscreenEnter()}
@@ -203,3 +233,3 @@ ${icons.FullscreenExit()}
 const MediaCastButton = () => html`
-<media-cast-button>
+<media-cast-button part="${parts.cast}">
   ${icons.CastEnter()}
@@ -209,14 +239,39 @@ ${icons.CastExit()}
 
+// prettier-ignore
+const MediaPlaybackRateButton = () => html`
+<media-playback-rate-button part="${parts.playbackRate}">
+</media-playback-rate-button>`;
+
+// prettier-ignore
+const MediaVolumeRange = () => html`
+<media-volume-range part="${parts.volumeRange}">
+</media-volume-range>`;
+
+// prettier-ignore
+const MediaTimeRange = () => html`
+<media-time-range part="${parts.timeRange}">
+</media-time-range>`;
+
+// prettier-ignore
+const TimeDisplay = () => html`
+<mxp-time-display part="${parts.timeDisplay}">
+</mxp-time-display>`;
+
+// prettier-ignore
 export const AudioVodChrome = (props: ThemeMuxTemplateProps) => html`
   <media-control-bar>
-    ${MediaPlayButton()} ${MediaSeekBackwardButton(props)} ${MediaSeekForwardButton(props)}
-    <mxp-time-display></mxp-time-display>
-    <media-time-range></media-time-range>
+    ${MediaPlayButton()}
+    ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
+    ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
+    ${TimeDisplay()}
+    ${MediaTimeRange()}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
-    <media-playback-rate-button></media-playback-rate-button>
-    ${MediaAirplayButton()} ${MediaCastButton()}
+    ${MediaVolumeRange()}
+    ${MediaPlaybackRateButton()}
+    ${MediaAirplayButton()}
+    ${MediaCastButton()}
   </media-control-bar>
 `;
 
+// prettier-ignore
 export const AudioDvrChrome = (props: ThemeMuxTemplateProps) => html`
@@ -226,12 +281,15 @@ <media-control-bar>
     <slot name="seek-to-live-button"></slot>
-    ${MediaSeekBackwardButton(props)} ${MediaSeekForwardButton(props)}
-    <mxp-time-display></mxp-time-display>
-    <media-time-range></media-time-range>
+    ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
+    ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
+    ${TimeDisplay()}
+    ${MediaTimeRange()}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
-    <media-playback-rate-button></media-playback-rate-button>
-    ${MediaAirplayButton()} ${MediaCastButton()}
+    ${MediaVolumeRange()}
+    ${MediaPlaybackRateButton()}
+    ${MediaAirplayButton()}
+    ${MediaCastButton()}
   </media-control-bar>
 `;
 
+// prettier-ignore
 export const AudioLiveChrome = () => html`
@@ -242,4 +300,5 @@ <media-control-bar>
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
-    ${MediaAirplayButton()} ${MediaCastButton()}
+    ${MediaVolumeRange()}
+    ${MediaAirplayButton()}
+    ${MediaCastButton()}
   </media-control-bar>
@@ -258,3 +317,3 @@ `;
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
@@ -277,13 +336,13 @@ <media-control-bar>
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaSeekBackwardButton(props)}
-    ${MediaPlayButton()}
-    ${MediaSeekForwardButton(props)}
+    ${MediaSeekBackwardButton({ ...props, part: parts.centerSeekBackward } as SeekBackwardButtonProps)}
+    ${MediaPlayButton({ part: parts.centerPlay })}
+    ${MediaSeekForwardButton({ ...props, part: parts.centerSeekForward } as SeekForwardButtonProps)}
   </div>
-  <media-time-range></media-time-range>
+  ${MediaTimeRange()}
   <media-control-bar>
-    <mxp-time-display></mxp-time-display>
+    ${TimeDisplay()}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <div class="mxp-spacer"></div>
-    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaPlaybackRateButton()}
     ${MediaFullscreenButton()}
@@ -297,14 +356,14 @@ <div class="mxp-padding-2"></div>
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
-  <media-time-range></media-time-range>
+  ${MediaTimeRange()}
   <media-control-bar>
     ${MediaPlayButton()}
-    ${MediaSeekBackwardButton(props)}
-    ${MediaSeekForwardButton(props)}
-    <mxp-time-display></mxp-time-display>
+    ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
+    ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
+    ${TimeDisplay()}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <div class="mxp-spacer"></div>
-    <media-playback-rate-button></media-playback-rate-button>
+    ${MediaPlaybackRateButton()}
     ${MediaCaptionsButton(props)}
@@ -333,7 +392,7 @@ ${MediaAirplayButton()}
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
   <media-control-bar>
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <div class="mxp-spacer"></div>
@@ -350,7 +409,7 @@ ${MediaFullscreenButton()}
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
   <media-control-bar>
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <div class="mxp-spacer"></div>
@@ -377,10 +436,10 @@ ${MediaCaptionsButton(props)}
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaSeekBackwardButton(props)}
-    ${MediaPlayButton()}
-    ${MediaSeekForwardButton(props)}
+    ${MediaSeekBackwardButton({ ...props, part: parts.centerSeekBackward } as SeekBackwardButtonProps)}
+    ${MediaPlayButton({ part: parts.centerPlay })}
+    ${MediaSeekForwardButton({ ...props, part: parts.centerSeekForward } as SeekForwardButtonProps)}
   </div>
-  <media-time-range></media-time-range>
+  ${MediaTimeRange()}
   <media-control-bar>
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <slot name="seek-to-live-button"></slot>
@@ -396,11 +455,11 @@ <div class="mxp-spacer"></div>
   <div slot="centered-chrome" class="mxp-center-controls">
-    ${MediaPlayButton()}
+    ${MediaPlayButton({ part: parts.centerPlay })}
   </div>
-  <media-time-range></media-time-range>
+  ${MediaTimeRange()}
   <media-control-bar>
     ${MediaPlayButton()}
-    ${MediaSeekBackwardButton(props)}
-    ${MediaSeekForwardButton(props)}
+    ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
+    ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
     ${MediaMuteButton()}
-    <media-volume-range></media-volume-range>
+    ${MediaVolumeRange()}
     <slot name="seek-to-live-button"></slot>
@@ -407,0 +466,0 @@ <div class="mxp-spacer"></div>

src/template.ts

@@ -1,2 +0,2 @@
-import './media-theme-mux/media-theme-mux';
+import { parts } from './media-theme-mux/media-theme-mux';
 import './dialog';
@@ -24,4 +24,8 @@ import {
 
+const flatCSSParts = Object.values(parts).flatMap((group) => group.split(' '));
+const forwardUniqueCSSParts = [...new Set(flatCSSParts)].join(', ');
+
 export const content = (props: MuxTemplateProps) => html`
   <${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}
+    nohotkeys="${props.noHotKeys ?? false}"
     audio="${props.audio || false}"
@@ -40,2 +44,3 @@ style="${
     backward-seek-offset="${props.backwardSeekOffset}"
+    exportparts="seek-live, ${forwardUniqueCSSParts}"
   >
@@ -107,2 +112,4 @@ <mux-video
       slot="seek-to-live-button"
+      part="seek-live button"
+      class="mxp-seek-to-live-button"
       aria-disabled="${props.inLiveWindow}"
@@ -116,3 +123,2 @@ onclick="${function (this: HTMLButtonElement, evt: Event) {
       }}"
-      class="mxp-seek-to-live-button"
     >
@@ -119,0 +125,0 @@ Live

src/types.d.ts

 import type MuxVideoElement, { MediaError } from '@mux/mux-video';
 
 export type MuxPlayerProps = Partial<MuxVideoElement> & {
+  nohotkeys?: boolean;
   preferMse?: boolean;
@@ -32,2 +33,3 @@ };
   metadataViewerUserId: string;
+  noHotKeys: boolean;
 };
@@ -34,0 +36,0 @@

test/template.test.js

@@ -10,2 +10,4 @@ import { assert } from '@open-wc/testing';
 
+  const exportParts = `seek-live, layer, media-layer, poster-layer, vertical-layer, centered-layer, center, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playbackrate, volume, range, time, display`;
+
   it('default template without props', function () {
@@ -15,3 +17,3 @@ render(content({}), div);
       minify(div.innerHTML),
-      '<media-theme-mux class="size-" stream-type="" player-size="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version=""></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>'
+      `<media-theme-mux class="size-" stream-type="" player-size="" default-hidden-captions="" forward-seek-offset="" backward-seek-offset="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version=""></mux-video><button slot="seek-to-live-button" part="seek-live button" class="mxp-seek-to-live-button" aria-disabled="">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>`
     );
@@ -34,3 +36,3 @@ });
       minify(div.innerHTML),
-      '<media-theme-mux class="size-extra-small" stream-type="on-demand" player-size="extra-small" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>'
+      `<media-theme-mux class="size-extra-small" stream-type="on-demand" player-size="extra-small" default-hidden-captions="" forward-seek-offset="" backward-seek-offset="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" part="seek-live button" class="mxp-seek-to-live-button" aria-disabled="">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>`
     );
@@ -51,3 +53,3 @@ });
       minify(div.innerHTML),
-      '<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>'
+      `<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" default-hidden-captions="" forward-seek-offset="" backward-seek-offset="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" part="seek-live button" class="mxp-seek-to-live-button" aria-disabled="">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><p></p></mxp-dialog></media-theme-mux>`
     );
@@ -71,5 +73,5 @@ });
       minify(div.innerHTML),
-      '<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" default-hidden-captions="" forward-seek-offset="" backward-seek-offset=""><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" aria-disabled="" class="mxp-seek-to-live-button">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>'
+      `<media-theme-mux class="size-large" stream-type="on-demand" player-size="large" default-hidden-captions="" forward-seek-offset="" backward-seek-offset="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" player-software-name="" player-software-version="" stream-type="on-demand"></mux-video><button slot="seek-to-live-button" part="seek-live button" class="mxp-seek-to-live-button" aria-disabled="">\n      Live\n    </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme-mux>`
     );
   });
 });

No alert changes

Improved metrics

Total package byte prevSize

2417919

increased by1.26%

Lines of code

15338

increased by1.62%

Number of lines in readme file

234

increased by0.86%

Dependency changes

• + Added@mux/mux-video@0.8.3(transitive)

• + Addedmedia-chrome@0.9.0(transitive)

• - Removed@mux/mux-video@0.8.2(transitive)

• - Removedmedia-chrome@0.8.1(transitive)

• Updated@mux/mux-video@0.8.3

• Updatedmedia-chrome@0.9.0