Fix playlist artwork removal on track switch

packages/block-library/src/playlist/view.js

@@ -81,26 +81,34 @@ function initPlayer( ref, track, shouldAutoPlay, context ) {
 
 	// If a player already exists, load the new track without recreating.
 	if ( existing?.instance ) {
-		existing.instance
-			.loadTrack( track.url, track.title, track.artist, {
-				artwork: track.image,
-			} )
-			.then( () => {
-				existing.url = track.url;
-				if ( existing.instance.artworkEl ) {
-					existing.instance.artworkEl.alt = track.imageAlt || '';
-				}
-				// loadTrack() preserves the previous explicit seekLabel option.
-				updateSeekControlLabel(
-					existing.instance,
-					track.title || ref.dataset.labelSeek
-				);
-				if ( shouldAutoPlay ) {
-					existing.instance.play()?.catch( logPlayError );
-				}
-			} )
-			.catch( logPlayError );
-		return;
+		const shouldRecreatePlayer =
+			!! existing.instance.artworkEl !== !! track.image;
+
+		if ( shouldRecreatePlayer ) {
+			existing.destroy?.();
+			playerState.delete( ref );
+		} else {
+			existing.instance
+				.loadTrack( track.url, track.title, track.artist, {
+					artwork: track.image,
+				} )
+				.then( () => {
+					existing.url = track.url;
+					if ( existing.instance.artworkEl ) {
+						existing.instance.artworkEl.alt = track.imageAlt || '';
+					}
+					// loadTrack() preserves the previous explicit seekLabel option.
+					updateSeekControlLabel(
+						existing.instance,
+						track.title || ref.dataset.labelSeek
+					);
+					if ( shouldAutoPlay ) {
+						existing.instance.play()?.catch( logPlayError );
+					}
+				} )
+				.catch( logPlayError );
+			return;
+		}
 	}
 
 	// Read translated labels from server-rendered data attributes.

test/e2e/specs/editor/blocks/playlist.spec.js

@@ -12,14 +12,22 @@ const audioPath = path.join(
 	__dirname,
 	'../../../assets/playlist-e2e-test.wav'
 );
+const imagePath = path.join(
+	__dirname,
+	'../../../assets/10x10_e2e_test_image_green.png'
+);
 
 test.describe( 'Playlist block', () => {
-	let uploadedMedia;
+	let uploadedAudio;
+	let uploadedSecondAudio;
+	let uploadedImage;
 
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.deleteAllMedia();
 
-		uploadedMedia = await requestUtils.uploadMedia( audioPath );
+		uploadedAudio = await requestUtils.uploadMedia( audioPath );
+		uploadedSecondAudio = await requestUtils.uploadMedia( audioPath );
+		uploadedImage = await requestUtils.uploadMedia( imagePath );
 	} );
 
 	test.afterEach( async ( { requestUtils } ) => {
@@ -57,9 +65,9 @@ test.describe( 'Playlist block', () => {
 		const trackTitle = 'Keyboard Test Track';
 		const playlistAttributes = { currentTrack: uniqueId };
 		const trackAttributes = {
-			id: uploadedMedia.id,
+			id: uploadedAudio.id,
 			uniqueId,
-			src: uploadedMedia.source_url,
+			src: uploadedAudio.source_url,
 			title: trackTitle,
 			artist: 'Test Artist',
 			length: '0:12',
@@ -170,4 +178,77 @@ test.describe( 'Playlist block', () => {
 		// Focus should still be on the slider after seeking.
 		await expect( seekControl ).toBeFocused();
 	} );
+
+	test( 'removes player artwork when switching to a track without an image on the frontend', async ( {
+		page,
+		requestUtils,
+	} ) => {
+		const trackWithImageId = 'playlist-track-with-image';
+		const trackWithoutImageId = 'playlist-track-without-image';
+		const trackWithoutImageTitle = 'Track without artwork';
+		const playlistAttributes = { currentTrack: trackWithImageId };
+		const trackWithImageAttributes = {
+			id: uploadedAudio.id,
+			uniqueId: trackWithImageId,
+			src: uploadedAudio.source_url,
+			title: 'Track with artwork',
+			artist: 'Test Artist',
+			image: uploadedImage.source_url,
+			imageAlt: 'Green album cover',
+			length: '0:12',
+		};
+		const trackWithoutImageAttributes = {
+			id: uploadedSecondAudio.id,
+			uniqueId: trackWithoutImageId,
+			src: uploadedSecondAudio.source_url,
+			title: trackWithoutImageTitle,
+			artist: 'Test Artist',
+			length: '0:12',
+		};
+		const playlistComment = `<!-- wp:playlist ${ JSON.stringify(
+			playlistAttributes
+		) } -->`;
+		const firstTrackComment = `<!-- wp:playlist-track ${ JSON.stringify(
+			trackWithImageAttributes
+		) } /-->`;
+		const secondTrackComment = `<!-- wp:playlist-track ${ JSON.stringify(
+			trackWithoutImageAttributes
+		) } /-->`;
+		const post = await requestUtils.createPost( {
+			title: 'Playlist artwork removal',
+			status: 'publish',
+			content: [
+				playlistComment,
+				'<figure class="wp-block-playlist">',
+				'<ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers">',
+				firstTrackComment,
+				secondTrackComment,
+				'</ol></figure>',
+				'<!-- /wp:playlist -->',
+			].join( '' ),
+		} );
+
+		await page.goto( post.link );
+
+		const player = page.locator( '.wp-block-playlist__waveform-player' );
+		const playerArtwork = player.locator( '.waveform-artwork' );
+
+		await expect( playerArtwork ).toHaveAttribute(
+			'src',
+			uploadedImage.source_url
+		);
+		await expect( playerArtwork ).toHaveAttribute(
+			'alt',
+			'Green album cover'
+		);
+
+		await page
+			.getByRole( 'button', { name: /Track without artwork/ } )
+			.click();
+
+		await expect(
+			player.getByRole( 'slider', { name: trackWithoutImageTitle } )
+		).toBeVisible();
+		await expect( playerArtwork ).toHaveCount( 0 );
+	} );
 } );