Added the ability to change player skin

src/edit.js

@@ -9,15 +9,15 @@ import { concat } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
-import { PanelBody, TextControl, withNotices } from '@wordpress/components';
+import { PanelBody, TextControl, withNotices, ToggleControl } from '@wordpress/components';
 import {
 	useBlockProps,
 	InspectorControls,
 	store as blockEditorStore,
 	MediaPlaceholder,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Platform, useMemo } from '@wordpress/element';
+import { Platform, useMemo, useState } from '@wordpress/element';
 import { createBlobURL } from '@wordpress/blob';
 
 /**
@@ -77,6 +77,15 @@ function Edit( props ) {
 		[ clientId ]
 	);
 
+	const [ useCustomUrl, setUseCustomUrl ] = useState( false );
+
+	const defaultSkins = [
+		'https://skins.webamp.org/skin/5e4f10275dcb1fb211d4a8b4f1bda236/base-2.91.wsz/',
+		'https://skins.webamp.org/skin/cd251187a5e6ff54ce938d26f1f2de02/Winamp3_Classified_v5.5.wsz/',
+		'https://skins.webamp.org/skin/6856045909b0040283b43c53a002de69/Blue_Fade.wsz/',
+		'https://skins.webamp.org/skin/a5b4d732f406dd30164ef88358044f03/Samsara-amp.wsz/',
+	];
+
 	// eslint-disable-next-line react-hooks/rules-of-hooks
 	const audio = useMemo(
 		() =>
@@ -201,20 +210,62 @@ function Edit( props ) {
 		return <div { ...blockProps }>{ mediaPlaceholder }</div>;
 	}
 
+	const skinPreviewUrl = ( skin ) => {
+		if ( skin ) {
+			const match = skin.match(
+				/(?:https?:)?(?:\/\/)?skins\.webamp\.org\/skin\/(\w+)\/(?:.*)?/
+			);
+
+			if ( match && match.length === 2 ) {
+				return `https://cdn.webampskins.org/screenshots/${ match[ 1 ] }.png`;
+			}
+		}
+	}
+
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Winamp Player Skin', 'winamp-block' ) }>
-					<TextControl
-						label={ __( 'Skin URL', 'winamp-block' ) }
-						help={ __(
-							'The URL of the player skin to use. Find skins at https://skins.webamp.org/.',
-							'winamp-block'
-						) }
-						value={ currentSkin }
-						onChange={ ( skin ) =>
-							setAttributes( { currentSkin: skin } )
-						}
+					{ useCustomUrl ? (
+						<TextControl
+							label={ __( 'Skin URL', 'winamp-block' ) }
+							help={ __(
+								'The URL of the player skin to use. Find skins at https://skins.webamp.org/.',
+								'winamp-block'
+							) }
+							value={ currentSkin }
+							onChange={ ( skin ) =>
+								setAttributes( { currentSkin: skin } )
+							}
+						/>
+						)
+						:
+						(
+						<div className="preview-wrapper">
+							{ defaultSkins.length && defaultSkins.map( ( skin, index ) => {
+								return (
+									<label key={ index } className="winamp-radio-wrapper">
+										<input
+											type="radio"
+											name="current-skin"
+											value={ skin }
+											checked={ currentSkin === skin }
+											onChange={ ( e ) => 
+												setAttributes( { currentSkin: e.target.value } )
+											}
+										/>
+										<img src={ skinPreviewUrl( skin ) } width="100" alt="winamp-skin" />
+									</label>
+									)
+								} )
+							}
+						</div>
+						)
+					}
+					<ToggleControl
+						label={ __( 'Use Custom Skin?', 'winamp-block' ) }
+						checked={ useCustomUrl }
+						onChange={ () => setUseCustomUrl( ! useCustomUrl ) }
 					/>
 				</PanelBody>
 			</InspectorControls>

src/editor.scss

@@ -4,6 +4,26 @@
  * Replace them with your own styles or remove the file completely.
  */
 
-.wp-block-tenup-winamp-block {
+ .wp-block-tenup-winamp-block {
 	border: 1px dotted #f00;
 }
+
+.preview-wrapper {
+	margin-bottom: 15px;
+
+	.winamp-radio-wrapper [type="radio"] {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+
+		+ img {
+			cursor: pointer;
+			margin: 0 2px;
+		}
+
+		&:checked + img {
+			outline: 2px solid var(--wp-admin-theme-color);
+		}
+	}
+}