diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index f1d9a0a8b8b1b..5b862a36642a6 100644
--- 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' ) },
] }
/>
+
+ (
+
+ ) }
+ />
+ { !! this.props.attributes.poster &&
+
+ }
+