28: VideoControl component

README.md

@@ -55,6 +55,7 @@ One way to ensure all dependencies are loaded is to use the [`@wordpress/depende
 - [`PostTypeCheck`](src/components/PostTypeCheck)
 - [`RichTextWithLimit`](src/components/RichTextWithLimit)
 - [`TermSearchControl`](src/components/TermSearchControl)
+- [`VideoControl`](src/components/VideoControl)
 
 ## Hooks
 

src/components/VideoControl/README.md

@@ -0,0 +1,139 @@
+# VideoControl
+
+The `VideoControl` component allows for selecting a single video from the Media Library in a sidebar panel.
+Internally, `VideoControl` is wrapping a [`MediaUpload`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/media-upload/index.js) inside a [`BaseControl`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/base-control/index.tsx) component.
+
+| ![image-control--default.png](../../../assets/images/image-control--default.png) |
+|------------------------------------------------------------------------------------|
+| _`VideoControl` component._                                                        |
+
+| ![image-control--selected.png](../../../assets/images/image-control--selected.png) |
+|------------------------------------------------------------------------------------|
+| _`VideoControl` component displaying the selected video._                          |
+
+## Usage
+
+For a minimum working setup, all you need to do is pass an video ID as `value`, as well as an `onChange` callback that accepts a video object.
+
+```js
+import { VideoControl } from '@humanmade/block-editor-components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+
+function BlockEdit( props ) {
+	const { attributes, setAttributes } = props;
+	const { videoId } = attributes;
+
+	return (
+		<InspectorControls>
+			<PanelBody>
+				<VideoControl
+					value={ videoId }
+					onChange={ ( video ) => setAttributes( { videoId: video?.id } ) }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+```
+
+You can also customize button texts, as well as the modal title.
+
+```js
+import { VideoControl } from '@humanmade/block-editor-components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+
+function BlockEdit( props ) {
+	const { attributes, setAttributes } = props;
+	const { videoId } = attributes;
+
+	return (
+		<InspectorControls>
+			<PanelBody>
+				<VideoControl
+					buttonText="Select Video"
+					modalTitle="Select Video"
+					removeButtonText="Remove Video"
+					replaceButtonText="Replace Video"
+					value={ videoId }
+					onChange={ ( video ) => setAttributes( { videoId: video?.id } ) }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+```
+
+Also, all stable props of `BaseControl` are supported.
+
+## Props
+
+The `VideoControl` component has custom props `value` and `onChange` for managing the image, as well as `buttonText`, `modalTitle`, `removeButtonText` and `replaceButtonText`.
+Also, it supports all stable props of the `BaseControl` component.
+
+### `buttonText`
+
+The button text to display if no image has been selected.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `string`                             | no                                   | `'Select image'`                     |
+
+### `modalTitle`
+
+The modal title.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `string`                             | no                                   | `'Select Video'`                     |
+
+### `onChange`
+
+The callback to use for handling changing the video.
+Please note that `onChange` will receive a video object from the Media Library.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `Function`                           | yes                                  | `undefined`                          |
+
+### `removeButtonText`
+
+The text to display for the remove button.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `string`                             | no                                   | `'Remove Video'`                     |
+
+### `replaceButtonText`
+
+The button text to display if an video has been selected.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `string`                             | no                                   | `'Replace Video`                     |
+
+### `size`
+
+The video size to display in the sidebar.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `string`                             | no                                   | `undefined`                          |
+
+### `value`
+
+A video ID.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `number`                             | yes                                  | `undefined`                          |
+
+## Dependencies
+
+The `VideoControl` component requires the following dependencies, which are expected to be available:
+
+- `@wordpress/block-editor`
+- `@wordpress/components`
+- `@wordpress/data`
+- `@wordpress/i18n`

src/components/VideoControl/index.js

@@ -0,0 +1,90 @@
+import React, { ReactNode } from 'react';
+
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import { BaseControl, Button, Spinner } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+const allowedTypes = [ 'video' ];
+
+const BUTTON_TEXT = __( 'Select Video', 'block-editor-components' );
+const MODAL_TITLE = __( 'Select Video', 'block-editor-components' );
+const REMOVE_BUTTON_TEXT = __( 'Remove Video', 'block-editor-components' );
+const REPLACE_BUTTON_TEXT = __( 'Replace Video', 'block-editor-components' );
+
+/**
+ * Video sidebar control.
+ *
+ * @param {object} props - Component props.
+ * @returns {ReactNode} Component.
+ */
+export default function VideoControl( props ) {
+	const {
+		buttonText = BUTTON_TEXT,
+		className,
+		help,
+		id,
+		label,
+		modalTitle = MODAL_TITLE,
+		removeButtonText = REMOVE_BUTTON_TEXT,
+		replaceButtonText = REPLACE_BUTTON_TEXT,
+		value,
+		onChange,
+	} = props;
+
+	const videoUrl = useSelect(
+		( select ) => {
+			const media = select( 'core' ).getMedia( value, { context: 'view' } );
+			if ( ! media ) {
+				return undefined;
+			}
+
+			return media.source_url;
+		},
+		[ value ]
+	);
+
+	return (
+		<BaseControl
+			className={ className }
+			help={ help }
+			id={ id }
+			label={ label }
+		>
+			<MediaUploadCheck>
+				<MediaUpload
+					allowedTypes={ allowedTypes }
+					render={ ( { open } ) => (
+						<div>
+							{ value && (
+								videoUrl ? (
+									<Button isLink onClick={ open }>
+										<video
+											controls
+											loop
+											muted
+											src={ videoUrl }
+										/>
+									</Button>
+								) : (
+									<Spinner />
+								)
+							) }
+							<Button isSecondary onClick={ open }>
+								{ value ? replaceButtonText : buttonText }
+							</Button>
+						</div>
+					) }
+					title={ modalTitle }
+					onSelect={ onChange }
+				/>
+			</MediaUploadCheck>
+			<br />
+			{ value ? (
+				<Button isDestructive isLink onClick={ () => onChange( null ) }>
+					{ removeButtonText }
+				</Button>
+			) : null }
+		</BaseControl>
+	);
+}

src/index.js

@@ -14,6 +14,7 @@ export { default as PostTypeCheck } from './components/PostTypeCheck';
 export { default as RichTextWithLimit } from './components/RichTextWithLimit';
 export { default as TermSearchControl } from './components/TermSearchControl';
 export { default as TermSelector } from './components/TermSelector';
+export { default as VideoControl } from './components/VideoControl';
 export {
 	PostPickerButton,
 	PostPickerToolbarButton,