Video block: Add poster image (#9335)

* Video: Add poster * Add i18n to upload title * remove duplicate css style * Responsive CSS * Update player reload * Blocks: Adjust poster rendering in Video block
WordPress · Aug 30, 2018 · 208c0fa · 208c0fa
1 parent bf2ce55
commit 208c0fa
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 4 deletions.
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -3,6 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	BaseControl,
+	Button,
 	Disabled,
 	IconButton,
 	PanelBody,
@@ -11,11 +13,12 @@ import {
 	ToggleControl,
 	withNotices,
 } from '@wordpress/components';
-import { Component, Fragment } from '@wordpress/element';
+import { Component, Fragment, createRef } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorControls,
 	MediaPlaceholder,
+	MediaUpload,
 	RichText,
 	editorMediaUpload,
 } from '@wordpress/editor';
@@ -30,8 +33,11 @@ class VideoEdit extends Component {
 			editing: ! this.props.attributes.src,
 		};
 
+		this.videoPlayer = createRef();
 		this.toggleAttribute = this.toggleAttribute.bind( this );
 		this.onSelectURL = this.onSelectURL.bind( this );
+		this.onSelectPoster = this.onSelectPoster.bind( this );
+		this.onRemovePoster = this.onRemovePoster.bind( this );
 	}
 
 	componentDidMount() {
@@ -55,6 +61,12 @@ class VideoEdit extends Component {
 		}
 	}
 
+	componentDidUpdate( prevProps ) {
+		if ( this.props.attributes.poster !== prevProps.attributes.poster ) {
+			this.videoPlayer.current.load();
+		}
+	}
+
 	toggleAttribute( attribute ) {
 		return ( newValue ) => {
 			this.props.setAttributes( { [ attribute ]: newValue } );
@@ -74,8 +86,27 @@ class VideoEdit extends Component {
 		this.setState( { editing: false } );
 	}
 
+	onSelectPoster( image ) {
+		const { setAttributes } = this.props;
+		setAttributes( { poster: image.url } );
+	}
+
+	onRemovePoster() {
+		const { setAttributes } = this.props;
+		setAttributes( { poster: '' } );
+	}
+
 	render() {
-		const { autoplay, caption, controls, loop, muted, preload, src } = this.props.attributes;
+		const {
+			autoplay,
+			caption,
+			controls,
+			loop,
+			muted,
+			poster,
+			preload,
+			src,
+		} = this.props.attributes;
 		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
 		const { editing } = this.state;
 		const switchToEditing = () => {
@@ -160,6 +191,26 @@ class VideoEdit extends Component {
 								{ value: 'none', label: __( 'None' ) },
 							] }
 						/>
+						<BaseControl
+							className="editor-video-poster-control"
+							label={ __( 'Poster Image' ) }
+						>
+							<MediaUpload
+								title={ __( 'Select Poster Image' ) }
+								onSelect={ this.onSelectPoster }
+								type="image"
+								render={ ( { open } ) => (
+									<Button isDefault onClick={ open }>
+										{ ! this.props.attributes.poster ? __( 'Select Poster Image' ) : __( 'Replace image' ) }
+									</Button>
+								) }
+							/>
+							{ !! this.props.attributes.poster &&
+								<Button onClick={ this.onRemovePoster } isLink isDestructive>
+									{ __( 'Remove Poster Image' ) }
+								</Button>
+							}
+						</BaseControl>
 					</PanelBody>
 				</InspectorControls>
 				<figure className={ className }>
@@ -168,7 +219,12 @@ class VideoEdit extends Component {
 						video when the controls are enabled.
 					*/ }
 					<Disabled>
-						<video controls={ controls } src={ src } />
+						<video
+							controls={ controls }
+							poster={ poster }
+							src={ src }
+							ref={ this.videoPlayer }
+						/>
 					</Disabled>
 					{ ( ( caption && caption.length ) || !! isSelected ) && (
 						<RichText

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
@@ -1,3 +1,11 @@
 .editor-block-list__block[data-align="center"] {
 	text-align: center;
 }
+
+.editor-video-poster-control .components-button {
+	margin-right: 8px;
+}
+
+.editor-video-poster-control .components-button + .components-button {
+	margin-top: 1em;
+}
diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js
@@ -58,6 +58,12 @@ export const settings = {
 			selector: 'video',
 			attribute: 'muted',
 		},
+		poster: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'video',
+			attribute: 'poster',
+		},
 		preload: {
 			type: 'string',
 			source: 'attribute',
@@ -101,7 +107,7 @@ export const settings = {
 	edit,
 
 	save( { attributes } ) {
-		const { autoplay, caption, controls, loop, muted, preload, src } = attributes;
+		const { autoplay, caption, controls, loop, muted, poster, preload, src } = attributes;
 		return (
 			<figure>
 				{ src && (
@@ -110,6 +116,7 @@ export const settings = {
 						controls={ controls }
 						loop={ loop }
 						muted={ muted }
+						poster={ poster }
 						preload={ preload !== 'metadata' ? preload : undefined }
 						src={ src }
 					/>

diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
@@ -3,6 +3,12 @@
 		max-width: 100%;
 	}
 
+	@supports (position: sticky) {
+		[poster] {
+			object-fit: cover;
+		}
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}