acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

update scrolling and bleeding edges

Browse Source
This commit is contained in:
vineyardbovines
2026-04-01 14:59:45 -04:00
parent e1b8d25dba
commit 01cd962c09
3 changed files with 142 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Post/Embed/index.tsx
+1
View File
@@ -308,6 +308,7 @@ export function QuoteEmbed({
<Embed
embed={quote.embed}
moderation={moderation}
viewContext={PostEmbedViewContext.FeedEmbedRecordWithMedia}
isWithinQuote={parentIsWithinQuote ?? true}
// already within quote? override nested
allowNestedQuotes={
src/components/images/Gallery/index.tsx
+76 -48
View File
@@ -1,5 +1,5 @@
import {useContext, useMemo, useRef, useState} from 'react'
import {FlatList, Pressable, View} from 'react-native'
import {FlatList, Pressable, useWindowDimensions, 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'
@@ -20,8 +20,7 @@ import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
const CONTAINER_ASPECT_RATIO = 4 / 3
const PEEK_WIDTH = 40
const ITEM_GAP = 6
const ITEM_GAP = 8 // tokens.space.sm
interface GalleryProps {
images: AppBskyEmbedImages.ViewImage[]
@@ -45,8 +44,9 @@ export function Gallery({
const ax = useAnalytics()
const {screenReaderEnabled} = useA11y()
const largeAltBadge = useLargeAltBadgeEnabled()
const [currentPage, setCurrentPage] = useState(0)
const currentPageRef = useRef(0)
const {width: windowWidth} = useWindowDimensions()
const [leftOffset, setLeftOffset] = useState(0)
const [containerWidth, setContainerWidth] = useState(0)
const containerRefs = useRef<AnimatedRef<any>[]>([]).current
@@ -61,11 +61,34 @@ export function Gallery({
containerRefs[i] = refs[i]
}
const hideBadges =
const isWithinQuote =
viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
const hideBadges = isWithinQuote
const itemWidth = containerWidth > 0 ? containerWidth - PEEK_WIDTH : 0
const snapInterval = itemWidth + ITEM_GAP
const containerHeight =
containerWidth > 0 ? containerWidth / CONTAINER_ASPECT_RATIO : 0
// Bleed: full-width carousel that extends to screen edges
// In quotes: small bleed to the quote card border (p_md = 12px)
const QUOTE_PADDING = 12
const bleed = !isWithinQuote
const insetLeft = bleed
? leftOffset || windowWidth - containerWidth
: QUOTE_PADDING
const insetRight = bleed
? windowWidth - insetLeft - containerWidth
: QUOTE_PADDING
const getItemWidth = (image: AppBskyEmbedImages.ViewImage) => {
const ar = image.aspectRatio
if (ar && ar.width > 0 && ar.height > 0) {
const ratio = ar.width / ar.height
// Width derived from image's own aspect ratio at the fixed container height
const w = containerHeight * ratio
// Clamp: at least 40% of content width, at most the full content width
return Math.max(containerWidth * 0.4, Math.min(w, containerWidth))
}
return containerWidth
}
if (screenReaderEnabled) {
return (
@@ -125,8 +148,22 @@ export function Gallery({
return (
<View
style={[a.rounded_md, a.overflow_hidden]}
onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}>
style={
containerWidth > 0
? {height: containerHeight, overflow: 'visible'}
: {aspectRatio: CONTAINER_ASPECT_RATIO}
}
onLayout={e => {
const w = e.nativeEvent.layout.width
if (w > 0) {
setContainerWidth(w)
}
e.target.measureInWindow((x: number) => {
if (x > 0) {
setLeftOffset(x)
}
})
}}>
{containerWidth > 0 && (
<DrawerGestureBlocker>
<FlatList
@@ -134,23 +171,38 @@ export function Gallery({
horizontal
pagingEnabled={false}
showsHorizontalScrollIndicator={false}
snapToOffsets={images.map((_, i) => i * snapInterval)}
decelerationRate="normal"
disableIntervalMomentum
contentContainerStyle={{gap: ITEM_GAP}}
style={{
width: bleed ? windowWidth : containerWidth + QUOTE_PADDING * 2,
height: containerHeight,
marginLeft: -insetLeft,
}}
contentContainerStyle={{
gap: ITEM_GAP,
paddingLeft: insetLeft,
paddingRight: insetRight,
}}
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)
// Determine which item is most visible based on scroll position
let accumulated = insetLeft // account for left content padding
let page = 0
for (let i = 0; i < images.length; i++) {
const w = getItemWidth(images[i]) + ITEM_GAP
if (offsetX < accumulated + w / 2) {
page = i
break
}
accumulated += w
page = i
}
if (page !== currentPageRef.current) {
ax.metric('post:gallery:swipe', {
fromIndex: currentPageRef.current,
toIndex: page,
totalImages: images.length,
})
currentPageRef.current = page
}
}}
scrollEventThrottle={16}
@@ -161,8 +213,8 @@ export function Gallery({
collapsable={false}
style={[
{
width: itemWidth,
aspectRatio: CONTAINER_ASPECT_RATIO,
width: getItemWidth(image),
height: containerHeight,
},
]}>
<Pressable
@@ -250,30 +302,6 @@ export function Gallery({
/>
</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>
)
}
src/view/com/composer/photos/Gallery.tsx
+65 -84
View File
@@ -1,14 +1,13 @@
import {memo, useMemo, useState} from 'react'
import {memo, useState} from 'react'
import {
findNodeHandle,
type ImageStyle,
Keyboard,
type LayoutChangeEvent,
Platform,
ScrollView,
StyleSheet,
TouchableOpacity,
View,
type ViewStyle,
} from 'react-native'
import {Image} from 'expo-image'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -16,7 +15,6 @@ import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {type Dimensions} from '#/lib/media/types'
import {colors} from '#/lib/styles'
import {type ComposerImage, cropImage} from '#/state/gallery'
@@ -32,6 +30,7 @@ import {EditImageDialog} from './EditImageDialog'
import {ImageAltTextDialog} from './ImageAltTextDialog'
const IMAGE_GAP = 8
const CONTAINER_HEIGHT = 200
interface GalleryProps {
images: ComposerImage[]
@@ -63,53 +62,33 @@ interface GalleryInnerProps extends GalleryProps {
containerInfo: Dimensions
}
const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
const {isMobile} = useWebMediaQueries()
const {altTextControlStyle, imageControlsStyle, imageStyle} = useMemo(() => {
const side =
images.length === 1
? 250
: (containerInfo.width - IMAGE_GAP * (images.length - 1)) /
images.length
const isOverflow = isMobile && images.length > 2
return {
altTextControlStyle: isOverflow
? {left: 4, bottom: 4}
: !isMobile && images.length < 3
? {left: 8, top: 8}
: {left: 4, top: 4},
imageControlsStyle: {
display: 'flex' as const,
flexDirection: 'row' as const,
position: 'absolute' as const,
...(isOverflow
? {top: 4, right: 4, gap: 4}
: !isMobile && images.length < 3
? {top: 8, right: 8, gap: 8}
: {top: 4, right: 4, gap: 4}),
zIndex: 1,
},
imageStyle: {
height: side,
width: side,
},
}
}, [images.length, containerInfo, isMobile])
const getItemWidth = (image: ComposerImage, height: number) => {
const source = image.transformed ?? image.source
if (source.width > 0 && source.height > 0) {
const ratio = source.width / source.height
const w = height * ratio
// Clamp: at least 60% of height, at most 1.5x height
return Math.max(height * 0.6, Math.min(w, height * 1.5))
}
return height
}
const GalleryInner = ({images, dispatch}: GalleryInnerProps) => {
return images.length !== 0 ? (
<>
<View testID="selectedPhotosView" style={styles.gallery}>
<ScrollView
testID="selectedPhotosView"
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{gap: IMAGE_GAP, paddingTop: 16}}
style={{height: CONTAINER_HEIGHT + 16}}>
{images.map(image => {
return (
<GalleryItem
key={image.source.id}
image={image}
altTextControlStyle={altTextControlStyle}
imageControlsStyle={imageControlsStyle}
imageStyle={imageStyle}
itemWidth={getItemWidth(image, CONTAINER_HEIGHT)}
itemHeight={CONTAINER_HEIGHT}
onChange={next => {
dispatch({type: 'embed_update_image', image: next})
}}
@@ -119,7 +98,7 @@ const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
/>
)
})}
</View>
</ScrollView>
<Admonition type="tip" style={[a.mt_sm]}>
<Trans>
Alt text describes images for blind and low-vision users, and helps
@@ -132,18 +111,16 @@ const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
type GalleryItemProps = {
image: ComposerImage
altTextControlStyle?: ViewStyle
imageControlsStyle?: ViewStyle
imageStyle?: ImageStyle
itemWidth: number
itemHeight: number
onChange: (next: ComposerImage) => void
onRemove: () => void
}
const GalleryItem = ({
image,
altTextControlStyle,
imageControlsStyle,
imageStyle,
itemWidth,
itemHeight,
onChange,
onRemove,
}: GalleryItemProps): React.ReactNode => {
@@ -156,7 +133,6 @@ const GalleryItem = ({
const [altBtnViewTag, setAltBtnViewTag] = useState<number>()
const altBtnRef = (node: View | null) => {
// for iOS 26 fluid transition
if (IS_IOS && node) {
const tag = findNodeHandle(node)
if (tag != null) setAltBtnViewTag(tag)
@@ -185,33 +161,8 @@ const GalleryItem = ({
return (
<View
ref={altBtnRef}
style={imageStyle as ViewStyle}
// Fixes ALT and icons appearing with half opacity when the post is inactive
style={{width: itemWidth, height: itemHeight}}
renderToHardwareTextureAndroid>
<TouchableOpacity
testID="altTextButton"
accessibilityRole="button"
accessibilityLabel={_(msg`Add alt text`)}
accessibilityHint=""
onPress={onAltTextEdit}
style={[styles.altTextControl, altTextControlStyle]}>
{image.alt.length !== 0 ? (
<FontAwesomeIcon
icon="check"
size={10}
style={{color: t.palette.white}}
/>
) : (
<FontAwesomeIcon
icon="plus"
size={10}
style={{color: t.palette.white}}
/>
)}
<Text style={styles.altTextControlLabel} accessible={false}>
<Trans>ALT</Trans>
</Text>
</TouchableOpacity>
<View style={imageControlsStyle}>
<TouchableOpacity
testID="editPhotoButton"
@@ -236,6 +187,32 @@ const GalleryItem = ({
/>
</TouchableOpacity>
</View>
<TouchableOpacity
testID="altTextButton"
accessibilityRole="button"
accessibilityLabel={_(msg`Add alt text`)}
accessibilityHint=""
onPress={onAltTextEdit}
style={[styles.altTextControl, {left: 4, bottom: 4}]}>
{image.alt.length !== 0 ? (
<FontAwesomeIcon
icon="check"
size={10}
style={{color: t.palette.white}}
/>
) : (
<FontAwesomeIcon
icon="plus"
size={10}
style={{color: t.palette.white}}
/>
)}
<Text style={styles.altTextControlLabel} accessible={false}>
<Trans>ALT</Trans>
</Text>
</TouchableOpacity>
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel={_(msg`Add alt text`)}
@@ -246,7 +223,7 @@ const GalleryItem = ({
<Image
testID="selectedPhotoImage"
style={[styles.image, imageStyle]}
style={[styles.image, {width: itemWidth, height: itemHeight}]}
source={{
uri: (image.transformed ?? image.source).path,
}}
@@ -275,13 +252,17 @@ const GalleryItem = ({
)
}
const imageControlsStyle = {
display: 'flex' as const,
flexDirection: 'row' as const,
position: 'absolute' as const,
top: 4,
right: 4,
gap: 4,
zIndex: 1,
}
const styles = StyleSheet.create({
gallery: {
flex: 1,
flexDirection: 'row',
gap: IMAGE_GAP,
marginTop: 16,
},
image: {
borderRadius: tokens.borderRadius.md,
},