Use original URL and ID when compressing image (#620)

swissspidy · Aug 16, 2024 · 2321be4 · 2321be4
1 parent 3f47d40
commit 2321be4
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 80 deletions.
diff --git a/inc/functions.php b/inc/functions.php
@@ -473,6 +473,19 @@ function register_rest_fields(): void {
 			'get_callback' => __NAMESPACE__ . '\rest_get_attachment_has_transparency',
 		]
 	);
+
+	register_rest_field(
+		'attachment',
+		'mexp_original_url',
+		[
+			'schema'       => [
+				'description' => __( 'URL of the original file if this is an optimized one', 'media-experiments' ),
+				'type'        => 'boolean',
+				'context'     => [ 'view', 'edit' ],
+			],
+			'get_callback' => __NAMESPACE__ . '\rest_get_attachment_original_file',
+		]
+	);
 }
 
 /**
@@ -576,6 +589,24 @@ function rest_get_attachment_has_transparency( array $post ): ?bool {
 	return isset( $meta['has_transparency'] ) ? (bool) $meta['has_transparency'] : null;
 }
 
+/**
+ * Returns the URL of the original file if this is an optimized one
+ *
+ * @param array $post Post data.
+ * @return string|null Original URL if applicable.
+ */
+function rest_get_attachment_original_file( array $post ): ?string {
+	$original_id = get_post_meta( $post['id'], 'mexp_original_id', true );
+
+	if ( empty( $original_id ) ) {
+		return null;
+	}
+
+	$original_url = wp_get_attachment_url( $original_id );
+
+	return $original_url ? $original_url : null;
+}
+
 /**
  * Registers additional post meta for the attachment post type.
  *

diff --git a/packages/editor/src/block-media-panel/add-poster.tsx b/packages/editor/src/block-media-panel/add-poster.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { store as uploadStore } from '@mexp/upload-media';
+import type { RestAttachment } from '@mexp/media-utils';
 
 /**
  * WordPress dependencies
@@ -15,12 +16,13 @@ import { useEffect, useState } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
+import { useEntityRecord } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
  */
-import { useAttachment, useIsUploadingByUrl } from '../utils/hooks';
+import { useIsUploadingByUrl } from '../utils/hooks';
 
 interface AddPosterProps {
 	attributes: {
@@ -36,8 +38,17 @@ export function AddPoster( { attributes, setAttributes }: AddPosterProps ) {
 
 	const [ posterId, setPosterId ] = useState< number | undefined >();
 
-	const attachment = useAttachment( attributes.id );
-	const poster = useAttachment( posterId );
+	const { record: attachment } = useEntityRecord< RestAttachment | null >(
+		'postType',
+		'attachment',
+		attributes.id || 0
+	);
+
+	const { record: poster } = useEntityRecord< RestAttachment | null >(
+		'postType',
+		'attachment',
+		posterId || 0
+	);
 
 	const { addPosterForExistingVideo } = useDispatch( uploadStore );
 

diff --git a/packages/editor/src/block-media-panel/animated-gif-converter.tsx b/packages/editor/src/block-media-panel/animated-gif-converter.tsx
@@ -1,15 +1,16 @@
+/**
+ * External dependencies
+ */
+import type { RestAttachment } from '@mexp/media-utils';
+
 /**
  * WordPress dependencies
  */
 import { useEffect } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useAttachment } from '../utils/hooks';
+import { useEntityRecord } from '@wordpress/core-data';
 
 interface AnimatedGifDetectorProps {
 	id: number;
@@ -25,7 +26,11 @@ export function AnimatedGifConverter( {
 	caption,
 	clientId,
 }: AnimatedGifDetectorProps ) {
-	const attachment = useAttachment( id );
+	const { record: attachment } = useEntityRecord< RestAttachment | null >(
+		'postType',
+		'attachment',
+		id
+	);
 
 	const isVideo = attachment?.mime_type.startsWith( 'video/' );
 

diff --git a/packages/editor/src/block-media-panel/debug-info.tsx b/packages/editor/src/block-media-panel/debug-info.tsx
@@ -3,6 +3,7 @@
  */
 import { Blurhash } from 'react-blurhash';
 import type { PropsWithChildren } from 'react';
+import type { RestAttachment } from '@mexp/media-utils';
 
 /**
  * WordPress dependencies
@@ -18,11 +19,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Component, createInterpolateElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useAttachment } from '../utils/hooks';
+import { useEntityRecord } from '@wordpress/core-data';
 
 interface DebugInfoProps {
 	id: number;
@@ -70,7 +67,11 @@ class HideOnError extends Component< PropsWithChildren< {} > > {
 export function DebugInfo( { id }: DebugInfoProps ) {
 	const { baseControlProps, controlProps } = useBaseControlProps( {} );
 
-	const attachment = useAttachment( id );
+	const { record: attachment } = useEntityRecord< RestAttachment | null >(
+		'postType',
+		'attachment',
+		id
+	);
 
 	if ( ! attachment ) {
 		return null;

diff --git a/packages/editor/src/block-media-panel/generate-subtitles.tsx b/packages/editor/src/block-media-panel/generate-subtitles.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import type { RestAttachment } from '@mexp/media-utils';
 import { store as uploadStore } from '@mexp/upload-media';
 
 /**
@@ -9,6 +10,7 @@ import { store as uploadStore } from '@mexp/upload-media';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { isBlobURL } from '@wordpress/blob';
 import { useDispatch } from '@wordpress/data';
+import { useEntityRecord } from '@wordpress/core-data';
 import { __, _x } from '@wordpress/i18n';
 import {
 	BaseControl,
@@ -20,7 +22,7 @@ import { useLayoutEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useAttachment, useIsUploadingByUrl } from '../utils/hooks';
+import { useIsUploadingByUrl } from '../utils/hooks';
 import type { VideoBlock } from '../types';
 
 type GenerateSubtitlesProps = VideoBlock &
@@ -32,7 +34,11 @@ export function GenerateSubtitles( {
 }: GenerateSubtitlesProps ) {
 	const { baseControlProps, controlProps } = useBaseControlProps( {} );
 
-	const post = useAttachment( attributes.id );
+	const { record: post } = useEntityRecord< RestAttachment | null >(
+		'postType',
+		'attachment',
+		attributes.id
+	);
 
 	const url = attributes.src;
 	const isUploading = useIsUploadingByUrl( url ) || isBlobURL( url );

diff --git a/packages/editor/src/block-media-panel/mute-video.tsx b/packages/editor/src/block-media-panel/mute-video.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Attachment } from '@mexp/media-utils';
+import type { Attachment, RestAttachment } from '@mexp/media-utils';
 import { store as uploadStore } from '@mexp/upload-media';
 
 /**
@@ -15,11 +15,12 @@ import {
 	useBaseControlProps,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useEntityRecord } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { useAttachment, useIsUploadingByUrl } from '../utils/hooks';
+import { useIsUploadingByUrl } from '../utils/hooks';
 
 interface MuteVideoProps {
 	id: number;
@@ -31,7 +32,11 @@ interface MuteVideoProps {
 export function MuteVideo( { id, url, poster, onChange }: MuteVideoProps ) {
 	const { baseControlProps, controlProps } = useBaseControlProps( {} );
 
-	const post = useAttachment( id );
+	const { record: post } = useEntityRecord< RestAttachment | null >(
+		'postType',
+		'attachment',
+		id
+	);
 
 	const isUploading = useIsUploadingByUrl( url ) || isBlobURL( url );
 
@@ -51,12 +56,13 @@ export function MuteVideo( { id, url, poster, onChange }: MuteVideoProps ) {
 			onChange: ( [ media ] ) => onChange( media ),
 			onSuccess: ( [ media ] ) => onChange( media ),
 			additionalData: {
-				mexp_blurhash: post?.mexp_blurhash,
-				mexp_dominant_color: post?.mexp_dominant_color,
-				featured_media: post?.meta.mexp_generated_poster_id,
+				mexp_blurhash: post.mexp_blurhash,
+				mexp_dominant_color: post.mexp_dominant_color,
+				featured_media: post.meta.mexp_generated_poster_id,
 				meta: {
+					mexp_original_id: post.id,
 					mexp_generated_poster_id:
-						post?.meta.mexp_generated_poster_id,
+						post.meta.mexp_generated_poster_id,
 				},
 			},
 		} );

diff --git a/packages/editor/src/block-media-panel/upload-indicator.tsx b/packages/editor/src/block-media-panel/upload-indicator.tsx
@@ -1,14 +1,20 @@
+/**
+ * External dependencies
+ */
+import { store as uploadStore } from '@mexp/upload-media';
+
 /**
  * WordPress dependencies
  */
 import { isBlobURL } from '@wordpress/blob';
 import { Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { useIsUploadingById, useIsUploadingByUrl } from '../utils/hooks';
+import { useIsUploadingByUrl } from '../utils/hooks';
 
 interface UploadIndicatorProps {
 	id: number;
@@ -17,7 +23,11 @@ interface UploadIndicatorProps {
 }
 
 export function UploadIndicator( { id, url, poster }: UploadIndicatorProps ) {
-	const isUploadingById = useIsUploadingById( id );
+	const isUploadingById = useSelect(
+		( select ) =>
+			id ? select( uploadStore ).isUploadingById( id ) : false,
+		[ id ]
+	);
 	const isUploadingByUrl = useIsUploadingByUrl( url );
 	const isPosterUploadingByUrl = useIsUploadingByUrl( poster );
 	const isUploading = isUploadingById || isUploadingByUrl;

diff --git a/packages/editor/src/components/approval-dialog/index.tsx b/packages/editor/src/components/approval-dialog/index.tsx
@@ -5,6 +5,8 @@ import {
 	ReactCompareSlider,
 	ReactCompareSliderImage,
 } from 'react-compare-slider';
+import type { RestAttachment } from '@mexp/media-utils';
+import { store as uploadStore } from '@mexp/upload-media';
 
 /**
  * WordPress dependencies
@@ -13,14 +15,11 @@ import { Button, Modal } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-
-import { store as uploadStore } from '@mexp/upload-media';
+import { useEntityRecord } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { useAttachment } from '../../utils/hooks';
-
 import './editor.css';
 
 const numberFormatter = Intl.NumberFormat( 'en', {
@@ -44,7 +43,11 @@ interface ApprovalDialogProps {
 }
 
 export function ApprovalDialog( { id }: ApprovalDialogProps ) {
-	const post = useAttachment( id );
+	const { record: post } = useEntityRecord< RestAttachment | null >(
+		'postType',
+		'attachment',
+		id
+	);
 	const { isPendingApproval, comparison } = useSelect(
 		( select ) => ( {
 			// This allows showing only one approval modal at a time if there