VideoPress: fix setting title when uploading video file (#28329)

* [not verified] move title handling to uploader progress cmp * [not verified] minor tidy changes * [not verified] remove local state to set the title * [not verified] order the updating requests * [not verified] try to update the poster asap * changelog
Automattic · Jan 12, 2023 · 6e5acaf · 6e5acaf
1 parent a000af6
commit 6e5acaf
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 55 deletions.
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
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+VideoPress: fix setting title when uploading video file
diff --git a/...s/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js b/...s/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/...videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss b/...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/...ss/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js b/...ss/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 (
 		<div className="uploading-editor__poster-image">
@@ -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 (
 		<div className="uploading-editor">
-			<TextControl
-				label={ __( 'Video title', 'jetpack-videopress-pkg' ) }
-				className="uploading-editor__title"
-				onChange={ handleTitleChange }
-				value={ title }
-			/>
 			<BaseControl label={ __( 'Video poster (optional)', 'jetpack-videopress-pkg' ) }>
 				<Poster
 					file={ file }

diff --git a/.../src/client/block-editor/blocks/video/components/videopress-uploader/uploader-progress.js b/.../src/client/block-editor/blocks/video/components/videopress-uploader/uploader-progress.js
@@ -2,8 +2,9 @@
  * External dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { Button, Spinner } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { Button, Spinner, TextControl } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import { escapeHTML } from '@wordpress/escape-html';
 import { __, sprintf } from '@wordpress/i18n';
 import filesize from 'filesize';
 /**
@@ -12,19 +13,20 @@ import filesize from 'filesize';
 import useMetaUpdate from '../../../../../hooks/use-meta-update.js';
 import usePosterImage from '../../../../../hooks/use-poster-image.js';
 import usePosterUpload from '../../../../../hooks/use-poster-upload.js';
+import { removeFileNameExtension } from '../../../../../lib/url';
 import { PlaceholderWrapper } from '../../edit';
 import UploadingEditor from './uploader-editor.js';
 
-const usePosterAndTitleUpdate = ( { setAttributes, attributes, onDone } ) => {
+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 (
 		<PlaceholderWrapper disableInstructions>
+			<TextControl
+				label={ __( 'Video title', 'jetpack-videopress-pkg' ) }
+				className="uploading-editor__title"
+				onChange={ newTitle => setAttributes( { title: newTitle } ) }
+				value={ title }
+				placeholder={ filename }
+			/>
+
 			<UploadingEditor
 				file={ file }
 				onSelectPoster={ handleSelectPoster }
 				onRemovePoster={ handleRemovePoster }
-				onChangeTitle={ handleChangeTitle }
 				onVideoFrameSelected={ handleVideoFrameSelected }
 				videoPosterImageData={ videoPosterImageData }
 			/>
+
 			<div className="videopress-uploader-progress">
-				{ completed ? (
+				{ uploadedVideoData ? (
 					<>
 						<span>{ __( 'Upload Complete!', 'jetpack-videopress-pkg' ) } 🎉</span>
 						<Button

diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
@@ -291,7 +291,6 @@ export default function VideoPressEdit( {
 	}
 
 	useEffect( () => {
-		debug( 'Generating preview ➡ Attemp %o 💉', generatingPreviewCounter );
 		if ( generatingPreviewCounter >= VIDEO_PREVIEW_ATTEMPTS_LIMIT ) {
 			debug( 'Generating preview ➡ attempts number reached out 😪', generatingPreviewCounter );
 			return cleanRegeneratingProcessTimer();

diff --git a/projects/packages/videopress/src/client/lib/url/index.ts b/projects/packages/videopress/src/client/lib/url/index.ts
@@ -125,3 +125,7 @@ export function buildVideoPressURL(
 
 	return false;
 }
+
+export const removeFileNameExtension = ( name: string ) => {
+	return name.replace( /\.[^/.]+$/, '' );
+};