@mux/mux-player
Advanced tools
Comparing version 0.1.0-canary.10-958b850 to 0.1.0-canary.10-9766f4c
@@ -6,2 +6,18 @@ # Change Log | ||
# [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) | ||
### Bug Fixes | ||
- add Mux flavor cast icon & fix xs size bug ([#299](https://github.com/muxinc/elements/issues/299)) ([8374ff1](https://github.com/muxinc/elements/commit/8374ff17e294cbe3ad899749ab0361b78ffe0274)) | ||
- **mux-player:** Clean up how metadata is set from mux-player to underlying mux-video element. Force upgrades and init when setting metadata. ([d3b2347](https://github.com/muxinc/elements/commit/d3b2347b1d4d7ebbbd882879f69e9d082f12dd80)) | ||
- upgrade MC to v0.8.0 and adjust time range styles ([#294](https://github.com/muxinc/elements/issues/294)) ([030fdc6](https://github.com/muxinc/elements/commit/030fdc649517a538fc89c5b3d9edca42e58634ef)) | ||
- upgrade MC v0.8.1 ([#298](https://github.com/muxinc/elements/issues/298)) ([fc4a74c](https://github.com/muxinc/elements/commit/fc4a74cfaadf90ee8d4ed89751755d56e77df79e)) | ||
### Features | ||
- add ability to choose a Media Theme via attribute ([#269](https://github.com/muxinc/elements/issues/269)) ([77d0386](https://github.com/muxinc/elements/commit/77d0386606d5ecccb7c322ce487c9287d16374fd)) | ||
- add defaultMuted, defaultPlaybackRate props ([#252](https://github.com/muxinc/elements/issues/252)) ([1a72165](https://github.com/muxinc/elements/commit/1a7216545cba27b34bc743cf5dd6225d4dcae738)) | ||
- **mux-player:** Add textTracks prop alongside add/remove tracks methods. ([c041a72](https://github.com/muxinc/elements/commit/c041a72ce414fc52fcd90e22cc7730ef2e349c31)) | ||
- **playback-core, mux-player:** Add support to removeTextTrack. Remove all identified tracks on hls destroy. Add methods to mux-player. ([d090b06](https://github.com/muxinc/elements/commit/d090b060a8b8b3772e74762176af9881299bf894)) | ||
# [0.1.0-beta.23](https://github.com/muxinc/elements/compare/@mux/mux-player@0.1.0-beta.22...@mux/mux-player@0.1.0-beta.23) (2022-07-11) | ||
@@ -8,0 +24,0 @@ |
@@ -175,4 +175,7 @@ import '@mux/playback-core'; | ||
storyboardToken: string | undefined; | ||
addTextTrack(kind: TextTrackKind, label: string, lang?: string, id?: string): TextTrack | undefined; | ||
removeTextTrack(track: TextTrack): void; | ||
readonly textTracks: TextTrackList | undefined; | ||
} | ||
export declare function getVideoAttribute(el: MuxPlayerElement, name: string): string | null; | ||
export default MuxPlayerElement; |
export declare const Airplay: () => import("@github/template-parts").TemplateInstance; | ||
export declare const CaptionsOff: () => import("@github/template-parts").TemplateInstance; | ||
export declare const CaptionsOn: () => import("@github/template-parts").TemplateInstance; | ||
export declare const CastEnter: () => import("@github/template-parts").TemplateInstance; | ||
export declare const CastExit: () => import("@github/template-parts").TemplateInstance; | ||
export declare const FullscreenEnter: () => import("@github/template-parts").TemplateInstance; | ||
@@ -5,0 +7,0 @@ export declare const FullscreenExit: () => import("@github/template-parts").TemplateInstance; |
@@ -46,2 +46,3 @@ import MuxVideoElement from '@mux/mux-video'; | ||
playbackRate: number; | ||
defaultPlaybackRate: number; | ||
crossOrigin: string | null; | ||
@@ -51,2 +52,3 @@ autoplay: boolean; | ||
muted: boolean; | ||
defaultMuted: boolean; | ||
playsInline: boolean; | ||
@@ -53,0 +55,0 @@ preload: string | null; |
@@ -194,4 +194,7 @@ import '@mux/playback-core'; | ||
set storyboardToken(val: string | undefined); | ||
addTextTrack(kind: TextTrackKind, label: string, lang?: string, id?: string): TextTrack | undefined; | ||
removeTextTrack(track: TextTrack): void; | ||
get textTracks(): TextTrackList | undefined; | ||
} | ||
export declare function getVideoAttribute(el: MuxPlayerElement, name: string): string | null; | ||
export default MuxPlayerElement; |
export declare const Airplay: () => import("@github/template-parts").TemplateInstance; | ||
export declare const CaptionsOff: () => import("@github/template-parts").TemplateInstance; | ||
export declare const CaptionsOn: () => import("@github/template-parts").TemplateInstance; | ||
export declare const CastEnter: () => import("@github/template-parts").TemplateInstance; | ||
export declare const CastExit: () => import("@github/template-parts").TemplateInstance; | ||
export declare const FullscreenEnter: () => import("@github/template-parts").TemplateInstance; | ||
@@ -5,0 +7,0 @@ export declare const FullscreenExit: () => import("@github/template-parts").TemplateInstance; |
@@ -51,2 +51,4 @@ import type MuxVideoElement from '@mux/mux-video'; | ||
set playbackRate(val: number); | ||
get defaultPlaybackRate(): number; | ||
set defaultPlaybackRate(val: number); | ||
get crossOrigin(): string | null; | ||
@@ -60,2 +62,4 @@ set crossOrigin(val: string | null); | ||
set muted(val: boolean); | ||
get defaultMuted(): boolean; | ||
set defaultMuted(val: boolean); | ||
get playsInline(): boolean; | ||
@@ -62,0 +66,0 @@ set playsInline(val: boolean); |
{ | ||
"name": "@mux/mux-player", | ||
"version": "0.1.0-canary.10-958b850", | ||
"version": "0.1.0-canary.10-9766f4c", | ||
"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.1", | ||
"@mux/playback-core": "0.8.0", | ||
"media-chrome": "0.6.9" | ||
"@mux/mux-video": "0.8.3-canary.0-9766f4c", | ||
"@mux/playback-core": "0.9.1-canary.0-9766f4c", | ||
"media-chrome": "0.8.1" | ||
}, | ||
@@ -59,0 +59,0 @@ "devDependencies": { |
@@ -81,3 +81,2 @@ <p align="center"> | ||
stream-type="on-demand" | ||
controls | ||
></mux-player> | ||
@@ -99,3 +98,2 @@ </body> | ||
metadata-viewer-user-id="user-id-1234" | ||
controls | ||
> | ||
@@ -136,3 +134,2 @@ </mux-player> | ||
prefer-mse | ||
controls | ||
> | ||
@@ -168,6 +165,7 @@ </mux-player> | ||
| `autoplay` | `boolean` | Toggles whether or not media should auto-play when initially loaded | false | | ||
| `playback-rate` | `number` | Applies a multiplier to the media's playback rate, either speeding it up or slowing it down. | `1` | | ||
| `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 | | ||
@@ -185,10 +183,11 @@ ### Methods | ||
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | ||
| `autoplay` | A `Boolean` that reflects the autoplay HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption. | `false` | | ||
| `autoplay` | A `Boolean` that reflects the `autoplay` HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption. | `false` | | ||
| `buffered` <sub><sup>Read only</sup></sub> | Returns a `TimeRanges` object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed. | `undefined` | | ||
| `controls` | Is a Boolean that reflects the controls HTML attribute, indicating whether user interface items for controlling the resource should be displayed. | `false` | | ||
| `crossOrigin` | A DOMString indicating the CORS setting for this media element. | `null` | | ||
| `currentTime` | A double-precision floating-point value indicating the current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline. | `0` | | ||
| `defaultMuted` | Is a `Boolean` that reflects the `muted` HTML attribute, determines whether audio is muted by default. `true` if the audio output should be muted by default and `false` otherwise. | `false` | | ||
| `defaultPlaybackRate` | Is a double that reflects the `playbackrate` HTML attribute, it indicates the default playback rate for the media. | `1` | | ||
| `duration` <sub><sup>Read only</sup></sub> | A read-only double-precision floating-point value indicating the total duration of the media in seconds. If no media data is available, the returned value is `NaN`. If the media is of indefinite length (such as streamed live media, a WebRTC call's media, or similar), the value is `+Infinity`. | `NaN` | | ||
| `ended` <sub><sup>Read only</sup></sub> | Returns a `Boolean` that indicates whether the media element has finished playing. | `false` | | ||
| `loop` | A `Boolean` that reflects the loop HTML attribute, which indicates whether the media element should start over when it reaches the end. | `false` | | ||
| `loop` | A `Boolean` that reflects the `loop` HTML attribute, which indicates whether the media element should start over when it reaches the end. | `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. | `{}` | | ||
@@ -199,4 +198,4 @@ | `muted` | Is a `Boolean` that determines whether audio is muted. `true` if the audio is muted and `false` otherwise. | `false` | | ||
| `playsInline` | A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen. | `false` | | ||
| `preload` | Is a `DOMString` that reflects the preload HTML attribute, indicating what data should be preloaded, if any. Possible values are: `none`, `metadata`, `auto`. | `undefined` | | ||
| `src` | Is a `String` that reflects the src HTML attribute, which contains the URL of a media resource to use. | `undefined` | | ||
| `preload` | Is a `DOMString` that reflects the `preload` HTML attribute, indicating what data should be preloaded, if any. Possible values are: `none`, `metadata`, `auto`. | `undefined` | | ||
| `src` | Is a `String` that reflects the `src` HTML attribute, which contains the URL of a media resource to use. | `undefined` | | ||
| `startTime` | `Number` that specifies where in the media's timeline you want playback to start (in seconds). | `0` | | ||
@@ -208,2 +207,3 @@ | `thumbnailTime` | `Number` offset (in seconds) for the poster image you want to show before loading media. If no `thumbnailTime` is specified, `startTime` will be used by default. NOTE: This feature currently cannot be used with `tokens.thumbnail`. | `0` | | ||
| `volume` | Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest). | `1` | | ||
| `customDomain` | Is a `String` that assigns a custom domain to be used for Mux Video. | `undefined` | | ||
@@ -210,0 +210,0 @@ ### Events |
@@ -6,3 +6,3 @@ // import playback-core here to make sure that the polyfill is loaded | ||
import MuxVideoElement, { MediaError } from '@mux/mux-video'; | ||
import { Metadata, StreamTypes } from '@mux/playback-core'; | ||
import { Metadata, StreamTypes, addTextTrack, removeTextTrack } from '@mux/playback-core'; | ||
import VideoApiElement, { initVideoApi } from './video-api'; | ||
@@ -850,3 +850,11 @@ import { getPlayerVersion, isInLiveWindow, seekToLive, toPropName } from './helpers'; | ||
set metadata(val: Readonly<Metadata> | undefined) { | ||
if (this.media) this.media.metadata = val; | ||
if (!this.#isInit) { | ||
this.#init(); | ||
} | ||
// NOTE: This condition should never be met. If it is, there is a bug (CJP) | ||
if (!this.media) { | ||
logger.error('underlying media element missing when trying to set metadata. metadata will not be set.'); | ||
return; | ||
} | ||
this.media.metadata = val; | ||
} | ||
@@ -917,2 +925,18 @@ | ||
} | ||
addTextTrack(kind: TextTrackKind, label: string, lang?: string, id?: string) { | ||
const mediaEl = this.media?.nativeEl; | ||
if (!mediaEl) return; | ||
return addTextTrack(mediaEl, kind, label, lang, id); | ||
} | ||
removeTextTrack(track: TextTrack) { | ||
const mediaEl = this.media?.nativeEl; | ||
if (!mediaEl) return; | ||
return removeTextTrack(mediaEl, track); | ||
} | ||
get textTracks() { | ||
return this.media?.textTracks; | ||
} | ||
} | ||
@@ -919,0 +943,0 @@ |
@@ -6,2 +6,4 @@ // @ts-nocheck | ||
import captionsOnIcon from './icons/captions-on.svg'; | ||
import castEnter from './icons/cast-enter.svg'; | ||
import castExit from './icons/cast-exit.svg'; | ||
import fullscreenEnter from './icons/fullscreen-enter.svg'; | ||
@@ -23,2 +25,4 @@ import fullscreenExit from './icons/fullscreen-exit.svg'; | ||
export const CaptionsOn = () => createTemplateInstance(captionsOnIcon); | ||
export const CastEnter = () => createTemplateInstance(castEnter); | ||
export const CastExit = () => createTemplateInstance(castExit); | ||
export const FullscreenEnter = () => createTemplateInstance(fullscreenEnter); | ||
@@ -25,0 +29,0 @@ export const FullscreenExit = () => createTemplateInstance(fullscreenExit); |
@@ -188,2 +188,9 @@ import { MediaTheme } from 'media-chrome'; | ||
// prettier-ignore | ||
const MediaCastButton = () => html` | ||
<media-cast-button> | ||
${icons.CastEnter()} | ||
${icons.CastExit()} | ||
</media-cast-button>`; | ||
export const AudioVodChrome = (props: ThemeMuxTemplateProps) => html` | ||
@@ -197,4 +204,3 @@ <media-control-bar> | ||
<media-playback-rate-button></media-playback-rate-button> | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaAirplayButton()} ${MediaCastButton()} | ||
</media-control-bar> | ||
@@ -213,4 +219,3 @@ `; | ||
<media-playback-rate-button></media-playback-rate-button> | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaAirplayButton()} ${MediaCastButton()} | ||
</media-control-bar> | ||
@@ -225,4 +230,3 @@ `; | ||
<media-volume-range></media-volume-range> | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaAirplayButton()} ${MediaCastButton()} | ||
</media-control-bar> | ||
@@ -237,3 +241,3 @@ `; | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaCastButton()} | ||
${MediaPipButton()} | ||
@@ -256,3 +260,3 @@ </media-control-bar> | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaCastButton()} | ||
${MediaPipButton()} | ||
@@ -294,3 +298,3 @@ </media-control-bar> | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaCastButton()} | ||
${MediaPipButton()} | ||
@@ -312,3 +316,3 @@ ${MediaFullscreenButton()} | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaCastButton()} | ||
${MediaPipButton()} | ||
@@ -341,3 +345,3 @@ </media-control-bar> | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaCastButton()} | ||
${MediaPipButton()} | ||
@@ -356,3 +360,3 @@ ${MediaFullscreenButton()} | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaCastButton()} | ||
${MediaPipButton()} | ||
@@ -392,3 +396,3 @@ </media-control-bar> | ||
${MediaAirplayButton()} | ||
<media-cast-button></media-cast-button> | ||
${MediaCastButton()} | ||
${MediaPipButton()} | ||
@@ -395,0 +399,0 @@ ${MediaFullscreenButton()} |
@@ -31,7 +31,5 @@ import './media-theme-mux/media-theme-mux'; | ||
'--secondary-color': props.secondaryColor, | ||
'--mux-time-range-padding': props.secondaryColor ? '0' : null, | ||
'--media-range-track-border-radius': props.secondaryColor ? '0' : null, | ||
}) ?? false | ||
}" | ||
class="size-${props.playerSize}" | ||
class="size-${props.playerSize}${props.secondaryColor ? ' two-tone' : ''}" | ||
stream-type="${props.streamType}" | ||
@@ -54,5 +52,5 @@ player-size="${props.playerSize}" | ||
start-time="${props.startTime != null ? props.startTime : false}" | ||
metadata-video-id="${props.metadataVideoId ?? props.metadata?.video_id ?? false}" | ||
metadata-video-title="${props.metadataVideoTitle ?? props.metadata?.video_title ?? false}" | ||
metadata-viewer-user-id="${props.metadataViewerUserId ?? props.metadata?.viewer_user_id ?? false}" | ||
metadata-video-id="${props.metadataVideoId ?? false}" | ||
metadata-video-title="${props.metadataVideoTitle ?? false}" | ||
metadata-viewer-user-id="${props.metadataViewerUserId ?? false}" | ||
beacon-collection-domain="${props.beaconCollectionDomain ?? false}" | ||
@@ -59,0 +57,0 @@ player-software-name="${props.playerSoftwareName}" |
import { VideoEvents } from '@mux/mux-video'; | ||
import type MuxVideoElement from '@mux/mux-video'; | ||
import * as logger from './logger'; | ||
import { toNumberOrUndefined } from './utils'; | ||
@@ -102,2 +103,3 @@ export type CastOptions = { | ||
this.media.muted = newValue != null; | ||
this.media.defaultMuted = newValue != null; | ||
} | ||
@@ -117,2 +119,3 @@ return; | ||
this.media.playbackRate = val; | ||
this.media.defaultPlaybackRate = val; | ||
} | ||
@@ -222,2 +225,15 @@ return; | ||
get defaultPlaybackRate() { | ||
return toNumberOrUndefined(this.getAttribute(CustomVideoAttributes.PLAYBACKRATE)) ?? 1; | ||
} | ||
set defaultPlaybackRate(val) { | ||
if (val != null) { | ||
this.setAttribute(CustomVideoAttributes.PLAYBACKRATE, `${val}`); | ||
} else { | ||
// Remove boolean attribute if false, 0, '', null, undefined. | ||
this.removeAttribute(CustomVideoAttributes.PLAYBACKRATE); | ||
} | ||
} | ||
get crossOrigin() { | ||
@@ -258,6 +274,16 @@ return getVideoAttribute(this, AllowedVideoAttributes.CROSSORIGIN); | ||
get muted() { | ||
return this.media?.muted ?? false; | ||
} | ||
set muted(val) { | ||
if (this.media) { | ||
this.media.muted = Boolean(val); | ||
} | ||
} | ||
get defaultMuted() { | ||
return getVideoAttribute(this, AllowedVideoAttributes.MUTED) != null; | ||
} | ||
set muted(val) { | ||
set defaultMuted(val) { | ||
if (val) { | ||
@@ -264,0 +290,0 @@ this.setAttribute(AllowedVideoAttributes.MUTED, ''); |
@@ -286,2 +286,6 @@ import { fixture, assert, aTimeout, waitUntil } from '@open-wc/testing'; | ||
assert(player.defaultMuted, 'player.defaultMuted is true'); | ||
assert(muxVideo.defaultMuted, 'muxVideo.defaultMuted is true'); | ||
assert(nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is true'); | ||
player.removeAttribute('muted'); | ||
@@ -293,2 +297,6 @@ | ||
assert(!player.defaultMuted, 'player.defaultMuted is false'); | ||
assert(!muxVideo.defaultMuted, 'muxVideo.defaultMuted is false'); | ||
assert(!nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is false'); | ||
player.setAttribute('muted', ''); | ||
@@ -299,2 +307,6 @@ | ||
assert(nativeVideo.muted, 'nativeVideo.muted is true'); | ||
assert(player.defaultMuted, 'player.defaultMuted is true'); | ||
assert(muxVideo.defaultMuted, 'muxVideo.defaultMuted is true'); | ||
assert(nativeVideo.defaultMuted, 'nativeVideo.defaultMuted is true'); | ||
}); | ||
@@ -348,2 +360,24 @@ | ||
it('defaultPlaybackRate property behaves like expected', async function () { | ||
const player = await fixture(`<mux-player | ||
playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe" | ||
stream-type="on-demand" | ||
></mux-player>`); | ||
assert.equal(player.defaultPlaybackRate, 1); | ||
const muxVideo = player.media; | ||
const nativeVideo = muxVideo.shadowRoot.querySelector('video'); | ||
assert.equal(player.defaultPlaybackRate, 1, 'player.defaultPlaybackRate is 1'); | ||
assert.equal(muxVideo.defaultPlaybackRate, 1, 'muxVideo.defaultPlaybackRate is 1'); | ||
assert.equal(nativeVideo.defaultPlaybackRate, 1, 'nativeVideo.defaultPlaybackRate is 1'); | ||
player.defaultPlaybackRate = 0.7; | ||
assert.equal(player.defaultPlaybackRate, 0.7, 'player.defaultPlaybackRate is 0.7'); | ||
assert.equal(muxVideo.defaultPlaybackRate, 0.7, 'muxVideo.defaultPlaybackRate is 0.7'); | ||
assert.equal(nativeVideo.defaultPlaybackRate, 0.7, 'nativeVideo.defaultPlaybackRate is 0.7'); | ||
}); | ||
it("signing tokens generate correct asset URL's", async function () { | ||
@@ -350,0 +384,0 @@ // tokens expire in 10 years |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
1746868
76
14554
+ Added@mux/mux-video@0.8.3-canary.0-9766f4c(transitive)
+ Added@mux/playback-core@0.9.1-canary.0-9766f4c(transitive)
+ Addedmedia-chrome@0.8.1(transitive)
- Removed@mux/mux-video@0.8.1(transitive)
- Removed@mux/playback-core@0.8.0(transitive)
- Removedmedia-chrome@0.6.9(transitive)
Updatedmedia-chrome@0.8.1