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

Adds the new replace flow to the video block #19162

Merged
merged 3 commits into from
Jan 7, 2020
Merged

Adds the new replace flow to the video block #19162

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a81852
adds the new replace flow to the video block
draganescu Dec 16, 2019
960fdaa
removes useless editing and src state
draganescu Jan 6, 2020
f82e730
removed obsolete comments
draganescu Jan 7, 2020
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
44 changes: 14 additions & 30 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 @@ -7,7 +7,6 @@ import {
Button,
Disabled,
PanelBody,
ToolbarGroup,
withNotices,
} from '@wordpress/components';
import {
Expand All @@ -17,6 +16,7 @@ import {
MediaPlaceholder,
MediaUpload,
MediaUploadCheck,
MediaReplaceFlow,
RichText,
} from '@wordpress/block-editor';
import { Component, createRef } from '@wordpress/element';
Expand Down Expand Up @@ -45,12 +45,6 @@ const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
class VideoEdit extends Component {
constructor() {
super( ...arguments );
// edit component has its own src in the state so it can be edited
// without setting the actual value outside of the edit UI
this.state = {
editing: ! this.props.attributes.src,
};

this.videoPlayer = createRef();
this.posterImageButton = createRef();
this.onSelectURL = this.onSelectURL.bind( this );
Expand All @@ -76,7 +70,6 @@ class VideoEdit extends Component {
setAttributes( { src: url } );
},
onError: ( message ) => {
this.setState( { editing: true } );
noticeOperations.createErrorNotice( message );
},
allowedTypes: ALLOWED_MEDIA_TYPES,
Expand All @@ -95,8 +88,6 @@ class VideoEdit extends Component {
const { attributes, setAttributes } = this.props;
const { src } = attributes;

// Set the block's src from the edit component's state, and switch off
// the editing UI.
if ( newSrc !== src ) {
// Check if there's an embed block that handles this URL.
const embedBlock = createUpgradedEmbedBlock(
Expand All @@ -108,8 +99,6 @@ class VideoEdit extends Component {
}
setAttributes( { src: newSrc, id: undefined } );
}

this.setState( { editing: false } );
}

onSelectPoster( image ) {
Expand Down Expand Up @@ -146,25 +135,20 @@ class VideoEdit extends Component {
attributes,
setAttributes,
} = this.props;
const { editing } = this.state;
const switchToEditing = () => {
this.setState( { editing: true } );
};
const onSelectVideo = ( media ) => {
if ( ! media || ! media.url ) {
// in this case there was an error and we should continue in the editing state
// previous attributes should be removed because they may be temporary blob urls
// in this case there was an error
// previous attributes should be removed
// because they may be temporary blob urls
setAttributes( { src: undefined, id: undefined } );
switchToEditing();
return;
}
// sets the block's attribute and updates the edit component from the
// selected media, then switches off the editing UI
// selected media
setAttributes( { src: media.url, id: media.id } );
this.setState( { src: media.url, editing: false } );
};

if ( editing ) {
if ( ! src ) {
return (
<MediaPlaceholder
icon={ <BlockIcon icon={ icon } /> }
Expand All @@ -184,14 +168,14 @@ class VideoEdit extends Component {
return (
<>
<BlockControls>
<ToolbarGroup>
<Button
className="components-toolbar__control"
label={ __( 'Edit video' ) }
onClick={ switchToEditing }
icon="edit"
/>
</ToolbarGroup>
<MediaReplaceFlow
mediaURL={ src }
allowedTypes={ ALLOWED_MEDIA_TYPES }
accept="video/*"
onSelect={ onSelectVideo }
onSelectURL={ this.onSelectURL }
onError={ this.onUploadError }
/>
</BlockControls>
<InspectorControls>
<PanelBody title={ __( 'Video Settings' ) }>
Expand Down