From 5f3457299197bd6adbcae147a0928f4bdba74407 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 19 May 2023 15:22:38 +0200 Subject: [PATCH] [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 --- ...press-disable-settings-not-belonged-videos | 4 ++ .../components/details-panel/index.native.js | 10 ++++- .../privacy-and-rating-panel/index.native.js | 6 ++- .../privacy-and-rating-settings.native.js | 9 ++++ .../video-not-owned-warning/index.native.js | 41 +++++++++++++++++++ .../styles.native.scss | 26 ++++++++++++ .../block-editor/blocks/video/edit.native.js | 8 ++-- .../hooks/use-sync-media/index.native.js | 3 +- 8 files changed, 101 insertions(+), 6 deletions(-) create mode 100644 projects/packages/videopress/changelog/rnmobile-videopress-disable-settings-not-belonged-videos create mode 100644 projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/index.native.js create mode 100644 projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/styles.native.scss diff --git a/projects/packages/videopress/changelog/rnmobile-videopress-disable-settings-not-belonged-videos b/projects/packages/videopress/changelog/rnmobile-videopress-disable-settings-not-belonged-videos new file mode 100644 index 0000000000000..f07b18976b192 --- /dev/null +++ b/projects/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/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js index 81e2f950d5a0d..21d0d45ae7187 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js @@ -3,6 +3,10 @@ */ 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. @@ -10,9 +14,10 @@ import { __ } from '@wordpress/i18n'; * @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 } /> setAttributes( { description: value } ) } placeholder={ __( 'Add description', 'jetpack-videopress-pkg' ) } label={ __( 'Description', 'jetpack-videopress-pkg' ) } + disabled={ ! videoBelongToSite } /> + { ! videoBelongToSite && } ); } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/index.native.js index 9cb909a6f91a2..5110cf08e69e6 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/index.native.js +++ b/projects/packages/videopress/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' ) } - + ); diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.native.js index b09fcd53836a6..3f615320ae9e2 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.native.js +++ b/projects/packages/videopress/src/client/block-editor/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 } /> { setAttributes( { allowDownload: value } ); } } + disabled={ ! videoBelongToSite } /> + + { ! videoBelongToSite && } ); } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/index.native.js new file mode 100644 index 0000000000000..2f70bf4d4a331 --- /dev/null +++ b/projects/packages/videopress/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 ( + + + + { __( + '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' + ) } + + + ); +} diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/styles.native.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/styles.native.scss new file mode 100644 index 0000000000000..c22f087608717 --- /dev/null +++ b/projects/packages/videopress/src/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; +} \ No newline at end of file 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 index 191e65aa54ed9..52b53d303cc53 100644 --- 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 && ( - + - + ) } 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 index b3765ff94ef54..5495496ee4c2a 100644 --- 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, }; }