Fix image peek in carousels for quote posts
Plumbs `isWithinQuote` from `ImageEmbed` through to `Gallery` and uses it to render the carousel with a smaller per-breakpoint height + square crop. Drops the `FeedEmbedRecordWithMedia` derivation, which has been dead since the chat-message squashing change removed every site that set that enum. Closes APP-2098
This commit is contained in:
@@ -89,6 +89,7 @@ export function ImageEmbed({
|
|||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
onPressIn={onPressIn}
|
onPressIn={onPressIn}
|
||||||
viewContext={rest.viewContext}
|
viewContext={rest.viewContext}
|
||||||
|
isWithinQuote={rest.isWithinQuote}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -53,6 +53,7 @@ interface GalleryProps {
|
|||||||
) => void
|
) => void
|
||||||
onPressIn?: (index: number) => void
|
onPressIn?: (index: number) => void
|
||||||
viewContext?: PostEmbedViewContext
|
viewContext?: PostEmbedViewContext
|
||||||
|
isWithinQuote?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const Context = createContext<{
|
const Context = createContext<{
|
||||||
@@ -96,6 +97,7 @@ export function Gallery({
|
|||||||
onPress,
|
onPress,
|
||||||
onPressIn,
|
onPressIn,
|
||||||
viewContext,
|
viewContext,
|
||||||
|
isWithinQuote,
|
||||||
}: GalleryProps) {
|
}: GalleryProps) {
|
||||||
const {t: l} = useLingui()
|
const {t: l} = useLingui()
|
||||||
const ax = useAnalytics()
|
const ax = useAnalytics()
|
||||||
@@ -103,14 +105,21 @@ export function Gallery({
|
|||||||
const largeAltBadge = useLargeAltBadgeEnabled()
|
const largeAltBadge = useLargeAltBadgeEnabled()
|
||||||
const bps = useBreakpoints()
|
const bps = useBreakpoints()
|
||||||
const window = useWindowDimensions()
|
const window = useWindowDimensions()
|
||||||
const isWithinQuote =
|
|
||||||
viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
|
||||||
const isWithinChat = viewContext === PostEmbedViewContext.ChatMessage
|
const isWithinChat = viewContext === PostEmbedViewContext.ChatMessage
|
||||||
const hideBadges = isWithinQuote
|
const hideBadges = isWithinQuote
|
||||||
const contentHeight = useMemo(() => {
|
const contentHeight = useMemo(() => {
|
||||||
if (isWithinChat) {
|
if (isWithinChat) {
|
||||||
return 120
|
return 120
|
||||||
}
|
}
|
||||||
|
if (isWithinQuote) {
|
||||||
|
if (bps.gtMobile) {
|
||||||
|
return 220
|
||||||
|
} else if (bps.gtPhone) {
|
||||||
|
return 190
|
||||||
|
} else {
|
||||||
|
return 150
|
||||||
|
}
|
||||||
|
}
|
||||||
if (bps.gtMobile) {
|
if (bps.gtMobile) {
|
||||||
return 300
|
return 300
|
||||||
} else if (bps.gtPhone) {
|
} else if (bps.gtPhone) {
|
||||||
@@ -118,7 +127,7 @@ export function Gallery({
|
|||||||
} else {
|
} else {
|
||||||
return 200
|
return 200
|
||||||
}
|
}
|
||||||
}, [bps, isWithinChat])
|
}, [bps, isWithinChat, isWithinQuote])
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Container overflow styles
|
* Container overflow styles
|
||||||
@@ -219,7 +228,7 @@ export function Gallery({
|
|||||||
crop={
|
crop={
|
||||||
viewContext === PostEmbedViewContext.ThreadHighlighted
|
viewContext === PostEmbedViewContext.ThreadHighlighted
|
||||||
? 'none'
|
? 'none'
|
||||||
: viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
: isWithinQuote
|
||||||
? 'square'
|
? 'square'
|
||||||
: 'constrained'
|
: 'constrained'
|
||||||
}
|
}
|
||||||
@@ -228,9 +237,7 @@ export function Gallery({
|
|||||||
onPress?.(index, [containerRef], [dims])
|
onPress?.(index, [containerRef], [dims])
|
||||||
}
|
}
|
||||||
onPressIn={() => onPressIn?.(index)}
|
onPressIn={() => onPressIn?.(index)}
|
||||||
hideBadge={
|
hideBadge={isWithinQuote}
|
||||||
viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
Reference in New Issue
Block a user