Enhancements

block.json

@@ -37,7 +37,7 @@
 		},
 		"preview": {
 			"type": "boolean",
-			"default": false
+			"default": true
 		}
 	},
 	"example": {

src/audio.js

@@ -7,16 +7,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { BlockControls } from '@wordpress/block-editor';
-
 // since we want to support both 5.6+ & 5.9 we need to conditional import it this way
 const useInnerBlocksProps = wp.blockEditor.useInnerBlocksProps
 	? wp.blockEditor.useInnerBlocksProps
 	: wp.blockEditor.__experimentalUseInnerBlocksProps;
 
+import { View } from '@wordpress/primitives';
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -26,52 +24,49 @@ import WebAmp from './webamp';
 const allowedBlocks = [ 'core/audio' ];
 
 export const Audio = ( props ) => {
-	const { audio, currentSkin, mediaPlaceholder, blockProps } = props;
-
-	const [ isPreview, setIsPreview ] = useState();
+	const { audio, currentSkin, mediaPlaceholder, blockProps, preview: isPreview, setAttributes } = props;
 
 	const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
 		allowedBlocks,
 		renderAppender: false,
 	} );
 
-	function switchToPreview() {
-		setIsPreview( true );
-	}
-
-	function switchToList() {
-		setIsPreview( false );
-	}
-
 	return (
 		<figure
 			{ ...innerBlocksProps }
 			className={ classnames(
 				blockProps.className,
 				'blocks-audio-list'
 			) }
+
 		>
 			<BlockControls>
 				<ToolbarGroup>
-					<ToolbarButton
-						className="components-tab-button"
-						isPressed={ ! isPreview }
-						onClick={ switchToList }
-					>
-						<span>{ __( 'Audio List', 'winamp-block' ) }</span>
-					</ToolbarButton>
-					<ToolbarButton
-						className="components-tab-button"
-						isPressed={ isPreview }
-						onClick={ switchToPreview }
-					>
-						<span>{ __( 'Preview Player', 'winamp-block' ) }</span>
-					</ToolbarButton>
+					{ isPreview ? (
+						<ToolbarButton
+							className="components-tab-button winamp-show-media"
+							onClick={ () => {
+								setAttributes( { preview: ! isPreview } );
+							} }
+						>
+							<span>{ __( 'Manage Media', 'winamp-block' ) }</span>
+						</ToolbarButton>
+					) : (
+						<ToolbarButton
+							className="components-tab-button winamp-show-preview"
+							onClick={ () => {
+								setAttributes( { preview: ! isPreview } );
+							} }
+						>
+							<span>{ __( 'Show Preview', 'winamp-block' ) }</span>
+						</ToolbarButton>
+					) }
 				</ToolbarGroup>
 			</BlockControls>
-
 			{ isPreview ? (
-				<WebAmp audio={ audio } currentSkin={ currentSkin } />
+				<div id="webamp-container">
+					<WebAmp audio={ audio } currentSkin={ currentSkin } preview={ isPreview } />
+				</div>
 			) : (
 				<>
 					{ children }

src/edit.js

@@ -30,7 +30,6 @@ import { createBlobURL } from '@wordpress/blob';
  */
 import './editor.scss';
 import Audio from './audio';
-import previewImg from '../assets/default-player.jpg';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 const PLACEHOLDER_TEXT = Platform.isNative
@@ -61,17 +60,6 @@ function Edit( props ) {
 	const { currentSkin, preview } = attributes;
 	const [ useCustomUrl, setUseCustomUrl ] = useState( false );
 
-	if ( preview && previewImg ) {
-		return (
-			<>
-				<img
-					src={ previewImg }
-					alt={ __( 'Winamp Player', 'winamp-block' ) }
-				/>
-			</>
-		);
-	}
-
 	const blockProps = useBlockProps(); // eslint-disable-line react-hooks/rules-of-hooks
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore ); // eslint-disable-line react-hooks/rules-of-hooks
 
@@ -280,6 +268,11 @@ function Edit( props ) {
 						checked={ useCustomUrl }
 						onChange={ () => setUseCustomUrl( ! useCustomUrl ) }
 					/>
+					<ToggleControl
+						label={ __( 'Show Preview?', 'winamp-block' ) }
+						checked={ preview }
+						onChange={ () => setAttributes( { preview: ! preview } ) }
+					/>
 				</PanelBody>
 			</InspectorControls>
 			{ noticeUI }
@@ -288,6 +281,8 @@ function Edit( props ) {
 				currentSkin={ currentSkin }
 				mediaPlaceholder={ mediaPlaceholder }
 				blockProps={ blockProps }
+				preview={ preview }
+				setAttributes={ setAttributes }
 			/>
 		</>
 	);

src/webamp.js

@@ -7,7 +7,7 @@
 import milkdropOptions from './milkdrop';
 
 export const WebAmp = ( props ) => {
-	const { audio = [], currentSkin = '' } = props;
+	const { audio = [], currentSkin = '', preview = true } = props;
 	const divRef = useRef( null );
 	const [ webamp, setWebamp ] = useState( null );
 
@@ -40,18 +40,49 @@
 		const player = new Webamp( { ...options, ...milkdropOptions } );
 		setWebamp( player );
 		player.renderWhenReady( divRef.current ).then( () => {
-			const webAmpContainer = document.getElementById( 'webamp' );
+			const webAmp = document.getElementById( 'webamp' );
+
+			// Move the Webamp player markup into the block
+			// so that the block can be interacted with while the player is visible
+			const webampContainer = document.getElementById( 'webamp-container' );
+
+			if ( webampContainer && webAmp ) {
+				webampContainer.appendChild( webAmp );
+			}
+
+			// This is a hack to move the UI elements into the correct position. The
+			// Webamp library tries to center the player in the window, but we want it
+			// to be tucked neatly in the block.
+			const webAmpUI = document.querySelectorAll( '#webamp > div > div > div' );
+			const mapping = {
+				0: 'translate( 0px, 0px )',
+				1: 'translate( 0px, 232px )',
+				2: 'translate( 0px, 116px )',
+				3: 'translate( 275px, 0px )',
+			};
+
+			// make sure all the UI elements are available to manipulate
+			if ( webAmpUI.length === 4 ) {
+				webAmpUI.forEach( ( ui, i ) => {
+					ui.style.transform = mapping[ i ];
+				} );
+			}
 
 			// Add is loaded class after artifical delay to reduce page jank
-			if ( webAmpContainer ) {
-				webAmpContainer.classList.add( 'is-loaded' );
+			if ( webAmp ) {
+				webAmp.classList.add( 'is-loaded' );
 			}
 		} );
 
 		return () => {
-			player.dispose();
+			// Hide the player instead of destroying it. This allows the player
+			// to persist between previews and playlist modification.
+			const webampContainer = document.getElementById( 'webamp' );
+			if ( webampContainer ) {
+				webampContainer.style.display = ! preview ? 'none' : 'block';
+			}
 		};
 	}, [ divRef.current ] );
 
 	// Change the skin as it changes
 	useEffect( () => {
@@ -73,7 +104,7 @@
 				'https://cdn.webampskins.org/skins/5e4f10275dcb1fb211d4a8b4f1bda236.wsz'
 			);
 		}
 	}, [ currentSkin ] );
 
 	return <div ref={ divRef } />;
 };

tests/cypress/config.js

@@ -3,6 +3,7 @@ const { loadConfig } = require( '@wordpress/env/lib/config' );
 const getCacheDirectory = require('@wordpress/env/lib/config/get-cache-directory');
 
 module.exports = defineConfig( {
+	chromeWebSecurity: false,
 	fixturesFolder: 'tests/cypress/fixtures',
 	screenshotsFolder: 'tests/cypress/screenshots',
 	videosFolder: 'tests/cypress/videos',

tests/cypress/e2e/block.test.js

@@ -38,9 +38,19 @@ describe( 'Admin can publish posts with winamp block', () => {
 		}).then( post => {
 			cy.visit( `/wp-admin/post.php?post=${post.id}&action=edit` );
 			// verify page contains new block
-			cy.get( '.wp-block-audio audio' )
+			cy.get( '.wp-block-tenup-winamp-block' );
+			// toggle to 'Manage Media' view
+			cy.get( '.components-tab-button.winamp-show-media').click();
+			// Confirm the audio file is present
+			cy.get('.wp-block-audio audio')				
 				.should( 'have.attr', 'src' )
 				.and( 'include', 'example' );
+			// toggle to 'Show Preview' view
+			cy.get( '.components-tab-button.winamp-show-preview').click();
+			// confirm webamp is showing
+			cy.get( '#webamp' )
+				.should( 'have.css', 'display', 'block' );
+
 		});
 	} );
-} );
+} );