[RNMobile] VideoPress Android WebView (#30521)

* Update player status when WebView loads

* add changelog

* Update changelog

* Update native player overlay

Render a Pressable component to send the embed content to a native
WebView.

* Update changelog

* Add changelog

* Move styles to external file

* Use attribute title

* Fix nitpicks

* Fix double import

---------

Co-authored-by: jhnstn <jhnstn@pm.me>

projects/packages/videopress/changelog/videopress-rnmobile-android-webview

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Use native embed WebView for the VideoPress editor preview on Android

projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js

@@ -4,12 +4,13 @@
 import { SandBox, Icon } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
-import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+import { useState, useEffect, useRef, useCallback, Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { requestEmbedFullscreenPreview } from '@wordpress/react-native-bridge';
 /**
  * External dependencies
  */
-import { View, Text, Platform } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 /**
  * Internal dependencies
  */
@@ -22,7 +23,7 @@ import style from './style.scss';
 
 const VIDEO_PREVIEW_ATTEMPTS_LIMIT = 10;
 const DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9; // This is the observed default aspect ratio from VideoPress embeds.
-
+const IS_ANDROID = Platform.isAndroid;
 /**
  * VideoPlayer react component
  *
@@ -43,6 +44,7 @@ export default function Player( { isSelected, attributes } ) {
 		seekbarColor,
 		seekbarLoadingColor,
 		seekbarPlayedColor,
+		title,
 	} = attributes;
 
 	const iconStyle = style[ 'videopress-player__loading-icon' ];
@@ -130,7 +132,7 @@ export default function Player( { isSelected, attributes } ) {
 	// Android does not receive a 'videopress_ready' event,
 	// so we need to set the player as ready when the WebView loads.
 	const onLoadEnd = useCallback( () => {
-		Platform.OS === 'android' && setIsPlayerReady( true );
+		IS_ANDROID && setIsPlayerReady( true );
 	}, [] );
 
 	const loadingOverlay = (
@@ -144,14 +146,30 @@ export default function Player( { isSelected, attributes } ) {
 		</View>
 	);
 
+	let overlay = ! isSelected && <View style={ style[ 'videopress-player__overlay' ] } />;
+
+	// On Android render an overlay to send the embed markup to a native WebView.
+	if ( isSelected && IS_ANDROID ) {
+		overlay = (
+			<View style={ style[ 'videopress-player__overlay' ] }>
+				<Pressable
+					style={ style[ 'videopress-player__open-embed-button' ] }
+					onPress={ () => {
+						requestEmbedFullscreenPreview( html, title );
+					} }
+				/>
+			</View>
+		);
+	}
+
 	// Show the loading overlay when:
 	// 1. Player is not ready
 	// 2. Player is loaded but preview is not ready
 	const showLoadingOverlay = ! isPlayerReady || ( isPlayerLoaded && ! isPreviewReady );
 
 	return (
 		<View style={ [ style[ 'videopress-player' ], { aspectRatio } ] }>
-			{ ! isSelected && <View style={ style[ 'videopress-player__overlay' ] } /> }
+			{ overlay }
 			{ showLoadingOverlay && loadingOverlay }
 			{ html && (
 				<SandBox

projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss

@@ -11,6 +11,10 @@
 	z-index: 1;
 }
 
+.videopress-player__open-embed-button {
+	flex-grow: 1;
+}
+
 .videopress-player__loading {
 	display: flex;
 	justify-content: space-evenly;