feat(player): add new artwork player prop

vidstack · Mar 18, 2024 · c0a4eaf · c0a4eaf
1 parent e36958c
commit c0a4eaf
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git 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<MediaState>,
     | '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
@@ -22,6 +22,7 @@ export interface MediaPlayerState extends MediaState {}
 
 export const mediaState = new State<MediaState>({
   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
@@ -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
@@ -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() }],
     });
   }