VideoPress: update UI/UX when the video block doesn't belong to site

projects/packages/videopress/changelog/update-videopress-add-not-edition-allowed-notice

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+VideoPress: add a Notice when trying to edit a video that doesn't belong to the site

projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.tsx

@@ -16,11 +16,11 @@ import { __ } from '@wordpress/i18n';
 import ChaptersLearnMoreHelper from '../../../../../components/chapters-learn-more-helper';
 import IncompleteChaptersNotice from '../../../../../components/incomplete-chapters-notice';
 import useChaptersLiveParsing from '../../../../../hooks/use-chapters-live-parsing';
-import { DetailsPanelProps } from '../../types';
 import './styles.scss';
 /**
  * Types
  */
+import type { DetailsPanelProps } from '../../types';
 import type React from 'react';
 
 const CHARACTERS_PER_LINE = 31;
@@ -62,6 +62,15 @@ export default function DetailsPanel( {
 
 	return (
 		<PanelBody title={ __( 'Details', 'jetpack-videopress-pkg' ) }>
+			{ ! videoBelongToSite && (
+				<Notice status="warning" isDismissible={ false } className="not-belong-to-site-notice">
+					{ __(
+						'This video is not owned by this site. You can still embed it and customize the player, but you won’t be able to edit the video.',
+						'jetpack-videopress-pkg'
+					) }
+				</Notice>
+			) }
+
 			<TextControl
 				label={ __( 'Title', 'jetpack-videopress-pkg' ) }
 				value={ title }

projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/styles.scss

@@ -1,4 +1,5 @@
 .details-panel__error,
+.not-belong-to-site-notice,
 .learn-how-notice {
 	margin: 0;
 
@@ -21,3 +22,8 @@
 	// Match helper text margin
 	margin-top: calc( -1 * calc( var( --spacing-base ) * 2 ) ); // -16px
 }
+
+.not-belong-to-site-notice {
+	--spacing-base: 8px;
+	margin-bottom: calc( var( --spacing-base ) * 2 );
+}

projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx

@@ -438,6 +438,7 @@ export default function PosterPanel( {
 	attributes,
 	setAttributes,
 	isGeneratingPoster,
+	videoBelongToSite,
 }: PosterPanelProps ): React.ReactElement {
 	const { poster, posterData } = attributes;
 
@@ -547,8 +548,9 @@ export default function PosterPanel( {
 		<PanelBody title={ panelTitle } className="poster-panel" initialOpen={ false }>
 			<ToggleControl
 				label={ __( 'Pick from video frame', 'jetpack-videopress-pkg' ) }
-				checked={ pickPosterFromFrame }
+				checked={ pickPosterFromFrame && videoBelongToSite }
 				onChange={ switchPosterSource }
+				disabled={ ! videoBelongToSite }
 			/>
 
 			<div

projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/index.tsx

@@ -5,19 +5,19 @@ import PrivacyAndRatingSettings from './privacy-and-rating-settings';
 /**
  * Types
  */
-import type { VideoControlProps } from '../../types';
+import type { PrivacyAndRatingPanelProps } from '../../types';
 import type React from 'react';
 
 /**
  * React component that renders the main privacy and ratings panel.
  *
- * @param {VideoControlProps} props - Component props.
- * @returns {React.ReactElement}    - Panel to contain privacy and ratings settings.
+ * @param {PrivacyAndRatingPanelProps} props - Component props.
+ * @returns {React.ReactElement}               Panel to contain privacy and ratings settings.
  */
 export default function PrivacyAndRatingPanel( {
 	attributes,
 	setAttributes,
 	privateEnabledForSite,
-}: VideoControlProps ): React.ReactElement {
+}: PrivacyAndRatingPanelProps ): React.ReactElement {
 	return <PrivacyAndRatingSettings { ...{ attributes, setAttributes, privateEnabledForSite } } />;
 }

projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.tsx

@@ -18,20 +18,21 @@ import {
 /**
  * Types
  */
-import type { VideoControlProps } from '../../types';
+import type { PrivacyAndRatingPanelProps } from '../../types';
 import type React from 'react';
 
 /**
  * React component that renders the settings within the privacy and ratings panel.
  *
- * @param {VideoControlProps} props - Component props.
- * @returns {React.ReactElement}    - Settings to change video's privacy and ratings.
+ * @param {PrivacyAndRatingPanelProps} props - Component props.
+ * @returns {React.ReactElement}               Settings to change video's privacy and ratings.
  */
 export default function PrivacyAndRatingSettings( {
 	attributes,
 	setAttributes,
 	privateEnabledForSite,
-}: VideoControlProps ): React.ReactElement {
+	videoBelongToSite,
+}: PrivacyAndRatingPanelProps ): React.ReactElement {
 	const { privacySetting, rating, allowDownload, displayEmbed } = attributes;
 
 	const privacyLabels = {
@@ -82,6 +83,7 @@ export default function PrivacyAndRatingSettings( {
 				onChange={ value => {
 					setAttributes( { rating: value } );
 				} }
+				disabled={ ! videoBelongToSite }
 			/>
 
 			<SelectControl
@@ -104,6 +106,7 @@ export default function PrivacyAndRatingSettings( {
 				} }
 				value={ String( privacySetting ) }
 				options={ [ privacyOptionSiteDefault, privacyOptionPublic, privacyOptionPrivate ] }
+				disabled={ ! videoBelongToSite }
 			/>
 
 			<ToggleControl
@@ -112,6 +115,7 @@ export default function PrivacyAndRatingSettings( {
 				onChange={ value => {
 					setAttributes( { allowDownload: value } );
 				} }
+				disabled={ ! videoBelongToSite }
 			/>
 
 			<ToggleControl
@@ -124,6 +128,7 @@ export default function PrivacyAndRatingSettings( {
 					'Gives viewers the option to share the video link and HTML embed code',
 					'jetpack-videopress-pkg'
 				) }
+				disabled={ ! videoBelongToSite }
 			/>
 		</PanelBody>
 	);

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

@@ -535,10 +535,17 @@ export default function VideoPressEdit( {
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 					isGeneratingPoster={ isGeneratingPoster }
+					videoBelongToSite={ videoBelongToSite }
 				/>
 
 				<PrivacyAndRatingPanel
-					{ ...{ attributes, setAttributes, isRequestingVideoData, privateEnabledForSite } }
+					{ ...{
+						attributes,
+						setAttributes,
+						isRequestingVideoData,
+						privateEnabledForSite,
+						videoBelongToSite,
+					} }
 				/>
 			</InspectorControls>
 

projects/packages/videopress/src/client/block-editor/blocks/video/types.ts

@@ -152,6 +152,11 @@ export type VideoControlProps = {
 
 export type PosterPanelProps = VideoControlProps & {
 	isGeneratingPoster?: boolean;
+	videoBelongToSite?: boolean;
+};
+
+export type PrivacyAndRatingPanelProps = VideoControlProps & {
+	videoBelongToSite?: boolean;
 };
 
 export type VideoEditProps = VideoControlProps;