diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/videopress')
5 files changed, 0 insertions, 363 deletions
diff --git a/plugins/jetpack/extensions/blocks/videopress/edit.js b/plugins/jetpack/extensions/blocks/videopress/edit.js deleted file mode 100644 index cd73e564..00000000 --- a/plugins/jetpack/extensions/blocks/videopress/edit.js +++ /dev/null @@ -1,185 +0,0 @@ -/** - * External dependencies - */ -import apiFetch from '@wordpress/api-fetch'; -import classnames from 'classnames'; -import { __ } from '@wordpress/i18n'; -import { BlockControls, RichText } from '@wordpress/editor'; -import { Component, createRef, Fragment } from '@wordpress/element'; -import { compose, createHigherOrderComponent } from '@wordpress/compose'; -import { Disabled, IconButton, SandBox, Toolbar } from '@wordpress/components'; -import { get } from 'lodash'; -import { isBlobURL } from '@wordpress/blob'; -import { withSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import Loading from './loading'; - -const VideoPressEdit = CoreVideoEdit => - class extends Component { - constructor() { - super( ...arguments ); - this.state = { - media: null, - isFetchingMedia: false, - fallback: false, - }; - this.posterImageButton = createRef(); - } - - componentDidMount() { - const { guid } = this.props.attributes; - if ( ! guid ) { - this.setGuid(); - } - } - - componentDidUpdate( prevProps ) { - const { attributes } = this.props; - - if ( attributes.id !== prevProps.attributes.id ) { - this.setGuid(); - } - } - - fallbackToCore = () => { - this.props.setAttributes( { guid: undefined } ); - this.setState( { fallback: true } ); - }; - - setGuid = async () => { - const { attributes, setAttributes } = this.props; - const { id } = attributes; - - if ( ! id ) { - setAttributes( { guid: undefined } ); - return; - } - - try { - this.setState( { isFetchingMedia: true } ); - const media = await apiFetch( { path: `/wp/v2/media/${ id }` } ); - this.setState( { isFetchingMedia: false } ); - - const { id: currentId } = this.props.attributes; - if ( id !== currentId ) { - // Video was changed in the editor while fetching data for the previous video; - return; - } - - this.setState( { media } ); - const guid = get( media, 'jetpack_videopress_guid' ); - if ( guid ) { - setAttributes( { guid } ); - } else { - this.fallbackToCore(); - } - } catch ( e ) { - this.setState( { isFetchingMedia: false } ); - this.fallbackToCore(); - } - }; - - switchToEditing = () => { - this.props.setAttributes( { - id: undefined, - guid: undefined, - src: undefined, - } ); - }; - - onRemovePoster = () => { - this.props.setAttributes( { poster: '' } ); - - // Move focus back to the Media Upload button. - this.posterImageButton.current.focus(); - }; - - render() { - const { - attributes, - className, - isFetchingPreview, - isSelected, - isUploading, - preview, - setAttributes, - } = this.props; - const { fallback, isFetchingMedia } = this.state; - - if ( isUploading ) { - return <Loading text={ __( 'Uploading…', 'jetpack' ) } />; - } - - if ( isFetchingMedia || isFetchingPreview ) { - return <Loading text={ __( 'Embedding…', 'jetpack' ) } />; - } - - if ( fallback || ! preview ) { - return <CoreVideoEdit { ...this.props } />; - } - - const { html, scripts } = preview; - const { caption } = attributes; - - return ( - <Fragment> - <BlockControls> - <Toolbar> - <IconButton - className="components-icon-button components-toolbar__control" - label={ __( 'Edit video', 'jetpack' ) } - onClick={ this.switchToEditing } - icon="edit" - /> - </Toolbar> - </BlockControls> - <figure className={ classnames( className, 'wp-block-embed', 'is-type-video' ) }> - { /* - Disable the video player so the user clicking on it won't play the - video when the controls are enabled. - */ } - <Disabled> - <div className="wp-block-embed__wrapper"> - <SandBox html={ html } scripts={ scripts } /> - </div> - </Disabled> - { ( ! RichText.isEmpty( caption ) || isSelected ) && ( - <RichText - tagName="figcaption" - placeholder={ __( 'Write caption…', 'jetpack' ) } - value={ caption } - onChange={ value => setAttributes( { caption: value } ) } - inlineToolbar - /> - ) } - </figure> - </Fragment> - ); - } - }; - -export default createHigherOrderComponent( - compose( [ - withSelect( ( select, ownProps ) => { - const { guid, src } = ownProps.attributes; - const { getEmbedPreview, isRequestingEmbedPreview } = select( 'core' ); - - const url = !! guid && `https://videopress.com/v/${ guid }`; - const preview = !! url && getEmbedPreview( url ); - - const isFetchingEmbedPreview = !! url && isRequestingEmbedPreview( url ); - const isUploading = isBlobURL( src ); - - return { - isFetchingPreview: isFetchingEmbedPreview, - isUploading, - preview, - }; - } ), - VideoPressEdit, - ] ), - 'withVideoPressEdit' -); diff --git a/plugins/jetpack/extensions/blocks/videopress/editor.js b/plugins/jetpack/extensions/blocks/videopress/editor.js deleted file mode 100644 index 0cb7f476..00000000 --- a/plugins/jetpack/extensions/blocks/videopress/editor.js +++ /dev/null @@ -1,119 +0,0 @@ -/** - * External dependencies - */ -import { createBlobURL } from '@wordpress/blob'; -import { createBlock } from '@wordpress/blocks'; -import { mediaUpload } from '@wordpress/editor'; -import { addFilter } from '@wordpress/hooks'; -import { every } from 'lodash'; - -/** - * Internal dependencies - */ -import withVideoPressEdit from './edit'; -import withVideoPressSave from './save'; -import getJetpackExtensionAvailability from '../../shared/get-jetpack-extension-availability'; - -const addVideoPressSupport = ( settings, name ) => { - if ( 'core/video' !== name ) { - return settings; - } - - const { available, unavailableReason } = getJetpackExtensionAvailability( 'videopress' ); - - // We customize the video block even if VideoPress it not available so we can support videos that were uploaded to - // VideoPress if it was available in the past (i.e. before a plan downgrade). - if ( available || [ 'missing_plan', 'missing_module' ].includes( unavailableReason ) ) { - return { - ...settings, - - attributes: { - autoplay: { - type: 'boolean', - }, - caption: { - type: 'string', - source: 'html', - selector: 'figcaption', - }, - controls: { - type: 'boolean', - default: true, - }, - guid: { - type: 'string', - }, - id: { - type: 'number', - }, - loop: { - type: 'boolean', - }, - muted: { - type: 'boolean', - }, - poster: { - type: 'string', - }, - preload: { - type: 'string', - default: 'metadata', - }, - src: { - type: 'string', - }, - }, - - transforms: { - ...settings.transforms, - from: [ - { - type: 'files', - isMatch: files => every( files, file => file.type.indexOf( 'video/' ) === 0 ), - // We define a higher priority (lower number) than the default of 10. This ensures that this - // transformation prevails over the core video block default transformations. - priority: 9, - transform: ( files, onChange ) => { - const blocks = []; - files.forEach( file => { - const block = createBlock( 'core/video', { - src: createBlobURL( file ), - } ); - mediaUpload( { - filesList: [ file ], - onFileChange: ( [ { id, url } ] ) => { - onChange( block.clientId, { id, src: url } ); - }, - allowedTypes: [ 'video' ], - } ); - blocks.push( block ); - } ); - return blocks; - }, - }, - ], - }, - - supports: { - ...settings.supports, - reusable: false, - }, - - edit: withVideoPressEdit( settings.edit ), - - save: withVideoPressSave( settings.save ), - - deprecated: [ - { - attributes: settings.attributes, - save: settings.save, - isEligible: attrs => ! attrs.guid, - }, - ], - }; - } - - return settings; -}; - -addFilter( 'blocks.registerBlockType', 'jetpack/videopress', addVideoPressSupport ); diff --git a/plugins/jetpack/extensions/blocks/videopress/index.js b/plugins/jetpack/extensions/blocks/videopress/index.js deleted file mode 100644 index 60d3531f..00000000 --- a/plugins/jetpack/extensions/blocks/videopress/index.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Internal dependencies - */ -// Register the hook that customize the core video block -import './editor'; - -// This is exporting deliberately an empty object so we don't break `getExtensions` -// at the same time we don't register any new plugin or block -export const settings = {}; diff --git a/plugins/jetpack/extensions/blocks/videopress/loading.js b/plugins/jetpack/extensions/blocks/videopress/loading.js deleted file mode 100644 index 76c25d4c..00000000 --- a/plugins/jetpack/extensions/blocks/videopress/loading.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * External dependencies - */ -import { Spinner } from '@wordpress/components'; - -const Loading = ( { text } ) => ( - <div className="wp-block-embed is-loading"> - <Spinner /> - <p>{ text }</p> - </div> -); - -export default Loading; diff --git a/plugins/jetpack/extensions/blocks/videopress/save.js b/plugins/jetpack/extensions/blocks/videopress/save.js deleted file mode 100644 index 52790480..00000000 --- a/plugins/jetpack/extensions/blocks/videopress/save.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * External dependencies - */ -import { createHigherOrderComponent } from '@wordpress/compose'; -import { RichText } from '@wordpress/editor'; - -const VideoPressSave = CoreVideoSave => props => { - const { attributes: { caption, guid } = {} } = props; - - if ( ! guid ) { - /** - * We return the element produced by the render so Gutenberg can add the block class when cloning the element. - * This is due to the fact that `React.cloneElement` ignores the class name when we clone a component to be - * rendered (i.e. `React.cloneElement( <CoreVideoSave { ...props } />, { className: 'wp-block-video' } )`). - * - * @see https://github.com/WordPress/gutenberg/blob/3f1324b53cc8bb45d08d12d5321d6f88510bed09/packages/blocks/src/api/serializer.js#L78-L96 - * @see https://github.com/WordPress/gutenberg/blob/c5f9bd88125282a0c35f887cc8d835f065893112/packages/editor/src/hooks/generated-class-name.js#L42 - * @see https://github.com/Automattic/wp-calypso/pull/30546#issuecomment-463637946 - */ - return CoreVideoSave( props ); - } - - const url = `https://videopress.com/v/${ guid }`; - - return ( - <figure className="wp-block-embed is-type-video is-provider-videopress"> - <div className="wp-block-embed__wrapper"> - { `\n${ url }\n` /* URL needs to be on its own line. */ } - </div> - { ! RichText.isEmpty( caption ) && ( - <RichText.Content tagName="figcaption" value={ caption } /> - ) } - </figure> - ); -}; - -export default createHigherOrderComponent( VideoPressSave, 'withVideoPressSave' ); |