Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Video block: Add poster image #9335

Merged
merged 6 commits into from
Aug 30, 2018
Merged

Video block: Add poster image #9335

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8139564
Video: Add poster
Soean Aug 24, 2018
7d1dc25
Add i18n to upload title
Soean Aug 24, 2018
7a0e1bb
remove duplicate css style
Soean Aug 24, 2018
1540f76
Responsive CSS
Soean Aug 24, 2018
c868ec1
Update player reload
Soean Aug 28, 2018
b8b46fa
Blocks: Adjust poster rendering in Video block
gziolo Aug 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 51 additions & 2 deletions packages/block-library/src/video/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
*/
import { __ } from '@wordpress/i18n';
import {
BaseControl,
Button,
Disabled,
IconButton,
PanelBody,
Expand All @@ -16,6 +18,7 @@ import {
BlockControls,
InspectorControls,
MediaPlaceholder,
MediaUpload,
RichText,
editorMediaUpload,
} from '@wordpress/editor';
Expand All @@ -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() {
Expand Down Expand Up @@ -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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should use ref in this case. See the related docs: https://reactjs.org/docs/refs-and-the-dom.html

Usage example in the existing code:
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/block/edit-panel/index.js#L15
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/block/edit-panel/index.js#L66
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/block/edit-panel/index.js#L35

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way, this logic should probably be moved to componenDidUpdate lifecycle method as it should be triggered before this.props.attributes.poster isn't updated.

}

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 = () => {
Expand Down Expand Up @@ -160,6 +185,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 }>
Expand All @@ -168,7 +213,11 @@ class VideoEdit extends Component {
video when the controls are enabled.
*/ }
<Disabled>
<video controls={ controls } src={ src } />
<video
controls={ controls }
poster={ poster }
src={ src }
/>
</Disabled>
{ ( ( caption && caption.length ) || !! isSelected ) && (
<RichText
Expand Down
8 changes: 8 additions & 0 deletions packages/block-library/src/video/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
9 changes: 8 additions & 1 deletion packages/block-library/src/video/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 && (
Expand All @@ -110,6 +116,7 @@ export const settings = {
controls={ controls }
loop={ loop }
muted={ muted }
poster={ poster }
preload={ preload !== 'metadata' ? preload : undefined }
src={ src }
/>
Expand Down