[RNMobile] Disable VideoPress settings for not belonged videos (#30759)

* Disable details block settings if video does not belong to site * Add video not owned message to Details panel * Add changelog * Update VideoPress package version * Fix styles import in `DetailsPanel` component * Render warning component after detail settings * Disable privacy and rating settings if video does not belong to site * Add `VideoNotOwnedWarning` component * Show video not owned warning in Privacy and Rating panel * Update changelog
Automattic · May 19, 2023 · 5f34572 · 5f34572
1 parent 3297328
commit 5f34572
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 6 deletions.
diff --git a/...ts/packages/videopress/changelog/rnmobile-videopress-disable-settings-not-belonged-videos b/...ts/packages/videopress/changelog/rnmobile-videopress-disable-settings-not-belonged-videos
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+RNMobile: Disable VideoPress settings if video does not belong to the site
diff --git a/.../videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js b/.../videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js
@@ -3,16 +3,21 @@
  */
 import { PanelBody, TextControl, BottomSheetTextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import VideoNotOwnedWarning from '../video-not-owned-warning';
 
 /**
  * React component that renders the details settings panel.
  *
  * @param {object} props - Component properties.
  * @param {object} props.attributes - Block attributes.
  * @param {Function} props.setAttributes - Function to set attributes.
+ * @param {Function} props.videoBelongToSite - Determines if the video belongs to the current site.
  * @returns {import('react').ReactElement} - Details panel component.
  */
-export default function DetailsPanel( { attributes, setAttributes } ) {
+export default function DetailsPanel( { attributes, setAttributes, videoBelongToSite } ) {
 	const { title, description } = attributes;
 
 	return (
@@ -22,13 +27,16 @@ export default function DetailsPanel( { attributes, setAttributes } ) {
 				onChange={ value => setAttributes( { title: value } ) }
 				placeholder={ __( 'Add title', 'jetpack-videopress-pkg' ) }
 				label={ __( 'Title', 'jetpack-videopress-pkg' ) }
+				disabled={ ! videoBelongToSite }
 			/>
 			<BottomSheetTextControl
 				initialValue={ description }
 				onChange={ value => setAttributes( { description: value } ) }
 				placeholder={ __( 'Add description', 'jetpack-videopress-pkg' ) }
 				label={ __( 'Description', 'jetpack-videopress-pkg' ) }
+				disabled={ ! videoBelongToSite }
 			/>
+			{ ! videoBelongToSite && <VideoNotOwnedWarning /> }
 		</PanelBody>
 	);
 }
diff --git a/.../src/client/block-editor/blocks/video/components/privacy-and-rating-panel/index.native.js b/.../src/client/block-editor/blocks/video/components/privacy-and-rating-panel/index.native.js
@@ -18,12 +18,14 @@ import PrivacyAndRatingSettings from './privacy-and-rating-settings';
  * @param {object} props.attributes - Block attributes.
  * @param {Function} props.setAttributes - Function to set block attributes.
  * @param {boolean} props.privateEnabledForSite	- True if the site's privacy is set to Private.
+ * @param {boolean} props.videoBelongToSite - Determines if the video belongs to the current site.
  * @returns {import('react').ReactElement} - Panel to contain privacy and ratings settings.
  */
 export default function PrivacyAndRatingPanel( {
 	attributes,
 	setAttributes,
 	privateEnabledForSite,
+	videoBelongToSite,
 } ) {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -58,7 +60,9 @@ export default function PrivacyAndRatingPanel( {
 						{ __( 'Privacy and Rating', 'jetpack-videopress-pkg' ) }
 					</BottomSheet.NavBar.Heading>
 				</BottomSheet.NavBar>
-				<PrivacyAndRatingSettings { ...{ attributes, setAttributes, privateEnabledForSite } } />
+				<PrivacyAndRatingSettings
+					{ ...{ attributes, setAttributes, privateEnabledForSite, videoBelongToSite } }
+				/>
 			</>
 		</BottomSheet.SubSheet>
 	);

diff --git a/...or/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.native.js b/...or/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.native.js
@@ -15,6 +15,7 @@ import {
 	VIDEO_RATING_PG_13,
 	VIDEO_RATING_R_17,
 } from '../../../../../state/constants';
+import VideoNotOwnedWarning from '../video-not-owned-warning';
 
 /**
  * React component that renders the settings within the privacy and ratings panel.
@@ -23,12 +24,14 @@ import {
  * @param {object} props.attributes - Block attributes.
  * @param {Function} props.setAttributes - Function to set block attributes.
  * @param {boolean} props.privateEnabledForSite - True if the site's privacy is set to Private.
+ * @param {boolean} props.videoBelongToSite - Determines if the video belongs to the current site.
  * @returns {import('react').ReactElement} - Settings to change video's privacy and ratings.
  */
 export default function PrivacyAndRatingSettings( {
 	attributes,
 	setAttributes,
 	privateEnabledForSite,
+	videoBelongToSite,
 } ) {
 	const { privacySetting, rating, allowDownload, displayEmbed } = attributes;
 
@@ -80,6 +83,7 @@ export default function PrivacyAndRatingSettings( {
 				onChange={ value => {
 					setAttributes( { rating: value } );
 				} }
+				disabled={ ! videoBelongToSite }
 			/>
 
 			<SelectControl
@@ -99,6 +103,7 @@ export default function PrivacyAndRatingSettings( {
 				} }
 				value={ String( privacySetting ) }
 				options={ [ privacyOptionSiteDefault, privacyOptionPublic, privacyOptionPrivate ] }
+				disabled={ ! videoBelongToSite }
 			/>
 
 			<ToggleControl
@@ -107,6 +112,7 @@ export default function PrivacyAndRatingSettings( {
 				onChange={ value => {
 					setAttributes( { allowDownload: value } );
 				} }
+				disabled={ ! videoBelongToSite }
 			/>
 
 			<ToggleControl
@@ -119,7 +125,10 @@ export default function PrivacyAndRatingSettings( {
 					'Gives viewers the option to share the video link and HTML embed code',
 					'jetpack-videopress-pkg'
 				) }
+				disabled={ ! videoBelongToSite }
 			/>
+
+			{ ! videoBelongToSite && <VideoNotOwnedWarning /> }
 		</PanelBody>
 	);
 }
diff --git a/...s/src/client/block-editor/blocks/video/components/video-not-owned-warning/index.native.js b/...s/src/client/block-editor/blocks/video/components/video-not-owned-warning/index.native.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { Icon, warning } from '@wordpress/icons';
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+/**
+ * React component that renders a warning message about the video not owned by the site.
+ *
+ * @returns {import('react').ReactElement} - Details panel component.
+ */
+export default function VideoNotOwnedWarning() {
+	const msgStyle = usePreferredColorSchemeStyle(
+		styles[ 'video-not-owned-notice__message' ],
+		styles[ 'video-not-owned-notice__message--dark' ]
+	);
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'video-not-owned-notice__icon' ],
+		styles[ 'video-not-owned-notice__icon--dark' ]
+	);
+	return (
+		<View style={ styles[ 'video-not-owned-notice__container' ] }>
+			<Icon style={ iconStyle } icon={ warning } />
+			<Text style={ msgStyle }>
+				{ __(
+					'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'
+				) }
+			</Text>
+		</View>
+	);
+}
diff --git a/...rc/client/block-editor/blocks/video/components/video-not-owned-warning/styles.native.scss b/...rc/client/block-editor/blocks/video/components/video-not-owned-warning/styles.native.scss
@@ -0,0 +1,26 @@
+.video-not-owned-notice__container {
+    flex-direction: row;
+	align-items: center;
+	padding: 8px 0;
+	justify-content: space-between;
+}
+
+.video-not-owned-notice__message {
+	font-size: 11px;
+	font-weight: 500;
+	color: $yellow-50;
+	flex: 1;
+}
+
+.video-not-owned-notice__message--dark {
+	color: $yellow-30;
+}
+
+.video-not-owned-notice__icon {
+	color: $yellow-50;
+	margin-right: 5px;
+}
+
+.video-not-owned-notice__icon--dark {
+	color: $yellow-30;
+}
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.native.js
@@ -89,7 +89,7 @@ export default function VideoPressEdit( {
 		[ setAttributes ]
 	);
 
-	const { videoData } = useSyncMedia( attributes, setAttributes );
+	const { videoData, videoBelongToSite } = useSyncMedia( attributes, setAttributes );
 	const { private_enabled_for_site: privateEnabledForSite } = videoData;
 
 	const handleDoneUpload = useCallback(
@@ -213,11 +213,13 @@ export default function VideoPressEdit( {
 
 			{ isSelected && (
 				<InspectorControls>
-					<DetailsPanel { ...{ attributes, setAttributes } } />
+					<DetailsPanel { ...{ attributes, setAttributes, videoBelongToSite } } />
 					<PanelBody title={ __( 'More', 'jetpack-videopress-pkg' ) }>
 						<PlaybackPanel { ...{ attributes, setAttributes } } />
 						<ColorPanel { ...{ attributes, setAttributes } } />
-						<PrivacyAndRatingPanel { ...{ attributes, setAttributes, privateEnabledForSite } } />
+						<PrivacyAndRatingPanel
+							{ ...{ attributes, setAttributes, privateEnabledForSite, videoBelongToSite } }
+						/>
 					</PanelBody>
 				</InspectorControls>
 			) }

diff --git a/projects/packages/videopress/src/client/block-editor/hooks/use-sync-media/index.native.js b/projects/packages/videopress/src/client/block-editor/hooks/use-sync-media/index.native.js
@@ -69,7 +69,7 @@ const invalidateEmbedResolutionFields = [
  */
 export function useSyncMedia( attributes, setAttributes ) {
 	const { id, guid, isPrivate } = attributes;
-	const { videoData, isRequestingVideoData } = useVideoData( {
+	const { videoData, isRequestingVideoData, videoBelongToSite } = useVideoData( {
 		id,
 		guid,
 		skipRatingControl: true,
@@ -259,6 +259,7 @@ export function useSyncMedia( attributes, setAttributes ) {
 		forceInitialState: updateInitialState,
 		videoData,
 		isRequestingVideoData,
+		videoBelongToSite,
 		error,
 	};
 }