vineyardbovines
109 lines
3.0 KiB
TypeScript
109 lines
3.0 KiB
TypeScript
import {InteractionManager, View} from 'react-native'
|
|
import {type AnimatedRef} from 'react-native-reanimated'
|
|
import {Image} from 'expo-image'
|
|
|
|
import {type Dimensions} from '#/view/com/lightbox/ImageViewing/@types'
|
|
import {atoms as a, tokens} from '#/alf'
|
|
import {AutoSizedImage} from '#/components/images/AutoSizedImage'
|
|
import {Gallery} from '#/components/images/Gallery'
|
|
import {ImageLayoutGrid} from '#/components/images/ImageLayoutGrid'
|
|
import {PostEmbedViewContext} from '#/components/Post/Embed/types'
|
|
import {useAnalytics} from '#/analytics'
|
|
import {useLightboxControls} from '#/features/lightbox/state'
|
|
import {type EmbedType} from '#/types/bsky/post'
|
|
import {type CommonProps} from './types'
|
|
|
|
export function ImageEmbed({
|
|
embed,
|
|
...rest
|
|
}: CommonProps & {
|
|
embed: EmbedType<'images'>
|
|
}) {
|
|
const ax = useAnalytics()
|
|
const {openLightbox} = useLightboxControls()
|
|
const {images} = embed.view
|
|
const galleryEnabled = ax.features.enabled(ax.features.PostGalleryEmbedEnable)
|
|
|
|
if (images.length > 0) {
|
|
const items = images.map(img => ({
|
|
uri: img.fullsize,
|
|
thumbUri: img.thumb,
|
|
alt: img.alt,
|
|
dimensions: img.aspectRatio ?? null,
|
|
}))
|
|
const onPress = (
|
|
index: number,
|
|
refs: AnimatedRef<any>[],
|
|
fetchedDims: (Dimensions | null)[],
|
|
) => {
|
|
openLightbox({
|
|
images: items.map((item, i) => ({
|
|
...item,
|
|
thumbRect: null,
|
|
thumbRef: refs[i] ?? null,
|
|
thumbDimensions: fetchedDims[i] ?? null,
|
|
thumbBorderRadius: tokens.borderRadius.md,
|
|
type: 'image',
|
|
})),
|
|
index,
|
|
})
|
|
}
|
|
const onPressIn = (_: number) => {
|
|
InteractionManager.runAfterInteractions(() => {
|
|
Image.prefetch(
|
|
items.map(i => i.uri),
|
|
'memory',
|
|
)
|
|
})
|
|
}
|
|
|
|
if (images.length === 1) {
|
|
const image = images[0]
|
|
return (
|
|
<View style={[a.mt_sm, rest.style]}>
|
|
<AutoSizedImage
|
|
crop={
|
|
rest.viewContext === PostEmbedViewContext.ThreadHighlighted
|
|
? 'none'
|
|
: rest.viewContext ===
|
|
PostEmbedViewContext.FeedEmbedRecordWithMedia
|
|
? 'square'
|
|
: 'constrained'
|
|
}
|
|
image={image}
|
|
onPress={(containerRef, dims) => onPress(0, [containerRef], [dims])}
|
|
onPressIn={() => onPressIn(0)}
|
|
hideBadge={
|
|
rest.viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
|
}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
if (galleryEnabled) {
|
|
return (
|
|
<View style={[a.mt_sm, rest.style]}>
|
|
<Gallery
|
|
images={images}
|
|
onPress={onPress}
|
|
onPressIn={onPressIn}
|
|
viewContext={rest.viewContext}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<View style={[a.mt_sm, rest.style]}>
|
|
<ImageLayoutGrid
|
|
images={images}
|
|
onPress={onPress}
|
|
onPressIn={onPressIn}
|
|
viewContext={rest.viewContext}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
}
|