native carousel
This commit is contained in:
vineyardbovines
@@ -0,0 +1,126 @@
|
||||
import {Pressable, type StyleProp, View, type ViewStyle} from 'react-native'
|
||||
import {type AnimatedRef} from 'react-native-reanimated'
|
||||
import {Image, type ImageStyle} from 'expo-image'
|
||||
import {type AppBskyEmbedImages} from '@atproto/api'
|
||||
import {utils} from '@bsky.app/alf'
|
||||
import {msg} from '@lingui/core/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {Trans} from '@lingui/react/macro'
|
||||
|
||||
import {type Dimensions} from '#/lib/media/types'
|
||||
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
|
||||
import {PostEmbedViewContext} from '#/components/Post/Embed/types'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
type EventFunction = (index: number) => void
|
||||
|
||||
interface Props {
|
||||
images: AppBskyEmbedImages.ViewImage[]
|
||||
index: number
|
||||
onPress?: (
|
||||
index: number,
|
||||
containerRefs: AnimatedRef<any>[],
|
||||
fetchedDims: (Dimensions | null)[],
|
||||
) => void
|
||||
onLongPress?: EventFunction
|
||||
onPressIn?: EventFunction
|
||||
imageStyle?: StyleProp<ImageStyle>
|
||||
viewContext?: PostEmbedViewContext
|
||||
insetBorderStyle?: StyleProp<ViewStyle>
|
||||
containerRefs: AnimatedRef<any>[]
|
||||
thumbDimsRef: React.RefObject<(Dimensions | null)[]>
|
||||
}
|
||||
|
||||
export function GalleryItem({
|
||||
images,
|
||||
index,
|
||||
imageStyle,
|
||||
onPress,
|
||||
onPressIn,
|
||||
onLongPress,
|
||||
viewContext,
|
||||
insetBorderStyle,
|
||||
containerRefs,
|
||||
thumbDimsRef,
|
||||
}: Props) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const largeAltBadge = useLargeAltBadgeEnabled()
|
||||
const image = images[index]
|
||||
const hasAlt = !!image.alt
|
||||
const hideBadges =
|
||||
viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
||||
return (
|
||||
<View style={a.flex_1} ref={containerRefs[index]} collapsable={false}>
|
||||
<Pressable
|
||||
onPress={
|
||||
onPress
|
||||
? () => onPress(index, containerRefs, thumbDimsRef.current.slice())
|
||||
: undefined
|
||||
}
|
||||
onPressIn={onPressIn ? () => onPressIn(index) : undefined}
|
||||
onLongPress={onLongPress ? () => onLongPress(index) : undefined}
|
||||
android_ripple={{
|
||||
color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
|
||||
foreground: true,
|
||||
}}
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg_contrast_25,
|
||||
imageStyle,
|
||||
]}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={image.alt || _(msg`Image`)}
|
||||
accessibilityHint="">
|
||||
<Image
|
||||
source={{uri: image.thumb}}
|
||||
style={[a.flex_1]}
|
||||
accessible={true}
|
||||
accessibilityLabel={image.alt}
|
||||
accessibilityHint=""
|
||||
accessibilityIgnoresInvertColors
|
||||
onLoad={e => {
|
||||
thumbDimsRef.current[index] = {
|
||||
width: e.source.width,
|
||||
height: e.source.height,
|
||||
}
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
<MediaInsetBorder style={insetBorderStyle} />
|
||||
</Pressable>
|
||||
{hasAlt && !hideBadges ? (
|
||||
<View
|
||||
accessible={false}
|
||||
style={[
|
||||
a.absolute,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.rounded_xs,
|
||||
t.atoms.bg_contrast_25,
|
||||
{
|
||||
gap: 3,
|
||||
padding: 3,
|
||||
bottom: a.p_xs.padding,
|
||||
right: a.p_xs.padding,
|
||||
opacity: 0.8,
|
||||
},
|
||||
largeAltBadge && [
|
||||
{
|
||||
gap: 4,
|
||||
padding: 5,
|
||||
},
|
||||
],
|
||||
]}>
|
||||
<Text
|
||||
style={[a.font_bold, largeAltBadge ? a.text_xs : {fontSize: 8}]}>
|
||||
<Trans>ALT</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
import {useContext, useMemo, useRef, useState} from 'react'
|
||||
import {FlatList, Pressable, View} from 'react-native'
|
||||
import {DrawerGestureContext} from 'react-native-drawer-layout'
|
||||
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
|
||||
import {type AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
|
||||
import {Image} from 'expo-image'
|
||||
import {type AppBskyEmbedImages} from '@atproto/api'
|
||||
import {utils} from '@bsky.app/alf'
|
||||
import {msg} from '@lingui/core/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {Trans} from '@lingui/react/macro'
|
||||
|
||||
import {type Dimensions} from '#/lib/media/types'
|
||||
import {useA11y} from '#/state/a11y'
|
||||
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
|
||||
import {PostEmbedViewContext} from '#/components/Post/Embed/types'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {useAnalytics} from '#/analytics'
|
||||
|
||||
const CONTAINER_ASPECT_RATIO = 4 / 3
|
||||
const PEEK_WIDTH = 40
|
||||
const ITEM_GAP = 6
|
||||
|
||||
interface GalleryProps {
|
||||
images: AppBskyEmbedImages.ViewImage[]
|
||||
onPress?: (
|
||||
index: number,
|
||||
containerRefs: AnimatedRef<any>[],
|
||||
fetchedDims: (Dimensions | null)[],
|
||||
) => void
|
||||
onPressIn?: (index: number) => void
|
||||
viewContext?: PostEmbedViewContext
|
||||
}
|
||||
|
||||
export function Gallery({
|
||||
images,
|
||||
onPress,
|
||||
onPressIn,
|
||||
viewContext,
|
||||
}: GalleryProps) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const ax = useAnalytics()
|
||||
const {screenReaderEnabled} = useA11y()
|
||||
const largeAltBadge = useLargeAltBadgeEnabled()
|
||||
const [currentPage, setCurrentPage] = useState(0)
|
||||
const currentPageRef = useRef(0)
|
||||
const [containerWidth, setContainerWidth] = useState(0)
|
||||
|
||||
const containerRefs = useRef<AnimatedRef<any>[]>([]).current
|
||||
const thumbDimsRef = useRef<(Dimensions | null)[]>([])
|
||||
|
||||
const ref0 = useAnimatedRef()
|
||||
const ref1 = useAnimatedRef()
|
||||
const ref2 = useAnimatedRef()
|
||||
const ref3 = useAnimatedRef()
|
||||
const refs = [ref0, ref1, ref2, ref3]
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
containerRefs[i] = refs[i]
|
||||
}
|
||||
|
||||
const hideBadges =
|
||||
viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
||||
|
||||
const itemWidth = containerWidth > 0 ? containerWidth - PEEK_WIDTH : 0
|
||||
const snapInterval = itemWidth + ITEM_GAP
|
||||
|
||||
if (screenReaderEnabled) {
|
||||
return (
|
||||
<View
|
||||
style={[a.rounded_md, a.overflow_hidden]}
|
||||
accessibilityRole="adjustable">
|
||||
{images.map((image, index) => (
|
||||
<View
|
||||
key={index}
|
||||
ref={containerRefs[index]}
|
||||
collapsable={false}
|
||||
style={[
|
||||
{aspectRatio: CONTAINER_ASPECT_RATIO},
|
||||
t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
<Pressable
|
||||
onPress={
|
||||
onPress
|
||||
? () =>
|
||||
onPress(
|
||||
index,
|
||||
containerRefs.slice(0, images.length),
|
||||
thumbDimsRef.current.slice(),
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
onPressIn={onPressIn ? () => onPressIn(index) : undefined}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={
|
||||
image.alt || _(msg`Image ${index + 1} of ${images.length}`)
|
||||
}
|
||||
accessibilityHint={_(msg`Opens full image`)}
|
||||
style={[a.flex_1]}>
|
||||
<Image
|
||||
source={{uri: image.thumb}}
|
||||
style={[a.flex_1]}
|
||||
contentFit="cover"
|
||||
accessible={true}
|
||||
accessibilityLabel={image.alt}
|
||||
accessibilityHint=""
|
||||
accessibilityIgnoresInvertColors
|
||||
onLoad={e => {
|
||||
thumbDimsRef.current[index] = {
|
||||
width: e.source.width,
|
||||
height: e.source.height,
|
||||
}
|
||||
}}
|
||||
loading={index === 0 ? 'eager' : 'lazy'}
|
||||
/>
|
||||
<MediaInsetBorder />
|
||||
</Pressable>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[a.rounded_md, a.overflow_hidden]}
|
||||
onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}>
|
||||
{containerWidth > 0 && (
|
||||
<DrawerGestureBlocker>
|
||||
<FlatList
|
||||
data={images}
|
||||
horizontal
|
||||
pagingEnabled={false}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
snapToInterval={snapInterval}
|
||||
snapToAlignment="start"
|
||||
decelerationRate="fast"
|
||||
contentContainerStyle={{gap: ITEM_GAP}}
|
||||
onScroll={e => {
|
||||
const offsetX = e.nativeEvent.contentOffset.x
|
||||
if (snapInterval > 0) {
|
||||
const page = Math.round(offsetX / snapInterval)
|
||||
if (page !== currentPageRef.current) {
|
||||
ax.metric('post:gallery:swipe', {
|
||||
fromIndex: currentPageRef.current,
|
||||
toIndex: page,
|
||||
totalImages: images.length,
|
||||
})
|
||||
currentPageRef.current = page
|
||||
setCurrentPage(page)
|
||||
}
|
||||
}
|
||||
}}
|
||||
scrollEventThrottle={16}
|
||||
keyExtractor={(_, index) => String(index)}
|
||||
renderItem={({item: image, index}) => (
|
||||
<View
|
||||
ref={containerRefs[index]}
|
||||
collapsable={false}
|
||||
style={[
|
||||
{
|
||||
width: itemWidth,
|
||||
aspectRatio: CONTAINER_ASPECT_RATIO,
|
||||
},
|
||||
]}>
|
||||
<Pressable
|
||||
onPress={
|
||||
onPress
|
||||
? () => {
|
||||
ax.metric('post:gallery:openLightbox', {
|
||||
imageIndex: index,
|
||||
totalImages: images.length,
|
||||
})
|
||||
onPress(
|
||||
index,
|
||||
containerRefs.slice(0, images.length),
|
||||
thumbDimsRef.current.slice(),
|
||||
)
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onPressIn={onPressIn ? () => onPressIn(index) : undefined}
|
||||
android_ripple={{
|
||||
color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
|
||||
foreground: true,
|
||||
}}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={
|
||||
image.alt || _(msg`Image ${index + 1} of ${images.length}`)
|
||||
}
|
||||
accessibilityHint={_(msg`Opens full image`)}
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.rounded_md,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
<Image
|
||||
source={{uri: image.thumb}}
|
||||
style={[a.flex_1]}
|
||||
contentFit="cover"
|
||||
accessible={true}
|
||||
accessibilityLabel={image.alt}
|
||||
accessibilityHint=""
|
||||
accessibilityIgnoresInvertColors
|
||||
onLoad={e => {
|
||||
thumbDimsRef.current[index] = {
|
||||
width: e.source.width,
|
||||
height: e.source.height,
|
||||
}
|
||||
}}
|
||||
loading={index === 0 ? 'eager' : 'lazy'}
|
||||
/>
|
||||
<MediaInsetBorder />
|
||||
</Pressable>
|
||||
{image.alt && !hideBadges ? (
|
||||
<View
|
||||
accessible={false}
|
||||
style={[
|
||||
a.absolute,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.rounded_xs,
|
||||
t.atoms.bg_contrast_25,
|
||||
{
|
||||
gap: 3,
|
||||
padding: 3,
|
||||
bottom: a.p_xs.padding,
|
||||
right: a.p_xs.padding,
|
||||
opacity: 0.8,
|
||||
},
|
||||
largeAltBadge && {
|
||||
gap: 4,
|
||||
padding: 5,
|
||||
},
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
a.font_bold,
|
||||
largeAltBadge ? a.text_xs : {fontSize: 8},
|
||||
]}>
|
||||
<Trans>ALT</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</DrawerGestureBlocker>
|
||||
)}
|
||||
{images.length > 1 && (
|
||||
<View
|
||||
accessible={false}
|
||||
style={[
|
||||
a.absolute,
|
||||
a.rounded_full,
|
||||
t.atoms.bg_contrast_975,
|
||||
{
|
||||
bottom: a.p_xs.padding,
|
||||
left: a.p_xs.padding,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
opacity: 0.75,
|
||||
},
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
a.font_bold,
|
||||
{fontSize: 11, color: t.atoms.text_inverted.color},
|
||||
]}>
|
||||
{currentPage + 1}/{images.length}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerGestureBlocker({children}: {children: React.ReactNode}) {
|
||||
const drawerGesture = useContext(DrawerGestureContext)
|
||||
|
||||
const nativeGesture = useMemo(() => {
|
||||
const gesture = Gesture.Native()
|
||||
if (drawerGesture) {
|
||||
gesture.blocksExternalGesture(drawerGesture)
|
||||
}
|
||||
return gesture
|
||||
}, [drawerGesture])
|
||||
|
||||
return <GestureDetector gesture={nativeGesture}>{children}</GestureDetector>
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
import {useRef, useState} from 'react'
|
||||
import {Pressable, ScrollView, View} from 'react-native'
|
||||
import {type AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
|
||||
import {Image} from 'expo-image'
|
||||
import {type AppBskyEmbedImages} from '@atproto/api'
|
||||
import {msg} from '@lingui/core/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {Trans} from '@lingui/react/macro'
|
||||
|
||||
import {type Dimensions} from '#/lib/media/types'
|
||||
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
|
||||
import {atoms as a, useTheme, web} from '#/alf'
|
||||
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
|
||||
import {PostEmbedViewContext} from '#/components/Post/Embed/types'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {useAnalytics} from '#/analytics'
|
||||
|
||||
const CONTAINER_ASPECT_RATIO = 4 / 3
|
||||
const PEEK_WIDTH = 40
|
||||
const ITEM_GAP = 6
|
||||
|
||||
interface GalleryProps {
|
||||
images: AppBskyEmbedImages.ViewImage[]
|
||||
onPress?: (
|
||||
index: number,
|
||||
containerRefs: AnimatedRef<any>[],
|
||||
fetchedDims: (Dimensions | null)[],
|
||||
) => void
|
||||
onPressIn?: (index: number) => void
|
||||
viewContext?: PostEmbedViewContext
|
||||
}
|
||||
|
||||
export function Gallery({
|
||||
images,
|
||||
onPress,
|
||||
onPressIn,
|
||||
viewContext,
|
||||
}: GalleryProps) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const ax = useAnalytics()
|
||||
const largeAltBadge = useLargeAltBadgeEnabled()
|
||||
const [currentPage, setCurrentPage] = useState(0)
|
||||
const currentPageRef = useRef(0)
|
||||
const scrollRef = useRef<ScrollView>(null)
|
||||
const [containerWidth, setContainerWidth] = useState(0)
|
||||
|
||||
const containerRefs = useRef<AnimatedRef<any>[]>([]).current
|
||||
const thumbDimsRef = useRef<(Dimensions | null)[]>([])
|
||||
|
||||
const ref0 = useAnimatedRef()
|
||||
const ref1 = useAnimatedRef()
|
||||
const ref2 = useAnimatedRef()
|
||||
const ref3 = useAnimatedRef()
|
||||
const refs = [ref0, ref1, ref2, ref3]
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
containerRefs[i] = refs[i]
|
||||
}
|
||||
|
||||
const hideBadges =
|
||||
viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
|
||||
|
||||
const itemWidth = containerWidth > 0 ? containerWidth - PEEK_WIDTH : 0
|
||||
const snapInterval = itemWidth + ITEM_GAP
|
||||
|
||||
const goToPage = (index: number) => {
|
||||
scrollRef.current?.scrollTo({
|
||||
x: index * snapInterval,
|
||||
animated: true,
|
||||
})
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowLeft' && currentPage > 0) {
|
||||
e.preventDefault()
|
||||
goToPage(currentPage - 1)
|
||||
} else if (e.key === 'ArrowRight' && currentPage < images.length - 1) {
|
||||
e.preventDefault()
|
||||
goToPage(currentPage + 1)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[a.rounded_md, a.overflow_hidden]}
|
||||
onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}
|
||||
// @ts-expect-error web-only prop
|
||||
onKeyDown={handleKeyDown}
|
||||
tabIndex={0}
|
||||
role="group"
|
||||
aria-roledescription="carousel"
|
||||
aria-label={_(msg`Image gallery, ${images.length} images`)}>
|
||||
{containerWidth > 0 && (
|
||||
<ScrollView
|
||||
ref={scrollRef}
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
scrollEventThrottle={16}
|
||||
style={[
|
||||
{aspectRatio: CONTAINER_ASPECT_RATIO},
|
||||
web({
|
||||
scrollSnapType: 'x mandatory',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
}),
|
||||
]}
|
||||
contentContainerStyle={{gap: ITEM_GAP}}
|
||||
onScroll={e => {
|
||||
const offsetX = e.nativeEvent.contentOffset.x
|
||||
if (snapInterval > 0) {
|
||||
const page = Math.round(offsetX / snapInterval)
|
||||
if (page !== currentPageRef.current) {
|
||||
ax.metric('post:gallery:swipe', {
|
||||
fromIndex: currentPageRef.current,
|
||||
toIndex: page,
|
||||
totalImages: images.length,
|
||||
})
|
||||
currentPageRef.current = page
|
||||
setCurrentPage(page)
|
||||
}
|
||||
}
|
||||
}}>
|
||||
{images.map((image, index) => (
|
||||
<View
|
||||
key={index}
|
||||
ref={containerRefs[index]}
|
||||
collapsable={false}
|
||||
style={[
|
||||
{
|
||||
width: itemWidth,
|
||||
aspectRatio: CONTAINER_ASPECT_RATIO,
|
||||
},
|
||||
web({scrollSnapAlign: 'start'}),
|
||||
]}
|
||||
aria-roledescription="slide"
|
||||
aria-label={
|
||||
image.alt || _(msg`Image ${index + 1} of ${images.length}`)
|
||||
}>
|
||||
<Pressable
|
||||
onPress={
|
||||
onPress
|
||||
? () => {
|
||||
ax.metric('post:gallery:openLightbox', {
|
||||
imageIndex: index,
|
||||
totalImages: images.length,
|
||||
})
|
||||
onPress(
|
||||
index,
|
||||
containerRefs.slice(0, images.length),
|
||||
thumbDimsRef.current.slice(),
|
||||
)
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onPressIn={onPressIn ? () => onPressIn(index) : undefined}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={
|
||||
image.alt || _(msg`Image ${index + 1} of ${images.length}`)
|
||||
}
|
||||
accessibilityHint={_(msg`Opens full image`)}
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.rounded_md,
|
||||
a.overflow_hidden,
|
||||
t.atoms.bg_contrast_25,
|
||||
web({cursor: 'pointer'}),
|
||||
]}>
|
||||
<Image
|
||||
source={{uri: image.thumb}}
|
||||
style={[a.flex_1]}
|
||||
contentFit="cover"
|
||||
accessible={true}
|
||||
accessibilityLabel={image.alt}
|
||||
accessibilityHint=""
|
||||
accessibilityIgnoresInvertColors
|
||||
onLoad={e => {
|
||||
thumbDimsRef.current[index] = {
|
||||
width: e.source.width,
|
||||
height: e.source.height,
|
||||
}
|
||||
}}
|
||||
loading={index === 0 ? 'eager' : 'lazy'}
|
||||
/>
|
||||
<MediaInsetBorder />
|
||||
</Pressable>
|
||||
{image.alt && !hideBadges ? (
|
||||
<View
|
||||
accessible={false}
|
||||
style={[
|
||||
a.absolute,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.rounded_xs,
|
||||
t.atoms.bg_contrast_25,
|
||||
{
|
||||
gap: 3,
|
||||
padding: 3,
|
||||
bottom: a.p_xs.padding,
|
||||
right: a.p_xs.padding,
|
||||
opacity: 0.8,
|
||||
},
|
||||
largeAltBadge && {
|
||||
gap: 4,
|
||||
padding: 5,
|
||||
},
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
a.font_bold,
|
||||
largeAltBadge ? a.text_xs : {fontSize: 8},
|
||||
]}>
|
||||
<Trans>ALT</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
{images.length > 1 && (
|
||||
<>
|
||||
<View
|
||||
accessible={false}
|
||||
style={[
|
||||
a.absolute,
|
||||
a.rounded_full,
|
||||
t.atoms.bg_contrast_975,
|
||||
{
|
||||
bottom: a.p_xs.padding,
|
||||
left: a.p_xs.padding,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
opacity: 0.75,
|
||||
},
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
a.font_bold,
|
||||
{fontSize: 11, color: t.atoms.text_inverted.color},
|
||||
]}>
|
||||
{currentPage + 1}/{images.length}
|
||||
</Text>
|
||||
</View>
|
||||
{currentPage > 0 && (
|
||||
<Pressable
|
||||
onPress={() => goToPage(currentPage - 1)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Previous image`)}
|
||||
accessibilityHint=""
|
||||
style={[
|
||||
a.absolute,
|
||||
a.align_center,
|
||||
a.justify_center,
|
||||
a.rounded_full,
|
||||
t.atoms.bg_contrast_975,
|
||||
{
|
||||
left: a.p_xs.padding,
|
||||
top: '50%',
|
||||
marginTop: -16,
|
||||
width: 32,
|
||||
height: 32,
|
||||
opacity: 0.75,
|
||||
},
|
||||
web({cursor: 'pointer'}),
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
a.font_bold,
|
||||
a.text_md,
|
||||
{color: t.atoms.text_inverted.color},
|
||||
]}>
|
||||
{'<'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
{currentPage < images.length - 1 && (
|
||||
<Pressable
|
||||
onPress={() => goToPage(currentPage + 1)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Next image`)}
|
||||
accessibilityHint=""
|
||||
style={[
|
||||
a.absolute,
|
||||
a.align_center,
|
||||
a.justify_center,
|
||||
a.rounded_full,
|
||||
t.atoms.bg_contrast_975,
|
||||
{
|
||||
right: a.p_xs.padding,
|
||||
top: '50%',
|
||||
marginTop: -16,
|
||||
width: 32,
|
||||
height: 32,
|
||||
opacity: 0.75,
|
||||
},
|
||||
web({cursor: 'pointer'}),
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
a.font_bold,
|
||||
a.text_md,
|
||||
{color: t.atoms.text_inverted.color},
|
||||
]}>
|
||||
{'>'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user