From 4a97752326f4e436bbf7a46a55bf7a007d25554f Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Tue, 6 Feb 2024 14:42:30 -0800 Subject: [PATCH 01/10] show preview by default --- block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/block.json b/block.json index a3ac65b..d70ed29 100644 --- a/block.json +++ b/block.json @@ -37,7 +37,7 @@ }, "preview": { "type": "boolean", - "default": false + "default": true } }, "example": { From 9809e7f5790d70b075cc3f243bb657fd3f37d84f Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Tue, 6 Feb 2024 14:43:32 -0800 Subject: [PATCH 02/10] move preview toggle to block inspectorcontrol --- src/audio.js | 34 +--------------------------------- src/edit.js | 6 ++++++ 2 files changed, 7 insertions(+), 33 deletions(-) diff --git a/src/audio.js b/src/audio.js index e7fb91f..4fbac2b 100644 --- a/src/audio.js +++ b/src/audio.js @@ -6,15 +6,12 @@ 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 { __ } from '@wordpress/i18n'; -import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; import { useState } from '@wordpress/element'; import { View } from '@wordpress/primitives'; @@ -26,23 +23,13 @@ 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 } = props; const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, { allowedBlocks, renderAppender: false, } ); - function switchToPreview() { - setIsPreview( true ); - } - - function switchToList() { - setIsPreview( false ); - } - return (
{ 'blocks-audio-list' ) } > - - - - { __( 'Audio List', 'winamp-block' ) } - - - { __( 'Preview Player', 'winamp-block' ) } - - - - { isPreview ? ( ) : ( diff --git a/src/edit.js b/src/edit.js index 0246283..a35e356 100644 --- a/src/edit.js +++ b/src/edit.js @@ -280,6 +280,11 @@ function Edit( props ) { checked={ useCustomUrl } onChange={ () => setUseCustomUrl( ! useCustomUrl ) } /> + setAttributes( { preview: ! preview } ) } + /> { noticeUI } @@ -288,6 +293,7 @@ function Edit( props ) { currentSkin={ currentSkin } mediaPlaceholder={ mediaPlaceholder } blockProps={ blockProps } + preview={ preview } /> ); From 01198cfa61f8dc7afd41d583c20ac38aa0f3a57c Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Tue, 6 Feb 2024 14:44:07 -0800 Subject: [PATCH 03/10] remove preview image when adding block since we're setting the default value of preview to true, we can't return return the placeholder image early since it prevents the edit controls from rendering --- src/edit.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/edit.js b/src/edit.js index a35e356..b5e7560 100644 --- a/src/edit.js +++ b/src/edit.js @@ -61,17 +61,6 @@ function Edit( props ) { const { currentSkin, preview } = attributes; const [ useCustomUrl, setUseCustomUrl ] = useState( false ); - if ( preview && previewImg ) { - return ( - <> - { - - ); - } - const blockProps = useBlockProps(); // eslint-disable-line react-hooks/rules-of-hooks const { replaceInnerBlocks } = useDispatch( blockEditorStore ); // eslint-disable-line react-hooks/rules-of-hooks From a39a24ab1f1c4ab176162636b14e11b1b4a3e996 Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Tue, 6 Feb 2024 14:55:23 -0800 Subject: [PATCH 04/10] remove unused import --- src/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/edit.js b/src/edit.js index b5e7560..91b2a41 100644 --- a/src/edit.js +++ b/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 From 3fdf99b6a7e691013df68b4b00c2798859309d5d Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Tue, 6 Feb 2024 14:57:31 -0800 Subject: [PATCH 05/10] allow cypress to access iframed content --- tests/cypress/config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/cypress/config.js b/tests/cypress/config.js index aca1eb0..9079559 100644 --- a/tests/cypress/config.js +++ b/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', From 33d86552edb1bf27cd142b9835842c2246869205 Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Tue, 6 Feb 2024 15:01:35 -0800 Subject: [PATCH 06/10] remove unused import --- src/audio.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/audio.js b/src/audio.js index 4fbac2b..ba90e10 100644 --- a/src/audio.js +++ b/src/audio.js @@ -12,7 +12,6 @@ const useInnerBlocksProps = wp.blockEditor.useInnerBlocksProps ? wp.blockEditor.useInnerBlocksProps : wp.blockEditor.__experimentalUseInnerBlocksProps; -import { useState } from '@wordpress/element'; import { View } from '@wordpress/primitives'; /** From 4eb9f8fdee3e47530209905d97a391a1e1ea3aff Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Wed, 7 Feb 2024 18:18:32 -0800 Subject: [PATCH 07/10] move webamp component to insdie block --- src/audio.js | 4 +++- src/webamp.js | 41 ++++++++++++++++++++++++++++++++++++----- 2 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/audio.js b/src/audio.js index ba90e10..cd0e2fe 100644 --- a/src/audio.js +++ b/src/audio.js @@ -38,7 +38,9 @@ export const Audio = ( props ) => { ) } > { isPreview ? ( - +
+ +
) : ( <> { children } diff --git a/src/webamp.js b/src/webamp.js index 6ef9bc5..5dfdab3 100644 --- a/src/webamp.js +++ b/src/webamp.js @@ -7,7 +7,7 @@ import Webamp from 'webamp'; 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,16 +40,47 @@ export const WebAmp = ( props ) => { 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 instaed 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 ] ); From 620fb397a759060795cc5ffd107e304e4eef3de3 Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Wed, 7 Feb 2024 18:19:27 -0800 Subject: [PATCH 08/10] add toolbar controls to toggle between preview and media management --- src/audio.js | 30 ++++++++++++++++++++++++++++-- src/edit.js | 1 + 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/audio.js b/src/audio.js index cd0e2fe..917664b 100644 --- a/src/audio.js +++ b/src/audio.js @@ -6,13 +6,15 @@ 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'; /** * Internal dependencies @@ -22,7 +24,7 @@ import WebAmp from './webamp'; const allowedBlocks = [ 'core/audio' ]; export const Audio = ( props ) => { - const { audio, currentSkin, mediaPlaceholder, blockProps, preview: isPreview } = props; + const { audio, currentSkin, mediaPlaceholder, blockProps, preview: isPreview, setAttributes } = props; const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, { allowedBlocks, @@ -36,7 +38,31 @@ export const Audio = ( props ) => { blockProps.className, 'blocks-audio-list' ) } + > + + + { isPreview ? ( + { + setAttributes( { preview: ! isPreview } ); + } } + > + { __( 'Manage Media', 'winamp-block' ) } + + ) : ( + { + setAttributes( { preview: ! isPreview } ); + } } + > + { __( 'Show Preview', 'winamp-block' ) } + + ) } + + { isPreview ? (
diff --git a/src/edit.js b/src/edit.js index 91b2a41..a5ea2c5 100644 --- a/src/edit.js +++ b/src/edit.js @@ -282,6 +282,7 @@ function Edit( props ) { mediaPlaceholder={ mediaPlaceholder } blockProps={ blockProps } preview={ preview } + setAttributes={ setAttributes } /> ); From 89e47d6eaa03b21d116cb5d9e61bf136e8dc4c5c Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Wed, 7 Feb 2024 18:19:51 -0800 Subject: [PATCH 09/10] updates tests --- tests/cypress/e2e/block.test.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/tests/cypress/e2e/block.test.js b/tests/cypress/e2e/block.test.js index 0d398bc..7eab9f4 100644 --- a/tests/cypress/e2e/block.test.js +++ b/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' ); + }); } ); -} ); +} ); \ No newline at end of file From 3842f704a2dfe2f81119320b53c5dc6a49c7292e Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Mon, 12 Feb 2024 11:22:09 -0700 Subject: [PATCH 10/10] Fix typo --- src/webamp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webamp.js b/src/webamp.js index 5dfdab3..265ba62 100644 --- a/src/webamp.js +++ b/src/webamp.js @@ -75,7 +75,7 @@ export const WebAmp = ( props ) => { } ); return () => { - // Hide the player instaed of destroying it. This allows the player + // 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 ) {