Add SPN key indicator (#21)

t-hamano · Oct 17, 2023 · 31fcbd1 · 31fcbd1
1 parent 6dd91b7
commit 31fcbd1
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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 }
 			/>
+			<SelectControl
+				className="piano-block-controls__control"
+				label={ __( 'Key Indicator', 'piano-block' ) }
+				value={ keyIndicator }
+				options={ KEY_INDICATORS.map( ( { label, value } ) => {
+					return { label, value };
+				} ) }
+				onChange={ onKeyIndicatorChange }
+			/>
 			<Button
 				className="piano-block-controls__help"
 				label={ __( 'Help', 'piano-block' ) }

diff --git a/src/components/keyboard/index.tsx b/src/components/keyboard/index.tsx
@@ -17,10 +17,11 @@ import type { Key } from '../../constants';
 type Props = {
 	activeKeys: Key[];
 	keyLayout: string;
+	keyIndicator: string;
 	onKeyClick: ( note: string, octave: number ) => void;
 };
 
-const Keyboard = ( { activeKeys, keyLayout, onKeyClick }: Props ) => {
+const Keyboard = ( { activeKeys, keyLayout, keyIndicator, onKeyClick }: Props ) => {
 	const keys =
 		KEYBOARD_LAYOUTS.find( ( { value } ) => value === keyLayout )?.keys ||
 		KEYBOARD_LAYOUTS[ 0 ].keys;
@@ -33,28 +34,31 @@ const Keyboard = ( { activeKeys, keyLayout, onKeyClick }: Props ) => {
 	return (
 		<div className="piano-block-keyboard">
 			<div className="piano-block-keyboard__inner">
-				{ keys.map( ( key, index ) => (
-					<button
-						key={ index }
-						tabIndex={ -1 }
-						className={ classnames( 'piano-block-keyboard__key', {
-							'piano-block-keyboard__key--white': ! key.isBlackKey,
-							'piano-block-keyboard__key--black': key.isBlackKey,
-							'is-pressed': activeKeys.some(
-								( { note, octave } ) => key.note === note && key.octave === octave
-							),
-						} ) }
-						aria-label={ sprintf(
-							/* translators: %s is replaced with the key name. */
-							__( 'Note: %s', 'piano-block' ),
-							key.note + key.octave
-						) }
-						type="button"
-						onClick={ () => onClick( key.note, key.octave ) }
-					>
-						{ key.name.join( ' ' ) }
-					</button>
-				) ) }
+				{ keys.map( ( key, index ) => {
+					return (
+						<button
+							key={ index }
+							tabIndex={ -1 }
+							className={ classnames( 'piano-block-keyboard__key', {
+								'piano-block-keyboard__key--white': ! key.isBlackKey,
+								'piano-block-keyboard__key--black': key.isBlackKey,
+								'is-pressed': activeKeys.some(
+									( { note, octave } ) => key.note === note && key.octave === octave
+								),
+							} ) }
+							aria-label={ sprintf(
+								/* translators: %s is replaced with the key name. */
+								__( 'Note: %s', 'piano-block' ),
+								key.note + key.octave
+							) }
+							type="button"
+							onClick={ () => onClick( key.note, key.octave ) }
+						>
+							{ keyIndicator === 'key' && key.name.join( ' ' ) }
+							{ keyIndicator === 'spn' && `${ key.note }${ key.octave }` }
+						</button>
+					);
+				} ) }
 			</div>
 		</div>
 	);

diff --git 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
@@ -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
@@ -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
@@ -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/...hots__/Block-should-update-attributes-related-to-sound-using-only-keyboard-1-chromium.txt b/...hots__/Block-should-update-attributes-related-to-sound-using-only-keyboard-1-chromium.txt
@@ -1 +1 @@
-<!-- wp:piano-block/piano {"volume":-0.3,"octaveOffset":-1,"instrument":"synthesizer","useSustainPedal":false,"showOnFront":false,"synthesizerSetting":{"oscillator":{"type":"sawtooth"},"envelope":{"attack":0.4,"decay":1.1,"sustain":0.6,"release":1.6}},"keyLayout":"qwerty-2"} /-->
+<!-- wp:piano-block/piano {"volume":-0.3,"octaveOffset":-1,"instrument":"synthesizer","useSustainPedal":false,"showOnFront":false,"synthesizerSetting":{"oscillator":{"type":"sawtooth"},"envelope":{"attack":0.4,"decay":1.1,"sustain":0.6,"release":1.6}},"keyLayout":"qwerty-2","keyIndicator":"spn"} /-->
diff --git 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();
 	} );
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!-- wp:piano-block/piano {"volume":-0.3,"octaveOffset":-1,"instrument":"synthesizer","useSustainPedal":false,"showOnFront":false,"synthesizerSetting":{"oscillator":{"type":"sawtooth"},"envelope":{"attack":0.4,"decay":1.1,"sustain":0.6,"release":1.6}},"keyLayout":"qwerty-2"} /-->
		<!-- wp:piano-block/piano {"volume":-0.3,"octaveOffset":-1,"instrument":"synthesizer","useSustainPedal":false,"showOnFront":false,"synthesizerSetting":{"oscillator":{"type":"sawtooth"},"envelope":{"attack":0.4,"decay":1.1,"sustain":0.6,"release":1.6}},"keyLayout":"qwerty-2","keyIndicator":"spn"} /-->