@mux/mux-player
Advanced tools
Comparing version 0.1.0-canary.10-8cfa013 to 0.1.0-canary.10-8e82f44
@@ -6,2 +6,22 @@ # Change Log | ||
# [0.1.0-beta.26](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.25...@mux/mux-player@0.1.0-beta.26) (2022-08-03) | ||
### Bug Fixes | ||
- update stream-type values in warning log ([d995694](https://github.com/muxinc/elements/commit/d995694966d877097c63e23c7425097f5c50e259)) | ||
# [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 +28,0 @@ |
{ | ||
"name": "@mux/mux-player", | ||
"version": "0.1.0-canary.10-8cfa013", | ||
"version": "0.1.0-canary.10-8e82f44", | ||
"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.3-canary.3-8cfa013", | ||
"@mux/playback-core": "0.9.1-canary.3-8cfa013", | ||
"media-chrome": "0.8.1" | ||
"@mux/mux-video": "0.8.4-canary.0-8e82f44", | ||
"@mux/playback-core": "0.9.1-canary.10-8e82f44", | ||
"media-chrome": "0.9.0" | ||
}, | ||
@@ -59,0 +59,0 @@ "devDependencies": { |
@@ -138,31 +138,32 @@ <p align="center"> | ||
| Attribute | Type | Description | Default | | ||
| -------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | ||
| `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A | | ||
| `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` | | ||
| `playback-token` | `string` | The playback token for signing the `src` URL. | N/A | | ||
| `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A | | ||
| `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A | | ||
| `stream-type` | `"on-demand" \| "live" \| "ll-live" \| "dvr" \| "ll-dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` | | ||
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` | | ||
| `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A | | ||
| `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A | | ||
| `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A | | ||
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` | | ||
| `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` | | ||
| `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` | | ||
| `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` | | ||
| `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` | | ||
| `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` | | ||
| `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` | | ||
| `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A | | ||
| `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A | | ||
| `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies | | ||
| `muted` | `boolean` | Toggles the muted state of the player. | Varies | | ||
| `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false | | ||
| `playbackrate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` | | ||
| `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` | | ||
| `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived | | ||
| `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A | | ||
| `custom-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Video. | N/A | | ||
| Attribute | Type | Description | Default | | ||
| -------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | ||
| `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A | | ||
| `env-key` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If undefined, the environment will be inferred based on your Mux Video asset. | `undefined` | | ||
| `playback-token` | `string` | The playback token for signing the `src` URL. | N/A | | ||
| `thumbnail-token` | `string` | The thumbnail token for signing the `poster` URL. | N/A | | ||
| `storyboard-token` | `string` | The storyboard token for signing the storyboard URL. | N/A | | ||
| `stream-type` | `"on-demand" \| "live" \| "ll-live" \| "live:dvr" \| "ll-live:dvr"` | The type of stream associated with your Mux Asset. Used to determine what UI/controls to show and what optimizations to make for playback. | `"on-demand"` | | ||
| `audio` | `boolean` | Indicate that you want an "audio only" UI/chrome. This may be used for audio-only assets or audio+video assets. | `false` | | ||
| `metadata-video-title` | `string` | This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | N/A | | ||
| `metadata-viewer-user-id` | `string` | If you have a logged-in user this should be an anonymized ID value that maps back to the user in your database. Take care to not expose personal identifiable information like names, usernames or email addresses. (optional, but encouraged) | N/A | | ||
| `metadata-video-id` | `string` | This is an arbitrary ID that should map back to a record of this video in your database. | N/A | | ||
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. | `false` | | ||
| `start-time` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` | | ||
| `thumbnail-time` | `number` (seconds) | Offset for the poster image you want to show before loading media. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` | | ||
| `prefer-mse` | `boolean` | Use the underlying playback engine (currently hls.js), even if native playback is supported (e.g. in Safari). For more, see the section on [`prefer-mse`](#prefer-mse) | `false` | | ||
| `default-hidden-captions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` | | ||
| `forward-seek-offset` | `number` (seconds) | Offset applied to the forward seek button | `10` | | ||
| `backward-seek-offset` | `number` (seconds) | Offset applied to the backward seek button | `10` | | ||
| `primary-color` | (Any valid CSS color style) | The primary color used by the player | N/A | | ||
| `secondary-color` | (Any valid CSS color style) | The secondary color used by the player | N/A | | ||
| `volume` | `number` (0-1) | Sets the volume of the player from 0 to 1. | Varies | | ||
| `muted` | `boolean` | Toggles the muted state of the player. | Varies | | ||
| `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false | | ||
| `playbackrate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` | | ||
| `loop` | `boolean` | Automatically loop playback of your media when it finishes. | `false` | | ||
| `poster` | `string` (URL) | Assigns a poster image URL. Will use the automatically generated poster based on your playback-id by default. | Derived | | ||
| `beacon-collection-domain` | `string` (domain name) | Assigns a custom domain to be used for Mux Data collection. | N/A | | ||
| `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` | |
@@ -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, | ||
@@ -554,3 +558,3 @@ paused: el.paused, | ||
i18n( | ||
`No stream-type value supplied. Defaulting to \`on-demand\`. Please provide stream-type as either: \`on-demand\`, \`live\` or \`ll-live\`` | ||
`No stream-type value supplied. Defaulting to \`on-demand\`. Please provide stream-type as either: \`on-demand\`, \`live\`, \`ll-live\`, \`live:dvr\`, or \`ll-live:dvr\`` | ||
) | ||
@@ -563,3 +567,3 @@ ), | ||
message: i18n( | ||
`Invalid stream-type value supplied: \`{streamType}\`. Please provide stream-type as either: \`on-demand\`, \`live\` or \`ll-live\`` | ||
`Invalid stream-type value supplied: \`{streamType}\`. Please provide stream-type as either: \`on-demand\`, \`live\`, \`ll-live\`, \`live:dvr\`, or \`ll-live:dvr\`` | ||
).format({ streamType: this.streamType }), | ||
@@ -614,2 +618,13 @@ }); | ||
get nohotkeys() { | ||
return this.hasAttribute(PlayerAttributes.NOHOTKEYS); | ||
} | ||
set nohotkeys(val: boolean) { | ||
if (!val) { | ||
this.removeAttribute(PlayerAttributes.NOHOTKEYS); | ||
} | ||
this.setAttribute(PlayerAttributes.NOHOTKEYS, ''); | ||
} | ||
/** | ||
@@ -616,0 +631,0 @@ * Get the thumbnailTime offset used for the poster image. |
@@ -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> |
@@ -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 |
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 @@ |
@@ -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>` | ||
); | ||
}); | ||
}); |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
2
234
1
227264
45
3785
+ Added@mux/mux-video@0.8.4-canary.0-8e82f44(transitive)
+ Added@mux/playback-core@0.9.1-canary.10-8e82f44(transitive)
+ Addedmedia-chrome@0.9.0(transitive)
- Removed@mux/mux-video@0.8.3-canary.3-8cfa013(transitive)
- Removed@mux/playback-core@0.9.1-canary.3-8cfa013(transitive)
- Removedmedia-chrome@0.8.1(transitive)
Updatedmedia-chrome@0.9.0