[RNMobile] Android player controls

projects/packages/videopress/changelog/update-rnmobile-android-player

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Add manual controls to the player on Android

projects/packages/videopress/src/client/block-editor/blocks/video/components/player/controls/icons/icon-pause.native.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M5 20C5 20.5523 5.44772 21 6 21H9C9.55229 21 10 20.5523 10 20L10 4C10 3.44772 9.55228 3 9 3H6C5.44771 3 5 3.44772 5 4V20Z M14 20C14 20.5523 14.4477 21 15 21H18C18.5523 21 19 20.5523 19 20V4C19 3.44772 18.5523 3 18 3H15C14.4477 3 14 3.44772 14 4L14 20Z"
+			fill="white"
+		/>
+	</SVG>
+);

projects/packages/videopress/src/client/block-editor/blocks/video/components/player/controls/icons/icon-play.native.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M4.75725 2.075C4.60279 1.97745 4.41041 1.97489 4.25365 2.06832C4.09689 2.16174 4 2.3367 4 2.52632V21.4737C4 21.6633 4.09689 21.8383 4.25365 21.9317C4.41041 22.0251 4.60279 22.0226 4.75725 21.925L19.7573 12.4513C19.9079 12.3562 20 12.1849 20 12C20 11.8151 19.9079 11.6438 19.7573 11.5487L4.75725 2.075Z"
+			fill="white"
+		/>
+	</SVG>
+);

projects/packages/videopress/src/client/block-editor/blocks/video/components/player/controls/icons/icon-replay.native.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M8.73333 5L5 9.34483M5 9.34483L8.73333 13.2069M5 9.34483C8.11111 9.34483 12.2778 9.34483 15.2644 9.34483C15.2644 9.34483 19 9.34483 19 14.1724C19 19 16.6667 19 11.5333 19"
+			stroke="white"
+			stroke-width="1.5"
+		/>
+	</SVG>
+);

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

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { View, Pressable } from 'react-native';
+/**
+ * Internal dependencies
+ */
+import PauseIcon from './icons/icon-pause.native.js';
+import PlayIcon from './icons/icon-play.native.js';
+import ReplayIcon from './icons/icon-replay.native.js';
+import style from './style.scss';
+
+const PlayerControls = ( { isSelected, playEnded, onToggle } ) => {
+	const [ showControlIcon, setShowControlIcon ] = useState( true );
+	const [ isPlaying, setIsPlaying ] = useState( false );
+	const [ isFinishedPlaying, setIsFinishedPlaying ] = useState( playEnded );
+
+	// Update the state when the video ends.
+	useEffect( () => {
+		if ( playEnded ) {
+			setShowControlIcon( true );
+		}
+		setIsFinishedPlaying( playEnded );
+	}, [ playEnded ] );
+
+	// Clear out the state when deselected.
+	useEffect( () => {
+		if ( ! isSelected ) {
+			setIsPlaying( false );
+			setIsFinishedPlaying( false );
+		}
+	}, [ isSelected ] );
+
+	// Hide the play/pause button after a short delay.
+	const hidePauseTimer = useRef();
+	useEffect( () => {
+		if ( isPlaying ) {
+			hidePauseTimer.current = setTimeout( () => {
+				! isFinishedPlaying && setShowControlIcon( false );
+			}, 800 );
+		}
+		return () => {
+			clearTimeout( hidePauseTimer.current );
+		};
+	}, [ isPlaying ] );
+
+	const togglePlayState = useCallback( () => {
+		setIsFinishedPlaying( false );
+		setShowControlIcon( true );
+
+		onToggle( isPlaying ? 'pause' : 'play' );
+		setIsPlaying( ! isPlaying );
+	}, [ isPlaying ] );
+
+	let icon = PlayIcon;
+
+	if ( isPlaying ) {
+		icon = PauseIcon;
+	}
+
+	if ( isFinishedPlaying ) {
+		icon = ReplayIcon;
+	}
+
+	const iconStyle = style[ 'videopress-player__overlay-controls-button-icon' ];
+	const renderButton = () => (
+		<View style={ style[ 'videopress-player__overlay-controls-button' ] }>
+			{ showControlIcon && <Icon icon={ icon } size={ iconStyle.size } style={ iconStyle } /> }
+		</View>
+	);
+
+	if ( ! isSelected ) {
+		return renderButton();
+	}
+
+	return (
+		<View style={ style[ 'videopress-player__overlay-controls' ] }>
+			<Pressable onPress={ togglePlayState }>{ renderButton() }</Pressable>
+		</View>
+	);
+};
+
+export default PlayerControls;

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

@@ -0,0 +1,22 @@
+.videopress-player__overlay-controls {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	z-index: 1;
+}
+
+.videopress-player__overlay-controls-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+}
+
+.videopress-player__overlay-controls-button-icon {
+	width: 64px;
+	height: 64px;
+	size: 64;
+}

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

@@ -9,14 +9,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * External dependencies
  */
-import { View, Text } from 'react-native';
+import { View, Text, Platform } from 'react-native';
 /**
  * Internal dependencies
  */
 import getMediaToken from '../../../../../lib/get-media-token/index.native';
 import { getVideoPressUrl } from '../../../../../lib/url';
 import { usePreview } from '../../../../hooks/use-preview';
 import addTokenIntoIframeSource from '../../../../utils/add-token-iframe-source';
+import PlayerControls from './controls';
 import style from './style.scss';
 
 const VIDEO_PREVIEW_ATTEMPTS_LIMIT = 10;
@@ -51,6 +52,15 @@ export default function Player( { isSelected, attributes } ) {
 	const [ previewCheckAttempts, setPreviewCheckAttempts ] = useState( 0 );
 	const previewCheckTimer = useRef();
 
+	// Used for Android controls only
+	const [ playEnded, setPlayEnded ] = useState( false );
+	const playerRef = useRef();
+	const onToggleEvent = useCallback( event => {
+		playerRef.current?.injectJavaScript( `
+			document?.querySelector('iframe')?.contentWindow.postMessage({event: 'videopress_action_${ event }'}, '*');
+		` );
+	}, [] );
+
 	// Fetch token for a VideoPress GUID
 	useEffect( () => {
 		if ( guid ) {
@@ -62,7 +72,7 @@ export default function Player( { isSelected, attributes } ) {
 
 	const videoPressUrl = getVideoPressUrl( guid, {
 		autoplay: false, // Note: Autoplay is disabled to prevent the video from playing fullscreen when loading the editor.
-		controls,
+		controls: Platform.OS === 'ios',
 		loop,
 		muted,
 		playsinline,
@@ -98,24 +108,58 @@ export default function Player( { isSelected, attributes } ) {
 		return () => clearTimeout( previewCheckTimer.current );
 	}, [ preview, isPlayerLoaded, isRequestingEmbedPreview, previewCheckAttempts ] );
 
-	const onSandboxMessage = useCallback( message => {
-		if ( message.event === 'videopress_loading_state' && message.state === 'loaded' ) {
-			setIsPlayerLoaded( true );
+	const onSandboxMessage = message => {
+		switch ( message.event ) {
+			case 'videopress_loading_state':
+				if ( message.state === 'loaded' ) {
+					setIsPlayerLoaded( true );
+				}
+				break;
+
+			// Events use for the Android controls
+			case 'videopress_ended':
+				setPlayEnded( true );
+				break;
+			case 'videopress_playing':
+				if ( playEnded ) {
+					setPlayEnded( false );
+				}
+				break;
 		}
-	}, [] );
+	};
 
 	const loadingStyle = {};
 	if ( ! isPreviewReady( preview ) ) {
 		loadingStyle.height = 250;
 	}
 
+	const renderOverlay = () => {
+		// Show custom controls on Android only
+		if ( Platform.OS === 'android' && isPlayerLoaded ) {
+			return (
+				<View style={ style[ 'videopress-player__overlay' ] }>
+					<PlayerControls
+						isSelected={ isSelected }
+						playEnded={ playEnded }
+						onToggle={ onToggleEvent }
+					/>
+				</View>
+			);
+		}
+
+		if ( ! isSelected ) {
+			return <View style={ style[ 'videopress-player__overlay' ] } />;
+		}
+	};
+
 	const renderEmbed = () => {
 		if ( html ) {
 			return (
 				<SandBox
 					html={ html }
 					onWindowEvents={ { message: onSandboxMessage } }
 					viewportProps="user-scalable=0"
+					ref={ playerRef }
 				/>
 			);
 		}
@@ -124,7 +168,7 @@ export default function Player( { isSelected, attributes } ) {
 
 	return (
 		<View style={ [ style[ 'videopress-player' ], loadingStyle ] }>
-			{ ! isSelected && <View style={ style[ 'videopress-player__overlay' ] } /> }
+			{ renderOverlay() }
 			{ renderEmbed() }
 		</View>
 	);

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

@@ -10,3 +10,26 @@
 	width: 100%;
 	z-index: 1;
 }
+
+.videopress-player__overlay-controls {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	z-index: 1;
+}
+
+.videopress-player__overlay-controls-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+}
+
+.videopress-player__overlay-controls-button-icon {
+	width: 64px;
+	height: 64px;
+	size: 64;
+}

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

@@ -16,6 +16,7 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * External dependencies
  */
+import React from 'react';
 import { View } from 'react-native';
 /**
  * Internal dependencies