diff --git a/projects/packages/videopress/changelog/update-videopress-handle-title-when-uploading-file b/projects/packages/videopress/changelog/update-videopress-handle-title-when-uploading-file new file mode 100644 index 0000000000000..29a47c7833576 --- /dev/null +++ b/projects/packages/videopress/changelog/update-videopress-handle-title-when-uploading-file @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +VideoPress: fix setting title when uploading video file diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js index 113644e7e9a8d..2141009b58c79 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js @@ -32,7 +32,7 @@ const VideoPressUploader = ( { onReplaceCancel, } ) => { const [ uploadPaused, setUploadPaused ] = useState( false ); - const [ uploadCompleted, setUploadCompleted ] = useState( false ); + const [ uploadedVideoData, setUploadedVideoData ] = useState( false ); const [ isUploadingInProgress, setIsUploadingInProgress ] = useState( false ); const [ isVerifyingLocalMedia, setIsVerifyingLocalMedia ] = useState( false ); @@ -86,19 +86,11 @@ const VideoPressUploader = ( { setUploadErrorDataState( error ); }, [] ); - /* - * Handle upload success - */ - const handleUploadSuccess = attr => { - setAttributes( attr ); - setUploadCompleted( true ); - }; - // Get file upload handlers, data, and error. const { uploadHandler, resumeHandler, error: uploadingError } = useResumableUploader( { onError: setUploadErrorData, onProgress: setUploadingProgress, - onSuccess: handleUploadSuccess, + onSuccess: setUploadedVideoData, } ); /** @@ -138,7 +130,7 @@ const VideoPressUploader = ( { const startUploadFromLibrary = attachmentId => { uploadFromLibrary( attachmentId ) .then( result => { - handleUploadSuccess( result ); + setUploadedVideoData( result ); } ) .catch( error => { setUploadErrorDataState( error ); @@ -298,7 +290,7 @@ const VideoPressUploader = ( { file={ uploadFile } progress={ progress } paused={ uploadPaused } - completed={ uploadCompleted } + uploadedVideoData={ uploadedVideoData } onPauseOrResume={ pauseOrResumeUpload } onReplaceCancel={ cancelUploadingReplaceFile } isReplacing={ isReplacing } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss index face22e3cb35a..4aafb8a5dee86 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss @@ -63,6 +63,7 @@ &__title { margin-bottom: 15px; + width: 100%; } &__upload-link { diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js index 9b6d48b4ee46e..2e878395a3abe 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js @@ -2,21 +2,19 @@ * WordPress dependencies */ import { MediaUpload } from '@wordpress/block-editor'; -import { Button, TextControl, BaseControl } from '@wordpress/components'; -import { createInterpolateElement, useRef, useState } from '@wordpress/element'; -import { escapeHTML } from '@wordpress/escape-html'; +import { Button, BaseControl } from '@wordpress/components'; +import { createInterpolateElement, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Icon } from '@wordpress/icons'; import classNames from 'classnames'; +/** + * Internal dependencies + */ import playIcon from '../../../../../components/icons/play-icon'; import VideoFrameSelector from '../../../../../components/video-frame-selector'; const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ]; -const removeFileNameExtension = name => { - return name.replace( /\.[^/.]+$/, '' ); -}; - const PosterImage = ( { videoPosterImageUrl } ) => { return (
@@ -112,24 +110,11 @@ const UploadingEditor = props => { onSelectPoster, onRemovePoster, videoPosterImageData, - onChangeTitle, onVideoFrameSelected, } = props; - const filename = removeFileNameExtension( escapeHTML( file?.name ) ); - const [ title, setTitle ] = useState( filename ); - const handleTitleChange = newTitle => { - onChangeTitle( newTitle ); - setTitle( newTitle ); - }; return (
- { +const usePosterAndTitleUpdate = ( { setAttributes, videoData, onDone } ) => { const [ isFinishingUpdate, setIsFinishingUpdate ] = useState( false ); const [ videoFrameMs, setVideoFrameMs ] = useState( null ); const [ videoPosterImageData, setVideoPosterImageData ] = useState( null ); - const [ title, setTitle ] = useState( null ); + const { title } = videoData; - const guid = attributes?.guid; + const guid = videoData?.guid; const videoPressUploadPoster = usePosterUpload( guid ); const videoPressGetPoster = usePosterImage( guid ); - const updateMeta = useMetaUpdate( attributes?.id ); + const updateMeta = useMetaUpdate( videoData?.id ); const getPosterImage = () => { return new Promise( ( resolve, reject ) => { @@ -104,27 +106,32 @@ const usePosterAndTitleUpdate = ( { setAttributes, attributes, onDone } ) => { updates.push( sendUpdateTitleRequest() ); } - if ( videoPosterImageData ) { - updates.push( sendUpdatePoster( { poster_attachment_id: videoPosterImageData?.id } ) ); - } else if ( - // Check if videoFrameMs is not undefined or null instead of bool check to allow 0ms. selection - 'undefined' !== typeof videoFrameMs && - null !== videoFrameMs - ) { - updates.push( sendUpdatePoster( { at_time: videoFrameMs, is_millisec: true } ) ); - } - Promise.allSettled( updates ).then( () => { setIsFinishingUpdate( false ); + setAttributes( videoData ); onDone(); } ); }; + useEffect( () => { + if ( ! guid ) { + return; + } + + if ( videoPosterImageData ) { + return sendUpdatePoster( { poster_attachment_id: videoPosterImageData?.id } ); + } + + // Check if videoFrameMs is not undefined or null instead of bool check to allow 0ms. selection + if ( 'undefined' !== typeof videoFrameMs && null !== videoFrameMs ) { + sendUpdatePoster( { at_time: videoFrameMs, is_millisec: true } ); + } + }, [ videoPosterImageData, videoFrameMs, guid ] ); + return [ handleVideoFrameSelected, handleSelectPoster, handleRemovePoster, - setTitle, handleDoneUpload, videoPosterImageData, isFinishingUpdate, @@ -137,7 +144,7 @@ const UploaderProgress = ( { progress, file, paused, - completed, + uploadedVideoData, onPauseOrResume, onDone, supportPauseOrResume, @@ -148,11 +155,14 @@ const UploaderProgress = ( { handleVideoFrameSelected, handleSelectPoster, handleRemovePoster, - handleChangeTitle, handleDoneUpload, videoPosterImageData, isFinishingUpdate, - ] = usePosterAndTitleUpdate( { setAttributes, attributes, onDone } ); + ] = usePosterAndTitleUpdate( { + setAttributes, + videoData: { ...uploadedVideoData, title: attributes.title }, + onDone, + } ); const roundedProgress = Math.round( progress ); const cssWidth = { width: `${ roundedProgress }%` }; @@ -162,18 +172,29 @@ const UploaderProgress = ( { // Support File from library or File instance const fileSizeLabel = file?.filesizeHumanReadable ?? filesize( file?.size ); + const { title } = attributes; + const filename = removeFileNameExtension( escapeHTML( file?.name ) ); + return ( + setAttributes( { title: newTitle } ) } + value={ title } + placeholder={ filename } + /> + +
- { completed ? ( + { uploadedVideoData ? ( <> { __( 'Upload Complete!', 'jetpack-videopress-pkg' ) } 🎉