Polish the VideoPress connection banner

Automattic · Oct 2, 2024 · 2ec67e5 · 2ec67e5
1 parent b3d8290
commit 2ec67e5
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/...ages/videopress/src/client/block-editor/blocks/video/components/banner/connect-banner.tsx b/...ages/videopress/src/client/block-editor/blocks/video/components/banner/connect-banner.tsx
@@ -35,6 +35,8 @@ export default function ConnectBanner( {
 		return null;
 	}
 
+	const needsActivation = isConnected && ! isModuleActive;
+
 	let connectButtonText = __( 'Connect Jetpack', 'jetpack-videopress-pkg' );
 	if ( isConnecting ) {
 		connectButtonText = __( 'Redirecting…', 'jetpack-videopress-pkg' );
@@ -63,12 +65,12 @@ export default function ConnectBanner( {
 					disabled={ isConnecting }
 					isBusy={ isConnecting }
 				>
-					{ ! isModuleActive ? activateButtonText : connectButtonText }
+					{ needsActivation ? activateButtonText : connectButtonText }
 				</Button>
 			}
 			icon={ '' }
 		>
-			{ ! isModuleActive ? connectJetpackModuleMessage : connectYourAccountMessage }
+			{ needsActivation ? connectJetpackModuleMessage : connectYourAccountMessage }
 		</Banner>
 	);
 }
diff --git a/...cts/packages/videopress/src/client/block-editor/blocks/video/components/banner/style.scss b/...cts/packages/videopress/src/client/block-editor/blocks/video/components/banner/style.scss
@@ -11,7 +11,7 @@
 
     .block-banner__content {
         color: white;
-        margin: 0 8px;
+        margin: 10px 10px 10px 0;
     }
 
     .block-banner__action {

diff --git a/...s/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js b/...s/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js
@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { usePermission } from '../../../../../admin/hooks/use-permission';
 import useResumableUploader from '../../../../../hooks/use-resumable-uploader';
 import { uploadFromLibrary } from '../../../../../hooks/use-uploader';
 import { buildVideoPressURL, pickVideoBlockAttributesFromUrl } from '../../../../../lib/url';
@@ -36,6 +37,8 @@ const VideoPressUploader = ( {
 	const [ isUploadingInProgress, setIsUploadingInProgress ] = useState( false );
 	const [ isVerifyingLocalMedia, setIsVerifyingLocalMedia ] = useState( false );
 
+	const { hasConnectedOwner } = usePermission();
+
 	/*
 	 * When the file to upload is set, start the upload process
 	 * just after the component is mounted.
@@ -315,15 +318,20 @@ const VideoPressUploader = ( {
 		);
 	}
 
+	const needsConnectionText = __(
+		'Connect your WordPress.com account to enable high-quality, ad-free video.',
+		'jetpack-videopress-pkg'
+	);
+
+	const needsActivationText = __(
+		'Activate the VideoPress module to enable high-quality, ad-free video.',
+		'jetpack-videopress-pkg'
+	);
+
 	if ( ! isActive ) {
 		return (
 			<PlaceholderWrapper disableInstructions className="disabled">
-				<span>
-					{ __(
-						'Connect your WordPress.com account to enable high-quality, ad-free video.',
-						'jetpack-videopress-pkg'
-					) }
-				</span>
+				<span>{ ! hasConnectedOwner ? needsConnectionText : needsActivationText }</span>
 			</PlaceholderWrapper>
 		);
 	}

diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
@@ -21,6 +21,7 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
+import { usePermission } from '../../../admin/hooks/use-permission';
 import {
 	isStandaloneActive,
 	isVideoPressActive,
@@ -150,6 +151,7 @@ export default function VideoPressEdit( {
 
 	// Get the redirect URI for the connection flow.
 	const [ isRedirectingToMyJetpack, setIsRedirectingToMyJetpack ] = useState( false );
+	const { hasConnectedOwner } = usePermission();
 
 	// Detect if the chapter file is auto-generated.
 	const chapter = tracks?.filter( track => track.kind === 'chapters' )?.[ 0 ];
@@ -397,15 +399,15 @@ export default function VideoPressEdit( {
 			<div { ...blockProps } className={ blockMainClassName }>
 				<>
 					<ConnectBanner
-						isConnected={ isActive }
+						isConnected={ hasConnectedOwner }
 						isModuleActive={ isModuleActive || isStandalonePluginActive }
 						isConnecting={ isRedirectingToMyJetpack }
 						onConnect={ () => {
 							setIsRedirectingToMyJetpack( true );
-							if ( ! isStandalonePluginActive ) {
-								return ( window.location.href = jetpackVideoPressSettingUrl );
+							if ( ! hasConnectedOwner ) {
+								return ( window.location.href = myJetpackConnectUrl );
 							}
-							window.location.href = myJetpackConnectUrl;
+							window.location.href = jetpackVideoPressSettingUrl;
 						} }
 					/>
 
@@ -595,15 +597,15 @@ export default function VideoPressEdit( {
 
 			<ConnectBanner
 				isModuleActive={ isModuleActive || isStandalonePluginActive }
-				isConnected={ isActive }
+				isConnected={ hasConnectedOwner }
 				isConnecting={ isRedirectingToMyJetpack }
 				onConnect={ () => {
 					setIsRedirectingToMyJetpack( true );
-					if ( ! isStandalonePluginActive ) {
-						return ( window.location.href = jetpackVideoPressSettingUrl );
+					if ( ! hasConnectedOwner ) {
+						return ( window.location.href = myJetpackConnectUrl );
 					}
 
-					window.location.href = myJetpackConnectUrl;
+					window.location.href = jetpackVideoPressSettingUrl;
 				} }
 			/>