Decouple processing logic from uploading itself (#568)

swissspidy · Jul 18, 2024 · 958ab87 · 958ab87
1 parent 662bf20
commit 958ab87
Show file tree

Hide file tree

Showing 64 changed files with 1,537 additions and 853 deletions.
diff --git a/inc/functions.php b/inc/functions.php
@@ -385,6 +385,8 @@ function get_all_image_sizes(): array {
 /**
  * Register additional REST fields for attachments.
  *
+ * @todo Expose these in embed context as well?
+ *
  * @uses rest_get_attachment_filename
  * @uses rest_get_attachment_filesize
  */

diff --git a/inc/templates/upload-request.php b/inc/templates/upload-request.php
@@ -41,6 +41,11 @@
 	$accept        = get_post_meta( $post->ID, 'mexp_accept', true );
 	$multiple      = (bool) get_post_meta( $post->ID, 'mexp_multiple', true );
 
+	$max_upload_size = wp_max_upload_size();
+	if ( ! $max_upload_size ) {
+		$max_upload_size = 0;
+	}
+
 	add_filter(
 		'upload_mimes',
 		/**
@@ -71,12 +76,14 @@ static function ( $mime_type ) use ( $allowed_types ) {
 			window.mediaExperiments.uploadRequest = %2$s;
 			window.mediaExperiments.allowedTypes = %3$s;
 			window.mediaExperiments.accept = %4$s;
-			window.mediaExperiments.multiple = %5$s;',
+			window.mediaExperiments.multiple = %5$s;
+			window.mediaExperiments.maxUploadFileSize = %6$s;',
 			wp_json_encode( get_allowed_mime_types() ),
 			wp_json_encode( $post->post_name ),
 			wp_json_encode( $allowed_types ? (array) $allowed_types : null ),
 			wp_json_encode( $accept ? (array) $accept : null ),
 			wp_json_encode( $multiple ),
+			wp_json_encode( $max_upload_size )
 		),
 		'before'
 	);

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor/src/@types/global.d.ts b/packages/editor/src/@types/global.d.ts
@@ -1,3 +1,13 @@
+import type { ImageSizeCrop } from '@mexp/upload-media';
+
+// Keep in sync with PHP.
+type MediaSourceTerm =
+	| 'media-optimization'
+	| 'poster-generation'
+	| 'media-import'
+	| 'gif-conversion'
+	| 'subtitles-generation';
+
 declare global {
 	interface Window {
 		mediaExperiments: {
@@ -7,6 +17,8 @@ declare global {
 			jpegInterlaced: boolean;
 			pngInterlaced: boolean;
 			gifInterlaced: boolean;
+			availableImageSizes: Record< string, ImageSizeCrop >;
+			mediaSourceTerms: Record< MediaSourceTerm, number >;
 		};
 	}
 }

diff --git a/packages/editor/src/blockMediaPanel/audioControls.tsx b/packages/editor/src/blockMediaPanel/audioControls.tsx
@@ -1,7 +1,7 @@
 import type { BlockEditProps } from '@wordpress/blocks';
 import { Fragment } from '@wordpress/element';
 
-import type { Attachment } from '@mexp/upload-media';
+import type { Attachment } from '@mexp/media-utils';
 
 import { UploadIndicator } from './uploadIndicator';
 import { RecordingControls } from './recordingControls';

diff --git a/packages/editor/src/blockMediaPanel/coverControls.tsx b/packages/editor/src/blockMediaPanel/coverControls.tsx
@@ -1,4 +1,4 @@
-import type { Attachment } from '@mexp/upload-media';
+import type { Attachment } from '@mexp/media-utils';
 
 import { Fragment } from '@wordpress/element';
 import type { BlockEditProps } from '@wordpress/blocks';

diff --git a/packages/editor/src/blockMediaPanel/galleryControls.tsx b/packages/editor/src/blockMediaPanel/galleryControls.tsx
@@ -5,11 +5,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { createBlock } from '@wordpress/blocks';
 
-import {
-	type Attachment,
-	type RestAttachment,
-	store as uploadStore,
-} from '@mexp/upload-media';
+import type { Attachment, RestAttachment } from '@mexp/media-utils';
+import { store as uploadStore } from '@mexp/upload-media';
 
 import { BulkOptimization } from '../components/bulkOptimization';
 import type { BulkOptimizationAttachmentData } from '../types';
@@ -54,7 +51,8 @@ function useGalleryImageAttachments( clientId: BlockInstance[ 'clientId' ] ) {
 						id: block.attributes.id,
 						url: block.attributes.url,
 						posterUrl: block.attributes.url,
-						fileSize: 0,
+						mexp_filesize: 0,
+						mexp_filename: '',
 						isUploading: select( uploadStore ).isUploadingById(
 							block.attributes.id
 						),
@@ -77,7 +75,11 @@ function useGalleryImageAttachments( clientId: BlockInstance[ 'clientId' ] ) {
 
 						// TODO: Use fetchFile() as fallback.
 						if ( media.mexp_filesize ) {
-							attachment.fileSize = media.mexp_filesize;
+							attachment.mexp_filesize = media.mexp_filesize;
+						}
+
+						if ( media.mexp_filename ) {
+							attachment.mexp_filename = media.mexp_filename;
 						}
 					}
 

diff --git a/packages/editor/src/blockMediaPanel/generateSubtitles.tsx b/packages/editor/src/blockMediaPanel/generateSubtitles.tsx
@@ -54,6 +54,10 @@ export function GenerateSubtitles( {
 				} ),
 			additionalData: {
 				post: currentPostId,
+				mexp_media_source:
+					window.mediaExperiments.mediaSourceTerms[
+						'subtitles-generation'
+					],
 			},
 		} );
 	};

diff --git a/packages/editor/src/blockMediaPanel/imageControls.tsx b/packages/editor/src/blockMediaPanel/imageControls.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from '@wordpress/element';
 import type { BlockEditProps } from '@wordpress/blocks';
 
-import type { Attachment } from '@mexp/upload-media';
+import type { Attachment } from '@mexp/media-utils';
 
 import { UploadIndicator } from './uploadIndicator';
 import { RecordingControls } from './recordingControls';

diff --git a/packages/editor/src/blockMediaPanel/importMedia.tsx b/packages/editor/src/blockMediaPanel/importMedia.tsx
@@ -8,7 +8,8 @@ import { store as editorStore } from '@wordpress/editor';
 import { isBlobURL } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
 
-import { type Attachment, store as uploadStore } from '@mexp/upload-media';
+import type { Attachment } from '@mexp/media-utils';
+import { store as uploadStore } from '@mexp/upload-media';
 
 import { useIsUploadingByUrl } from '../utils/hooks';
 
@@ -37,6 +38,10 @@ export function ImportMedia( { url, onChange }: ImportMediaProps ) {
 			onChange: ( [ media ] ) => onChange( media ),
 			additionalData: {
 				post: currentPostId,
+				mexp_media_source:
+					window.mediaExperiments.mediaSourceTerms[
+						'subtitles-generation'
+					],
 			},
 		} );
 	};

diff --git a/packages/editor/src/blockMediaPanel/mediaTextControls.tsx b/packages/editor/src/blockMediaPanel/mediaTextControls.tsx
@@ -1,7 +1,8 @@
 import type { BlockEditProps } from '@wordpress/blocks';
-import type { Attachment } from '@mexp/upload-media';
 import { Fragment } from '@wordpress/element';
 
+import type { Attachment } from '@mexp/media-utils';
+
 import { DebugInfo } from './debugInfo';
 import { MuteVideo } from './muteVideo';
 import { OptimizeMedia } from './optimizeMedia';

diff --git a/packages/editor/src/blockMediaPanel/muteVideo.tsx b/packages/editor/src/blockMediaPanel/muteVideo.tsx
@@ -1,10 +1,12 @@
-import { type Attachment, store as uploadStore } from '@mexp/upload-media';
 import { isBlobURL } from '@wordpress/blob';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { Button, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+import type { Attachment } from '@mexp/media-utils';
+import { store as uploadStore } from '@mexp/upload-media';
+
 import { useAttachment, useIsUploadingByUrl } from '../utils/hooks';
 
 interface MuteVideoProps {

diff --git a/packages/editor/src/blockMediaPanel/optimizeMedia.tsx b/packages/editor/src/blockMediaPanel/optimizeMedia.tsx
@@ -8,8 +8,10 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { isBlobURL } from '@wordpress/blob';
 import { __, sprintf } from '@wordpress/i18n';
+import apiFetch from '@wordpress/api-fetch';
 
-import { type Attachment, store as uploadStore } from '@mexp/upload-media';
+import type { Attachment } from '@mexp/media-utils';
+import { store as uploadStore } from '@mexp/upload-media';
 
 import { useAttachment, useIsUploadingById } from '../utils/hooks';
 import { ApprovalDialog } from '../components/approvalDialog';
@@ -62,6 +64,16 @@ export function OptimizeMedia( {
 						type: 'snackbar',
 					}
 				);
+
+				void apiFetch( {
+					path: `/wp/v2/media/${ attachment.id }`,
+					data: {
+						meta: {
+							mexp_optimized_id: media.id,
+						},
+					},
+					method: 'POST',
+				} );
 			},
 			onError: ( err: Error ) => {
 				void createErrorNotice(
@@ -83,6 +95,10 @@ export function OptimizeMedia( {
 			generatedPosterId: attachment.meta.mexp_generated_poster_id,
 			additionalData: {
 				post: currentPostId,
+				mexp_media_source:
+					window.mediaExperiments.mediaSourceTerms[
+						'media-optimization'
+					],
 			},
 		} );
 	};

diff --git a/packages/editor/src/blockMediaPanel/postFeaturedImageControls.tsx b/packages/editor/src/blockMediaPanel/postFeaturedImageControls.tsx
@@ -3,7 +3,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { useEntityProp } from '@wordpress/core-data';
 import { Fragment } from '@wordpress/element';
 
-import type { Attachment } from '@mexp/upload-media';
+import type { Attachment } from '@mexp/media-utils';
 
 import { useAttachment } from '../utils/hooks';
 import { UploadIndicator } from './uploadIndicator';

diff --git a/packages/editor/src/blockMediaPanel/siteLogoControls.tsx b/packages/editor/src/blockMediaPanel/siteLogoControls.tsx
@@ -3,7 +3,7 @@ import { type Settings, store as coreStore } from '@wordpress/core-data';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { Fragment } from '@wordpress/element';
 
-import type { Attachment } from '@mexp/upload-media';
+import type { Attachment } from '@mexp/media-utils';
 
 import { useAttachment } from '../utils/hooks';
 import { UploadIndicator } from './uploadIndicator';

diff --git a/packages/editor/src/blockMediaPanel/uploadRequests/controls.tsx b/packages/editor/src/blockMediaPanel/uploadRequests/controls.tsx
@@ -12,8 +12,11 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import apiFetch from '@wordpress/api-fetch';
 
-import type { Attachment, RestAttachment } from '@mexp/upload-media';
-import { transformAttachment } from '@mexp/upload-media';
+import {
+	transformAttachment,
+	type Attachment,
+	type RestAttachment,
+} from '@mexp/media-utils';
 import { store as interfaceStore } from '@mexp/interface';
 
 import { Modal } from './modal';

diff --git a/packages/editor/src/blockMediaPanel/videoControls.tsx b/packages/editor/src/blockMediaPanel/videoControls.tsx
@@ -1,7 +1,7 @@
 import type { BlockEditProps } from '@wordpress/blocks';
 import { Fragment } from '@wordpress/element';
 
-import type { Attachment } from '@mexp/upload-media';
+import type { Attachment } from '@mexp/media-utils';
 
 import { UploadIndicator } from './uploadIndicator';
 import { RecordingControls } from './recordingControls';
@@ -28,9 +28,7 @@ export function VideoControls( props: VideoControlsProps ) {
 		props.setAttributes( {
 			src: media.url,
 			id: media.id,
-			poster: media.image?.src,
-			// TODO: Check why Gutenberg does the following:
-			// poster: media.image?.src !== media.icon ? media.image?.src : undefined,
+			poster: media._embedded?.[ 'wp:featuredmedia' ]?.[ 0 ]?.source_url,
 			caption: media.caption,
 		} );
 	}