feat: video player and embed block integration

Author: abaicus

assets/src/video-player/block/VideoPlayerBlock.js

@@ -0,0 +1,163 @@
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import {
+	Button,
+	PanelBody,
+	Placeholder,
+	SelectControl,
+	ToolbarButton,
+	ToolbarGroup,
+	Notice
+} from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useMemo, useState } from '@wordpress/element';
+import { edit } from '@wordpress/icons';
+import { logo } from '../common/icons';
+
+import { isOptimoleURL } from '../common/utils';
+
+const Edit = ( props ) => {
+	const { replaceBlock } = useDispatch( 'core/block-editor' );
+	const { attributes, setAttributes, isSelected } = props;
+
+	const [ loading, setLoading ] = useState( false );
+	const [ editing, setEditing ] = useState( false );
+	const [ url, setUrl ] = useState( attributes.url );
+	const [ error, setError ] = useState( false );
+
+	const onUrlChange = ( value ) => {
+		setUrl( value );
+	};
+
+	const onAspectRatioChange = ( value ) => {
+		setAttributes({ aspectRatio: value });
+	};
+
+	const onEdit = () => {
+		setEditing( true );
+	};
+
+	const onSave = ( event ) => {
+		event.preventDefault();
+		setError( false );
+
+
+		const url = event.target.url.value;
+
+		isOptimoleURL( url ).then( ( valid ) => {
+			if ( valid ) {
+				setAttributes({ url });
+				setEditing( false );
+				return;
+			}
+
+			setError( true );
+		});
+
+	};
+
+	useEffect( () => {
+		isOptimoleURL( attributes.url ).then( ( valid ) => {
+
+			if ( ! valid ) {
+				setEditing( true );
+				setError( true );
+			}
+		});
+	}, [ attributes.url ]);
+
+	const aspectRatioOptions = useMemo( () => {
+		return OMVideoPlayerBlock.aspectRatioOptions.map( ( value ) => ({
+			label: value,
+			value: value.replace( ':', '/' )
+		}) );
+	}, []);
+
+	const style = useMemo( () => {
+
+
+		const style = {
+			'--om-primary-color': attributes.primaryColor,
+			'--om-aspect-ratio': attributes.aspectRatio
+		};
+
+		if ( ! isSelected ) {
+			style.pointerEvents = 'none';
+		}
+
+		return style;
+	}, [ attributes.aspectRatio, attributes.primaryColor, isSelected ]);
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						icon={edit}
+						label={OMVideoPlayerBlock.editLabel}
+						onClick={onEdit}
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+
+			<InspectorControls>
+				<PanelBody title={OMVideoPlayerBlock.blockTitle} initialOpen={true}>
+
+					<SelectControl
+						value={attributes.aspectRatio}
+						label={OMVideoPlayerBlock.aspectRatioLabel}
+						options={aspectRatioOptions}
+						onChange={onAspectRatioChange}
+					/>
+
+				</PanelBody>
+			</InspectorControls>
+			{! editing && <optimole-video-player video-src={props.attributes.url} style={style}></optimole-video-player>}
+			{editing && <Placeholder
+				label={OMVideoPlayerBlock.urlLabel}
+				className="wp-block-embed"
+			>
+				<form onSubmit={onSave}>
+					<input type="url" id="url" defaultValue={attributes.url} className="wp-block-embed__placeholder-input" onChange={onUrlChange} />
+					<Button isPrimary type="submit">Save</Button>
+				</form>
+
+				{error && <Notice status="error" isDismissible={false}><span dangerouslySetInnerHTML={{ __html: OMVideoPlayerBlock.invalidUrlError }}/></Notice>}
+
+			</Placeholder>
+			}
+		</>
+	);
+};
+
+export default {
+	icon: logo,
+	title: OMVideoPlayerBlock.blockTitle,
+	description: OMVideoPlayerBlock.blockDescription,
+
+	supports: {
+		align: true,
+		inserter: false,
+		spacing: {
+			margin: true
+		}
+	},
+	category: 'embed',
+	attributes: {
+		url: {
+			type: 'string',
+			default: ''
+		},
+		aspectRatio: {
+			type: 'string',
+			default: '16/9'
+		},
+		primaryColor: {
+			type: 'string',
+			default: '#577BF9'
+		}
+	},
+	edit: Edit,
+	save: ( props ) => {
+		return null;
+	}
+};

assets/src/video-player/block/hoc.js

@@ -0,0 +1,48 @@
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+import { isOptimoleURL } from '../common/utils';
+const BlockReplacer = ({ clientIDToReplace, url }) => {
+	const { replaceBlock } = useDispatch( 'core/block-editor' );
+
+	useEffect( ()=> {
+		const block = createBlock( 'optimole/video-player', {
+			url: url,
+			editing: isOptimoleURL
+		});
+
+		replaceBlock( clientIDToReplace, block );
+	}, [ clientIDToReplace ]);
+
+	return null;
+};
+
+/**
+ * Higher order component to check URLs and auto-detect custom embeds
+ */
+export const withCustomEmbedURLDetection = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		const [ validOptimoleURL, setValidOptimoleURL ] = useState( false );
+
+		const { attributes } = props;
+		const { url } = attributes;
+
+		useEffect( ()=> {
+			isOptimoleURL( props.attributes.url ).then( ( valid ) => {
+				setValidOptimoleURL( valid );
+			});
+		}, [ props.attributes.url ]);
+
+		if ( 'core/embed' !== props.name ) {
+			return <BlockEdit {...props} />;
+		}
+
+
+		if ( url && validOptimoleURL ) {
+			return <BlockReplacer clientIDToReplace={props.clientId} url={attributes.url} />;
+		}
+
+		return <BlockEdit {...props} />;
+	};
+}, 'withCustomEmbedURLDetection' );

assets/src/video-player/common/icons.js

@@ -0,0 +1,18 @@
+export const isOptimoleURL = async( url ) => {
+	const customEmbedRegexPattern = new RegExp( `^https?:\\/\\/(?:www\\.)?${OMVideoPlayerBlock.domain}\\/.*$` );
+
+	if ( !  customEmbedRegexPattern.test( url ) ) {
+		return false;
+	}
+
+	try {
+		const response = await fetch( url, { method: 'HEAD' });
+		if ( response.ok ) {
+			const contentType = response.headers.get( 'content-type' );
+
+			return contentType.includes( 'video' );
+		}
+	} catch ( error ) {
+		return false;
+	}
+};

assets/src/video-player/common/utils.js

@@ -0,0 +1,43 @@
+/** global OMVideoPlayerBlock */
+import { registerBlockType, registerBlockVariation } from '@wordpress/blocks';
+import { addFilter } from '@wordpress/hooks';
+
+import { withCustomEmbedURLDetection } from './block/hoc';
+import VideoPlayerBlock from './block/VideoPlayerBlock';
+import { logo } from './common/icons';
+
+import './web-components/player';
+
+/**
+ * Register the video player block.
+ */
+registerBlockType( 'optimole/video-player', VideoPlayerBlock );
+
+/**
+ * Register the embed video player block variation.
+ */
+registerBlockVariation( 'core/embed', {
+	name: 'optimole',
+	attributes: {
+		providerNameSlug: 'optimole'
+	},
+	icon: logo,
+	title: OMVideoPlayerBlock.blockTitle,
+	description: OMVideoPlayerBlock.blockDescription,
+	category: 'embed',
+	isActive: ( blockAttributes, variationAttributes ) => {
+		return 'optimole' === blockAttributes.providerNameSlug;
+	},
+	patterns: [
+		`^https?:\\/\\/(?:www\\.)?${OMVideoPlayerBlock.domain}\\/.*$`
+	]
+});
+
+/**
+ * Filter to add custom embed detection to the editor.
+ */
+addFilter(
+	'editor.BlockEdit',
+	'custom-embed/with-custom-embed-detection',
+	withCustomEmbedURLDetection
+);

assets/src/video-player/editor.js

@@ -0,0 +1,2 @@
+import './style.scss';
+import './web-components/player';