From 88e2fad83b408a1c2cc926663f84dd413a9a64a8 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 2 May 2023 16:17:42 -0400 Subject: [PATCH 01/10] Update player status when WebView loads --- .../blocks/video/components/player/index.native.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js index 3fe7f2fe4c53c..ffbc138c9d0c8 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; /** * External dependencies */ -import { View, Text } from 'react-native'; +import { View, Text, Platform } from 'react-native'; /** * Internal dependencies */ @@ -115,6 +115,7 @@ export default function Player( { isSelected, attributes } ) { return () => clearTimeout( previewCheckTimer.current ); }, [ preview, isPlayerLoaded, isRequestingEmbedPreview, previewCheckAttempts ] ); + // Handle events from the embed const onSandboxMessage = useCallback( message => { switch ( message.event ) { case 'videopress_ready': @@ -126,6 +127,12 @@ 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 ); + }, [] ); + const loadingOverlay = ( @@ -151,6 +158,7 @@ export default function Player( { isSelected, attributes } ) { html={ html } onWindowEvents={ { message: onSandboxMessage } } viewportProps="user-scalable=0" + onLoadEnd={ onLoadEnd } /> ) } From a60efbcb2bee5db731beac47eddd119d6185fc73 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 2 May 2023 17:26:21 -0400 Subject: [PATCH 02/10] add changelog --- .../changelog/rnmobile-update-loading-screen-android | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/videopress/changelog/rnmobile-update-loading-screen-android diff --git a/projects/packages/videopress/changelog/rnmobile-update-loading-screen-android b/projects/packages/videopress/changelog/rnmobile-update-loading-screen-android new file mode 100644 index 0000000000000..6c32762dce2b4 --- /dev/null +++ b/projects/packages/videopress/changelog/rnmobile-update-loading-screen-android @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fix player loading screen on Android From 5480046ef5fe8e190c35d74572c3468c1f1868e0 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Thu, 4 May 2023 13:35:06 -0400 Subject: [PATCH 03/10] Update changelog --- projects/packages/videopress/package.json | 2 +- projects/packages/videopress/src/class-package-version.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json index 622db290b72b6..5b82d6a7558c3 100644 --- a/projects/packages/videopress/package.json +++ b/projects/packages/videopress/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@automattic/jetpack-videopress", - "version": "0.14.0-alpha", + "version": "0.14.1-alpha", "description": "VideoPress package", "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/videopress/#readme", "bugs": { diff --git a/projects/packages/videopress/src/class-package-version.php b/projects/packages/videopress/src/class-package-version.php index 38a38f45b8a53..8022433ba8bb4 100644 --- a/projects/packages/videopress/src/class-package-version.php +++ b/projects/packages/videopress/src/class-package-version.php @@ -11,7 +11,7 @@ * The Package_Version class. */ class Package_Version { - const PACKAGE_VERSION = '0.14.0-alpha'; + const PACKAGE_VERSION = '0.14.1-alpha'; const PACKAGE_SLUG = 'videopress'; From aa70933cfc31ab448e07d9fbdb0d4f5a242279fc Mon Sep 17 00:00:00 2001 From: jhnstn Date: Fri, 5 May 2023 22:21:39 -0400 Subject: [PATCH 04/10] Update native player overlay Render a Pressable component to send the embed content to a native WebView. --- .../video/components/player/index.native.js | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js index ffbc138c9d0c8..5e3030d559f8b 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js @@ -6,10 +6,11 @@ import { store as coreStore } from '@wordpress/core-data'; import { useDispatch } from '@wordpress/data'; import { useState, useEffect, useRef, useCallback } 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, Platform, 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.OS === 'android'; /** * VideoPlayer react component * @@ -130,7 +131,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,6 +145,22 @@ export default function Player( { isSelected, attributes } ) { ); + let overlay = ! isSelected && ; + + // On Android render an overlay to send the embed markup to a native WebView. + if ( isSelected && IS_ANDROID ) { + overlay = ( + + { + requestEmbedFullscreenPreview( html, preview.title ); + } } + /> + + ); + } + // Show the loading overlay when: // 1. Player is not ready // 2. Player is loaded but preview is not ready @@ -151,7 +168,7 @@ export default function Player( { isSelected, attributes } ) { return ( - { ! isSelected && } + { overlay } { showLoadingOverlay && loadingOverlay } { html && ( Date: Mon, 8 May 2023 15:13:39 -0400 Subject: [PATCH 05/10] Update changelog --- projects/packages/videopress/package.json | 2 +- projects/packages/videopress/src/class-package-version.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json index a0a6b1ae7215b..cf361cb394b9c 100644 --- a/projects/packages/videopress/package.json +++ b/projects/packages/videopress/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@automattic/jetpack-videopress", - "version": "0.14.1", + "version": "0.14.2-alpha", "description": "VideoPress package", "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/videopress/#readme", "bugs": { diff --git a/projects/packages/videopress/src/class-package-version.php b/projects/packages/videopress/src/class-package-version.php index c8ea9a50393ae..3b09c0aa19e8e 100644 --- a/projects/packages/videopress/src/class-package-version.php +++ b/projects/packages/videopress/src/class-package-version.php @@ -11,7 +11,7 @@ * The Package_Version class. */ class Package_Version { - const PACKAGE_VERSION = '0.14.1'; + const PACKAGE_VERSION = '0.14.2-alpha'; const PACKAGE_SLUG = 'videopress'; From ee648319ed73f75c0b90b1606a7c3ef5558ca52c Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 9 May 2023 11:45:46 -0400 Subject: [PATCH 06/10] Add changelog --- .../videopress/changelog/videopress-rnmobile-android-webview | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/videopress/changelog/videopress-rnmobile-android-webview diff --git a/projects/packages/videopress/changelog/videopress-rnmobile-android-webview b/projects/packages/videopress/changelog/videopress-rnmobile-android-webview new file mode 100644 index 0000000000000..bebc59bbd9903 --- /dev/null +++ b/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 From 8132d5dd6d13395dd92f88fb1ff45ce08602154d Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 9 May 2023 11:50:24 -0400 Subject: [PATCH 07/10] Move styles to external file --- .../blocks/video/components/player/index.native.js | 2 +- .../blocks/video/components/player/style.native.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js index 5e3030d559f8b..a119650d85201 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js @@ -152,7 +152,7 @@ export default function Player( { isSelected, attributes } ) { overlay = ( { requestEmbedFullscreenPreview( html, preview.title ); } } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss index 223b9dd49e9ff..c3283a66a7168 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss @@ -11,6 +11,11 @@ z-index: 1; } +.videopress-player__open-embed-button { + width: 100%; + height: 100%; +} + .videopress-player__loading { display: flex; justify-content: space-evenly; From 77ad8203862db43b7cc23ad6180ebe424849af1b Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 9 May 2023 13:32:07 -0400 Subject: [PATCH 08/10] Use attribute title --- .../blocks/video/components/player/index.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js index a119650d85201..f8756687cc09e 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js @@ -44,6 +44,7 @@ export default function Player( { isSelected, attributes } ) { seekbarColor, seekbarLoadingColor, seekbarPlayedColor, + title, } = attributes; const iconStyle = style[ 'videopress-player__loading-icon' ]; @@ -154,7 +155,7 @@ export default function Player( { isSelected, attributes } ) { { - requestEmbedFullscreenPreview( html, preview.title ); + requestEmbedFullscreenPreview( html, title ); } } /> From 8b3f0716427613a46a860c06bbcf39eea72156ae Mon Sep 17 00:00:00 2001 From: jhnstn Date: Wed, 10 May 2023 12:04:08 -0400 Subject: [PATCH 09/10] Fix nitpicks --- .../blocks/video/components/player/index.native.js | 5 +++-- .../blocks/video/components/player/style.native.scss | 3 +-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js index f8756687cc09e..d13104bb30805 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js @@ -7,10 +7,11 @@ import { useDispatch } from '@wordpress/data'; import { useState, useEffect, useRef, useCallback } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { requestEmbedFullscreenPreview } from '@wordpress/react-native-bridge'; +import { Platform } from '@wordpress/element'; /** * External dependencies */ -import { View, Text, Platform, Pressable } from 'react-native'; +import { View, Text, Pressable } from 'react-native'; /** * Internal dependencies */ @@ -23,7 +24,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.OS === 'android'; +const IS_ANDROID = Platform.isAndroid; /** * VideoPlayer react component * diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss index c3283a66a7168..3543f6ad05ecd 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/style.native.scss @@ -12,8 +12,7 @@ } .videopress-player__open-embed-button { - width: 100%; - height: 100%; + flex-grow: 1; } .videopress-player__loading { From 5c41993e9a8a308d10e09a269bc889cb6c8d94c6 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Wed, 10 May 2023 13:57:39 -0400 Subject: [PATCH 10/10] Fix double import --- .../blocks/video/components/player/index.native.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js index c5ccd26be6f8c..1214202fc29c6 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js @@ -4,10 +4,9 @@ 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'; -import { Platform } from '@wordpress/element'; /** * External dependencies */