From 18103d2242a82818f2f24697b50f3cdd886956fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Tue, 10 Jan 2023 19:35:28 +0000
Subject: [PATCH] VideoPress: clean video attributes that are not options when
 replacing the video file (#28249)

* clean attrs that are not options when replacing

* changelog

* fix setting defauls attribute values issue

* replace block when replacing with a new file
---
 ...-videopress-fix-replace-by-uploading-issue |  4 ++++
 .../client/block-editor/blocks/video/edit.tsx | 20 +++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 projects/packages/videopress/changelog/update-videopress-fix-replace-by-uploading-issue

diff --git a/projects/packages/videopress/changelog/update-videopress-fix-replace-by-uploading-issue b/projects/packages/videopress/changelog/update-videopress-fix-replace-by-uploading-issue
new file mode 100644
index 0000000000000..5e1642a0d8026
--- /dev/null
+++ b/projects/packages/videopress/changelog/update-videopress-fix-replace-by-uploading-issue
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+VideoPress: clean video attributes that are not options when replacing the video file
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
index 104c85672df8d..576759a6d2318 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import {
 	BlockIcon,
 	useBlockProps,
 	InspectorControls,
 	BlockControls,
 } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
 import { Spinner, Placeholder, Button, withNotices } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -32,13 +33,14 @@ import TracksControl from './components/tracks-control';
 import VideoPressPlayer from './components/videopress-player';
 import VideoPressUploader from './components/videopress-uploader';
 import { description, title } from '.';
-import './editor.scss';
 /**
  * Types
  */
 import type { VideoBlockAttributes } from './types';
 import type React from 'react';
 
+import './editor.scss';
+
 const debug = debugFactory( 'videopress:video:edit' );
 
 const VIDEO_PREVIEW_ATTEMPTS_LIMIT = 10;
@@ -334,6 +336,8 @@ export default function VideoPressEdit( {
 	const [ isUploadingFile, setIsUploadingFile ] = useState( ! guid );
 	const [ fileToUpload, setFileToUpload ] = useState( null );
 
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
 	// Replace video state
 	const [ isReplacingFile, setIsReplacingFile ] = useState< {
 		isReplacing: boolean;
@@ -370,6 +374,10 @@ export default function VideoPressEdit( {
 	if ( isUploadingFile ) {
 		const handleDoneUpload = () => {
 			setIsUploadingFile( false );
+			if ( isReplacingFile.isReplacing ) {
+				setIsReplacingFile( { isReplacing: false, prevAttrs: {} } );
+				replaceBlock( clientId, createBlock( 'videopress/video', { ...attributes } ) );
+			}
 		};
 
 		return (
@@ -458,13 +466,17 @@ export default function VideoPressEdit( {
 					setAttributes={ setAttributes }
 					attributes={ attributes }
 					onUploadFileStart={ media => {
+						// Store current attributes in case we wanto to cancel the replacing.
 						setIsReplacingFile( {
 							isReplacing: true,
 							prevAttrs: attributes,
 						} );
-
-						setAttributes( { id: null, guid: null } );
 						setIsUploadingFile( true );
+
+						// Clean relevant attributes to show the uploader placeholder.
+						setAttributes( { id: null, guid: null, cacheHtml: '', videoRatio: null } );
+
+						// Pass, through local state, the new file to upload.
 						setFileToUpload( media );
 					} }
 					onSelectVideoFromLibrary={ media => {