feat: add audio player block

This commit adds the Vinyl Audio Player and Vinyl Audio Source blocks.

Fixes #17

.php-cs-fixer.dist.php

@@ -11,7 +11,7 @@
 $finder = Finder::create()
 	->exclude( [ 'vendor', 'vendor-prod' ] )
 	->in( [
-		__DIR__ . '/includes',
+		__DIR__ . '/src',
 	] )
 	->name( '*.php' )
 	->ignoreDotFiles( true )

assets/js/audio-state.ts

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies.
+ */
+
+import {
+	store,
+	getContext,
+	getElement,
+	withScope,
+} from '@wordpress/interactivity';
+
+/**
+ * Internal dependencies.
+ */
+
+import { VinylBlockContext } from './types';
+
+const { actions, state } = store('vinyl/audio', {
+	state: {
+		/**
+		 * The destination audio element.
+		 */
+		audioElement: null as HTMLAudioElement | null,
+
+		/**
+		 * The duration of the current audio.
+		 */
+		duration: null as number | null,
+
+		/**
+		 * The URL of the current audio.
+		 */
+		currentAudio: null as string | null,
+
+		/**
+		 * Whether the audio is playing.
+		 */
+		isPlaying: false,
+
+		/**
+		 * Whether the audio source is playing.
+		 */
+		get isAudioSourcePlaying(): boolean {
+			const ctx = getContext<VinylBlockContext>();
+			return state.currentAudio === ctx.audioSrc && state.isPlaying;
+		},
+	},
+
+	callbacks: {
+		init: () => {
+			if (state.audioElement) {
+				return;
+			}
+
+			const { ref } = getElement();
+
+			if (!ref) {
+				return;
+			}
+
+			const audio = ref.querySelector<HTMLAudioElement>(
+				'audio.vinyl__player-audio--destination'
+			);
+
+			if (!audio) {
+				return;
+			}
+
+			state.audioElement = audio;
+
+			state.audioElement.addEventListener('loadeddata', () => {
+				withScope(() => {
+					if (state.audioElement) {
+						state.duration = state.audioElement.duration;
+					}
+				});
+			});
+		},
+	},
+
+	actions: {
+		*playAudio() {
+			if (state.isPlaying) {
+				return;
+			}
+
+			if (!state.audioElement) {
+				return;
+			}
+
+			yield state.audioElement.play();
+
+			state.isPlaying = true;
+		},
+
+		pauseAudio: () => {
+			state.isPlaying = false;
+			state.audioElement?.pause();
+		},
+
+		*setAudio() {
+			const ctx = getContext<VinylBlockContext>();
+
+			state.currentAudio = ctx.audioSrc;
+
+			if (!state.audioElement) {
+				return;
+			}
+
+			if (state.currentAudio === ctx.audioSrc) {
+				return;
+			}
+
+			state.audioElement.src = ctx.audioSrc;
+
+			if (state.isPlaying) {
+				yield* actions.playAudio();
+			}
+		},
+	},
+});
+
+export {};

assets/js/blocks/audio-source/block.json

@@ -0,0 +1,50 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "vinyl/audio-source",
+	"version": "0.1.0",
+	"title": "Vinyl Audio Source",
+	"category": "media",
+	"icon": "audio",
+	"description": "An audio source.",
+	"textdomain": "vinyl",
+	"attributes": {
+		"src": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "audio",
+			"attribute": "src",
+			"__experimentalRole": "content"
+		},
+		"id": {
+			"type": "number",
+			"__experimentalRole": "content"
+		},
+		"loop": {
+			"type": "boolean",
+			"source": "attribute",
+			"selector": "audio",
+			"attribute": "loop"
+		},
+		"preload": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "audio",
+			"attribute": "preload"
+		},
+		"blob": {
+			"type": "string",
+			"__experimentalRole": "local"
+		}
+	},
+	"supports": {
+		"supports": {
+			"interactivity": true
+		}
+	},
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"render": "file:./render.php",
+	"style": "file:./style-index.css",
+	"viewScriptModule": "vinyl-audio-state"
+}