[RNMobile] Sync VideoPress metadata when post is manually saved

projects/packages/videopress/changelog/rnmobile-detect-when-post-is-saved

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+VideoPress block: Sync metadata when post is manually saved on native

projects/packages/videopress/src/client/block-editor/blocks/video/edit.native.js

@@ -8,7 +8,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
-import { PanelBody, BottomSheet } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -68,7 +68,7 @@ export default function VideoPressEdit( {
 		[ clientId ]
 	);
 	const { replaceBlock } = useDispatch( blockEditorStore );
-	const { createErrorNotice, createSuccessNotice } = useDispatch( noticesStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	// Display upload progress in case the editor is closed and re-opened
 	// while the upload is in progress.
@@ -89,22 +89,7 @@ export default function VideoPressEdit( {
 		[ setAttributes ]
 	);
 
-	// TODO: This is a temporary solution for manually saving block settings.
-	// This will be removed and replaced with a more robust solution before the block is shipped to users.
-	// See: https://github.com/Automattic/jetpack/pull/29996
-	const [ blockSettingsSaved, setBlockSettingsSaved ] = useState( false );
-
-	const onSaveBlockSettings = () => {
-		setBlockSettingsSaved( true );
-		createSuccessNotice( 'Block settings saved.' );
-	};
-
-	const { videoData } = useSyncMedia(
-		attributes,
-		setAttributes,
-		blockSettingsSaved,
-		setBlockSettingsSaved
-	);
+	const { videoData } = useSyncMedia( attributes, setAttributes );
 	const { private_enabled_for_site: privateEnabledForSite } = videoData;
 
 	const handleDoneUpload = useCallback(
@@ -231,9 +216,6 @@ export default function VideoPressEdit( {
 						<ColorPanel { ...{ attributes, setAttributes } } />
 						<PrivacyAndRatingPanel { ...{ attributes, setAttributes, privateEnabledForSite } } />
 					</PanelBody>
-					<PanelBody title={ 'Temporary for Testing' }>
-						<BottomSheet.Cell label={ 'Save Settings' } onPress={ onSaveBlockSettings } />
-					</PanelBody>
 				</InspectorControls>
 			) }
 

projects/packages/videopress/src/client/block-editor/hooks/use-sync-media/index.ts

@@ -7,6 +7,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { useEffect, useState, useCallback, Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { subscribePostSaveEvent } from '@wordpress/react-native-bridge';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -147,15 +148,11 @@ function arrangeTracksAttributes(
  *
  * @param {object} attributes      - Block attributes.
  * @param {Function} setAttributes - Block attributes setter.
- * @param {boolean} blockSettingsSaved  - Temporary attribute to track when block settings have been saved on native.
- * @param {Function} setBlockSettingsSaved  - Temporary attribute to track manually control when settings are synchronised on native.
  * @returns {UseSyncMedia}      Hook API object.
  */
 export function useSyncMedia(
 	attributes: VideoBlockAttributes,
-	setAttributes: VideoBlockSetAttributesProps,
-	blockSettingsSaved = false,
-	setBlockSettingsSaved
+	setAttributes: VideoBlockSetAttributesProps
 ): UseSyncMedia {
 	const { id, guid, isPrivate } = attributes;
 	const { videoData, isRequestingVideoData } = useVideoData( {
@@ -169,6 +166,23 @@ export function useSyncMedia(
 
 	const isSaving = useSelect( select => select( editorStore ).isSavingPost(), [] );
 	const wasSaving = usePrevious( isSaving );
+
+	// In native, it's not currently possible to access a post's saved state from the editor store.
+	// We therefore need to listen to a native event emitter to know when a post has just been saved.
+	const [ postHasBeenJustSavedNative, setPostHasBeenJustSavedNative ] = useState( false );
+
+	useEffect( () => {
+		if ( ! isNative ) {
+			return;
+		}
+
+		const subscription = subscribePostSaveEvent( () => setPostHasBeenJustSavedNative( true ) );
+
+		return () => {
+			subscription?.remove();
+		};
+	}, [] );
+
 	const invalidateResolution = useDispatch( coreStore ).invalidateResolution;
 
 	const [ initialState, setState ] = useState< VideoDataProps >( {} );
@@ -276,7 +290,9 @@ export function useSyncMedia(
 
 	const updateMediaHandler = useMediaDataUpdate( id );
 
-	const postHasBeenJustSaved = isNative ? blockSettingsSaved : !! ( wasSaving && ! isSaving );
+	const postHasBeenJustSaved = isNative
+		? postHasBeenJustSavedNative
+		: !! ( wasSaving && ! isSaving );
 
 	/*
 	 * Video frame poster: Block attributes => Frame poster generation
@@ -299,12 +315,10 @@ export function useSyncMedia(
 			return;
 		}
 
-		if ( isNative ) {
-			setBlockSettingsSaved( false );
-		}
-
 		debug( '%o Post has been just saved. Syncing...', attributes?.guid );
 
+		isNative && setPostHasBeenJustSavedNative( false );
+
 		if ( ! attributes?.id ) {
 			debug( '%o No media ID found. Impossible to sync. Bail early', attributes?.guid );
 			return;