Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫
Something went wrong. Try again.
3.5 kB · 121 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122import {InteractionManager, View} from 'react-native'import {type AnimatedRef} from 'react-native-reanimated'import {Image} from 'expo-image'
import {useLightboxControls} from '#/state/lightbox'import {useHighQualityImages} from '#/state/preferences/high-quality-images'import { applyImageTransforms, useImageCdnHost,} from '#/state/preferences/image-cdn-host'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 {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 highQualityImages = useHighQualityImages() const imageCdnHost = useImageCdnHost() const {images} = embed.view const galleryEnabled = ax.features.enabled(ax.features.PostGalleryEmbedEnable)
if (images.length > 0) { const items = images.map(img => ({ uri: applyImageTransforms(img.fullsize, { imageCdnHost, highQualityImages, }), thumbUri: applyImageTransforms(img.thumb, { imageCdnHost, highQualityImages, }), 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> ) }}