feat: improve video player & adds block options

Author: abaicus

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

@@ -6,13 +6,16 @@ import {
 	SelectControl,
 	ToolbarButton,
 	ToolbarGroup,
-	Notice
+	Notice,
+	CheckboxControl,
+	ColorPalette,
+	BaseControl
 } 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 { ASPECT_RATIO_OPTIONS } from '../common/constants';
 import { isOptimoleURL } from '../common/utils';
 
 const Edit = ( props ) => {
@@ -28,8 +31,9 @@ const Edit = ( props ) => {
 		setUrl( value );
 	};
 
-	const onAspectRatioChange = ( value ) => {
-		setAttributes({ aspectRatio: value });
+
+	const onAttributeUpdate = ( value, name ) => {
+		setAttributes({ [name]: value });
 	};
 
 	const onEdit = () => {
@@ -52,29 +56,18 @@ const Edit = ( props ) => {
 
 			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
@@ -105,26 +98,51 @@ const Edit = ( props ) => {
 					<SelectControl
 						value={attributes.aspectRatio}
 						label={OMVideoPlayerBlock.aspectRatioLabel}
-						options={aspectRatioOptions}
-						onChange={onAspectRatioChange}
+						options={ASPECT_RATIO_OPTIONS}
+						onChange={( value ) => onAttributeUpdate( value, 'aspectRatio' )}
+					/>
+
+					<CheckboxControl
+						label={OMVideoPlayerBlock.loopLabel}
+						checked={attributes.loop}
+						onChange={( value ) => onAttributeUpdate( value, 'loop' )}
+					/>
+
+					<CheckboxControl
+						label={OMVideoPlayerBlock.hideControlsLabel}
+						checked={attributes.hideControls}
+						onChange={( value ) => onAttributeUpdate( value, 'hideControls' )}
 					/>
 
 				</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>
-			}
+			<InspectorControls group="styles">
+				<PanelBody title={OMVideoPlayerBlock.blockTitle} initialOpen={true}>
+					<BaseControl label={OMVideoPlayerBlock.primaryColorLabel}>
+						<ColorPalette
+							clearable={false}
+							value={attributes.primaryColor}
+							onChange={( value ) => onAttributeUpdate( value, 'primaryColor' )}
+						/>
+					</BaseControl>
+				</PanelBody>
+			</InspectorControls>
+			<div style={{ display: 'flex', width: '100%' }}>
+				{! editing && <optimole-video-player video-src={props.attributes.url} style={style} loop={attributes.loop} hide-controls={attributes.hideControls}></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">{OMVideoPlayerBlock.save}</Button>
+					</form>
+
+					{error && <Notice status="error" isDismissible={false}><span dangerouslySetInnerHTML={{ __html: OMVideoPlayerBlock.invalidUrlError }}/></Notice>}
+
+				</Placeholder>
+				}
+			</div>
 		</>
 	);
 };
@@ -149,11 +167,19 @@ export default {
 		},
 		aspectRatio: {
 			type: 'string',
-			default: '16/9'
+			default: 'auto'
 		},
 		primaryColor: {
 			type: 'string',
 			default: '#577BF9'
+		},
+		loop: {
+			type: 'boolean',
+			default: false
+		},
+		hideControls: {
+			type: 'boolean',
+			default: false
 		}
 	},
 	edit: Edit,

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

@@ -0,0 +1,32 @@
+const ASPECT_RATIO_OPTIONS = [
+	{
+		value: 'auto',
+		label: OMVideoPlayerBlock.auto
+	},
+	{
+		value: '16/9',
+		label: '16:9'
+	},
+	{
+		value: '4/3',
+		label: '4:3'
+	},
+	{
+		value: '1/1',
+		label: '1:1'
+	},
+	{
+		value: '9/16',
+		label: '9:16'
+	},
+	{
+		value: '1/2',
+		label: '1:2'
+	},
+	{
+		value: '2/1',
+		label: '2:1'
+	}
+];
+
+export { ASPECT_RATIO_OPTIONS };

assets/src/video-player/style.scss

@@ -10,10 +10,12 @@
 
 optimole-video-player {
   --scrubber-size: 12px;
-  aspect-ratio: var(--om-aspect-ratio, 16/9);
+  aspect-ratio: var(--om-aspect-ratio, auto);
   overflow: hidden;
   position: relative;
   display: block;
+  background-color: #000;
+  width: 100%;
 
   .optml-vp-hide {
     display: none !important;
@@ -48,7 +50,6 @@ optimole-video-player {
     top: 0;
     bottom: 0;
     z-index: 0;
-    background-color: #000;
 
     .optml-ic {
       width: 20px;