diff --git a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx index 81e66739e04..d71085842a0 100644 --- a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx +++ b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx @@ -533,6 +533,7 @@ export default createFragmentContainer(Artwork, { width: { type: "Int" } ) { ...CreateArtworkAlertModal_artwork + ...ContextMenuArtwork_artwork @arguments(width: $width) availability title date diff --git a/src/app/Components/ArtworkRail/ArtworkRail.tsx b/src/app/Components/ArtworkRail/ArtworkRail.tsx index 2c48ae0d53a..0df95ac4a8c 100644 --- a/src/app/Components/ArtworkRail/ArtworkRail.tsx +++ b/src/app/Components/ArtworkRail/ArtworkRail.tsx @@ -3,10 +3,8 @@ import { ArtworkRail_artworks$data, ArtworkRail_artworks$key, } from "__generated__/ArtworkRail_artworks.graphql" -import { - ARTWORK_RAIL_CARD_IMAGE_HEIGHT, - ArtworkRailCard, -} from "app/Components/ArtworkRail/ArtworkRailCard" +import { ArtworkRailCard } from "app/Components/ArtworkRail/ArtworkRailCard" +import { ARTWORK_RAIL_CARD_IMAGE_HEIGHT } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage" import { BrowseMoreRailCard } from "app/Components/BrowseMoreRailCard" import { Disappearable, DissapearableArtwork } from "app/Components/Disappearable" import { PrefetchFlatList } from "app/Components/PrefetchFlatList" @@ -135,7 +133,7 @@ export const ArtworkRail: React.FC = ({ const artworksFragment = graphql` fragment ArtworkRail_artworks on Artwork @relay(plural: true) { - ...ArtworkRailCard_artwork @arguments(width: 590) + ...ArtworkRailCard_artwork internalID href slug diff --git a/src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx b/src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx index 2e97271a12a..5d9ba013a1a 100644 --- a/src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx +++ b/src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx @@ -42,20 +42,6 @@ describe("ArtworkRailCard", () => { expect(screen.getByText("Some Kind of Dinosaur, 2015")).toBeOnTheScreen() }) - it("renders without throwing an error when an auction is about to open, but not closed or finished", () => { - renderWithRelay({ - Artwork: () => ({ - title: "Some Kind of Dinosaur", - sale: { isClosed: false, isAuction: true }, - saleArtwork: { currentBid: { display: "$200" }, counts: { bidderPositions: 1 } }, - realizedPrice: null, - collectorSignals: { auction: { bidCount: 1 } }, - }), - }) - - expect(screen.getByText("$200 (1 bid)")).toBeOnTheScreen() - }) - it("shows the partner name if showPartnerName is set to true", () => { renderWithRelay( { Artwork: () => ({ partner: { name: "partner" } }) }, @@ -290,20 +276,6 @@ describe("ArtworkRailCard", () => { expect(screen.getByText("Extended, 59s left to bid")).toBeOnTheScreen() }) }) - - it("shows number of bids", () => { - renderWithRelay({ - Artwork: () => ({ - ...artwork, - sale: { ...artwork.sale, isClosed: false }, - saleArtwork: { currentBid: { display: "$3,700" } }, - realizedPrice: null, - collectorSignals: { auction: { bidCount: 7 } }, - }), - }) - - expect(screen.getByText("$3,700 (7 bids)")).toBeOnTheScreen() - }) }) describe("social signal", () => { diff --git a/src/app/Components/ArtworkRail/ArtworkRailCard.tsx b/src/app/Components/ArtworkRail/ArtworkRailCard.tsx index 3bd945734ba..ea66f9e92a6 100644 --- a/src/app/Components/ArtworkRail/ArtworkRailCard.tsx +++ b/src/app/Components/ArtworkRail/ArtworkRailCard.tsx @@ -1,43 +1,28 @@ -import { - Box, - Flex, - HeartFillIcon, - HeartIcon, - Image, - Text, - Touchable, - useColor, -} from "@artsy/palette-mobile" -import { - ArtworkRailCard_artwork$data, - ArtworkRailCard_artwork$key, -} from "__generated__/ArtworkRailCard_artwork.graphql" +import { Box, Flex, HeartFillIcon, HeartIcon, Text, Touchable } from "@artsy/palette-mobile" +import { ArtworkRailCard_artwork$key } from "__generated__/ArtworkRailCard_artwork.graphql" import { CreateArtworkAlertModal } from "app/Components/Artist/ArtistArtworks/CreateArtworkAlertModal" import { ArtworkAuctionTimer } from "app/Components/ArtworkGrids/ArtworkAuctionTimer" import { ArtworkSocialSignal } from "app/Components/ArtworkGrids/ArtworkSocialSignal" import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists" -import { ARTWORK_RAIL_IMAGE_WIDTH } from "app/Components/ArtworkRail/ArtworkRail" +import { ArtworkRailCardImage } from "app/Components/ArtworkRail/ArtworkRailCardImage" +import { LegacyArtworkRailCardImage } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage" import { ContextMenuArtwork } from "app/Components/ContextMenu/ContextMenuArtwork" import { HEART_ICON_SIZE } from "app/Components/constants" import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft" import { AnalyticsContextProvider } from "app/system/analytics/AnalyticsContext" import { saleMessageOrBidInfo as defaultSaleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo" import { getTimer } from "app/utils/getTimer" -import { getUrgencyTag } from "app/utils/getUrgencyTag" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { ArtworkActionTrackingProps, tracks as artworkActionTracks, } from "app/utils/track/ArtworkActions" -import { sizeToFit } from "app/utils/useSizeToFit" -import { useMemo, useState } from "react" +import { useState } from "react" import { GestureResponderEvent, PixelRatio, TouchableHighlight } from "react-native" import { graphql, useFragment } from "react-relay" import { useTracking } from "react-tracking" export const ARTWORK_RAIL_TEXT_CONTAINER_HEIGHT = 90 -export const ARTWORK_RAIL_CARD_IMAGE_HEIGHT = 320 -const ARTWORK_LARGE_RAIL_CARD_IMAGE_WIDTH = 295 export interface ArtworkRailCardProps extends ArtworkActionTrackingProps { artwork: ArtworkRailCard_artwork$key @@ -84,21 +69,14 @@ export const ArtworkRailCard: React.FC = ({ const AREnableCuratorsPicksAndInterestSignals = useFeatureFlag( "AREnableCuratorsPicksAndInterestSignals" ) + const enableArtworkRailRedesignImageAspectRatio = useFeatureFlag( + "AREnableArtworkRailRedesignImageAspectRatio" + ) const [showCreateArtworkAlertModal, setShowCreateArtworkAlertModal] = useState(false) const artwork = useFragment(artworkFragment, restProps.artwork) - const { - artistNames, - date, - image, - partner, - title, - sale, - saleArtwork, - isUnlisted, - collectorSignals, - } = artwork + const { artistNames, date, partner, title, sale, isUnlisted, collectorSignals } = artwork const saleMessage = defaultSaleMessageOrBidInfo({ artwork, @@ -110,10 +88,6 @@ export const ArtworkRailCard: React.FC = ({ const partnerOfferEndAt = collectorSignals?.partnerOffer?.endAt ? formattedTimeLeft(getTimer(collectorSignals.partnerOffer.endAt).time).timerCopy : "" - const extendedBiddingEndAt = saleArtwork?.extendedBiddingEndAt - const lotEndAt = saleArtwork?.endAt - const endAt = extendedBiddingEndAt ?? lotEndAt ?? sale?.endAt - const urgencyTag = sale?.isAuction && !sale?.isClosed ? getUrgencyTag(endAt) : null const primaryTextColor = dark ? "white100" : "black100" const secondaryTextColor = dark ? "black15" : "black60" @@ -127,29 +101,6 @@ export const ArtworkRailCard: React.FC = ({ contextScreen, } = restProps - const containerWidth = useMemo(() => { - const imageDimensions = sizeToFit( - { - width: image?.resized?.width ?? 0, - height: image?.resized?.height ?? 0, - }, - { - width: ARTWORK_LARGE_RAIL_CARD_IMAGE_WIDTH, - height: ARTWORK_RAIL_CARD_IMAGE_HEIGHT, - } - ) - - const SMALL_RAIL_IMAGE_WIDTH = 155 - - if (imageDimensions.width <= SMALL_RAIL_IMAGE_WIDTH) { - return SMALL_RAIL_IMAGE_WIDTH - } else if (imageDimensions.width >= ARTWORK_RAIL_IMAGE_WIDTH) { - return ARTWORK_RAIL_IMAGE_WIDTH - } else { - return imageDimensions.width - } - }, [image?.resized?.height, image?.resized?.width]) - const onArtworkSavedOrUnSaved = (saved: boolean) => { const { availability, isAcquireable, isBiddable, isInquireable, isOfferable } = artwork const params = { @@ -216,14 +167,14 @@ export const ArtworkRailCard: React.FC = ({ testID={testID} > - + {enableArtworkRailRedesignImageAspectRatio ? ( + + ) : ( + + )} + = ({ ) } -export interface ArtworkRailCardImageProps { - image: ArtworkRailCard_artwork$data["image"] - urgencyTag?: string | null - containerWidth?: number | null -} - -const ArtworkRailCardImage: React.FC = ({ - image, - urgencyTag = null, - containerWidth, -}) => { - const color = useColor() - const showBlurhash = useFeatureFlag("ARShowBlurhashImagePlaceholder") - - if (!containerWidth) { - return null - } - - const { width, height, src } = image?.resized || {} - - if (!src) { - return ( - - ) - } - - const containerDimensions = { - width: ARTWORK_LARGE_RAIL_CARD_IMAGE_WIDTH, - height: ARTWORK_RAIL_CARD_IMAGE_HEIGHT, - } - - const imageDimensions = sizeToFit( - { - width: width ?? 0, - height: height ?? 0, - }, - containerDimensions - ) - - const imageHeight = imageDimensions.height || ARTWORK_RAIL_CARD_IMAGE_HEIGHT - - return ( - - - - {!!urgencyTag && ( - - - {urgencyTag} - - - )} - - ) -} - const artworkFragment = graphql` - fragment ArtworkRailCard_artwork on Artwork @argumentDefinitions(width: { type: "Int" }) { + fragment ArtworkRailCard_artwork on Artwork { ...CreateArtworkAlertModal_artwork + ...ArtworkRailCardImage_artwork + ...LegacyArtworkRailCardImage_artwork + ...ContextMenuArtwork_artwork + id internalID availability @@ -471,21 +350,13 @@ const artworkFragment = graphql` artists(shallow: true) { name } + image(includeAll: false) { + url(version: "large") + } widthCm heightCm isHangable date - image { - blurhash - url(version: "large") - resized(width: $width) { - src - srcSet - width - height - } - aspectRatio - } isUnlisted sale { isAuction @@ -493,16 +364,6 @@ const artworkFragment = graphql` endAt } saleMessage - saleArtwork { - counts { - bidderPositions - } - currentBid { - display - } - endAt - extendedBiddingEndAt - } partner { name } diff --git a/src/app/Components/ArtworkRail/ArtworkRailCardImage.tsx b/src/app/Components/ArtworkRail/ArtworkRailCardImage.tsx new file mode 100644 index 00000000000..fc0100e7884 --- /dev/null +++ b/src/app/Components/ArtworkRail/ArtworkRailCardImage.tsx @@ -0,0 +1,24 @@ +import { Text } from "@artsy/palette-mobile" +import { ArtworkRailCardImage_artwork$key } from "__generated__/ArtworkRailCardImage_artwork.graphql" +import { graphql, useFragment } from "react-relay" + +export interface ArtworkRailCardImageProps { + artwork: ArtworkRailCardImage_artwork$key +} + +export const ArtworkRailCardImage: React.FC = ({ ...restProps }) => { + const artwork = useFragment(artworkFragment, restProps.artwork) + // TODO: Extract urgency tags (see LegacyArtworkRailCardImage) + // TODO: Implement new image component + + return {artwork?.image?.url} +} + +const artworkFragment = graphql` + fragment ArtworkRailCardImage_artwork on Artwork { + image(includeAll: false) { + blurhash + url(version: "large") + } + } +` diff --git a/src/app/Components/ArtworkRail/LegacyArtworkRailCardImage.tsx b/src/app/Components/ArtworkRail/LegacyArtworkRailCardImage.tsx new file mode 100644 index 00000000000..f1047c1627a --- /dev/null +++ b/src/app/Components/ArtworkRail/LegacyArtworkRailCardImage.tsx @@ -0,0 +1,107 @@ +import { Flex, Image, useColor } from "@artsy/palette-mobile" +import { LegacyArtworkRailCardImage_artwork$key } from "__generated__/LegacyArtworkRailCardImage_artwork.graphql" +import { ARTWORK_RAIL_IMAGE_WIDTH } from "app/Components/ArtworkRail/ArtworkRail" +import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" +import { sizeToFit } from "app/utils/useSizeToFit" +import { useMemo } from "react" +import { graphql, useFragment } from "react-relay" + +export const ARTWORK_RAIL_CARD_IMAGE_HEIGHT = 320 +export const ARTWORK_RAIL_CARD_IMAGE_WIDTH = 295 + +export interface LegacyArtworkRailCardImageProps { + artwork: LegacyArtworkRailCardImage_artwork$key + urgencyTag?: string | null +} + +export const LegacyArtworkRailCardImage: React.FC = ({ + urgencyTag = null, + ...restProps +}) => { + const showBlurhash = useFeatureFlag("ARShowBlurhashImagePlaceholder") + + const color = useColor() + + const { image } = useFragment(artworkFragment, restProps.artwork) + const { width, height, src } = image?.legacyResized || {} + + const containerWidth = useMemo(() => { + const imageDimensions = sizeToFit( + { + width: image?.legacyResized?.width ?? 0, + height: image?.legacyResized?.height ?? 0, + }, + { + width: ARTWORK_RAIL_CARD_IMAGE_WIDTH, + height: ARTWORK_RAIL_CARD_IMAGE_HEIGHT, + } + ) + + const SMALL_RAIL_IMAGE_WIDTH = 155 + + if (imageDimensions.width <= SMALL_RAIL_IMAGE_WIDTH) { + return SMALL_RAIL_IMAGE_WIDTH + } else if (imageDimensions.width >= ARTWORK_RAIL_IMAGE_WIDTH) { + return ARTWORK_RAIL_IMAGE_WIDTH + } else { + return imageDimensions.width + } + }, [image?.legacyResized?.height, image?.legacyResized?.width]) + + if (!containerWidth) { + return null + } + + if (!src) { + return ( + + ) + } + + const containerDimensions = { + width: ARTWORK_RAIL_CARD_IMAGE_WIDTH, + height: ARTWORK_RAIL_CARD_IMAGE_HEIGHT, + } + + const imageDimensions = sizeToFit( + { + width: width ?? 0, + height: height ?? 0, + }, + containerDimensions + ) + + const imageHeight = imageDimensions.height || ARTWORK_RAIL_CARD_IMAGE_HEIGHT + + return ( + + + + ) +} + +const artworkFragment = graphql` + fragment LegacyArtworkRailCardImage_artwork on Artwork { + image(includeAll: false) { + blurhash + url(version: "large") + legacyResized: resized(width: 590) { + src + srcSet + width + height + } + aspectRatio + } + } +` diff --git a/src/app/Components/ContextMenu/ContextMenuArtwork.tsx b/src/app/Components/ContextMenu/ContextMenuArtwork.tsx index 58849e9977e..5aec1fcff9e 100644 --- a/src/app/Components/ContextMenu/ContextMenuArtwork.tsx +++ b/src/app/Components/ContextMenu/ContextMenuArtwork.tsx @@ -1,7 +1,7 @@ import { ActionType, ContextModule, LongPressedArtwork, ScreenOwnerType } from "@artsy/cohesion" import { useColor } from "@artsy/palette-mobile" -import { ArtworkGridItem_artwork$data } from "__generated__/ArtworkGridItem_artwork.graphql" -import { ArtworkRailCard_artwork$data } from "__generated__/ArtworkRailCard_artwork.graphql" +import { ContextMenuArtworkPreviewCard_artwork$key } from "__generated__/ContextMenuArtworkPreviewCard_artwork.graphql" +import { ContextMenuArtwork_artwork$key } from "__generated__/ContextMenuArtwork_artwork.graphql" import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists" import { ArtworkRailCardProps } from "app/Components/ArtworkRail/ArtworkRailCard" import { ContextMenuArtworkPreviewCard } from "app/Components/ContextMenu/ContextMenuArtworkPreviewCard" @@ -15,6 +15,7 @@ import { isEmpty } from "lodash" import { InteractionManager, Platform } from "react-native" import ContextMenu, { ContextMenuAction, ContextMenuProps } from "react-native-context-menu-view" import { HapticFeedbackTypes, trigger } from "react-native-haptic-feedback" +import { graphql, useFragment } from "react-relay" import { useTracking } from "react-tracking" interface ContextAction extends Omit { @@ -27,7 +28,7 @@ export type ArtworkDisplayProps = Pick< > interface ContextMenuArtworkProps { - artwork: ArtworkRailCard_artwork$data | ArtworkGridItem_artwork$data + artwork: ContextMenuArtwork_artwork$key onCreateAlertActionPress: () => void onSupressArtwork?: () => void haptic?: HapticFeedbackTypes | boolean @@ -36,8 +37,37 @@ interface ContextMenuArtworkProps { contextModule?: ContextModule } +const artworkFragment = graphql` + fragment ContextMenuArtwork_artwork on Artwork @argumentDefinitions(width: { type: "Int" }) { + ...ContextMenuArtworkPreviewCard_artwork @arguments(width: $width) + ...useSaveArtworkToArtworkLists_artwork + + title + href + artistNames + artists(shallow: true) { + name + } + slug + internalID + id + isHangable + contextMenuImage: image { + url(version: "large") + } + image(includeAll: false) { + url(version: "large") + } + sale { + isAuction + isClosed + } + heightCm + widthCm + } +` + export const ContextMenuArtwork: React.FC = ({ - artwork, children, haptic = true, artworkDisplayProps, @@ -45,7 +75,10 @@ export const ContextMenuArtwork: React.FC = ({ onSupressArtwork, contextScreenOwnerType, contextModule, + ...restProps }) => { + const artwork = useFragment(artworkFragment, restProps.artwork) + const { trackEvent } = useTracking() const { showShareSheet } = useShareSheet() const enableContextMenuForRecommendations = @@ -217,9 +250,7 @@ export const ContextMenuArtwork: React.FC = ({ return <>{children} } - const artworkPreviewComponent = ( - artwork: ArtworkRailCard_artwork$data | ArtworkGridItem_artwork$data - ) => { + const artworkPreviewComponent = (artwork: ContextMenuArtworkPreviewCard_artwork$key) => { return ( ) diff --git a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx index 5ebfdf06c02..b3c98b47751 100644 --- a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx +++ b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx @@ -1,21 +1,15 @@ -import { Flex, Text, useColor, useScreenDimensions, useSpace } from "@artsy/palette-mobile" -import { ArtworkGridItem_artwork$data } from "__generated__/ArtworkGridItem_artwork.graphql" -import { ArtworkRailCard_artwork$data } from "__generated__/ArtworkRailCard_artwork.graphql" +import { Flex, Text, useScreenDimensions, useSpace } from "@artsy/palette-mobile" +import { ContextMenuArtworkPreviewCard_artwork$key } from "__generated__/ContextMenuArtworkPreviewCard_artwork.graphql" import { ArtworkDisplayProps } from "app/Components/ContextMenu/ContextMenuArtwork" -import { OpaqueImageView } from "app/Components/OpaqueImageView2" +import { ContextMenuArtworkPreviewCardImage } from "app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage" import { saleMessageOrBidInfo as defaultSaleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo" import { getUrgencyTag } from "app/utils/getUrgencyTag" -import { sizeToFit } from "app/utils/useSizeToFit" import { PixelRatio } from "react-native" import { isTablet } from "react-native-device-info" -import { graphql } from "react-relay" +import { graphql, useFragment } from "react-relay" const ARTWORK_RAIL_TEXT_CONTAINER_HEIGHT = 70 -const ARTWORK_RAIL_CARD_IMAGE_HEIGHT = 400 - -const ARTWORK_LARGE_RAIL_CARD_IMAGE_WIDTH = 295 - const useFullWidth = () => { const space = useSpace() const { width } = useScreenDimensions() @@ -24,14 +18,16 @@ const useFullWidth = () => { } export interface ContextMenuArtworkPreviewCardProps { - artwork: ArtworkRailCard_artwork$data | ArtworkGridItem_artwork$data + artwork: ContextMenuArtworkPreviewCard_artwork$key artworkDisplayProps?: ArtworkDisplayProps } export const ContextMenuArtworkPreviewCard: React.FC = ({ - artwork, artworkDisplayProps, + ...restProps }) => { + const artwork = useFragment(artworkFragment, restProps.artwork) + const { SalePriceComponent, dark = false, @@ -44,7 +40,7 @@ export const ContextMenuArtworkPreviewCard: React.FC = ({ image, urgencyTag = null, containerWidth, imageHeightExtra = 0 }) => { - const color = useColor() - - const { width, height, src } = image?.resized || {} - - if (!src) { - return ( - - ) - } - - const imageDimensions = sizeToFit( - { - width: width ?? 0, - height: height ?? 0, - }, - { - width: ARTWORK_LARGE_RAIL_CARD_IMAGE_WIDTH, - height: ARTWORK_RAIL_CARD_IMAGE_HEIGHT, - } - ) - - return ( - - - - - {!!urgencyTag && ( - - - {urgencyTag} - - - )} - - ) -} - -export const artworkFragment = graphql` +const artworkFragment = graphql` fragment ContextMenuArtworkPreviewCard_artwork on Artwork @argumentDefinitions(width: { type: "Int" }) { - ...CreateArtworkAlertModal_artwork - id - internalID - availability - slug - isAcquireable - isBiddable - isInquireable - isOfferable - href + ...ContextMenuArtworkPreviewCardImage_artwork @arguments(width: $width) + artistNames - artists(shallow: true) { - name - } - widthCm - heightCm - isHangable date - image { - url(version: "large") - resized(width: $width) { - src - srcSet - width - height - } - aspectRatio - } + title + realizedPrice sale { isAuction isClosed @@ -259,8 +159,5 @@ export const artworkFragment = graphql` partner { name } - title - realizedPrice - ...useSaveArtworkToArtworkLists_artwork } ` diff --git a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage.tsx b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage.tsx new file mode 100644 index 00000000000..4c47d5734eb --- /dev/null +++ b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage.tsx @@ -0,0 +1,90 @@ +import { Flex, Text, useColor } from "@artsy/palette-mobile" +import { ContextMenuArtworkPreviewCardImage_artwork$key } from "__generated__/ContextMenuArtworkPreviewCardImage_artwork.graphql" +import { + ARTWORK_RAIL_CARD_IMAGE_HEIGHT, + ARTWORK_RAIL_CARD_IMAGE_WIDTH, +} from "app/Components/ArtworkRail/LegacyArtworkRailCardImage" +import { OpaqueImageView } from "app/Components/OpaqueImageView2" +import { sizeToFit } from "app/utils/useSizeToFit" +import { graphql, useFragment } from "react-relay" + +const artworkFragment = graphql` + fragment ContextMenuArtworkPreviewCardImage_artwork on Artwork + @argumentDefinitions(width: { type: "Int" }) { + contextMenuImage: image { + url(version: "large") + resized(width: $width) { + src + srcSet + width + height + } + } + } +` + +export interface ContextMenuArtworkPreviewCardImageProps { + artwork: ContextMenuArtworkPreviewCardImage_artwork$key + urgencyTag?: string | null + containerWidth?: number +} + +export const ContextMenuArtworkPreviewCardImage: React.FC< + ContextMenuArtworkPreviewCardImageProps +> = ({ urgencyTag = null, containerWidth, ...restProps }) => { + const artwork = useFragment(artworkFragment, restProps.artwork) + const color = useColor() + + const { width, height, src } = artwork?.contextMenuImage?.resized || {} + + if (!src) { + return ( + + ) + } + + const imageDimensions = sizeToFit( + { + width: width ?? 0, + height: height ?? 0, + }, + { + width: ARTWORK_RAIL_CARD_IMAGE_WIDTH, + height: ARTWORK_RAIL_CARD_IMAGE_HEIGHT, + } + ) + + return ( + + + + + {!!urgencyTag && ( + + + {urgencyTag} + + + )} + + ) +} diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx index bca7d8f3f6e..e8290fde1df 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionArtworks.tsx @@ -4,7 +4,7 @@ import { ArtworkRail_artworks$data } from "__generated__/ArtworkRail_artworks.gr import { HomeViewSectionArtworksQuery } from "__generated__/HomeViewSectionArtworksQuery.graphql" import { HomeViewSectionArtworks_section$key } from "__generated__/HomeViewSectionArtworks_section.graphql" import { ARTWORK_RAIL_IMAGE_WIDTH, ArtworkRail } from "app/Components/ArtworkRail/ArtworkRail" -import { ARTWORK_RAIL_CARD_IMAGE_HEIGHT } from "app/Components/ArtworkRail/ArtworkRailCard" +import { ARTWORK_RAIL_CARD_IMAGE_HEIGHT } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage" import { SectionTitle } from "app/Components/SectionTitle" import { HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT } from "app/Scenes/HomeView/HomeView" import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking" diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx index 5ac3deff7e0..7bf66848163 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx @@ -12,7 +12,7 @@ import { import { HomeViewSectionFeaturedCollectionQuery } from "__generated__/HomeViewSectionFeaturedCollectionQuery.graphql" import { HomeViewSectionFeaturedCollection_section$key } from "__generated__/HomeViewSectionFeaturedCollection_section.graphql" import { ARTWORK_RAIL_IMAGE_WIDTH, ArtworkRail } from "app/Components/ArtworkRail/ArtworkRail" -import { ARTWORK_RAIL_CARD_IMAGE_HEIGHT } from "app/Components/ArtworkRail/ArtworkRailCard" +import { ARTWORK_RAIL_CARD_IMAGE_HEIGHT } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage" import { HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT } from "app/Scenes/HomeView/HomeView" import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking" import { navigate } from "app/system/navigation/navigate" diff --git a/src/app/Scenes/SellWithArtsy/Components/SellWithArtsyRecentlySold.tsx b/src/app/Scenes/SellWithArtsy/Components/SellWithArtsyRecentlySold.tsx index 53d0d5819d3..32954443678 100644 --- a/src/app/Scenes/SellWithArtsy/Components/SellWithArtsyRecentlySold.tsx +++ b/src/app/Scenes/SellWithArtsy/Components/SellWithArtsyRecentlySold.tsx @@ -9,6 +9,7 @@ import { ArtworkRailCard } from "app/Components/ArtworkRail/ArtworkRailCard" import { PrefetchFlatList } from "app/Components/PrefetchFlatList" import { navigate } from "app/system/navigation/navigate" import { extractNodes } from "app/utils/extractNodes" +import { ExtractNodeType } from "app/utils/relayHelpers" import { compact } from "lodash" import { graphql, useFragment } from "react-relay" import { useTracking } from "react-tracking" @@ -65,9 +66,8 @@ export const SellWithArtsyRecentlySold: React.FC ) } -type RecentlySoldArtwork = NonNullable< - NonNullable[0] ->["node"] +type RecentlySoldArtwork = + ExtractNodeType export interface RecentlySoldArtworksRailProps extends Omit { @@ -167,7 +167,7 @@ const customRecentlySoldArtworksFragment = graphql` edges { node { artwork { - ...ArtworkRailCard_artwork @arguments(width: 250) + ...ArtworkRailCard_artwork internalID href slug diff --git a/src/app/store/config/features.ts b/src/app/store/config/features.ts index b4f2d060801..a8a70894cba 100644 --- a/src/app/store/config/features.ts +++ b/src/app/store/config/features.ts @@ -277,6 +277,12 @@ export const features = { showInDevMenu: true, echoFlagKey: "AREnableCuratorsPicksAndInterestSignals", }, + AREnableArtworkRailRedesignImageAspectRatio: { + description: "Enable new aspect ratio for artwork rail images", + readyForRelease: false, + showInDevMenu: true, + // echoFlagKey: "AREnableArtworkRailRedesignImageAspectRatio", + }, } satisfies { [key: string]: FeatureDescriptor } export interface DevToggleDescriptor {