Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RNMobile] Do not display progress bar when Image is uploading in the Editor #58657

Closed
wants to merge 5 commits into from
Closed

[RNMobile] Do not display progress bar when Image is uploading in the Editor #58657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19db7f3
Remove opacity when image is being uploaded
derekblank Feb 5, 2024
f3d0563
Add hideProgressBar prop to MediaUploadProgress component
derekblank Feb 5, 2024
80da66c
Hide progress bar on Image blocks
derekblank Feb 5, 2024
806d3b7
Update spinner-related tests
derekblank Feb 5, 2024
b69c18d
Fix typo and remove unused code
derekblank Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions packages/block-editor/src/components/media-upload-progress/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,16 +187,19 @@ export class MediaUploadProgress extends Component {
this.props.containerStyle,
] }
pointerEvents="box-none"
testID="progress-container"
>
<View style={ progressBarStyle }>
{ showSpinner && (
<Spinner
progress={ progress }
style={ this.props.spinnerStyle }
testID="spinner"
/>
) }
</View>
{ ! this.props.hideProgressBar && (
<View style={ progressBarStyle }>
{ showSpinner && (
<Spinner
progress={ progress }
style={ this.props.spinnerStyle }
testID="spinner"
/>
) }
</View>
) }
{ renderContent( {
isUploadPaused:
uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
Expand Down
28 changes: 28 additions & 0 deletions packages/block-editor/src/components/media-upload-progress/test/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,4 +217,32 @@ describe( 'MediaUploadProgress component', () => {
expect( onMediaUploadStateReset ).toHaveBeenCalledTimes( 1 );
expect( onMediaUploadStateReset ).toHaveBeenCalledWith( payloadReset );
} );

it( 'does not display the spinner when hideProgressBar is true', () => {
const renderContentMock = jest.fn();
const progress = 0.1;
const payload = {
state: MEDIA_UPLOAD_STATE_UPLOADING,
mediaId: MEDIA_ID,
progress,
};

const wrapper = render(
<MediaUploadProgress
hideProgressBar
mediaId={ MEDIA_ID }
renderContent={ renderContentMock }
/>
);

sendMediaUpload( payload );

expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
expect( renderContentMock ).toHaveBeenCalledWith(
expect.objectContaining( {
isUploadInProgress: true,
isUploadFailed: false,
} )
);
} );
} );
56 changes: 32 additions & 24 deletions packages/block-library/src/gallery/test/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,13 +202,17 @@ describe( 'Gallery block', () => {
await notifyUploadingState( media[ 0 ] );
await notifyUploadingState( media[ 1 ] );

// Check that images are showing a loading state
// Check that images do not display the progress bar
expect(
within( getGalleryItem( galleryBlock, 1 ) ).getByTestId( 'spinner' )
).toBeVisible();
within( getGalleryItem( galleryBlock, 1 ) ).queryByTestId(
'spinner'
)
).toBeNull();
expect(
within( getGalleryItem( galleryBlock, 2 ) ).getByTestId( 'spinner' )
).toBeVisible();
within( getGalleryItem( galleryBlock, 2 ) ).queryByTestId(
'spinner'
)
).toBeNull();

// Notify that the media items upload succeeded
await notifySucceedState( media[ 0 ] );
Expand Down Expand Up @@ -295,11 +299,11 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();

// Check that images are showing a loading state
// Check that images do not display the progress bar
await notifyUploadingState( media[ 0 ] );
await notifyUploadingState( media[ 1 ] );
expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();

// Notify that the media items upload succeeded
await notifySucceedState( media[ 0 ] );
Expand Down Expand Up @@ -333,11 +337,11 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();

// Check that images are showing a loading state
// Check that images do not display the progress bar
await notifyUploadingState( media[ 0 ] );
await notifyUploadingState( media[ 1 ] );
expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();

// Notify that the media items uploads failed
await notifyFailedState( media[ 0 ] );
Expand Down Expand Up @@ -385,9 +389,9 @@ describe( 'Gallery block', () => {
const galleryItem = getGalleryItem( galleryBlock, 1 );
expect( galleryItem ).toBeVisible();

// Check image is showing a loading state
// Check that the image does not display the progress bar
await notifyUploadingState( media[ 0 ] );
expect( within( galleryItem ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem ).queryByTestId( 'spinner' ) ).toBeNull();

// Notify that the media item upload succeeded
await notifySucceedState( media[ 0 ] );
Expand Down Expand Up @@ -443,11 +447,11 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();

// Check that images are showing a loading state
// Check that images do not display the progress bar
await notifyUploadingState( freePhotoMedia[ 0 ] );
await notifyUploadingState( freePhotoMedia[ 1 ] );
expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();

// Notify that the media items upload succeeded
await notifySucceedState( freePhotoMedia[ 0 ] );
Expand Down Expand Up @@ -481,22 +485,26 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();

// Check that images are showing a loading state
// Check that images do not display the progress bar
await notifyUploadingState( media[ 0 ] );
await notifyUploadingState( media[ 1 ] );
expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();

// Cancel uploads
fireEvent.press( galleryItem1 );
fireEvent.press( within( galleryItem1 ).getByTestId( 'spinner' ) );
fireEvent.press(
within( galleryItem1 ).getByTestId( 'progress-container' )
);
expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith(
media[ 0 ].localId
);
await notifyResetState( media[ 0 ] );

fireEvent.press( galleryItem2 );
fireEvent.press( within( galleryItem2 ).getByTestId( 'spinner' ) );
fireEvent.press(
within( galleryItem2 ).getByTestId( 'progress-container' )
);
expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith(
media[ 1 ].localId
);
Expand Down Expand Up @@ -581,11 +589,11 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();

// Check that images are showing a loading state
// Check that images do not diplay the progress bar
await notifyUploadingState( otherAppsMedia[ 0 ] );
await notifyUploadingState( otherAppsMedia[ 1 ] );
expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();

// Notify that the media items upload succeeded
await notifySucceedState( otherAppsMedia[ 0 ] );
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -815,6 +815,7 @@ export class ImageEdit extends Component {
enablePausedUploads
coverUrl={ url }
mediaId={ id }
hideProgressBar={ true }
onUpdateMediaProgress={ this.updateMediaProgress }
onFinishMediaUploadWithSuccess={
this.finishMediaUploadWithSuccess
Expand Down
23 changes: 5 additions & 18 deletions packages/components/src/mobile/image/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { Animated, Image as RNImage, Text, View } from 'react-native';
import { Image as RNImage, Text, View } from 'react-native';
import FastImage from 'react-native-fast-image';

/**
Expand All @@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/components';
import { image, offline } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { useEffect, useState, useRef, Platform } from '@wordpress/element';
import { useEffect, useState, Platform } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -218,19 +218,8 @@ const ImageComponent = ( {
focalPoint && styles.focalPointContainer,
];

const opacityValue = useRef( new Animated.Value( 1 ) ).current;

useEffect( () => {
Animated.timing( opacityValue, {
toValue: isUploadInProgress ? 0.3 : 1,
duration: 100,
useNativeDriver: true,
} ).start();
}, [ isUploadInProgress, opacityValue ] );

const imageStyles = [
{
opacity: opacityValue,
height: containerSize?.height,
},
! resizeMode && {
Expand Down Expand Up @@ -319,9 +308,8 @@ const ImageComponent = ( {
{ Platform.isAndroid && (
<>
{ networkImageLoaded && networkURL && (
<Animated.Image
<Image
style={ imageStyles }
fadeDuration={ 0 }
source={ { uri: networkURL } }
{ ...( ! focalPoint && {
resizeMethod: 'scale',
Expand All @@ -331,9 +319,8 @@ const ImageComponent = ( {
/>
) }
{ ! networkImageLoaded && ! networkURL && (
<Animated.Image
<Image
style={ imageStyles }
fadeDuration={ 0 }
source={ { uri: localURL } }
{ ...( ! focalPoint && {
resizeMethod: 'scale',
Expand All @@ -345,7 +332,7 @@ const ImageComponent = ( {
) }
{ Platform.isIOS && (
<>
<Animated.Image
<Image
style={ imageStyles }
source={ {
uri:
Expand Down
Loading