From 4b6a47d2dc6b00b207cbea743d0261575235c086 Mon Sep 17 00:00:00 2001 From: Brian Beckerle <49686530+brainbicycle@users.noreply.github.com> Date: Wed, 11 Dec 2024 15:00:06 -0500 Subject: [PATCH] chore: cleanup images, officially retire OpaqueImageView (#11264) * remove stable palette image flag * delete OpaqueImageView2 component, default to OpaqueImageView * remove usage in ArticleCard * remove usage in ArtistShow * remove usage in ArtistAutosuggestRow * remove usage in ArtworkListImage * remove usage in SavedItemRow * remove usage in ShowItemRow * remove usage in SaleArtworkTileRailCard * remove usage in Toast * remove usage in ArtistSeriesHeader * remove usage in ArtistSeriesListItem * remove usage in TabFairItemRow * remove comment in DeepZoomTile * remove all simple usages * remove more simple usages * remove my collection usage * use util from palette * replace usage in ShowContextCard * replace usage in ImageZoomView * delete OpaqueImageView code * fix artist list item test * fix collection header test * fix collectionArtistSeriesRail test * fix showContextCard test * fix saleArtworkTileRailCard tests * fix broken FairEventSectionCard * fix broken ActiveBid * fix broken ImagePreview * fix broken conversation components --- src/app/Components/ArticleCard.tsx | 27 +- .../Artist/ArtistShows/ArtistShow.tsx | 19 +- .../ArtistAutosuggestRow.tsx | 21 +- .../components/ArtworkListImage.tsx | 5 +- src/app/Components/Cards/MediumCard.tsx | 9 +- src/app/Components/Lists/SavedItemRow.tsx | 5 +- src/app/Components/Lists/ShowItemRow.tsx | 5 +- .../OpaqueImageView/OpaqueImageView.tsx | 3 - .../OpaqueImageView/createGeminiUrl.tsx | 37 --- .../OpaqueImageView2/OpaqueImageView2.tsx | 264 ------------------ src/app/Components/OpaqueImageView2/index.ts | 1 - .../RelatedArtists/RelatedArtist.tsx | 17 +- .../SaleArtworkTileRailCard.tests.tsx | 15 +- .../SaleArtworkTileRailCard.tsx | 8 +- src/app/Components/ShowCard.tsx | 13 +- src/app/Components/ThreeUpImageLayout.tsx | 18 +- src/app/Components/Toast/ToastComponent.tsx | 5 +- .../ArtistSeries/ArtistSeriesHeader.tsx | 19 +- .../ArtistSeriesListItem.tests.tsx | 3 +- .../ArtistSeries/ArtistSeriesListItem.tsx | 10 +- .../FullScreen/DeepZoom/DeepZoomTile.tsx | 15 +- .../FullScreen/ImageZoomView.tsx | 10 +- .../ImageCarousel/ImageCarousel.tsx | 2 +- .../Components/FairEventSectionCard.tsx | 9 +- .../City/Components/TabFairItemRow/index.tsx | 9 +- .../CollectionArtistSeriesRail.tests.tsx | 27 +- .../FeaturedCollectionsRail.tsx | 7 +- .../Screens/CollectionHeader.tests.tsx | 17 +- .../Collection/Screens/CollectionHeader.tsx | 5 +- .../Scenes/Fair/Components/FairEditorial.tsx | 5 +- src/app/Scenes/Fair/FairArticles.tsx | 27 +- .../components/FeatureFeaturedLink.tsx | 11 +- .../Feature/components/FeatureHeader.tsx | 9 +- .../Components/PartnerListItem.tsx | 4 +- .../Components/ArtistRails/ArtistCard.tsx | 17 +- .../Inbox/Components/ActiveBids/ActiveBid.tsx | 6 +- .../Conversations/ConversationSnippet.tsx | 7 +- .../Components/Conversations/ItemArtwork.tsx | 19 +- .../Components/Conversations/ItemShow.tsx | 12 +- .../Preview/Attachment/ImagePreview.tsx | 6 +- src/app/Scenes/MyBids/Components/Lot.tsx | 7 +- .../Components/MyCollectionImageView.tsx | 10 +- .../Screens/Insights/ArtistItem.tsx | 5 +- .../Insights/MedianAuctionPriceListItem.tsx | 13 +- .../Insights/MedianSalePriceAtAuction.tsx | 5 +- .../Sale/Components/SaleArtworkListItem.tsx | 9 +- src/app/Scenes/Sale/Components/SaleHeader.tsx | 7 +- .../Scenes/Sales/Components/SaleListItem.tsx | 5 +- .../Search/components/SearchResultImage.tsx | 19 +- .../Search/components/TrendingArtistCard.tsx | 11 +- .../Show/Components/ShowContextCard.tsx | 12 +- .../Show/Components/ShowInstallShots.tsx | 9 +- src/app/Scenes/Show/ShowContextCard.tests.tsx | 10 +- .../ViewingRoom/ViewingRoomArtworks.tsx | 24 +- src/app/store/config/features.ts | 9 - 55 files changed, 279 insertions(+), 604 deletions(-) delete mode 100644 src/app/Components/OpaqueImageView/OpaqueImageView.tsx delete mode 100644 src/app/Components/OpaqueImageView/createGeminiUrl.tsx delete mode 100644 src/app/Components/OpaqueImageView2/OpaqueImageView2.tsx delete mode 100644 src/app/Components/OpaqueImageView2/index.ts diff --git a/src/app/Components/ArticleCard.tsx b/src/app/Components/ArticleCard.tsx index f84f6a2a4cc..dd99db2a4b8 100644 --- a/src/app/Components/ArticleCard.tsx +++ b/src/app/Components/ArticleCard.tsx @@ -1,6 +1,14 @@ -import { Spacer, Flex, useTheme, Text, Touchable, SkeletonBox, SkeletonText } from "@artsy/palette-mobile" +import { + Spacer, + Flex, + useTheme, + Text, + Touchable, + SkeletonBox, + SkeletonText, + Image, +} from "@artsy/palette-mobile" import { ArticleCard_article$data } from "__generated__/ArticleCard_article.graphql" -import { OpaqueImageView } from "app/Components/OpaqueImageView2" import { navigate } from "app/system/navigation/navigate" import { compact } from "lodash" import { DateTime } from "luxon" @@ -42,8 +50,8 @@ export const ArticleCard: React.FC = ({ article, onPress, isFl (isFluid ? ( <> - = ({ article, onPress, isFl ) : ( - @@ -97,10 +105,7 @@ export const ArticleCardContainer = createFragmentContainer(ArticleCard, { export const SkeletonArticleCard: React.FC = () => ( - + 10 Shows we suggest you don't miss during Berlin Art Week @@ -113,4 +118,4 @@ export const SkeletonArticleCard: React.FC = () => ( Art • Sep 10, 2024 -) \ No newline at end of file +) diff --git a/src/app/Components/Artist/ArtistShows/ArtistShow.tsx b/src/app/Components/Artist/ArtistShows/ArtistShow.tsx index 4e160b22f5e..3a5661ddb95 100644 --- a/src/app/Components/Artist/ArtistShows/ArtistShow.tsx +++ b/src/app/Components/Artist/ArtistShows/ArtistShow.tsx @@ -1,7 +1,6 @@ import { ActionType, ContextModule, OwnerType, TappedShowGroup } from "@artsy/cohesion" -import { Touchable } from "@artsy/palette-mobile" +import { Image, Touchable } from "@artsy/palette-mobile" import { ArtistShow_show$data, ArtistShow_show$key } from "__generated__/ArtistShow_show.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { hrefForPartialShow } from "app/utils/router" @@ -42,13 +41,15 @@ export const ArtistShow: React.FC = ({ styles, show, index, imageDimensio - + {!!imageURL && ( + + )} {/* this wrapper required to make numberOfLines work when parent is a row */} diff --git a/src/app/Components/ArtistAutosuggest/ArtistAutosuggestRow.tsx b/src/app/Components/ArtistAutosuggest/ArtistAutosuggestRow.tsx index ed9044f663e..bb307876cde 100644 --- a/src/app/Components/ArtistAutosuggest/ArtistAutosuggestRow.tsx +++ b/src/app/Components/ArtistAutosuggest/ArtistAutosuggestRow.tsx @@ -1,6 +1,5 @@ -import { Spacer, Flex } from "@artsy/palette-mobile" +import { Spacer, Flex, Image } from "@artsy/palette-mobile" import { AutosuggestResult } from "app/Components/AutosuggestResults/AutosuggestResults" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { ResultWithHighlight } from "app/Scenes/Search/components/ResultWithHighlight" import { TouchableWithoutFeedback } from "react-native" @@ -19,14 +18,16 @@ export const ArtistAutosuggestRow: React.FC = ({ result, highlight, onRes testID={`artist-suggestion-${result.internalID}`} > - + {!!result.imageUrl && ( + + )} {!!result.displayLabel && ( diff --git a/src/app/Components/ArtworkLists/components/ArtworkListImage.tsx b/src/app/Components/ArtworkLists/components/ArtworkListImage.tsx index 40899c75510..8185f544b7d 100644 --- a/src/app/Components/ArtworkLists/components/ArtworkListImage.tsx +++ b/src/app/Components/ArtworkLists/components/ArtworkListImage.tsx @@ -1,6 +1,5 @@ -import { Flex, FlexProps } from "@artsy/palette-mobile" +import { Flex, FlexProps, Image } from "@artsy/palette-mobile" import { ArtworkListNoImage } from "app/Components/ArtworkLists/components/ArtworkListNoImage" -import { OpaqueImageView } from "app/Components/OpaqueImageView2" import { FC } from "react" export interface ArtworkListImageProps extends FlexProps { @@ -18,7 +17,7 @@ export const ArtworkListImage: FC = ({ return ( {imageURL ? ( - + ) : ( = ({ image, title, subtitle, {...rest} > - + = ({ borderRadius={square_image ? 2 : size / 2} overflow="hidden" > - + {!!imageURL && } diff --git a/src/app/Components/Lists/ShowItemRow.tsx b/src/app/Components/Lists/ShowItemRow.tsx index b44b7de1cd7..60ebb6d489f 100644 --- a/src/app/Components/Lists/ShowItemRow.tsx +++ b/src/app/Components/Lists/ShowItemRow.tsx @@ -1,9 +1,8 @@ -import { Flex, Box, ClassTheme, Text, Button, Touchable } from "@artsy/palette-mobile" +import { Flex, Box, ClassTheme, Text, Button, Touchable, Image } from "@artsy/palette-mobile" import { themeGet } from "@styled-system/theme-get" import { ShowItemRowMutation } from "__generated__/ShowItemRowMutation.graphql" import { ShowItemRow_show$data } from "__generated__/ShowItemRow_show.graphql" import { Pin } from "app/Components/Icons/Pin" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { exhibitionDates } from "app/Scenes/Map/exhibitionPeriodParser" import { navigate } from "app/system/navigation/navigate" import { hrefForPartialShow } from "app/utils/router" @@ -131,7 +130,7 @@ export class ShowItemRow extends React.Component { ) : ( - + )} diff --git a/src/app/Components/OpaqueImageView/OpaqueImageView.tsx b/src/app/Components/OpaqueImageView/OpaqueImageView.tsx deleted file mode 100644 index 3ea7bf2092b..00000000000 --- a/src/app/Components/OpaqueImageView/OpaqueImageView.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { OpaqueImageView } from "app/Components/OpaqueImageView2" - -export default OpaqueImageView diff --git a/src/app/Components/OpaqueImageView/createGeminiUrl.tsx b/src/app/Components/OpaqueImageView/createGeminiUrl.tsx deleted file mode 100644 index f5a3cac1573..00000000000 --- a/src/app/Components/OpaqueImageView/createGeminiUrl.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { osMajorVersion } from "app/utils/platformUtil" -import { Platform } from "react-native" - -export function createGeminiUrl({ - imageURL, - width, - height, - geminiHost = "d7hftxdivxxvm.cloudfront.net", - imageQuality = 80, - resizeMode = "fit", -}: { - imageURL: string - width: number - height: number - geminiHost?: string - imageQuality?: number - resizeMode?: "fit" | "fill" -}) { - const src = encodeURIComponent(imageURL) - - const roundedHeight = Math.round(height) - const roundedWidth = Math.round(width) - - const params = [ - `height=${roundedHeight}`, - `quality=${imageQuality}`, - `resize_to=${resizeMode}`, - `src=${src}`, - `width=${roundedWidth}`, - ] - - if (Platform.OS === "android" || (Platform.OS === "ios" && osMajorVersion() >= 14)) { - params.push("convert_to=webp") - } - - return `https://${geminiHost}/?${params.join("&")}` -} diff --git a/src/app/Components/OpaqueImageView2/OpaqueImageView2.tsx b/src/app/Components/OpaqueImageView2/OpaqueImageView2.tsx deleted file mode 100644 index 7366d245d35..00000000000 --- a/src/app/Components/OpaqueImageView2/OpaqueImageView2.tsx +++ /dev/null @@ -1,264 +0,0 @@ -import { Image, Text, useColor } from "@artsy/palette-mobile" -import { createGeminiUrl } from "app/Components/OpaqueImageView/createGeminiUrl" -import { useDevToggle } from "app/utils/hooks/useDevToggle" -import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" -import { isNumber, isString } from "lodash" -import React, { useCallback, useRef, useState } from "react" -import { Animated, ColorValue, PixelRatio, StyleSheet, View } from "react-native" -import FastImage, { ImageStyle } from "react-native-fast-image" - -type AspectRatioProps = { - /** - * An aspect ratio created with: width / height. - * - * When specified: - * - The view will be sized in such a way that it maintains the aspect ratio of the image. - * - The imageURL will be modified so that it resizes the image to the exact size at which the view has been laid out, - * thus never fetching more data than absolutely necessary. - */ - aspectRatio?: number -} - -type WithHeight = { - height: number - width?: never -} - -type WithWidth = { - width: number - height?: never -} - -type WithHeightAndWidth = { - height: number - width: number -} - -type DimensionProps = AspectRatioProps & (WithHeight | WithWidth | WithHeightAndWidth) - -interface ImageRestProps { - /** The URL from where to fetch the image. */ - imageURL?: string | null - - /** BlurHash code */ - blurhash?: string | null | undefined - - /** - * By default we fetch a resized version of the image from gemini - * Use this option to prevent that from happening. - */ - useRawURL?: boolean - - /** - * By default SDWebImage will not attempt to refetch - * imageURLs that previously failed - * Use this option to override that behavior and refetch - */ - retryFailedURLs?: boolean - - /** The background color for the image view */ - placeholderBackgroundColor?: ColorValue - - /** A callback that is called once the image is loaded. */ - onLoad?: () => void - - /** - * Turn off the fade-in animation - */ - noAnimation?: boolean - // TODO: need to test it in deep zoom - - /** - * prevents `onLoad` from being called if the image fails to load - */ - failSilently?: boolean - // TODO: need to test it in deep zoom - - /** - * renders the image at a higher threading priority level ('interactive') - */ - highPriority?: boolean - - style?: ImageStyle[] | ImageStyle - - testID?: string -} - -const useComponentSize = () => { - const [layoutHeight, setLayoutHeight] = useState(0) - const [layoutWidth, setLayoutWidth] = useState(0) - - const onLayout = useCallback((event) => { - const { width, height } = event.nativeEvent.layout - const scale = PixelRatio.get() - setLayoutHeight(height * scale) - setLayoutWidth(width * scale) - }, []) - - return { layoutHeight, layoutWidth, onLayout } -} - -/** - * @deprecated - * Use `Image` from palette instead. - */ -export const OpaqueImageView: React.FC = ({ - aspectRatio, - ...props -}) => { - const usePaletteImage = useFeatureFlag("ARUsePaletteImage") - const showBlurhash = useFeatureFlag("ARShowBlurhashImagePlaceholder") - - const color = useColor() - const { layoutHeight, layoutWidth, onLayout } = useComponentSize() - // eslint-disable-next-line react-hooks/rules-of-hooks - const isDebugModeEnabled = useDevToggle("DTEnableNewImageLabel") - - const imageScaleValue = useRef(new Animated.Value(0)).current - const style = StyleSheet.flatten(props.style) ?? {} - - const getActualDimensions = useCallback(() => { - if (props.height && props.width) { - return [props.width, props.height] - } - if (style.height && style.width) { - return [Number(style.width), Number(style.height)] - } - const width = props.width ?? style.width - if (isNumber(width)) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - return [width, width / aspectRatio!] - } - if (isString(width)) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - return [layoutWidth, layoutWidth / aspectRatio!] - } - const height = props.height ?? style.height - if (isNumber(height)) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - return [height * aspectRatio!, height] - } - if (isString(height)) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - return [layoutHeight * aspectRatio!, layoutHeight] - } - return [layoutWidth, layoutHeight] - }, [props.height, props.width, style.width, style.height, aspectRatio, layoutHeight, layoutWidth]) - - const [fIWidth, fIHeight] = getActualDimensions() - - if (__DEV__) { - if ( - !( - (style.width && style.height) || - (props.width && props.height) || - (aspectRatio && (style.height || props.height)) || - (aspectRatio && (style.width || props.width)) - ) - ) { - console.error( - "[OpaqueImageView2] Either an aspect ratio or specific dimensions or flex should be specified." - ) - return - } - } - - if (React.Children.count(props.children) > 0) { - console.error("Please don't add children to a OpaqueImageView. Doesn't work on android.") - return - } - - const getImageURL = () => { - const { imageURL, useRawURL } = props - - if (!layoutHeight || !layoutWidth) { - return - } - - if (imageURL) { - if (useRawURL) { - return imageURL - } - - return createGeminiUrl({ - imageURL, - width: layoutWidth, - height: layoutHeight, - // Either scale or crop, based on if an aspect ratio is available. - resizeMode: aspectRatio ? "fit" : "fill", - }) - } - - return - } - - if (usePaletteImage && props.imageURL) { - return ( - - ) - } - - // If no imageURL is given at all, simply set the placeholder background color as a view backgroundColor style so - // that it shows immediately. - const backgroundColorStyle = color("black10") - - const onImageLoadEnd = () => { - if (props.onLoad) { - props.onLoad() - } - if (props.noAnimation) { - Animated.timing(imageScaleValue, { - toValue: 0, - duration: 0.25, - useNativeDriver: true, - }).start() - } - } - - const fastImageStyle = [{ height: fIHeight, width: fIWidth }, props.style] - const debugBorderStyles = isDebugModeEnabled - ? { borderTopWidth: 2, borderColor: color("devpurple") } - : {} - - return ( - - {!!isDebugModeEnabled && ( - - - NewImg - - - )} - - - - ) -} - -export default OpaqueImageView diff --git a/src/app/Components/OpaqueImageView2/index.ts b/src/app/Components/OpaqueImageView2/index.ts deleted file mode 100644 index a5b5c20dcf8..00000000000 --- a/src/app/Components/OpaqueImageView2/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./OpaqueImageView2" diff --git a/src/app/Components/RelatedArtists/RelatedArtist.tsx b/src/app/Components/RelatedArtists/RelatedArtist.tsx index 0c027b181be..3f1423126a6 100644 --- a/src/app/Components/RelatedArtists/RelatedArtist.tsx +++ b/src/app/Components/RelatedArtists/RelatedArtist.tsx @@ -1,6 +1,5 @@ -import { Spacer, ClassTheme, Text } from "@artsy/palette-mobile" +import { Spacer, ClassTheme, Text, Image } from "@artsy/palette-mobile" import { RelatedArtist_artist$data } from "__generated__/RelatedArtist_artist.graphql" -import ImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { Component } from "react" import { TouchableWithoutFeedback, View } from "react-native" @@ -27,12 +26,14 @@ class RelatedArtist extends Component { return ( - + {!!artist.coverArtwork?.image?.url && ( + + )} {artist.name} diff --git a/src/app/Components/SaleArtworkTileRailCard/SaleArtworkTileRailCard.tests.tsx b/src/app/Components/SaleArtworkTileRailCard/SaleArtworkTileRailCard.tests.tsx index d4adcf11848..9c8bb19608e 100644 --- a/src/app/Components/SaleArtworkTileRailCard/SaleArtworkTileRailCard.tests.tsx +++ b/src/app/Components/SaleArtworkTileRailCard/SaleArtworkTileRailCard.tests.tsx @@ -1,5 +1,4 @@ import { SaleArtworkTileRailCardTestsQuery } from "__generated__/SaleArtworkTileRailCardTestsQuery.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { extractText } from "app/utils/tests/extractText" import { renderWithWrappersLEGACY } from "app/utils/tests/renderWithWrappers" import { resolveMostRecentRelayOperation } from "app/utils/tests/resolveMostRecentRelayOperation" @@ -61,10 +60,9 @@ describe("SaleArtworkTileRailCard", () => { expect(extractText(tree.root)).toContain("Captain America") // Render the sale artwork image while mainting the correct aspect ratio - const image = tree.root.findAllByType(OpaqueImageView) - expect(image.length).toBe(1) - expect(image[0].props.height).toBe(CONTAINER_HEIGHT) - expect(image[0].props.width).toBe(CONTAINER_HEIGHT * 0.75) // The mock image aspect ratio is 0.75 + const image = tree.root.findByProps({ testID: "sale-artwork-image" }) + expect(image.props.height).toBe(CONTAINER_HEIGHT) + expect(image.props.width).toBe(CONTAINER_HEIGHT * 0.75) // The mock image aspect ratio is 0.75 }) it("renders custom sale artwork message when useCustomSaleMessage is set to true", () => { @@ -79,10 +77,9 @@ describe("SaleArtworkTileRailCard", () => { resolveMostRecentRelayOperation(mockEnvironment, mockProps) - const image = tree.root.findAllByType(OpaqueImageView) - expect(image.length).toBe(1) - expect(image[0].props.height).toBe(CONTAINER_HEIGHT) - expect(image[0].props.width).toBe(CONTAINER_HEIGHT) + const image = tree.root.findByProps({ testID: "sale-artwork-image" }) + expect(image.props.height).toBe(CONTAINER_HEIGHT) + expect(image.props.width).toBe(CONTAINER_HEIGHT) }) }) diff --git a/src/app/Components/SaleArtworkTileRailCard/SaleArtworkTileRailCard.tsx b/src/app/Components/SaleArtworkTileRailCard/SaleArtworkTileRailCard.tsx index 719d0143ef0..0905a8a78d1 100644 --- a/src/app/Components/SaleArtworkTileRailCard/SaleArtworkTileRailCard.tsx +++ b/src/app/Components/SaleArtworkTileRailCard/SaleArtworkTileRailCard.tsx @@ -5,11 +5,10 @@ import { tappedEntityGroup, TappedEntityGroupArgs, } from "@artsy/cohesion" -import { Box, Flex, Text, useColor } from "@artsy/palette-mobile" +import { Box, Flex, Image, Text, useColor } from "@artsy/palette-mobile" import { themeGet } from "@styled-system/theme-get" import { SaleArtworkTileRailCard_saleArtwork$data } from "__generated__/SaleArtworkTileRailCard_saleArtwork.graphql" import { CARD_WIDTH } from "app/Components/CardRail/CardRailCard" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { UrgencyInfo } from "app/Components/SaleArtworkTileRailCard/UrgencyInfo" import { AnalyticsContextProvider } from "app/system/analytics/AnalyticsContext" import { saleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo" @@ -89,8 +88,9 @@ export const SaleArtworkTileRailCard: React.FC = ( const imageDisplay = artwork?.image?.imageURL ? ( - = ({ show, onPress }) => { - {!!imageURL && } + {!!imageURL && } {show.name} diff --git a/src/app/Components/ThreeUpImageLayout.tsx b/src/app/Components/ThreeUpImageLayout.tsx index 97d73ac1c19..a4adafb05f7 100644 --- a/src/app/Components/ThreeUpImageLayout.tsx +++ b/src/app/Components/ThreeUpImageLayout.tsx @@ -1,5 +1,4 @@ -import { Box } from "@artsy/palette-mobile" -import ImageView from "app/Components/OpaqueImageView/OpaqueImageView" +import { Box, Image } from "@artsy/palette-mobile" import styled from "styled-components/native" interface ThreeUpImageLayoutProps { @@ -17,23 +16,26 @@ export const ThreeUpImageLayout: React.FC = ({ imageURL return ( - - - diff --git a/src/app/Components/Toast/ToastComponent.tsx b/src/app/Components/Toast/ToastComponent.tsx index bd90a78d3e5..ec37a8c714e 100644 --- a/src/app/Components/Toast/ToastComponent.tsx +++ b/src/app/Components/Toast/ToastComponent.tsx @@ -1,6 +1,5 @@ -import { Box, Flex, Text, Touchable, useColor } from "@artsy/palette-mobile" +import { Box, Flex, Image, Text, Touchable, useColor } from "@artsy/palette-mobile" import { useActionSheet } from "@expo/react-native-action-sheet" -import { OpaqueImageView } from "app/Components/OpaqueImageView2" import { internal_navigationRef } from "app/Navigation/Navigation" import { GlobalStore } from "app/store/GlobalStore" import { useScreenDimensions } from "app/utils/hooks" @@ -128,7 +127,7 @@ export const ToastComponent = ({ {!!imageURL && ( - + )} diff --git a/src/app/Scenes/ArtistSeries/ArtistSeriesHeader.tsx b/src/app/Scenes/ArtistSeries/ArtistSeriesHeader.tsx index 8ce6d498e3b..781a780895a 100644 --- a/src/app/Scenes/ArtistSeries/ArtistSeriesHeader.tsx +++ b/src/app/Scenes/ArtistSeries/ArtistSeriesHeader.tsx @@ -5,10 +5,9 @@ import { OwnerType, unfollowedArtist, } from "@artsy/cohesion" -import { Box, Text } from "@artsy/palette-mobile" +import { Box, Image, Text } from "@artsy/palette-mobile" import { ArtistSeriesHeader_artistSeries$data } from "__generated__/ArtistSeriesHeader_artistSeries.graphql" import { useArtistHeaderImageDimensions } from "app/Components/Artist/ArtistHeader" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { ArtistListItemNew } from "app/Scenes/Onboarding/OnboardingQuiz/Components/ArtistListItem" import { createFragmentContainer, graphql } from "react-relay" import { useTracking } from "react-tracking" @@ -49,13 +48,15 @@ export const ArtistSeriesHeader: React.FC = ({ artistSe return ( <> - + {!!image?.url && ( + + )} diff --git a/src/app/Scenes/ArtistSeries/ArtistSeriesListItem.tests.tsx b/src/app/Scenes/ArtistSeries/ArtistSeriesListItem.tests.tsx index 456cc738326..1aae29ec06c 100644 --- a/src/app/Scenes/ArtistSeries/ArtistSeriesListItem.tests.tsx +++ b/src/app/Scenes/ArtistSeries/ArtistSeriesListItem.tests.tsx @@ -1,6 +1,5 @@ import { OwnerType } from "@artsy/cohesion" import { Touchable } from "@artsy/palette-mobile" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { ArtistSeriesListItem } from "app/Scenes/ArtistSeries/ArtistSeriesListItem" import { ArtistSeriesConnectionEdge } from "app/Scenes/ArtistSeries/ArtistSeriesMoreSeries" import { navigate } from "app/system/navigation/navigate" @@ -35,7 +34,7 @@ describe("ArtistSeriesListItem", () => { const instance = artistSeriesListItem.root.findAllByType(Touchable)[0] - expect(instance.findByType(OpaqueImageView).props.imageURL).toBe( + expect(instance.findAllByProps({ testID: "list-item-image" })[0].props.src).toBe( "https://d32dm0rphc51dk.cloudfront.net/dL3hz4h6f_tMHQjVHsdO4w/medium.jpg" ) expect(instance.findByProps({ testID: "count" }).props.children).toBe("25 available") diff --git a/src/app/Scenes/ArtistSeries/ArtistSeriesListItem.tsx b/src/app/Scenes/ArtistSeries/ArtistSeriesListItem.tsx index caff1d370c2..f8682da1255 100644 --- a/src/app/Scenes/ArtistSeries/ArtistSeriesListItem.tsx +++ b/src/app/Scenes/ArtistSeries/ArtistSeriesListItem.tsx @@ -5,8 +5,7 @@ import { ScreenOwnerType, TappedArtistSeriesGroup, } from "@artsy/cohesion" -import { ArrowRightIcon, Flex, useColor, Text, Touchable } from "@artsy/palette-mobile" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" +import { ArrowRightIcon, Flex, useColor, Text, Touchable, Image } from "@artsy/palette-mobile" import { ArtistSeriesConnectionEdge } from "app/Scenes/ArtistSeries/ArtistSeriesMoreSeries" import { navigate } from "app/system/navigation/navigate" import { useTracking } from "react-tracking" @@ -72,7 +71,12 @@ export const ArtistSeriesListItem: React.FC = ({ - + diff --git a/src/app/Scenes/Artwork/Components/ImageCarousel/FullScreen/DeepZoom/DeepZoomTile.tsx b/src/app/Scenes/Artwork/Components/ImageCarousel/FullScreen/DeepZoom/DeepZoomTile.tsx index 78f19d1e1c0..dd2ee593de6 100644 --- a/src/app/Scenes/Artwork/Components/ImageCarousel/FullScreen/DeepZoom/DeepZoomTile.tsx +++ b/src/app/Scenes/Artwork/Components/ImageCarousel/FullScreen/DeepZoom/DeepZoomTile.tsx @@ -109,8 +109,8 @@ export const DeepZoomTile: React.FC = ({ backgroundColor: !showing ? "rgba(255, 0, 0, 0.2)" : !loaded - ? "rgba(0, 0, 255, 0.2)" - : "rgba(0, 255, 0, 0.2)", + ? "rgba(0, 0, 255, 0.2)" + : "rgba(0, 255, 0, 0.2)", }} /> ) @@ -130,17 +130,6 @@ export const DeepZoomTile: React.FC = ({ }} > - {/* - // TODO: Figure out why we get tearing at tile seams when using this in eigen but not emission - - */} ) } diff --git a/src/app/Scenes/Artwork/Components/ImageCarousel/FullScreen/ImageZoomView.tsx b/src/app/Scenes/Artwork/Components/ImageCarousel/FullScreen/ImageZoomView.tsx index 9ba6d250f57..3322ac72bce 100644 --- a/src/app/Scenes/Artwork/Components/ImageCarousel/FullScreen/ImageZoomView.tsx +++ b/src/app/Scenes/Artwork/Components/ImageCarousel/FullScreen/ImageZoomView.tsx @@ -1,5 +1,5 @@ +import { Image } from "@artsy/palette-mobile" import { captureMessage } from "@sentry/react-native" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { ImageCarouselContext, ImageDescriptor, @@ -365,10 +365,10 @@ export const ImageZoomView = transform, }} > - diff --git a/src/app/Scenes/Artwork/Components/ImageCarousel/ImageCarousel.tsx b/src/app/Scenes/Artwork/Components/ImageCarousel/ImageCarousel.tsx index 96d9d12a1e5..f6876bc7e05 100644 --- a/src/app/Scenes/Artwork/Components/ImageCarousel/ImageCarousel.tsx +++ b/src/app/Scenes/Artwork/Components/ImageCarousel/ImageCarousel.tsx @@ -1,7 +1,7 @@ import { Flex } from "@artsy/palette-mobile" +import { createGeminiUrl } from "@artsy/palette-mobile/dist/utils/createGeminiUrl" import { captureMessage } from "@sentry/react-native" import { ImageCarousel_figures$data } from "__generated__/ImageCarousel_figures.graphql" -import { createGeminiUrl } from "app/Components/OpaqueImageView/createGeminiUrl" import { useLocalImages } from "app/utils/LocalImageStore" import { useScreenDimensions } from "app/utils/hooks" import { guardFactory } from "app/utils/types/guardFactory" diff --git a/src/app/Scenes/City/Components/FairEventSection/Components/FairEventSectionCard.tsx b/src/app/Scenes/City/Components/FairEventSection/Components/FairEventSectionCard.tsx index 31037dba1ef..112122ef621 100644 --- a/src/app/Scenes/City/Components/FairEventSection/Components/FairEventSectionCard.tsx +++ b/src/app/Scenes/City/Components/FairEventSection/Components/FairEventSectionCard.tsx @@ -1,10 +1,9 @@ -import { Flex, Box, Text } from "@artsy/palette-mobile" +import { Flex, Box, Text, Image } from "@artsy/palette-mobile" import { themeGet } from "@styled-system/theme-get" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { Fair } from "app/Scenes/Map/types" import { navigate } from "app/system/navigation/navigate" import { Component } from "react" -import { Dimensions, Image, TouchableWithoutFeedback } from "react-native" +import { Dimensions, TouchableWithoutFeedback } from "react-native" import styled from "styled-components/native" interface Props { @@ -25,7 +24,7 @@ export class FairEventSectionCard extends Component { return ( - {!!image && } + {!!image?.url && } {profile?.icon?.url ? : null} @@ -48,7 +47,7 @@ export class FairEventSectionCard extends Component { } } -const BackgroundImage = styled(OpaqueImageView)` +const BackgroundImage = styled(Image)` background: ${themeGet("colors.black60")}; position: absolute; height: 100%; diff --git a/src/app/Scenes/City/Components/TabFairItemRow/index.tsx b/src/app/Scenes/City/Components/TabFairItemRow/index.tsx index 367fe2ea3c6..0c936cb3922 100644 --- a/src/app/Scenes/City/Components/TabFairItemRow/index.tsx +++ b/src/app/Scenes/City/Components/TabFairItemRow/index.tsx @@ -1,5 +1,4 @@ -import { Flex, Box, ClassTheme, Text } from "@artsy/palette-mobile" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" +import { Flex, Box, ClassTheme, Text, Image } from "@artsy/palette-mobile" import { Fair } from "app/Scenes/Map/types" import { navigate } from "app/system/navigation/navigate" import React from "react" @@ -26,11 +25,7 @@ export class TabFairItemRow extends React.Component { this.handleTap(item)}> - + {!!fairImage && } {!!item.name && ( diff --git a/src/app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail.tests.tsx b/src/app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail.tests.tsx index d01a33ac962..cc1903f9607 100644 --- a/src/app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail.tests.tsx +++ b/src/app/Scenes/Collection/Components/CollectionHubsRails/ArtistSeries/CollectionArtistSeriesRail.tests.tsx @@ -2,7 +2,6 @@ import { act, fireEvent } from "@testing-library/react-native" import { CollectionArtistSeriesRailTestsQuery } from "__generated__/CollectionArtistSeriesRailTestsQuery.graphql" import { CardRailCard } from "app/Components/CardRail/CardRailCard" import { GenericArtistSeriesRail } from "app/Components/GenericArtistSeriesRail" -import ImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { CollectionArtistSeriesRail, CollectionArtistSeriesRailContainer, @@ -109,28 +108,28 @@ describe("Artist Series Rail", () => { }) it("renders three images of the correct size in an artist series", () => { - const { UNSAFE_getAllByType } = renderWithWrappers() + const { UNSAFE_getAllByProps } = renderWithWrappers() - expect(UNSAFE_getAllByType(ImageView)[0]).toHaveProp( - "imageURL", + expect(UNSAFE_getAllByProps({ testID: "image-1" })[0]).toHaveProp( + "src", "https://cindy-sherman-untitled-film-stills/medium.jpg" ) - expect(UNSAFE_getAllByType(ImageView)[0]).toHaveProp("height", 180) - expect(UNSAFE_getAllByType(ImageView)[0]).toHaveProp("width", 180) + expect(UNSAFE_getAllByProps({ testID: "image-1" })[0]).toHaveProp("height", 180) + expect(UNSAFE_getAllByProps({ testID: "image-1" })[0]).toHaveProp("width", 180) - expect(UNSAFE_getAllByType(ImageView)[1]).toHaveProp( - "imageURL", + expect(UNSAFE_getAllByProps({ testID: "image-2" })[0]).toHaveProp( + "src", "https://cindy-sherman-untitled-film-stills-2/medium.jpg" ) - expect(UNSAFE_getAllByType(ImageView)[1]).toHaveProp("height", 90) - expect(UNSAFE_getAllByType(ImageView)[1]).toHaveProp("width", 90) + expect(UNSAFE_getAllByProps({ testID: "image-2" })[0]).toHaveProp("height", 90) + expect(UNSAFE_getAllByProps({ testID: "image-2" })[0]).toHaveProp("width", 90) - expect(UNSAFE_getAllByType(ImageView)[2]).toHaveProp( - "imageURL", + expect(UNSAFE_getAllByProps({ testID: "image-3" })[0]).toHaveProp( + "src", "https://cindy-sherman-untitled-film-stills-3/medium.jpg" ) - expect(UNSAFE_getAllByType(ImageView)[2]).toHaveProp("height", 90) - expect(UNSAFE_getAllByType(ImageView)[2]).toHaveProp("width", 90) + expect(UNSAFE_getAllByProps({ testID: "image-3" })[0]).toHaveProp("height", 90) + expect(UNSAFE_getAllByProps({ testID: "image-3" })[0]).toHaveProp("width", 90) }) it("renders the collection hub rail title", () => { diff --git a/src/app/Scenes/Collection/Components/CollectionHubsRails/FeaturedCollections/FeaturedCollectionsRail.tsx b/src/app/Scenes/Collection/Components/CollectionHubsRails/FeaturedCollections/FeaturedCollectionsRail.tsx index 1a4bf1336e0..3e9150848f9 100644 --- a/src/app/Scenes/Collection/Components/CollectionHubsRails/FeaturedCollections/FeaturedCollectionsRail.tsx +++ b/src/app/Scenes/Collection/Components/CollectionHubsRails/FeaturedCollections/FeaturedCollectionsRail.tsx @@ -1,9 +1,8 @@ -import { Spacer, Flex, useColor, Text, Touchable } from "@artsy/palette-mobile" +import { Spacer, Flex, useColor, Text, Touchable, Image } from "@artsy/palette-mobile" import { themeGet } from "@styled-system/theme-get" import { FeaturedCollectionsRail_collection$data } from "__generated__/FeaturedCollectionsRail_collection.graphql" import { FeaturedCollectionsRail_collectionGroup$data } from "__generated__/FeaturedCollectionsRail_collectionGroup.graphql" import { AboveTheFoldFlatList } from "app/Components/AboveTheFoldFlatList" -import ImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { defaultRules, renderMarkdown } from "app/utils/renderMarkdown" @@ -91,10 +90,10 @@ export const FeaturedCollectionsRail: React.FC = ( }} > - { it("passes the collection header image url to collection header", () => { renderWithRelay({ MarketingCollection: () => CollectionFixture }) - expect(screen.UNSAFE_queryByType(OpaqueImageView)).not.toBeTruthy() + expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).not.toBeTruthy() }) it("passes the url of the most marketable artwork in the collection to the collection header when there is no headerImage value present", () => { @@ -40,7 +39,7 @@ describe("collection header", () => { }), }) - expect(screen.UNSAFE_queryByType(OpaqueImageView)).not.toBeOnTheScreen() + expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).not.toBeOnTheScreen() }) }) @@ -54,9 +53,9 @@ describe("collection header", () => { it("passes the collection header image url to collection header", () => { renderWithRelay({ MarketingCollection: () => CollectionFixture }) - expect(screen.UNSAFE_queryByType(OpaqueImageView)).toBeTruthy() - expect(screen.UNSAFE_getByType(OpaqueImageView)).toHaveProp( - "imageURL", + expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).toBeTruthy() + expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).toHaveProp( + "src", "http://imageuploadedbymarketingteam.jpg" ) }) @@ -69,9 +68,9 @@ describe("collection header", () => { }), }) - expect(screen.UNSAFE_queryByType(OpaqueImageView)).toBeOnTheScreen() - expect(screen.UNSAFE_getByType(OpaqueImageView)).toHaveProp( - "imageURL", + expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).toBeOnTheScreen() + expect(screen.UNSAFE_queryByProps({ testID: "header-image" })).toHaveProp( + "src", "https://defaultmostmarketableartworkincollectionimage.jpg" ) }) diff --git a/src/app/Scenes/Collection/Screens/CollectionHeader.tsx b/src/app/Scenes/Collection/Screens/CollectionHeader.tsx index f96aadfa1de..b1253a463c9 100644 --- a/src/app/Scenes/Collection/Screens/CollectionHeader.tsx +++ b/src/app/Scenes/Collection/Screens/CollectionHeader.tsx @@ -1,6 +1,5 @@ -import { Box, Text } from "@artsy/palette-mobile" +import { Box, Image, Text } from "@artsy/palette-mobile" import { CollectionHeader_collection$key } from "__generated__/CollectionHeader_collection.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { ReadMore } from "app/Components/ReadMore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { Schema } from "app/utils/track" @@ -27,7 +26,7 @@ export const CollectionHeader: React.FC = ({ collection } <> {!shouldHideHeaderImage && ( - + )} diff --git a/src/app/Scenes/Fair/Components/FairEditorial.tsx b/src/app/Scenes/Fair/Components/FairEditorial.tsx index 172ed2a921d..26378352b5f 100644 --- a/src/app/Scenes/Fair/Components/FairEditorial.tsx +++ b/src/app/Scenes/Fair/Components/FairEditorial.tsx @@ -1,7 +1,6 @@ import { ActionType, ContextModule, OwnerType, TappedArticleGroup } from "@artsy/cohesion" -import { Box, BoxProps, useColor, Text, Touchable } from "@artsy/palette-mobile" +import { Box, BoxProps, useColor, Text, Touchable, Image } from "@artsy/palette-mobile" import { FairEditorial_fair$data } from "__generated__/FairEditorial_fair.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { createFragmentContainer, graphql } from "react-relay" import { useTracking } from "react-tracking" @@ -86,7 +85,7 @@ export const FairEditorial: React.FC = ({ fair, ...rest }) = {!!article.thumbnailImage?.src && ( - + )} diff --git a/src/app/Scenes/Fair/FairArticles.tsx b/src/app/Scenes/Fair/FairArticles.tsx index 8471387f039..58d8b3241a6 100644 --- a/src/app/Scenes/Fair/FairArticles.tsx +++ b/src/app/Scenes/Fair/FairArticles.tsx @@ -8,10 +8,10 @@ import { Button, Touchable, Screen, + Image, } from "@artsy/palette-mobile" import { FairArticlesQuery } from "__generated__/FairArticlesQuery.graphql" import { FairArticles_fair$data } from "__generated__/FairArticles_fair.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { getRelayEnvironment } from "app/system/relay/defaultEnvironment" import { useEnvironment } from "app/utils/hooks/useEnvironment" @@ -77,12 +77,13 @@ export const FairArticles: React.FC = ({ fair, relay }) => { }} > - - + {!!heroArticle?.thumbnailImage?.url && ( + + )} {heroArticle?.title} @@ -116,11 +117,13 @@ export const FairArticles: React.FC = ({ fair, relay }) => { } }} > - + {!!article?.thumbnailImage?.url && ( + + )} diff --git a/src/app/Scenes/Feature/components/FeatureFeaturedLink.tsx b/src/app/Scenes/Feature/components/FeatureFeaturedLink.tsx index 40fc706f3b4..2d675ee6b8d 100644 --- a/src/app/Scenes/Feature/components/FeatureFeaturedLink.tsx +++ b/src/app/Scenes/Feature/components/FeatureFeaturedLink.tsx @@ -1,6 +1,5 @@ -import { Flex, Text } from "@artsy/palette-mobile" +import { Flex, Image, Text } from "@artsy/palette-mobile" import { FeatureFeaturedLink_featuredLink$data } from "__generated__/FeatureFeaturedLink_featuredLink.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { TouchableOpacity } from "react-native" import LinearGradient from "react-native-linear-gradient" @@ -23,11 +22,9 @@ const FeatureFeaturedLink: React.FC = ({ featuredLink, } }} > - + {!!featuredLink.image?.url && ( + + )} = ({ feature }) => { const imageHeight = isTablet() ? height * 0.6 : width const imageWidth = isTablet() ? width / 2 : width - const image = ( - - ) + const image = !!feature.image?.url ? ( + + ) : null const title = ( = ({ - + {!!imageUrl && } {!!showInitials && ( - diff --git a/src/app/Scenes/Inbox/Components/ActiveBids/ActiveBid.tsx b/src/app/Scenes/Inbox/Components/ActiveBids/ActiveBid.tsx index 23062ee2921..b119bad9672 100644 --- a/src/app/Scenes/Inbox/Components/ActiveBids/ActiveBid.tsx +++ b/src/app/Scenes/Inbox/Components/ActiveBids/ActiveBid.tsx @@ -1,6 +1,6 @@ +import { Image } from "@artsy/palette-mobile" import { themeGet } from "@styled-system/theme-get" import { ActiveBid_bid$data } from "__generated__/ActiveBid_bid.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { BodyText, MetadataText } from "app/Scenes/Inbox/Components/Typography" import { navigate } from "app/system/navigation/navigate" import React from "react" @@ -22,7 +22,7 @@ const Content = styled.View` align-items: center; ` -const ImageView = styled(OpaqueImageView)` +const ImageView = styled(Image)` width: 80px; height: 80px; border-radius: 4px; @@ -146,7 +146,7 @@ class ActiveBid extends React.Component { - + {this.statusLabel} {headline} diff --git a/src/app/Scenes/Inbox/Components/Conversations/ConversationSnippet.tsx b/src/app/Scenes/Inbox/Components/Conversations/ConversationSnippet.tsx index e8ed6b32217..98bbbeac123 100644 --- a/src/app/Scenes/Inbox/Components/Conversations/ConversationSnippet.tsx +++ b/src/app/Scenes/Inbox/Components/Conversations/ConversationSnippet.tsx @@ -1,7 +1,6 @@ -import { Flex, ClassTheme, Text, Touchable } from "@artsy/palette-mobile" +import { Flex, ClassTheme, Text, Touchable, Image } from "@artsy/palette-mobile" import { themeGet } from "@styled-system/theme-get" import { ConversationSnippet_conversation$data } from "__generated__/ConversationSnippet_conversation.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { Schema, Track, track as _track } from "app/utils/track" import moment from "moment" import React from "react" @@ -29,7 +28,7 @@ const Indicator = styled.View` background-color: ${themeGet("colors.blue100")}; ` -const ImageView = styled(OpaqueImageView)` +const ImageView = styled(Image)` width: 80px; height: 80px; border-radius: 2px; @@ -98,7 +97,7 @@ export class ConversationSnippet extends React.Component { )} - + {!!imageURL && } diff --git a/src/app/Scenes/Inbox/Components/Conversations/ItemArtwork.tsx b/src/app/Scenes/Inbox/Components/Conversations/ItemArtwork.tsx index 65d45f60c94..0d4a929aad1 100644 --- a/src/app/Scenes/Inbox/Components/Conversations/ItemArtwork.tsx +++ b/src/app/Scenes/Inbox/Components/Conversations/ItemArtwork.tsx @@ -1,6 +1,5 @@ -import { Flex, Box, Text, Separator, Touchable } from "@artsy/palette-mobile" +import { Flex, Box, Text, Separator, Touchable, Image } from "@artsy/palette-mobile" import { ItemArtwork_artwork$data } from "__generated__/ItemArtwork_artwork.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { createFragmentContainer, graphql } from "react-relay" @@ -22,13 +21,15 @@ export const ItemArtwork: React.FC = ({ artwork }) => { artwork.href && navigate(artwork.href)}> - + {!!artwork.image?.thumbnailUrl && ( + + )} diff --git a/src/app/Scenes/Inbox/Components/Conversations/ItemShow.tsx b/src/app/Scenes/Inbox/Components/Conversations/ItemShow.tsx index 75a885d597e..7227d967c2b 100644 --- a/src/app/Scenes/Inbox/Components/Conversations/ItemShow.tsx +++ b/src/app/Scenes/Inbox/Components/Conversations/ItemShow.tsx @@ -1,6 +1,5 @@ -import { Flex, Box, Text, Separator, Touchable } from "@artsy/palette-mobile" +import { Flex, Box, Text, Separator, Touchable, Image } from "@artsy/palette-mobile" import { ItemShow_show$data } from "__generated__/ItemShow_show.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { createFragmentContainer, graphql } from "react-relay" @@ -19,12 +18,9 @@ export const ItemShow: React.FC = ({ show }) => { show.href && navigate(show.href)}> - + {!!show.image?.thumbnailUrl && ( + + )} diff --git a/src/app/Scenes/Inbox/Components/Conversations/Preview/Attachment/ImagePreview.tsx b/src/app/Scenes/Inbox/Components/Conversations/Preview/Attachment/ImagePreview.tsx index 5751d6b4333..15bf4f9161d 100644 --- a/src/app/Scenes/Inbox/Components/Conversations/Preview/Attachment/ImagePreview.tsx +++ b/src/app/Scenes/Inbox/Components/Conversations/Preview/Attachment/ImagePreview.tsx @@ -1,11 +1,11 @@ +import { Image } from "@artsy/palette-mobile" import { ImagePreview_attachment$data } from "__generated__/ImagePreview_attachment.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { createFragmentContainer, graphql } from "react-relay" import styled from "styled-components/native" import AttachmentPreview, { AttachmentProps } from "./AttachmentPreview" -const Image = styled(OpaqueImageView)` +const ImageView = styled(Image)` height: 250px; flex: 1; ` @@ -16,7 +16,7 @@ interface Props extends AttachmentProps { export const ImagePreview: React.FC = ({ attachment, onSelected }) => ( - + ) diff --git a/src/app/Scenes/MyBids/Components/Lot.tsx b/src/app/Scenes/MyBids/Components/Lot.tsx index 38e7ccdd316..8ed93fa1c4c 100644 --- a/src/app/Scenes/MyBids/Components/Lot.tsx +++ b/src/app/Scenes/MyBids/Components/Lot.tsx @@ -1,6 +1,5 @@ -import { Flex, Box, Text } from "@artsy/palette-mobile" +import { Flex, Box, Text, Image } from "@artsy/palette-mobile" import { Lot_saleArtwork$data } from "__generated__/Lot_saleArtwork.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import React from "react" import { createFragmentContainer, graphql } from "react-relay" @@ -21,7 +20,9 @@ class Lot extends React.Component { - + {!!saleArtwork?.artwork?.image?.url && ( + + )} {!!ArtworkBadge && ( diff --git a/src/app/Scenes/MyCollection/Components/MyCollectionImageView.tsx b/src/app/Scenes/MyCollection/Components/MyCollectionImageView.tsx index 0bd26c2393e..92b50255388 100644 --- a/src/app/Scenes/MyCollection/Components/MyCollectionImageView.tsx +++ b/src/app/Scenes/MyCollection/Components/MyCollectionImageView.tsx @@ -1,5 +1,4 @@ -import { NoImageIcon, Flex, useColor } from "@artsy/palette-mobile" -import { OpaqueImageView } from "app/Components/OpaqueImageView2" +import { NoImageIcon, Flex, useColor, Image } from "@artsy/palette-mobile" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import React from "react" @@ -44,13 +43,12 @@ export const MyCollectionImageView: React.FC = ({ const targetURL = imageURL.replace(":version", "large") return ( - diff --git a/src/app/Scenes/MyCollection/Screens/Insights/ArtistItem.tsx b/src/app/Scenes/MyCollection/Screens/Insights/ArtistItem.tsx index cbf393c5f72..508ad949a09 100644 --- a/src/app/Scenes/MyCollection/Screens/Insights/ArtistItem.tsx +++ b/src/app/Scenes/MyCollection/Screens/Insights/ArtistItem.tsx @@ -1,6 +1,5 @@ -import { NoArtworkIcon, Flex, useColor, Text, Touchable } from "@artsy/palette-mobile" +import { NoArtworkIcon, Flex, useColor, Text, Touchable, Image } from "@artsy/palette-mobile" import { ArtistItem_artist$key } from "__generated__/ArtistItem_artist.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { graphql, useFragment } from "react-relay" interface ArtistItemProps { @@ -40,7 +39,7 @@ export const ArtistItem: React.FC = ({ isFirst, onPress, ...res {!artist.imageUrl ? ( ) : ( - + )} {/* Sale Artwork Artist Name, Nationality and Birthday */} diff --git a/src/app/Scenes/MyCollection/Screens/Insights/MedianAuctionPriceListItem.tsx b/src/app/Scenes/MyCollection/Screens/Insights/MedianAuctionPriceListItem.tsx index 2ea4bc0819b..5cf03aa6fb1 100644 --- a/src/app/Scenes/MyCollection/Screens/Insights/MedianAuctionPriceListItem.tsx +++ b/src/app/Scenes/MyCollection/Screens/Insights/MedianAuctionPriceListItem.tsx @@ -1,6 +1,13 @@ -import { Flex, NoArtworkIcon, Text, ToolTip, Touchable, useColor } from "@artsy/palette-mobile" +import { + Flex, + Image, + NoArtworkIcon, + Text, + ToolTip, + Touchable, + useColor, +} from "@artsy/palette-mobile" import { MedianAuctionPriceRail_me$data } from "__generated__/MedianAuctionPriceRail_me.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { VisualCluesConstMap } from "app/store/config/visualClues" import { setVisualClueAsSeen } from "app/utils/hooks/useVisualClue" import { isNil } from "lodash" @@ -49,7 +56,7 @@ export const MedianAuctionPriceListItem: React.FC = ({ style={{ marginTop: 3 }} > {!!artist?.imageUrl ? ( - + ) : ( )} diff --git a/src/app/Scenes/MyCollection/Screens/Insights/MedianSalePriceAtAuction.tsx b/src/app/Scenes/MyCollection/Screens/Insights/MedianSalePriceAtAuction.tsx index 4e9e0b739c5..866aa28d594 100644 --- a/src/app/Scenes/MyCollection/Screens/Insights/MedianSalePriceAtAuction.tsx +++ b/src/app/Scenes/MyCollection/Screens/Insights/MedianSalePriceAtAuction.tsx @@ -1,7 +1,6 @@ import { OwnerType } from "@artsy/cohesion" -import { Spacer, NoArtworkIcon, Flex, Text, Touchable } from "@artsy/palette-mobile" +import { Spacer, NoArtworkIcon, Flex, Text, Touchable, Image } from "@artsy/palette-mobile" import { MedianSalePriceAtAuctionQuery } from "__generated__/MedianSalePriceAtAuctionQuery.graphql" -import { OpaqueImageView } from "app/Components/OpaqueImageView2" import { useScreenDimensions } from "app/utils/hooks" import { PlaceholderBox, @@ -80,7 +79,7 @@ const MedianSalePriceAtAuctionScreen: React.FC = style={{ marginTop: 3 }} > {data.artist?.imageUrl ? ( - + ) : ( )} diff --git a/src/app/Scenes/Sale/Components/SaleArtworkListItem.tsx b/src/app/Scenes/Sale/Components/SaleArtworkListItem.tsx index d33dd8b0fce..a942b106e85 100644 --- a/src/app/Scenes/Sale/Components/SaleArtworkListItem.tsx +++ b/src/app/Scenes/Sale/Components/SaleArtworkListItem.tsx @@ -5,9 +5,8 @@ import { tappedEntityGroup, TappedEntityGroupArgs, } from "@artsy/cohesion" -import { Flex, Text, Touchable } from "@artsy/palette-mobile" +import { Flex, Image, Text, Touchable } from "@artsy/palette-mobile" import { SaleArtworkListItem_artwork$data } from "__generated__/SaleArtworkListItem_artwork.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { AnalyticsContextProvider } from "app/system/analytics/AnalyticsContext" import { navigate } from "app/system/navigation/navigate" import { saleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo" @@ -69,15 +68,15 @@ export const SaleArtworkListItem: React.FC = ({ artwork, contextScreenOwn > - {!!artwork.image && ( + {!!artwork.image?.small && ( - = ({ sale, scrollAnim }) => { }} > - diff --git a/src/app/Scenes/Sales/Components/SaleListItem.tsx b/src/app/Scenes/Sales/Components/SaleListItem.tsx index 41f55a74278..2fa9f2a222e 100644 --- a/src/app/Scenes/Sales/Components/SaleListItem.tsx +++ b/src/app/Scenes/Sales/Components/SaleListItem.tsx @@ -1,6 +1,5 @@ -import { Flex, Text } from "@artsy/palette-mobile" +import { Flex, Image, Text } from "@artsy/palette-mobile" import { SaleListItem_sale$data } from "__generated__/SaleListItem_sale.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { navigate } from "app/system/navigation/navigate" import { TouchableOpacity, View } from "react-native" import { createFragmentContainer, graphql } from "react-relay" @@ -44,7 +43,7 @@ export const SaleListItem: React.FC = (props) => { overflow="hidden" mb={0.5} > - + )} diff --git a/src/app/Scenes/Search/components/SearchResultImage.tsx b/src/app/Scenes/Search/components/SearchResultImage.tsx index edce5405569..b4a15b6f052 100644 --- a/src/app/Scenes/Search/components/SearchResultImage.tsx +++ b/src/app/Scenes/Search/components/SearchResultImage.tsx @@ -1,5 +1,4 @@ -import { Avatar, Flex } from "@artsy/palette-mobile" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" +import { Avatar, Flex, Image } from "@artsy/palette-mobile" export const IMAGE_SIZE = 40 @@ -22,13 +21,15 @@ export const SearchResultImage: React.FC<{ borderRadius={round ? IMAGE_SIZE / 2 : 0} overflow="hidden" > - + {!!imageURL && ( + + )} ) } diff --git a/src/app/Scenes/Search/components/TrendingArtistCard.tsx b/src/app/Scenes/Search/components/TrendingArtistCard.tsx index ed07c16845a..91d531be986 100644 --- a/src/app/Scenes/Search/components/TrendingArtistCard.tsx +++ b/src/app/Scenes/Search/components/TrendingArtistCard.tsx @@ -1,6 +1,5 @@ -import { Flex, Text } from "@artsy/palette-mobile" +import { Flex, Image, Text } from "@artsy/palette-mobile" import { TrendingArtistCard_artist$key } from "__generated__/TrendingArtistCard_artist.graphql" -import { OpaqueImageView } from "app/Components/OpaqueImageView2" import { TouchableHighlight } from "react-native" import { useFragment, graphql } from "react-relay" @@ -22,11 +21,9 @@ export const TrendingArtistCard: React.FC = ({ artist, onPress={onPress} > - + {!!data.coverArtwork?.image?.url && ( + + )} diff --git a/src/app/Scenes/Show/Components/ShowContextCard.tsx b/src/app/Scenes/Show/Components/ShowContextCard.tsx index 3601b7e5e61..82d4cb93835 100644 --- a/src/app/Scenes/Show/Components/ShowContextCard.tsx +++ b/src/app/Scenes/Show/Components/ShowContextCard.tsx @@ -1,8 +1,7 @@ import { ActionType, ContextModule, OwnerType } from "@artsy/cohesion" -import { Flex, Box, BoxProps, Text, useScreenDimensions } from "@artsy/palette-mobile" +import { Flex, Box, BoxProps, Text, useScreenDimensions, Image } from "@artsy/palette-mobile" import { ShowContextCard_show$data } from "__generated__/ShowContextCard_show.graphql" import { SmallCard } from "app/Components/Cards" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { SectionTitle } from "app/Components/SectionTitle" import { navigate } from "app/system/navigation/navigate" import { TouchableOpacity } from "react-native" @@ -100,7 +99,7 @@ const ContextCard: React.FC = ({ // 3-up image layout ) : ( - + ) @@ -124,12 +123,7 @@ const ContextCard: React.FC = ({ bottom={0} left={2} > - + )} diff --git a/src/app/Scenes/Show/Components/ShowInstallShots.tsx b/src/app/Scenes/Show/Components/ShowInstallShots.tsx index 1d6f6a1ccaa..01745b6c239 100644 --- a/src/app/Scenes/Show/Components/ShowInstallShots.tsx +++ b/src/app/Scenes/Show/Components/ShowInstallShots.tsx @@ -1,6 +1,5 @@ -import { Spacer, Box, BoxProps, Text } from "@artsy/palette-mobile" +import { Spacer, Box, BoxProps, Text, Image } from "@artsy/palette-mobile" import { ShowInstallShots_show$data } from "__generated__/ShowInstallShots_show.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { compact } from "lodash" import { FlatList } from "react-native" import { createFragmentContainer, graphql } from "react-relay" @@ -14,7 +13,7 @@ export const ShowInstallShots: React.FC = ({ show, ...res return ( - + data={images} horizontal showsHorizontalScrollIndicator={false} @@ -30,10 +29,10 @@ export const ShowInstallShots: React.FC = ({ show, ...res return ( {!!image.dimensions.height && ( - )} diff --git a/src/app/Scenes/Show/ShowContextCard.tests.tsx b/src/app/Scenes/Show/ShowContextCard.tests.tsx index 7712737b521..1e5c7fe8a23 100644 --- a/src/app/Scenes/Show/ShowContextCard.tests.tsx +++ b/src/app/Scenes/Show/ShowContextCard.tests.tsx @@ -1,5 +1,4 @@ import { ShowContextCardTestsQuery } from "__generated__/ShowContextCardTestsQuery.graphql" -import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" import { SectionTitle } from "app/Components/SectionTitle" import { navigate } from "app/system/navigation/navigate" import { extractText } from "app/utils/tests/extractText" @@ -77,12 +76,11 @@ describe("ShowContextCard", () => { expect(text).toMatch("Part of IFPDA Print Fair 2020") expect(text).toMatch("Jan 1 - Jan 31") - const renderedImages = wrapper.root - .findAllByType(OpaqueImageView) - .map((img) => img.props.imageURL) + const mainImageURL = wrapper.root.findByProps({ testID: "main-image" }).props.src + const iconImageURL = wrapper.root.findByProps({ testID: "icon-image" }).props.src - expect(renderedImages).toContain("http://test.artsy.net/fair-logo.jpg") - expect(renderedImages).toContain("http://test.artsy.net/fair-main.jpg") + expect(iconImageURL).toBe("http://test.artsy.net/fair-logo.jpg") + expect(mainImageURL).toBe("http://test.artsy.net/fair-main.jpg") }) it("navigates to the fair", () => { diff --git a/src/app/Scenes/ViewingRoom/ViewingRoomArtworks.tsx b/src/app/Scenes/ViewingRoom/ViewingRoomArtworks.tsx index 9c71f824a5e..de4a8d8ec00 100644 --- a/src/app/Scenes/ViewingRoom/ViewingRoomArtworks.tsx +++ b/src/app/Scenes/ViewingRoom/ViewingRoomArtworks.tsx @@ -1,7 +1,15 @@ -import { Flex, Box, useSpace, Text, Spinner, Separator, Touchable } from "@artsy/palette-mobile" +import { + Flex, + Box, + useSpace, + Text, + Spinner, + Separator, + Touchable, + Image, +} from "@artsy/palette-mobile" import { ViewingRoomArtworksQueryRendererQuery } from "__generated__/ViewingRoomArtworksQueryRendererQuery.graphql" import { ViewingRoomArtworks_viewingRoom$data } from "__generated__/ViewingRoomArtworks_viewingRoom.graphql" -import { OpaqueImageView } from "app/Components/OpaqueImageView2" import { ReadMore } from "app/Components/ReadMore" import { navigate } from "app/system/navigation/navigate" import { getRelayEnvironment } from "app/system/relay/defaultEnvironment" @@ -53,11 +61,13 @@ export const ViewingRoomArtworks: React.FC = (props) = }} > - + {!!artwork.image?.url && ( + + )} {artwork.artistNames} diff --git a/src/app/store/config/features.ts b/src/app/store/config/features.ts index 32b4de78196..ac7aa8ba696 100644 --- a/src/app/store/config/features.ts +++ b/src/app/store/config/features.ts @@ -182,12 +182,6 @@ export const features = { showInDevMenu: true, echoFlagKey: "AREnableArtworkListOfferability", }, - ARUsePaletteImage: { - description: "Use Palette Image Component", - readyForRelease: true, - showInDevMenu: true, - echoFlagKey: "ARUsePaletteImageComponent", - }, ARShowBlurhashImagePlaceholder: { description: "Show blurhash image placeholder (works only when using Palette Image Component)", readyForRelease: true, @@ -359,9 +353,6 @@ export const devToggles: { [key: string]: DevToggleDescriptor } = { DTShowErrorInLoadFailureView: { description: "Show error in load failure view", }, - DTEnableNewImageLabel: { - description: "Show a label on new OpaqueImageView", - }, DTDisableNavigationStateRehydration: { description: "Disable navigation state rehydration. This change only affects DEV builds. In release builds, navigation state is never rehydrated.",