Implement video settings. (#18660)

* Implement video settings. * Share common settings between native and web * Remove unused methods.
WordPress · Nov 28, 2019 · f50a976 · f50a976
1 parent 353b384
commit f50a976
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 54 deletions.
diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	ToggleControl,
+	SelectControl,
+} from '@wordpress/components';
+
+const VideoSettings = ( { setAttributes, attributes } ) => {
+	const {
+		autoplay,
+		controls,
+		loop,
+		muted,
+		playsInline,
+		preload,
+	} = attributes;
+
+	const getAutoplayHelp = ( checked ) => {
+		return checked ? __( 'Note: Autoplaying videos may cause usability issues for some visitors.' ) : null;
+	};
+
+	const toggleAttribute = ( attribute ) => {
+		return ( newValue ) => {
+			setAttributes( { [ attribute ]: newValue } );
+		};
+	};
+
+	return (
+		<>
+			<ToggleControl
+				label={ __( 'Autoplay' ) }
+				onChange={ toggleAttribute( 'autoplay' ) }
+				checked={ autoplay }
+				help={ getAutoplayHelp }
+			/>
+			<ToggleControl
+				label={ __( 'Loop' ) }
+				onChange={ toggleAttribute( 'loop' ) }
+				checked={ loop }
+			/>
+			<ToggleControl
+				label={ __( 'Muted' ) }
+				onChange={ toggleAttribute( 'muted' ) }
+				checked={ muted }
+			/>
+			<ToggleControl
+				label={ __( 'Playback Controls' ) }
+				onChange={ toggleAttribute( 'controls' ) }
+				checked={ controls }
+			/>
+			<ToggleControl
+				label={ __( 'Play inline' ) }
+				onChange={ toggleAttribute( 'playsInline' ) }
+				checked={ playsInline }
+			/>
+			<SelectControl
+				label={ __( 'Preload' ) }
+				value={ preload }
+				onChange={ ( value ) => setAttributes( { preload: value } ) }
+				options={ [
+					{ value: 'auto', label: __( 'Auto' ) },
+					{ value: 'metadata', label: __( 'Metadata' ) },
+					{ value: 'none', label: __( 'None' ) },
+				] }
+			/>
+		</>
+	);
+};
+
+export default VideoSettings;
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -8,8 +8,6 @@ import {
 	Disabled,
 	IconButton,
 	PanelBody,
-	SelectControl,
-	ToggleControl,
 	Toolbar,
 	withNotices,
 } from '@wordpress/components';
@@ -40,6 +38,7 @@ import {
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
 import icon from './icon';
+import VideoCommonSettings from './edit-common-settings';
 
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -94,12 +93,6 @@ class VideoEdit extends Component {
 		}
 	}
 
-	toggleAttribute( attribute ) {
-		return ( newValue ) => {
-			this.props.setAttributes( { [ attribute ]: newValue } );
-		};
-	}
-
 	onSelectURL( newSrc ) {
 		const { attributes, setAttributes } = this.props;
 		const { src } = attributes;
@@ -140,27 +133,19 @@ class VideoEdit extends Component {
 		noticeOperations.createErrorNotice( message );
 	}
 
-	getAutoplayHelp( checked ) {
-		return checked ? __( 'Note: Autoplaying videos may cause usability issues for some visitors.' ) : null;
-	}
-
 	render() {
 		const {
-			autoplay,
 			caption,
 			controls,
-			loop,
-			muted,
-			playsInline,
 			poster,
-			preload,
 			src,
 		} = this.props.attributes;
 		const {
 			className,
 			instanceId,
 			isSelected,
 			noticeUI,
+			attributes,
 			setAttributes,
 		} = this.props;
 		const { editing } = this.state;
@@ -212,41 +197,9 @@ class VideoEdit extends Component {
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'Video Settings' ) }>
-						<ToggleControl
-							label={ __( 'Autoplay' ) }
-							onChange={ this.toggleAttribute( 'autoplay' ) }
-							checked={ autoplay }
-							help={ this.getAutoplayHelp }
-						/>
-						<ToggleControl
-							label={ __( 'Loop' ) }
-							onChange={ this.toggleAttribute( 'loop' ) }
-							checked={ loop }
-						/>
-						<ToggleControl
-							label={ __( 'Muted' ) }
-							onChange={ this.toggleAttribute( 'muted' ) }
-							checked={ muted }
-						/>
-						<ToggleControl
-							label={ __( 'Playback Controls' ) }
-							onChange={ this.toggleAttribute( 'controls' ) }
-							checked={ controls }
-						/>
-						<ToggleControl
-							label={ __( 'Play inline' ) }
-							onChange={ this.toggleAttribute( 'playsInline' ) }
-							checked={ playsInline }
-						/>
-						<SelectControl
-							label={ __( 'Preload' ) }
-							value={ preload }
-							onChange={ ( value ) => setAttributes( { preload: value } ) }
-							options={ [
-								{ value: 'auto', label: __( 'Auto' ) },
-								{ value: 'metadata', label: __( 'Metadata' ) },
-								{ value: 'none', label: __( 'None' ) },
-							] }
+						<VideoCommonSettings
+							setAttributes={ setAttributes }
+							attributes={ attributes }
 						/>
 						<MediaUploadCheck>
 							<BaseControl

diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -19,6 +19,7 @@ import {
 	Icon,
 	Toolbar,
 	ToolbarButton,
+	PanelBody,
 } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import {
@@ -30,6 +31,7 @@ import {
 	BlockControls,
 	VIDEO_ASPECT_RATIO,
 	VideoPlayer,
+	InspectorControls,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
@@ -41,6 +43,7 @@ import { doAction, hasAction } from '@wordpress/hooks';
 import style from './style.scss';
 import SvgIcon from './icon';
 import SvgIconRetry from './icon-retry';
+import VideoCommonSettings from './edit-common-settings';
 
 class VideoEdit extends React.Component {
 	constructor( props ) {
@@ -154,8 +157,11 @@ class VideoEdit extends React.Component {
 	}
 
 	render() {
-		const { attributes, isSelected } = this.props;
-		const { id, src } = attributes;
+		const { setAttributes, attributes, isSelected } = this.props;
+		const {
+			id,
+			src,
+		} = attributes;
 		const { videoContainerHeight } = this.state;
 
 		const toolbarEditButton = (
@@ -196,6 +202,14 @@ class VideoEdit extends React.Component {
 						<BlockControls>
 							{ toolbarEditButton }
 						</BlockControls> }
+					<InspectorControls>
+						<PanelBody title={ __( 'Video Settings' ) }>
+							<VideoCommonSettings
+								setAttributes={ setAttributes }
+								attributes={ attributes }
+							/>
+						</PanelBody>
+					</InspectorControls>
 					<MediaUploadProgress
 						mediaId={ id }
 						onFinishMediaUploadWithSuccess={ this.finishMediaUploadWithSuccess }