From 31fcbd1e2adfb967a602a2ea75c701c4fd9e25a0 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 17 Oct 2023 18:58:03 +0900 Subject: [PATCH] Add SPN key indicator (#21) --- piano-block.php | 1 + src/block.json | 3 ++ src/components/controls/index.tsx | 25 +++++++++- src/components/keyboard/index.tsx | 50 ++++++++++--------- src/components/keyboard/style.scss | 2 +- src/components/piano/index.tsx | 12 ++++- src/constants.ts | 17 +++++++ src/view.tsx | 4 ++ ...o-sound-using-only-keyboard-1-chromium.txt | 2 +- test/e2e/test.spec.ts | 6 +++ 10 files changed, 93 insertions(+), 29 deletions(-) diff --git a/piano-block.php b/piano-block.php index 32d6ad8..c1ac6c0 100644 --- a/piano-block.php +++ b/piano-block.php @@ -43,6 +43,7 @@ function piano_block_render_callback( $attributes ) { $instrument = ! empty( $attributes['instrument'] ) ? $attributes['instrument'] : 'acoustic-piano'; $synthesizer_setting = ! empty( $attributes['synthesizerSetting'] ) ? $attributes['synthesizerSetting'] : array(); $key_layout = ! empty( $attributes['keyLayout'] ) ? $attributes['keyLayout'] : 'qwerty-1'; + $key_indicator = ! empty( $attributes['keyIndicator'] ) ? $attributes['keyIndicator'] : 'key'; wp_enqueue_style( 'wp-components' ); diff --git a/src/block.json b/src/block.json index d3a5cd7..d25b6e4 100644 --- a/src/block.json +++ b/src/block.json @@ -28,6 +28,9 @@ }, "keyLayout": { "type": "string" + }, + "keyIndicator": { + "type": "string" } }, "supports": { diff --git a/src/components/controls/index.tsx b/src/components/controls/index.tsx index 534afe3..d7cb3cc 100644 --- a/src/components/controls/index.tsx +++ b/src/components/controls/index.tsx @@ -26,6 +26,7 @@ import { INSTRUMENTS, DEFAULT_ENVELOPE, OCTAVE_OFFSETS, + KEY_INDICATORS, MIN_VOLUME, MAX_VOLUME, } from '../../constants'; @@ -42,8 +43,15 @@ type Props = { }; const Controls = ( { settings, piano, onChange }: Props ) => { - const { volume, useSustainPedal, octaveOffset, instrument, synthesizerSetting, keyLayout } = - settings; + const { + volume, + useSustainPedal, + octaveOffset, + instrument, + synthesizerSetting, + keyLayout, + keyIndicator, + } = settings; const [ isHelpOpen, setIsHelpOpen ] = useState< boolean >( false ); const [ isSynthesizerSettingOpen, setIsSynthesizerSettingOpen ] = useState< boolean >( false ); @@ -73,6 +81,10 @@ const Controls = ( { settings, piano, onChange }: Props ) => { onChange( { keyLayout: newKeyLayout } ); }; + const onKeyIndicatorChange = ( newKeyIndicator: string ) => { + onChange( { keyIndicator: newKeyIndicator } ); + }; + const onSynthesizerSettingChange = ( newSynthesizerSetting: BlockAttributes[ 'synthesizerSetting' ] ) => { @@ -166,6 +178,15 @@ const Controls = ( { settings, piano, onChange }: Props ) => { } ) } onChange={ onKeyLayoutChange } /> + { + return { label, value }; + } ) } + onChange={ onKeyIndicatorChange } + /> - ) ) } + { keys.map( ( key, index ) => { + return ( + + ); + } ) } ); diff --git a/src/components/keyboard/style.scss b/src/components/keyboard/style.scss index fafd434..5f5a492 100644 --- a/src/components/keyboard/style.scss +++ b/src/components/keyboard/style.scss @@ -18,7 +18,7 @@ justify-content: center; padding: 0; padding-bottom: 8px; - font-size: 13px; + font-size: 12px; font-weight: normal; text-transform: uppercase; diff --git a/src/components/piano/index.tsx b/src/components/piano/index.tsx index ed03715..3916640 100644 --- a/src/components/piano/index.tsx +++ b/src/components/piano/index.tsx @@ -27,8 +27,15 @@ type Props = { const Piano = ( { settings, onChange }: Props ) => { const { assetsUrl } = window.pianoBlockVars; - const { volume, useSustainPedal, octaveOffset, instrument, synthesizerSetting, keyLayout } = - settings; + const { + volume, + useSustainPedal, + octaveOffset, + instrument, + synthesizerSetting, + keyLayout, + keyIndicator, + } = settings; const [ piano, setPiano ] = useState< Tone.Sampler | Tone.PolySynth >(); const [ isReady, setIsReady ] = useState< boolean >( false ); const [ activeKeys, setActiveKeys ] = useState< Key[] >( [] ); @@ -190,6 +197,7 @@ const Piano = ( { settings, onChange }: Props ) => { const keyboardProps = { activeKeys, keyLayout, + keyIndicator, onKeyClick, }; diff --git a/src/constants.ts b/src/constants.ts index 8d33e4d..d401852 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -21,6 +21,7 @@ export interface BlockAttributes { }; }; keyLayout: string; + keyIndicator: string; } export const MIN_VOLUME = -10 as const; @@ -48,6 +49,7 @@ export const DEFAULT_SETTINGS = { envelope: DEFAULT_ENVELOPE, }, keyLayout: 'qwerty-1', + keyIndicator: 'key', }; export const INSTRUMENTS = [ @@ -328,6 +330,21 @@ export const EMVELOPE_CONTROLS = [ }, ] as const; +export const KEY_INDICATORS = [ + { + label: __( 'Keyboard key', 'piano-block' ), + value: 'key', + }, + { + label: __( 'SPN', 'piano-block' ), + value: 'spn', + }, + { + label: __( 'None', 'piano-block' ), + value: '', + }, +] as const; + export interface Instrument { label: string; value: ( typeof INSTRUMENTS )[ number ][ 'value' ]; diff --git a/src/view.tsx b/src/view.tsx index 06ab8bb..5323065 100644 --- a/src/view.tsx +++ b/src/view.tsx @@ -43,6 +43,9 @@ domReady( function () { const octaveOffset = parseFloat( domNode.getAttribute( 'data-octave-offset' ) || '' ); const instrument = domNode.getAttribute( 'data-instrument' ) || DEFAULT_SETTINGS.instrument; const keyLayout = domNode.getAttribute( 'data-key-layout' ) || DEFAULT_SETTINGS.keyLayout; + const keyIndicator = + domNode.getAttribute( 'data-key-indicator' ) || DEFAULT_SETTINGS.keyIndicator; + const synthesizerSetting = domNode.getAttribute( 'data-synthesizer-setting' ); const parsedSynthesizerSetting = synthesizerSetting ? JSON.parse( synthesizerSetting ) @@ -64,6 +67,7 @@ domReady( function () { octaveOffset, instrument, keyLayout, + keyIndicator, synthesizerSetting: normalizedSynthesizerSetting, showOnFront: true, }; diff --git a/test/e2e/__snapshots__/Block-should-update-attributes-related-to-sound-using-only-keyboard-1-chromium.txt b/test/e2e/__snapshots__/Block-should-update-attributes-related-to-sound-using-only-keyboard-1-chromium.txt index 11a17e2..7e1f46b 100644 --- a/test/e2e/__snapshots__/Block-should-update-attributes-related-to-sound-using-only-keyboard-1-chromium.txt +++ b/test/e2e/__snapshots__/Block-should-update-attributes-related-to-sound-using-only-keyboard-1-chromium.txt @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/test/e2e/test.spec.ts b/test/e2e/test.spec.ts index 56f732c..e1df46b 100644 --- a/test/e2e/test.spec.ts +++ b/test/e2e/test.spec.ts @@ -56,6 +56,12 @@ test.describe( 'Block', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowDown' ); await page.keyboard.press( 'Enter' ); + // Key Indicator + await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.press( 'Enter' ); + expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } );