From 35f408f8b63d4717146b5ee0c17fdfa56bc4f6f4 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 12 May 2023 18:58:39 +0200 Subject: [PATCH 01/10] Disable details block settings if video does not belong to site --- .../blocks/video/components/details-panel/index.native.js | 5 ++++- .../src/client/block-editor/blocks/video/edit.native.js | 4 ++-- .../client/block-editor/hooks/use-sync-media/index.native.js | 3 ++- 3 files changed, 8 insertions(+), 4 deletions(-) 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..e3e7813d32236 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 @@ -10,9 +10,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,12 +23,14 @@ 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 } /> ); 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..63a9bf050a3b9 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,7 +213,7 @@ 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, }; } From ee4f2b0cdb7edfe8232c1057e6cc8261c6572941 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 12 May 2023 18:59:28 +0200 Subject: [PATCH 02/10] Add video not owned message to Details panel --- .../components/details-panel/index.native.js | 31 +++++++++++++++++++ .../details-panel/styles.native.scss | 26 ++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/styles.native.scss 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 e3e7813d32236..4f6147029cd27 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 @@ -2,7 +2,17 @@ * WordPress dependencies */ import { PanelBody, TextControl, BottomSheetTextControl } from '@wordpress/components'; +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'; /** * React component that renders the details settings panel. @@ -16,8 +26,29 @@ import { __ } from '@wordpress/i18n'; export default function DetailsPanel( { attributes, setAttributes, videoBelongToSite } ) { const { title, description } = attributes; + 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' ] + ); + const videoNotOwnedMessage = ( + + + + { __( + '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' + ) } + + + ); + return ( + { ! videoBelongToSite && videoNotOwnedMessage } setAttributes( { title: value } ) } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/styles.native.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/styles.native.scss new file mode 100644 index 0000000000000..c22f087608717 --- /dev/null +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/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 From 8e45418e1925877a0b06e66df56ed174b323f62a Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 12 May 2023 19:00:40 +0200 Subject: [PATCH 03/10] Add changelog --- ...le-videopress-disable-details-settings-not-belonged-videos | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/videopress/changelog/rnmobile-videopress-disable-details-settings-not-belonged-videos diff --git a/projects/packages/videopress/changelog/rnmobile-videopress-disable-details-settings-not-belonged-videos b/projects/packages/videopress/changelog/rnmobile-videopress-disable-details-settings-not-belonged-videos new file mode 100644 index 0000000000000..d29d2b08df639 --- /dev/null +++ b/projects/packages/videopress/changelog/rnmobile-videopress-disable-details-settings-not-belonged-videos @@ -0,0 +1,4 @@ +Significance: patch +Type: added + +RNMobile: Disable Details settings if video does not belong to the site From 399cef3d90dd0bdd8b37f5d21108cb01782b9de9 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 16 May 2023 20:40:17 +0200 Subject: [PATCH 04/10] Update VideoPress package version --- projects/packages/videopress/package.json | 2 +- projects/packages/videopress/src/class-package-version.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json index 03b221f0eb39f..5a885834c4c18 100644 --- a/projects/packages/videopress/package.json +++ b/projects/packages/videopress/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@automattic/jetpack-videopress", - "version": "0.14.3", + "version": "0.14.4-alpha", "description": "VideoPress package", "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/videopress/#readme", "bugs": { diff --git a/projects/packages/videopress/src/class-package-version.php b/projects/packages/videopress/src/class-package-version.php index b8cde6edd23c6..3f652e1a6e36e 100644 --- a/projects/packages/videopress/src/class-package-version.php +++ b/projects/packages/videopress/src/class-package-version.php @@ -11,7 +11,7 @@ * The Package_Version class. */ class Package_Version { - const PACKAGE_VERSION = '0.14.3'; + const PACKAGE_VERSION = '0.14.4-alpha'; const PACKAGE_SLUG = 'videopress'; From 510bbcfbf07e02fe623eb4627e00497ba010df95 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 17 May 2023 13:51:46 +0200 Subject: [PATCH 05/10] Fix styles import in `DetailsPanel` component --- .../blocks/video/components/details-panel/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 4f6147029cd27..588a9c193b84c 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 @@ -12,7 +12,7 @@ import { Text, View } from 'react-native'; /** * Internal dependencies */ -import styles from './styles'; +import styles from './styles.scss'; /** * React component that renders the details settings panel. From 1fed6557cb63595fddb62daa44f666ccd3d2a6e6 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Wed, 17 May 2023 15:40:22 +0200 Subject: [PATCH 06/10] Render warning component after detail settings --- .../blocks/video/components/details-panel/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 588a9c193b84c..25b53970078c6 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 @@ -48,7 +48,6 @@ export default function DetailsPanel( { attributes, setAttributes, videoBelongTo return ( - { ! videoBelongToSite && videoNotOwnedMessage } setAttributes( { title: value } ) } @@ -63,6 +62,7 @@ export default function DetailsPanel( { attributes, setAttributes, videoBelongTo label={ __( 'Description', 'jetpack-videopress-pkg' ) } disabled={ ! videoBelongToSite } /> + { ! videoBelongToSite && videoNotOwnedMessage } ); } From bccfe6bfd07bb62fc51c85bc46db9d4422d6dfd6 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 18 May 2023 10:48:11 +0200 Subject: [PATCH 07/10] Disable privacy and rating settings if video does not belong to site --- .../components/privacy-and-rating-panel/index.native.js | 6 +++++- .../privacy-and-rating-settings.native.js | 6 ++++++ .../src/client/block-editor/blocks/video/edit.native.js | 4 +++- 3 files changed, 14 insertions(+), 2 deletions(-) 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..ba36c1304d4a0 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 @@ -23,12 +23,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 +82,7 @@ export default function PrivacyAndRatingSettings( { onChange={ value => { setAttributes( { rating: value } ); } } + disabled={ ! videoBelongToSite } /> { setAttributes( { allowDownload: value } ); } } + disabled={ ! videoBelongToSite } /> ); 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 63a9bf050a3b9..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 @@ -217,7 +217,9 @@ export default function VideoPressEdit( { - + ) } From b46af9bebe1f968e0408932df9a9adc231e10e88 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 18 May 2023 10:55:18 +0200 Subject: [PATCH 08/10] Add `VideoNotOwnedWarning` component --- .../components/details-panel/index.native.js | 30 +------------- .../video-not-owned-warning/index.native.js | 41 +++++++++++++++++++ .../styles.native.scss | 0 3 files changed, 43 insertions(+), 28 deletions(-) create mode 100644 projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/index.native.js rename projects/packages/videopress/src/client/block-editor/blocks/video/components/{details-panel => video-not-owned-warning}/styles.native.scss (100%) 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 25b53970078c6..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 @@ -2,17 +2,11 @@ * WordPress dependencies */ import { PanelBody, TextControl, BottomSheetTextControl } from '@wordpress/components'; -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'; +import VideoNotOwnedWarning from '../video-not-owned-warning'; /** * React component that renders the details settings panel. @@ -26,26 +20,6 @@ import styles from './styles.scss'; export default function DetailsPanel( { attributes, setAttributes, videoBelongToSite } ) { const { title, description } = attributes; - 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' ] - ); - const videoNotOwnedMessage = ( - - - - { __( - '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' - ) } - - - ); - return ( - { ! videoBelongToSite && videoNotOwnedMessage } + { ! 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/details-panel/styles.native.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/styles.native.scss similarity index 100% rename from projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/styles.native.scss rename to projects/packages/videopress/src/client/block-editor/blocks/video/components/video-not-owned-warning/styles.native.scss From 0aa74eef6d2017e39b10e7f1030a03c3f7f127ed Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 18 May 2023 10:55:45 +0200 Subject: [PATCH 09/10] Show video not owned warning in Privacy and Rating panel --- .../privacy-and-rating-settings.native.js | 3 +++ 1 file changed, 3 insertions(+) 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 ba36c1304d4a0..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. @@ -126,6 +127,8 @@ export default function PrivacyAndRatingSettings( { ) } disabled={ ! videoBelongToSite } /> + + { ! videoBelongToSite && } ); } From cade9c99c62add4cc5fa1301c5f529a2ffc620b4 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 19 May 2023 10:04:01 +0200 Subject: [PATCH 10/10] Update changelog --- ...le-videopress-disable-details-settings-not-belonged-videos | 4 ---- .../rnmobile-videopress-disable-settings-not-belonged-videos | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) delete mode 100644 projects/packages/videopress/changelog/rnmobile-videopress-disable-details-settings-not-belonged-videos create mode 100644 projects/packages/videopress/changelog/rnmobile-videopress-disable-settings-not-belonged-videos diff --git a/projects/packages/videopress/changelog/rnmobile-videopress-disable-details-settings-not-belonged-videos b/projects/packages/videopress/changelog/rnmobile-videopress-disable-details-settings-not-belonged-videos deleted file mode 100644 index d29d2b08df639..0000000000000 --- a/projects/packages/videopress/changelog/rnmobile-videopress-disable-details-settings-not-belonged-videos +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: added - -RNMobile: Disable Details settings if video does not belong to the site 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