VideoPress: dont allow editing video data when doesn't belong to site

projects/packages/videopress/changelog/update-videopress-propagate-belong-to-to-client-side

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+VideoPress: dont allow editing video data when the video doesn't belong to the site

projects/packages/videopress/src/class-wpcom-rest-api-v2-endpoint-videopress.php

@@ -209,10 +209,10 @@ public function videopress_video_belong_to_site( $request ) {
 		}
 
 		if ( ! $found_guid ) {
-			return rest_ensure_response( false );
+			return rest_ensure_response( array( 'video-belong-to-site' => false ) );
 		}
 
-		return rest_ensure_response( $found_guid === $video_guid );
+		return rest_ensure_response( array( 'video-belong-to-site' => $found_guid === $video_guid ) );
 	}
 
 	/**

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

@@ -39,6 +39,7 @@ export default function DetailsPanel( {
 	setAttributes,
 	isRequestingVideoData,
 	updateError,
+	videoBelongToSite,
 }: DetailsPanelProps ) {
 	const { title, description } = attributes;
 	const { hasIncompleteChapters } = useChaptersLiveParsing( description );
@@ -68,7 +69,7 @@ export default function DetailsPanel( {
 					filename?.length ? `${ filename } video` : __( 'Video title', 'jetpack-videopress-pkg' )
 				}
 				onChange={ value => setAttributes( { title: value } ) }
-				disabled={ isRequestingVideoData || !! updateError }
+				disabled={ isRequestingVideoData || !! updateError || ! videoBelongToSite }
 			/>
 
 			<TextareaControl
@@ -77,7 +78,7 @@ export default function DetailsPanel( {
 				placeholder={ __( 'Video description', 'jetpack-videopress-pkg' ) }
 				onChange={ value => setAttributes( { description: value } ) }
 				rows={ descriptionControlRows }
-				disabled={ isRequestingVideoData || !! updateError }
+				disabled={ isRequestingVideoData || !! updateError || ! videoBelongToSite }
 				help={ descriptionHelp }
 			/>
 

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

@@ -158,6 +158,7 @@ export default function VideoPressEdit( {
 		error: syncError,
 		isOverwriteChapterAllowed,
 		isGeneratingPoster,
+		videoBelongToSite,
 	} = useSyncMedia( attributes, setAttributes );
 
 	const { filename, private_enabled_for_site: privateEnabledForSite } = videoData;
@@ -523,6 +524,7 @@ export default function VideoPressEdit( {
 					isAutoGeneratedChapter={ isOverwriteChapterAllowed }
 					updateError={ syncError }
 					isRequestingVideoData={ isRequestingVideoData }
+					videoBelongToSite={ videoBelongToSite }
 					{ ...{ attributes, setAttributes } }
 				/>
 

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

@@ -162,6 +162,7 @@ export type DetailsPanelProps = VideoControlProps & {
 	isAutoGeneratedChapter: boolean;
 	updateError: object | null;
 	isRequestingVideoData: boolean;
+	videoBelongToSite: boolean;
 };
 
 export type VideoPreviewProps = {

projects/packages/videopress/src/client/block-editor/hooks/use-sync-media/index.ts

@@ -152,7 +152,7 @@ export function useSyncMedia(
 	setAttributes: VideoBlockSetAttributesProps
 ): UseSyncMedia {
 	const { id, guid, isPrivate } = attributes;
-	const { videoData, isRequestingVideoData } = useVideoData( {
+	const { videoData, isRequestingVideoData, videoBelongToSite } = useVideoData( {
 		id,
 		guid,
 		skipRatingControl: true,
@@ -425,6 +425,7 @@ export function useSyncMedia(
 		forceInitialState: updateInitialState,
 		videoData,
 		isRequestingVideoData,
+		videoBelongToSite,
 		error,
 		isOverwriteChapterAllowed,
 		isGeneratingPoster,

projects/packages/videopress/src/client/block-editor/hooks/use-sync-media/types.ts

@@ -9,6 +9,7 @@ export type UseSyncMedia = {
 	error: object | null;
 	isOverwriteChapterAllowed: boolean;
 	isGeneratingPoster: boolean;
+	videoBelongToSite: boolean;
 };
 
 export type ArrangeTracksAttributesProps = [ Array< TrackProps >, boolean ];

projects/packages/videopress/src/client/block-editor/hooks/use-video-data/index.ts

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import apiFetch from '@wordpress/api-fetch';
 import { useEffect, useState, Platform } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import debugFactory from 'debug';
@@ -34,6 +35,7 @@ export default function useVideoData( {
 }: UseVideoDataArgumentsProps ): UseVideoDataProps {
 	const [ videoData, setVideoData ] = useState< VideoDataProps >( {} );
 	const [ isRequestingVideoData, setIsRequestingVideoData ] = useState( false );
+	const [ videoBelongToSite, setVideoBelongToSite ] = useState( true );
 
 	useEffect( () => {
 		// Skip check for native as only simple WordPress.com sites are supported in the current native block.
@@ -94,6 +96,28 @@ export default function useVideoData( {
 					is_private: response.is_private,
 					private_enabled_for_site: response.private_enabled_for_site,
 				} );
+
+				// Check if the video belongs to the current site.
+				try {
+					const doesBelong: {
+						'video-belong-to-site'?: boolean;
+						body?: {
+							'video-belong-to-site'?: boolean;
+						};
+					} = await apiFetch( {
+						path: `/wpcom/v2/videopress/${ guid }/check-ownership/${ response.post_id }`,
+						method: 'GET',
+					} );
+
+					// Response shape can change depending on the envelope mode.
+					setVideoBelongToSite(
+						typeof doesBelong?.[ 'video-belong-to-site' ] === 'boolean'
+							? doesBelong[ 'video-belong-to-site' ]
+							: !! doesBelong?.body?.[ 'video-belong-to-site' ]
+					);
+				} catch ( error ) {
+					debug( 'Error checking if video belongs to site', error );
+				}
 			} catch ( errorData ) {
 				setIsRequestingVideoData( false );
 				throw new Error( errorData?.message ?? errorData );
@@ -106,5 +130,5 @@ export default function useVideoData( {
 		}
 	}, [ id, guid ] );
 
-	return { videoData, isRequestingVideoData };
+	return { videoData, isRequestingVideoData, videoBelongToSite };
 }

projects/packages/videopress/src/client/block-editor/hooks/use-video-data/types.ts

@@ -30,4 +30,5 @@ export type VideoDataProps = {
 export type UseVideoDataProps = {
 	videoData: VideoDataProps;
 	isRequestingVideoData: boolean;
+	videoBelongToSite: boolean;
 };