Skip to content

Disable image preview for invalid images #23103

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

Closed
wants to merge 12 commits into from
Closed

Disable image preview for invalid images #23103

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
472424c
Disable image preview for invalid images
youssef-lr Jul 17, 2023
2a2dc4c
Code cleanup
youssef-lr Jul 19, 2023
b724b2b
Add onError to native ImageView
youssef-lr Jul 28, 2023
a2a2012
Merge branch 'main' into youssef_disable_invalid_image_preview
youssef-lr Aug 15, 2023
c802b8c
Conflicts
youssef-lr Aug 15, 2023
ae70be8
Merge branch 'main' into youssef_disable_invalid_image_preview
youssef-lr Aug 26, 2023
dd92d2c
Linting
youssef-lr Aug 26, 2023
0e2a20e
Merge branch 'main' into youssef_disable_invalid_image_preview
youssef-lr Nov 3, 2023
c49fb31
Conflicts
youssef-lr Nov 3, 2023
9c5fa6e
Merge branch 'main' into youssef_disable_invalid_image_preview
youssef-lr Nov 3, 2023
a0b75ed
Lint
youssef-lr Nov 4, 2023
e7febdf
Use fallback source when offline and necessary
youssef-lr Nov 4, 2023
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
3 changes: 2 additions & 1 deletion src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@ const propTypes = {
...withLocalizePropTypes,
};

function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, isImage, onScaleChanged, translate}) {
function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, onError, isImage, onScaleChanged, translate}) {
const children = (
<ImageView
onScaleChanged={onScaleChanged}
url={source}
fileName={file.name}
isAuthTokenRequired={isImage && isAuthTokenRequired}
onError={onError}
/>
);
return onPress ? (
Expand Down
3 changes: 2 additions & 1 deletion src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const propTypes = {
...withLocalizePropTypes,
};

function AttachmentViewImage({source, file, isAuthTokenRequired, isFocused, isUsedInCarousel, loadComplete, onPress, isImage, onScaleChanged, translate}) {
function AttachmentViewImage({source, file, isAuthTokenRequired, isFocused, isUsedInCarousel, loadComplete, onPress, onError, isImage, onScaleChanged, translate}) {
const children = isUsedInCarousel ? (
<AttachmentCarouselPage
source={source}
Expand All @@ -26,6 +26,7 @@ function AttachmentViewImage({source, file, isAuthTokenRequired, isFocused, isUs
onScaleChanged={onScaleChanged}
url={source}
fileName={file.name}
onError={onError}
isAuthTokenRequired={isImage && isAuthTokenRequired}
/>
);
Expand Down
4 changes: 3 additions & 1 deletion src/components/Attachments/AttachmentView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ function AttachmentView({
isWorkspaceAvatar,
}) {
const [loadComplete, setLoadComplete] = useState(false);
const [isValidImage, setIsValidImage] = useState(true);

// Handles case where source is a component (ex: SVG)
if (_.isFunction(source)) {
Expand Down Expand Up @@ -110,7 +111,7 @@ function AttachmentView({
// For this check we use both source and file.name since temporary file source is a blob
// both PDFs and images will appear as images when pasted into the the text field
const isImage = Str.isImage(source);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aimane-chnaif I wonder why this isn't ìsImage = Str.isImage(source) || (file && Str.isImage(file.name)) then next we can just use if (isImage && isValidImage), am I missing something on why this could be intentional?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @chrispader as this logic was added in #20798

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was actually just taking over the original logic from the previous code: https://github.com/margelo/expensify-app-fork/blob/9fa8c89b095d88b4066f209c16d34e3ee261e991/src/components/AttachmentView.js#L105-L106

I think the difference here is that we first check if the source is an image, else if there is a file prop and if that's an image. Not sure if this is intentional though, so i think somebody else has to answer this question. :)

if (isImage || (file && Str.isImage(file.name))) {
if ((isImage || (file && Str.isImage(file.name))) && isValidImage) {
return (
<AttachmentViewImage
source={source}
Expand All @@ -120,6 +121,7 @@ function AttachmentView({
loadComplete={loadComplete}
isFocused={isFocused}
isImage={isImage}
onError={() => setIsValidImage(false)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Receiving onError callback doesn't always mean that image is invalid.
i.e. when offline:

Screen.Recording.2023-08-27.at.5.50.53.PM.mov

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking into this

onPress={onPress}
onScaleChanged={onScaleChanged}
/>
Expand Down
7 changes: 6 additions & 1 deletion src/components/ImageView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,16 @@ const propTypes = {

/** image file name */
fileName: PropTypes.string.isRequired,

/** Bubbles up RNImage's onError callback so we can handle it in AttachmentView */
onError: PropTypes.func.isRequired,
};

const defaultProps = {
isAuthTokenRequired: false,
};

function ImageView({isAuthTokenRequired, url, fileName}) {
function ImageView({isAuthTokenRequired, url, fileName, onError}) {
const [isLoading, setIsLoading] = useState(true);
const [containerHeight, setContainerHeight] = useState(0);
const [containerWidth, setContainerWidth] = useState(0);
Expand Down Expand Up @@ -231,6 +234,7 @@ function ImageView({isAuthTokenRequired, url, fileName}) {
resizeMode={zoomScale > 1 ? Image.resizeMode.center : Image.resizeMode.contain}
onLoadStart={imageLoadingStart}
onLoad={imageLoad}
onError={onError}
/>
{isLoading && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
</View>
Expand Down Expand Up @@ -261,6 +265,7 @@ function ImageView({isAuthTokenRequired, url, fileName}) {
resizeMode={Image.resizeMode.contain}
onLoadStart={imageLoadingStart}
onLoad={imageLoad}
onError={onError}
/>
</PressableWithoutFeedback>

Expand Down
6 changes: 5 additions & 1 deletion src/components/ImageView/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ const propTypes = {
/** Function for handle on press */
onPress: PropTypes.func,

/** Bubbles up RNImage's onError callback so we can handle it in AttachmentView */
onError: PropTypes.func.isRequired,

/** Additional styles to add to the component */
style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
};
Expand All @@ -39,7 +42,7 @@ const defaultProps = {
// https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts#L79
const DOUBLE_CLICK_INTERVAL = 175;

function ImageView({isAuthTokenRequired, url, onScaleChanged, onPress, style}) {
function ImageView({isAuthTokenRequired, url, onScaleChanged, onPress, onError, style}) {
const {windowWidth, windowHeight} = useWindowDimensions();

const [isLoading, setIsLoading] = useState(true);
Expand Down Expand Up @@ -221,6 +224,7 @@ function ImageView({isAuthTokenRequired, url, onScaleChanged, onPress, style}) {
resizeMode={Image.resizeMode.contain}
onLoadStart={imageLoadingStart}
onLoad={configureImageZoom}
onError={onError}
/>
{/**
Create an invisible view on top of the image so we can capture and set the amount of touches before
Expand Down