From 81395647466288d0737b8cf363ea628ddb5d2a83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?So=CC=88ren=20Wrede?= Date: Fri, 24 Aug 2018 22:29:32 +0200 Subject: [PATCH 1/6] Video: Add poster --- packages/block-library/src/video/edit.js | 53 +++++++++++++++++++- packages/block-library/src/video/editor.scss | 9 ++++ packages/block-library/src/video/index.js | 9 +++- 3 files changed, 68 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index f1d9a0a8b8b1b..2b5011542decb 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, @@ -16,6 +18,7 @@ import { BlockControls, InspectorControls, MediaPlaceholder, + MediaUpload, RichText, editorMediaUpload, } from '@wordpress/editor'; @@ -32,6 +35,8 @@ class VideoEdit extends Component { 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() { @@ -74,8 +79,28 @@ class VideoEdit extends Component { this.setState( { editing: false } ); } + onSelectPoster( image ) { + const { setAttributes, clientId } = this.props; + setAttributes( { poster: image.url } ); + document.getElementById( 'block-' + clientId ).getElementsByTagName( 'video' )[ 0 ].load(); + } + + 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 +185,26 @@ class VideoEdit extends Component { { value: 'none', label: __( 'None' ) }, ] } /> + + ( + + ) } + /> + { !! this.props.attributes.poster && + + } +
@@ -168,7 +213,11 @@ 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 } /> From 7d1dc25ce20b23a7052eb8ce5ba1a1fe41980006 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?So=CC=88ren=20Wrede?= Date: Fri, 24 Aug 2018 22:45:15 +0200 Subject: [PATCH 2/6] Add i18n to upload title --- packages/block-library/src/video/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 2b5011542decb..5a808bcd3ed3b 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -190,7 +190,7 @@ class VideoEdit extends Component { label={ __( 'Poster Image' ) } > ( From 7a0e1bb24a729d9a98b0ca41f2e73ebd493b23c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?So=CC=88ren=20Wrede?= Date: Fri, 24 Aug 2018 22:50:46 +0200 Subject: [PATCH 3/6] remove duplicate css style --- packages/block-library/src/video/editor.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss index 376009b8f21cb..a1f175e0fc93d 100644 --- a/packages/block-library/src/video/editor.scss +++ b/packages/block-library/src/video/editor.scss @@ -2,10 +2,6 @@ text-align: center; } -.editor-video-poster-control { - margin-bottom: 1em; -} - .editor-video-poster-control .components-button + .components-button { margin-top: 1em; margin-right: 8px; From 1540f7679102b9da98874f800e6359e4a03ba873 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?So=CC=88ren=20Wrede?= Date: Fri, 24 Aug 2018 23:12:17 +0200 Subject: [PATCH 4/6] Responsive CSS --- packages/block-library/src/video/editor.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss index a1f175e0fc93d..e75b149e5077c 100644 --- a/packages/block-library/src/video/editor.scss +++ b/packages/block-library/src/video/editor.scss @@ -2,7 +2,10 @@ text-align: center; } +.editor-video-poster-control .components-button { + margin-right: 8px; +} + .editor-video-poster-control .components-button + .components-button { margin-top: 1em; - margin-right: 8px; } From c868ec12ab29dd689587e2ca1bff5ba49f5e9056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?So=CC=88ren=20Wrede?= Date: Tue, 28 Aug 2018 22:56:01 +0200 Subject: [PATCH 5/6] Update player reload --- packages/block-library/src/video/edit.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 5a808bcd3ed3b..5b862a36642a6 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -13,7 +13,7 @@ import { ToggleControl, withNotices, } from '@wordpress/components'; -import { Component, Fragment } from '@wordpress/element'; +import { Component, Fragment, createRef } from '@wordpress/element'; import { BlockControls, InspectorControls, @@ -33,6 +33,7 @@ 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 ); @@ -60,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 } ); @@ -80,9 +87,8 @@ class VideoEdit extends Component { } onSelectPoster( image ) { - const { setAttributes, clientId } = this.props; + const { setAttributes } = this.props; setAttributes( { poster: image.url } ); - document.getElementById( 'block-' + clientId ).getElementsByTagName( 'video' )[ 0 ].load(); } onRemovePoster() { @@ -217,6 +223,7 @@ class VideoEdit extends Component { controls={ controls } poster={ poster } src={ src } + ref={ this.videoPlayer } /> { ( ( caption && caption.length ) || !! isSelected ) && ( From b8b46fa9c52c9387dc8aa61f471c9020fd4e535e Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 29 Aug 2018 10:45:25 +0200 Subject: [PATCH 6/6] Blocks: Adjust poster rendering in Video block --- packages/block-library/src/video/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) 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; }