[RNMobile] Fetch VideoPress token (#29756)

* Add native version of `getMediaToken`

* Fetch token upon block mount

* Add changelog

* Fix lint issue

* Revert code removal after merge with `trunk`

projects/packages/videopress/changelog/rnmobile-videopress-fetch-token

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+VideoPress block: Add native version of `getMediaToken` function to fetch the VideoPress token.

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

@@ -21,6 +21,7 @@ import { View } from 'react-native';
 /**
  * Internal dependencies
  */
+import getMediaToken from '../../../lib/get-media-token/index.native';
 import { buildVideoPressURL, getVideoPressUrl } from '../../../lib/url';
 import { usePreview } from '../../hooks/use-preview';
 import isLocalFile from '../../utils/is-local-file.native';
@@ -76,6 +77,21 @@ export default function VideoPressEdit( {
 		isReplacing: false,
 		prevAttrs: {},
 	} );
+	const [ , setToken ] = useState< string >();
+
+	// Fetch token for a VideoPress GUID
+	useEffect( () => {
+		if ( guid ) {
+			getMediaToken( 'playback', { guid } )
+				.then( tokenData => {
+					setToken( tokenData.token );
+				} )
+				.catch( error => {
+					// eslint-disable-next-line no-console
+					console.error( "Can't obtain the token:", error );
+				} );
+		}
+	}, [ guid ] );
 
 	const [ showReplaceControl, setShowReplaceControl ] = useState( true );
 

projects/packages/videopress/src/client/lib/get-media-token/index.native.ts

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+/**
+ * Internal dependencies
+ */
+import { MEDIA_TOKEN_SCOPES } from './types';
+/**
+ * Types
+ */
+import type { MediaTokenScopeProps, MediaTokenProps, GetMediaTokenArgsProps } from './types';
+
+type Response = {
+	metadata_token: string;
+	blog_id: string;
+};
+
+/**
+ * Request media token data hiting WPCOM API.
+ *
+ * @param {MediaTokenScopeProps} scope  - The scope of the token to request.
+ * @param {GetMediaTokenArgsProps} args - function arguments.
+ * @returns {MediaTokenProps}             Media token data.
+ */
+const requestMediaToken = function (
+	scope: MediaTokenScopeProps,
+	args: GetMediaTokenArgsProps = {}
+): Promise< MediaTokenProps > {
+	const { guid } = args;
+	return new Promise( function ( resolve, reject ) {
+		if ( ! MEDIA_TOKEN_SCOPES.includes( scope ) ) {
+			return reject( 'Invalid scope' );
+		}
+
+		const fetchParams: { path: string; body: object } = { path: '', body: {} };
+
+		switch ( scope ) {
+			case 'upload':
+				return reject( '"upload" scope is not supported.' );
+
+			case 'upload-jwt':
+				return reject( '"upload-jwt" scope is not supported.' );
+
+			case 'playback':
+				fetchParams.path = `/wpcom/v2/media/videopress-playback-jwt/${ guid }`;
+				fetchParams.body = {};
+				break;
+		}
+
+		apiFetch< Response >( {
+			path: fetchParams.path,
+			method: 'POST',
+			body: fetchParams.body,
+		} )
+			.then( response => {
+				resolve( { token: response.metadata_token } );
+			} )
+			.catch( error => {
+				console.warn( 'Token is not achievable', error ); // eslint-disable-line no-console
+				resolve( { token: null } );
+			} );
+	} );
+};
+
+/**
+ * Return media token data from fetch request.
+ *
+ * NOTE: In the native version, the token is not persisted.
+ *
+ * @param {MediaTokenScopeProps} scope  - The scope of the token to request.
+ * @param {GetMediaTokenArgsProps} args - function arguments.
+ * @returns {MediaTokenProps}             Media token data.
+ */
+async function getMediaToken(
+	scope: MediaTokenScopeProps,
+	args: GetMediaTokenArgsProps = {}
+): Promise< MediaTokenProps > {
+	const { flushToken } = args;
+
+	if ( flushToken ) {
+		// eslint-disable-next-line no-console
+		console.warn( 'Token is not persisted in the native version.' );
+	}
+
+	return await requestMediaToken( scope, args );
+}
+
+export default getMediaToken;