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 && + + } +
@@ -168,7 +219,12 @@ class VideoEdit extends Component { video when the controls are enabled. */ } - { ( ( caption && caption.length ) || !! isSelected ) && ( { 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 index 24e8278cc4a7b..d3c4d6e5115ff 100644 --- 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; }