diff --git a/packages/vidstack/src/core/api/player-props.ts b/packages/vidstack/src/core/api/player-props.ts index fb12382c2..e87eabf17 100644 --- a/packages/vidstack/src/core/api/player-props.ts +++ b/packages/vidstack/src/core/api/player-props.ts @@ -12,6 +12,7 @@ import type { MediaLoadingStrategy, MediaPosterLoadingStrategy } from './types'; export const mediaPlayerProps: MediaPlayerProps = { artist: '', + artwork: null, autoplay: false, autoPlay: false, clipStartTime: 0, @@ -60,6 +61,7 @@ export interface MediaPlayerProps extends Pick< Writable, | 'artist' + | 'artwork' | 'autoPlay' | 'clipStartTime' | 'clipEndTime' diff --git a/packages/vidstack/src/core/api/player-state.ts b/packages/vidstack/src/core/api/player-state.ts index 604ec7daa..6e4181130 100644 --- a/packages/vidstack/src/core/api/player-state.ts +++ b/packages/vidstack/src/core/api/player-state.ts @@ -22,6 +22,7 @@ export interface MediaPlayerState extends MediaState {} export const mediaState = new State({ artist: '', + artwork: null, audioTrack: null, audioTracks: [], autoPlay: false, @@ -748,6 +749,10 @@ export interface MediaState { * layout and it will be included in the Media Session API. */ artist: string; + /** + * Images to be included in the Media Session API. + */ + artwork: MediaImage[] | null; /** * The list of all available text tracks. */ diff --git a/packages/vidstack/src/core/state/media-state-sync.ts b/packages/vidstack/src/core/state/media-state-sync.ts index 5f9c77296..f45f17904 100644 --- a/packages/vidstack/src/core/state/media-state-sync.ts +++ b/packages/vidstack/src/core/state/media-state-sync.ts @@ -13,7 +13,7 @@ export class MediaStateSync extends MediaPlayerController { if (__SERVER__) return; if (__DEV__) effect(this._watchLogLevel.bind(this)); - effect(this._watchArtist.bind(this)); + effect(this._watchMetadata.bind(this)); effect(this._watchAutoplay.bind(this)); effect(this._watchClipTimes.bind(this)); effect(this._watchControls.bind(this)); @@ -71,9 +71,10 @@ export class MediaStateSync extends MediaPlayerController { this.$state.logLevel.set(this.$props.logLevel()); } - private _watchArtist() { - const { artist } = this.$props; + private _watchMetadata() { + const { artist, artwork } = this.$props; this.$state.artist.set(artist()); + this.$state.artwork.set(artwork()); } private _watchTitle() { diff --git a/packages/vidstack/src/core/state/navigator-media-session.ts b/packages/vidstack/src/core/state/navigator-media-session.ts index 1fece2358..eccdb41fc 100644 --- a/packages/vidstack/src/core/state/navigator-media-session.ts +++ b/packages/vidstack/src/core/state/navigator-media-session.ts @@ -29,11 +29,11 @@ export class NavigatorMediaSession extends MediaPlayerController { } protected _onMetadataChange() { - const { title, artist, poster } = this.$state; + const { title, artist, artwork, poster } = this.$state; navigator.mediaSession.metadata = new MediaMetadata({ title: title(), artist: artist(), - artwork: [{ src: poster() }], + artwork: artwork() ?? [{ src: poster() }], }); }