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

Refresh lightbox designs (#10330)

Browse Source 
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Spence Pope
2026-05-05 12:25:29 -04:00
committed by GitHub
parent 48ea9e0b96
commit a7fabd9e0d
28 changed files with 653 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/lightbox/ImageViewing/@types/index.ts
-49
View File
@@ -1,49 +0,0 @@
/**
* Copyright (c) JOB TODAY S.A. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import {type TransformsStyle} from 'react-native'
import {
type AnimatedRef,
type MeasuredDimensions,
} from 'react-native-reanimated'
export type Dimensions = {
width: number
height: number
}
export type Position = {
x: number
y: number
}
export type ImageSource = {
uri: string
dimensions: Dimensions | null
thumbUri: string
thumbDimensions: Dimensions | null
thumbRect: MeasuredDimensions | null
thumbRef?: AnimatedRef<any> | null
thumbBorderRadius?: number
alt?: string
type: 'image' | 'circle-avi' | 'rect-avi'
}
export type Transform = Exclude<
TransformsStyle['transform'],
string | undefined
>
export type LightboxTransforms = {
scaleAndMoveTransform: Transform
cropFrameTransform: Transform
cropContentTransform: Transform
borderRadius: number
isResting: boolean
isHidden: boolean
}
src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx
-61
View File
@@ -1,61 +0,0 @@
/**
* Copyright (c) JOB TODAY S.A. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import {StyleSheet, TouchableOpacity, type ViewStyle} from 'react-native'
import {SafeAreaView} from 'react-native-safe-area-context'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {createHitslop} from '#/lib/constants'
type Props = {
onRequestClose: () => void
}
const HIT_SLOP = createHitslop(16)
const ImageDefaultHeader = ({onRequestClose}: Props) => {
const {_} = useLingui()
return (
<SafeAreaView style={styles.root}>
<TouchableOpacity
style={[styles.closeButton, styles.blurredBackground]}
onPress={onRequestClose}
hitSlop={HIT_SLOP}
accessibilityRole="button"
accessibilityLabel={_(msg`Close image`)}
accessibilityHint={_(msg`Closes viewer for header image`)}
onAccessibilityEscape={onRequestClose}>
<FontAwesomeIcon icon="close" color={'#fff'} size={22} />
</TouchableOpacity>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
root: {
alignItems: 'flex-end',
pointerEvents: 'box-none',
},
closeButton: {
marginRight: 10,
marginTop: 10,
width: 44,
height: 44,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 22,
backgroundColor: '#00000077',
},
blurredBackground: {
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
} as ViewStyle,
})
export default ImageDefaultHeader
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
-468
View File
@@ -1,468 +0,0 @@
import {memo, useState} from 'react'
import {ActivityIndicator, StyleSheet} from 'react-native'
import {
Gesture,
GestureDetector,
type PanGesture,
} from 'react-native-gesture-handler'
import Animated, {
runOnJS,
type SharedValue,
useAnimatedReaction,
useAnimatedRef,
useAnimatedStyle,
useSharedValue,
withSpring,
} from 'react-native-reanimated'
import {Image} from 'expo-image'
import {
type Dimensions as ImageDimensions,
type ImageSource,
type LightboxTransforms,
} from '../../@types'
import {
applyRounding,
createTransform,
prependPan,
prependPinch,
prependTransform,
readTransform,
type TransformMatrix,
} from '../../transforms'
const MIN_SCREEN_ZOOM = 2
const MAX_ORIGINAL_IMAGE_ZOOM = 2
const initialTransform = createTransform()
type Props = {
imageSrc: ImageSource
onRequestClose: () => void
onTap: () => void
onZoom: (isZoomed: boolean) => void
onLoad: (dims: ImageDimensions) => void
isScrollViewBeingDragged: boolean
showControls: boolean
measureSafeArea: () => {
x: number
y: number
width: number
height: number
}
imageAspect: number | undefined
imageDimensions: ImageDimensions | undefined
dismissSwipePan: PanGesture
transforms: Readonly<SharedValue<LightboxTransforms>>
}
const ImageItem = ({
imageSrc,
onTap,
onZoom,
onLoad,
isScrollViewBeingDragged,
measureSafeArea,
imageAspect,
imageDimensions,
dismissSwipePan,
transforms,
}: Props) => {
const [isScaled, setIsScaled] = useState(false)
const committedTransform = useSharedValue(initialTransform)
const panTranslation = useSharedValue({x: 0, y: 0})
const pinchOrigin = useSharedValue({x: 0, y: 0})
const pinchScale = useSharedValue(1)
const pinchTranslation = useSharedValue({x: 0, y: 0})
const containerRef = useAnimatedRef()
// Keep track of when we're entering or leaving scaled rendering.
// Note: DO NOT move any logic reading animated values outside this function.
useAnimatedReaction(
() => {
if (pinchScale.get() !== 1) {
// We're currently pinching.
return true
}
const [, , committedScale] = readTransform(committedTransform.get())
if (committedScale !== 1) {
// We started from a pinched in state.
return true
}
// We're at rest.
return false
},
(nextIsScaled, prevIsScaled) => {
if (nextIsScaled !== prevIsScaled) {
runOnJS(handleZoom)(nextIsScaled)
}
},
)
function handleZoom(nextIsScaled: boolean) {
setIsScaled(nextIsScaled)
onZoom(nextIsScaled)
}
// On Android, stock apps prevent going "out of bounds" on pan or pinch. You should "bump" into edges.
// If the user tried to pan too hard, this function will provide the negative panning to stay in bounds.
function getExtraTranslationToStayInBounds(
candidateTransform: TransformMatrix,
screenSize: {width: number; height: number},
) {
'worklet'
if (!imageAspect) {
return [0, 0]
}
const [nextTranslateX, nextTranslateY, nextScale] =
readTransform(candidateTransform)
const scaledDimensions = getScaledDimensions(
imageAspect,
nextScale,
screenSize,
)
const clampedTranslateX = clampTranslation(
nextTranslateX,
scaledDimensions.width,
screenSize.width,
)
const clampedTranslateY = clampTranslation(
nextTranslateY,
scaledDimensions.height,
screenSize.height,
)
const dx = clampedTranslateX - nextTranslateX
const dy = clampedTranslateY - nextTranslateY
return [dx, dy]
}
const pinch = Gesture.Pinch()
.onStart(e => {
'worklet'
const screenSize = measureSafeArea()
pinchOrigin.set({
x: e.focalX - screenSize.width / 2,
y: e.focalY - screenSize.height / 2,
})
})
.onChange(e => {
'worklet'
const screenSize = measureSafeArea()
if (!imageDimensions) {
return
}
// Don't let the picture zoom in so close that it gets blurry.
// Also, like in stock Android apps, don't let the user zoom out further than 1:1.
const [, , committedScale] = readTransform(committedTransform.get())
const maxCommittedScale = Math.max(
MIN_SCREEN_ZOOM,
(imageDimensions.width / screenSize.width) * MAX_ORIGINAL_IMAGE_ZOOM,
)
const minPinchScale = 1 / committedScale
const maxPinchScale = maxCommittedScale / committedScale
const nextPinchScale = Math.min(
Math.max(minPinchScale, e.scale),
maxPinchScale,
)
pinchScale.set(nextPinchScale)
// Zooming out close to the corner could push us out of bounds, which we don't want on Android.
// Calculate where we'll end up so we know how much to translate back to stay in bounds.
const t = createTransform()
prependPan(t, panTranslation.get())
prependPinch(t, nextPinchScale, pinchOrigin.get(), pinchTranslation.get())
prependTransform(t, committedTransform.get())
const [dx, dy] = getExtraTranslationToStayInBounds(t, screenSize)
if (dx !== 0 || dy !== 0) {
const pt = pinchTranslation.get()
pinchTranslation.set({
x: pt.x + dx,
y: pt.y + dy,
})
}
})
.onEnd(() => {
'worklet'
// Commit just the pinch.
let t = createTransform()
prependPinch(
t,
pinchScale.get(),
pinchOrigin.get(),
pinchTranslation.get(),
)
prependTransform(t, committedTransform.get())
applyRounding(t)
committedTransform.set(t)
// Reset just the pinch.
pinchScale.set(1)
pinchOrigin.set({x: 0, y: 0})
pinchTranslation.set({x: 0, y: 0})
})
const pan = Gesture.Pan()
.averageTouches(true)
// Unlike .enabled(isScaled), this ensures that an initial pinch can turn into a pan midway:
.minPointers(isScaled ? 1 : 2)
.onChange(e => {
'worklet'
const screenSize = measureSafeArea()
if (!imageDimensions) {
return
}
const nextPanTranslation = {x: e.translationX, y: e.translationY}
let t = createTransform()
prependPan(t, nextPanTranslation)
prependPinch(
t,
pinchScale.get(),
pinchOrigin.get(),
pinchTranslation.get(),
)
prependTransform(t, committedTransform.get())
// Prevent panning from going out of bounds.
const [dx, dy] = getExtraTranslationToStayInBounds(t, screenSize)
nextPanTranslation.x += dx
nextPanTranslation.y += dy
panTranslation.set(nextPanTranslation)
})
.onEnd(() => {
'worklet'
// Commit just the pan.
let t = createTransform()
prependPan(t, panTranslation.get())
prependTransform(t, committedTransform.get())
applyRounding(t)
committedTransform.set(t)
// Reset just the pan.
panTranslation.set({x: 0, y: 0})
})
const singleTap = Gesture.Tap().onEnd(() => {
'worklet'
runOnJS(onTap)()
})
const doubleTap = Gesture.Tap()
.numberOfTaps(2)
.onEnd(e => {
'worklet'
const screenSize = measureSafeArea()
if (!imageDimensions || !imageAspect) {
return
}
const [, , committedScale] = readTransform(committedTransform.get())
if (committedScale !== 1) {
// Go back to 1:1 using the identity vector.
let t = createTransform()
committedTransform.set(withClampedSpring(t))
return
}
// Try to zoom in so that we get rid of the black bars (whatever the orientation was).
const screenAspect = screenSize.width / screenSize.height
const candidateScale = Math.max(
imageAspect / screenAspect,
screenAspect / imageAspect,
MIN_SCREEN_ZOOM,
)
// But don't zoom in so close that the picture gets blurry.
const maxScale = Math.max(
MIN_SCREEN_ZOOM,
(imageDimensions.width / screenSize.width) * MAX_ORIGINAL_IMAGE_ZOOM,
)
const scale = Math.min(candidateScale, maxScale)
// Calculate where we would be if the user pinched into the double tapped point.
// We won't use this transform directly because it may go out of bounds.
const candidateTransform = createTransform()
const origin = {
x: e.absoluteX - screenSize.width / 2,
y: e.absoluteY - screenSize.height / 2,
}
prependPinch(candidateTransform, scale, origin, {x: 0, y: 0})
// Now we know how much we went out of bounds, so we can shoot correctly.
const [dx, dy] = getExtraTranslationToStayInBounds(
candidateTransform,
screenSize,
)
const finalTransform = createTransform()
prependPinch(finalTransform, scale, origin, {x: dx, y: dy})
committedTransform.set(withClampedSpring(finalTransform))
})
const composedGesture = isScrollViewBeingDragged
? // If the parent is not at rest, provide a no-op gesture.
Gesture.Manual()
: Gesture.Exclusive(
dismissSwipePan,
Gesture.Simultaneous(pinch, pan),
doubleTap,
singleTap,
)
const containerStyle = useAnimatedStyle(() => {
const {scaleAndMoveTransform, isHidden} = transforms.get()
// Apply the active adjustments on top of the committed transform before the gestures.
// This is matrix multiplication, so operations are applied in the reverse order.
let t = createTransform()
prependPan(t, panTranslation.get())
prependPinch(t, pinchScale.get(), pinchOrigin.get(), pinchTranslation.get())
prependTransform(t, committedTransform.get())
const [translateX, translateY, scale] = readTransform(t)
const manipulationTransform = [
{translateX},
{translateY: translateY},
{scale},
]
const screenSize = measureSafeArea()
return {
opacity: isHidden ? 0 : 1,
transform: scaleAndMoveTransform.concat(manipulationTransform),
width: screenSize.width,
maxHeight: screenSize.height,
alignSelf: 'center',
aspectRatio: imageAspect ?? 1 /* force onLoad */,
}
})
const imageCropStyle = useAnimatedStyle(() => {
const {cropFrameTransform, borderRadius: br} = transforms.get()
return {
flex: 1,
overflow: 'hidden',
transform: cropFrameTransform,
borderRadius: br,
}
})
const imageStyle = useAnimatedStyle(() => {
const {cropContentTransform} = transforms.get()
return {
flex: 1,
transform: cropContentTransform,
opacity: imageAspect === undefined ? 0 : 1,
}
})
const [showLoader, setShowLoader] = useState(false)
const [hasLoaded, setHasLoaded] = useState(false)
useAnimatedReaction(
() => {
return transforms.get().isResting && !hasLoaded
},
(show, prevShow) => {
if (!prevShow && show) {
runOnJS(setShowLoader)(true)
} else if (prevShow && !show) {
runOnJS(setShowLoader)(false)
}
},
)
const type = imageSrc.type
const borderRadius =
type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
return (
<GestureDetector gesture={composedGesture}>
<Animated.View
ref={containerRef}
style={[styles.container]}
renderToHardwareTextureAndroid>
<Animated.View style={containerStyle}>
{showLoader && (
<ActivityIndicator
size="small"
color="#FFF"
style={styles.loading}
/>
)}
<Animated.View style={imageCropStyle}>
<Animated.View style={imageStyle}>
<Image
contentFit="contain"
source={{uri: imageSrc.uri}}
placeholderContentFit="contain"
placeholder={{uri: imageSrc.thumbUri}}
accessibilityLabel={imageSrc.alt}
onLoad={
hasLoaded
? undefined
: e => {
setHasLoaded(true)
onLoad({width: e.source.width, height: e.source.height})
}
}
style={{flex: 1, borderRadius}}
accessibilityHint=""
accessibilityIgnoresInvertColors
cachePolicy="memory"
/>
</Animated.View>
</Animated.View>
</Animated.View>
</Animated.View>
</GestureDetector>
)
}
const styles = StyleSheet.create({
container: {
height: '100%',
overflow: 'hidden',
justifyContent: 'center',
},
loading: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
justifyContent: 'center',
},
})
function getScaledDimensions(
imageAspect: number,
scale: number,
screenSize: {width: number; height: number},
): ImageDimensions {
'worklet'
const screenAspect = screenSize.width / screenSize.height
const isLandscape = imageAspect > screenAspect
if (isLandscape) {
return {
width: scale * screenSize.width,
height: (scale * screenSize.width) / imageAspect,
}
} else {
return {
width: scale * screenSize.height * imageAspect,
height: scale * screenSize.height,
}
}
}
function clampTranslation(
value: number,
scaledSize: number,
screenSize: number,
): number {
'worklet'
// Figure out how much the user should be allowed to pan, and constrain the translation.
const panDistance = Math.max(0, (scaledSize - screenSize) / 2)
const clampedValue = Math.min(Math.max(-panDistance, value), panDistance)
return clampedValue
}
function withClampedSpring(value: any) {
'worklet'
return withSpring(value, {overshootClamping: true})
}
export default memo(ImageItem)
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
-359
View File
@@ -1,359 +0,0 @@
/**
* Copyright (c) JOB TODAY S.A. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import {memo, useState} from 'react'
import {ActivityIndicator, StyleSheet} from 'react-native'
import {
Gesture,
GestureDetector,
type PanGesture,
} from 'react-native-gesture-handler'
import Animated, {
runOnJS,
type SharedValue,
useAnimatedProps,
useAnimatedReaction,
useAnimatedRef,
useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
import {useSafeAreaFrame} from 'react-native-safe-area-context'
import {Image} from 'expo-image'
import {
type Dimensions as ImageDimensions,
type ImageSource,
type LightboxTransforms,
} from '../../@types'
const MAX_ORIGINAL_IMAGE_ZOOM = 2
const MIN_SCREEN_ZOOM = 2
type Props = {
imageSrc: ImageSource
onRequestClose: () => void
onTap: () => void
onZoom: (scaled: boolean) => void
onLoad: (dims: ImageDimensions) => void
isScrollViewBeingDragged: boolean
showControls: boolean
measureSafeArea: () => {
x: number
y: number
width: number
height: number
}
imageAspect: number | undefined
imageDimensions: ImageDimensions | undefined
dismissSwipePan: PanGesture
transforms: Readonly<SharedValue<LightboxTransforms>>
}
const ImageItem = ({
imageSrc,
onTap,
onZoom,
onLoad,
showControls,
measureSafeArea,
imageAspect,
imageDimensions,
dismissSwipePan,
transforms,
}: Props) => {
const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
const [scaled, setScaled] = useState(false)
const isDragging = useSharedValue(false)
const screenSizeDelayedForJSThreadOnly = useSafeAreaFrame()
const maxZoomScale = Math.max(
MIN_SCREEN_ZOOM,
imageDimensions
? (imageDimensions.width / screenSizeDelayedForJSThreadOnly.width) *
MAX_ORIGINAL_IMAGE_ZOOM
: 1,
)
const scrollHandler = useAnimatedScrollHandler({
onScroll(e) {
'worklet'
const nextIsScaled = e.zoomScale > 1
if (scaled !== nextIsScaled) {
runOnJS(handleZoom)(nextIsScaled)
}
},
onBeginDrag() {
'worklet'
isDragging.value = true
},
onEndDrag() {
'worklet'
isDragging.value = false
},
})
function handleZoom(nextIsScaled: boolean) {
onZoom(nextIsScaled)
setScaled(nextIsScaled)
}
function zoomTo(nextZoomRect: {
x: number
y: number
width: number
height: number
}) {
const scrollResponderRef = scrollViewRef?.current?.getScrollResponder()
// @ts-ignore
scrollResponderRef?.scrollResponderZoomTo({
...nextZoomRect, // This rect is in screen coordinates
animated: true,
})
}
const singleTap = Gesture.Tap().onEnd(() => {
'worklet'
runOnJS(onTap)()
})
const doubleTap = Gesture.Tap()
.numberOfTaps(2)
.onEnd(e => {
'worklet'
const screenSize = measureSafeArea()
const {absoluteX, absoluteY} = e
let nextZoomRect = {
x: 0,
y: 0,
width: screenSize.width,
height: screenSize.height,
}
const willZoom = !scaled
if (willZoom) {
nextZoomRect = getZoomRectAfterDoubleTap(
imageAspect,
absoluteX,
absoluteY,
screenSize,
)
}
runOnJS(zoomTo)(nextZoomRect)
})
const composedGesture = Gesture.Exclusive(
dismissSwipePan,
doubleTap,
singleTap,
)
const containerStyle = useAnimatedStyle(() => {
const {scaleAndMoveTransform, isHidden} = transforms.get()
return {
flex: 1,
transform: scaleAndMoveTransform,
opacity: isHidden ? 0 : 1,
}
})
const imageCropStyle = useAnimatedStyle(() => {
const screenSize = measureSafeArea()
const {cropFrameTransform, borderRadius: br} = transforms.get()
return {
overflow: 'hidden',
transform: cropFrameTransform,
borderRadius: br,
width: screenSize.width,
maxHeight: screenSize.height,
alignSelf: 'center',
aspectRatio: imageAspect ?? 1 /* force onLoad */,
opacity: imageAspect === undefined ? 0 : 1,
}
})
const imageStyle = useAnimatedStyle(() => {
const {cropContentTransform} = transforms.get()
return {
transform: cropContentTransform,
width: '100%',
aspectRatio: imageAspect ?? 1 /* force onLoad */,
opacity: imageAspect === undefined ? 0 : 1,
}
})
const [showLoader, setShowLoader] = useState(false)
const [hasLoaded, setHasLoaded] = useState(false)
useAnimatedReaction(
() => {
return transforms.get().isResting && !hasLoaded
},
(show, prevShow) => {
if (!prevShow && show) {
runOnJS(setShowLoader)(true)
} else if (prevShow && !show) {
runOnJS(setShowLoader)(false)
}
},
)
const type = imageSrc.type
const borderRadius =
type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
const scrollViewProps = useAnimatedProps(() => ({
// Don't allow bounce at 1:1 rest so it can be swiped away.
bounces: scaled || isDragging.value,
}))
return (
<GestureDetector gesture={composedGesture}>
<Animated.ScrollView
// @ts-ignore Something's up with the types here
ref={scrollViewRef}
pinchGestureEnabled
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
maximumZoomScale={maxZoomScale}
onScroll={scrollHandler}
style={containerStyle}
animatedProps={scrollViewProps}
centerContent>
{showLoader && (
<ActivityIndicator size="small" color="#FFF" style={styles.loading} />
)}
<Animated.View style={imageCropStyle}>
<Animated.View style={imageStyle}>
<Image
contentFit="contain"
source={{uri: imageSrc.uri}}
placeholderContentFit="contain"
placeholder={{uri: imageSrc.thumbUri}}
style={{flex: 1, borderRadius}}
accessibilityLabel={imageSrc.alt}
accessibilityHint=""
enableLiveTextInteraction={showControls && !scaled}
accessibilityIgnoresInvertColors
onLoad={
hasLoaded
? undefined
: e => {
setHasLoaded(true)
onLoad({width: e.source.width, height: e.source.height})
}
}
cachePolicy="memory"
/>
</Animated.View>
</Animated.View>
</Animated.ScrollView>
</GestureDetector>
)
}
const styles = StyleSheet.create({
loading: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
image: {
flex: 1,
},
})
const getZoomRectAfterDoubleTap = (
imageAspect: number | undefined,
touchX: number,
touchY: number,
screenSize: {width: number; height: number},
): {
x: number
y: number
width: number
height: number
} => {
'worklet'
if (!imageAspect) {
return {
x: 0,
y: 0,
width: screenSize.width,
height: screenSize.height,
}
}
// First, let's figure out how much we want to zoom in.
// We want to try to zoom in at least close enough to get rid of black bars.
const screenAspect = screenSize.width / screenSize.height
const zoom = Math.max(
imageAspect / screenAspect,
screenAspect / imageAspect,
MIN_SCREEN_ZOOM,
)
// Unlike in the Android version, we don't constrain the *max* zoom level here.
// Instead, this is done in the ScrollView props so that it constraints pinch too.
// Next, we'll be calculating the rectangle to "zoom into" in screen coordinates.
// We already know the zoom level, so this gives us the rectangle size.
let rectWidth = screenSize.width / zoom
let rectHeight = screenSize.height / zoom
// Before we settle on the zoomed rect, figure out the safe area it has to be inside.
// We don't want to introduce new black bars or make existing black bars unbalanced.
let minX = 0
let minY = 0
let maxX = screenSize.width - rectWidth
let maxY = screenSize.height - rectHeight
if (imageAspect >= screenAspect) {
// The image has horizontal black bars. Exclude them from the safe area.
const renderedHeight = screenSize.width / imageAspect
const horizontalBarHeight = (screenSize.height - renderedHeight) / 2
minY += horizontalBarHeight
maxY -= horizontalBarHeight
} else {
// The image has vertical black bars. Exclude them from the safe area.
const renderedWidth = screenSize.height * imageAspect
const verticalBarWidth = (screenSize.width - renderedWidth) / 2
minX += verticalBarWidth
maxX -= verticalBarWidth
}
// Finally, we can position the rect according to its size and the safe area.
let rectX
if (maxX >= minX) {
// Content fills the screen horizontally so we have horizontal wiggle room.
// Try to keep the tapped point under the finger after zoom.
rectX = touchX - touchX / zoom
rectX = Math.min(rectX, maxX)
rectX = Math.max(rectX, minX)
} else {
// Keep the rect centered on the screen so that black bars are balanced.
rectX = screenSize.width / 2 - rectWidth / 2
}
let rectY
if (maxY >= minY) {
// Content fills the screen vertically so we have vertical wiggle room.
// Try to keep the tapped point under the finger after zoom.
rectY = touchY - touchY / zoom
rectY = Math.min(rectY, maxY)
rectY = Math.max(rectY, minY)
} else {
// Keep the rect centered on the screen so that black bars are balanced.
rectY = screenSize.height / 2 - rectHeight / 2
}
return {
x: rectX,
y: rectY,
height: rectHeight,
width: rectWidth,
}
}
export default memo(ImageItem)
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
-39
View File
@@ -1,39 +0,0 @@
// default implementation fallback for web
import {memo} from 'react'
import {View} from 'react-native'
import {type PanGesture} from 'react-native-gesture-handler'
import {type SharedValue} from 'react-native-reanimated'
import {type Dimensions} from '#/lib/media/types'
import {
type Dimensions as ImageDimensions,
type ImageSource,
type LightboxTransforms,
} from '../../@types'
type Props = {
imageSrc: ImageSource
onRequestClose: () => void
onTap: () => void
onZoom: (scaled: boolean) => void
onLoad: (dims: Dimensions) => void
isScrollViewBeingDragged: boolean
showControls: boolean
measureSafeArea: () => {
x: number
y: number
width: number
height: number
}
imageAspect: number | undefined
imageDimensions: ImageDimensions | undefined
dismissSwipePan: PanGesture
transforms: Readonly<SharedValue<LightboxTransforms>>
}
const ImageItem = (_props: Props) => {
return <View />
}
export default memo(ImageItem)
src/view/com/lightbox/ImageViewing/index.tsx
-891
View File
@@ -1,891 +0,0 @@
/**
* Copyright (c) JOB TODAY S.A. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
// Original code copied and simplified from the link below as the codebase is currently not maintained:
// https://github.com/jobtoday/react-native-image-viewing
import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {
LayoutAnimation,
PixelRatio,
StyleSheet,
useWindowDimensions,
View,
} from 'react-native'
import {SystemBars} from 'react-native-edge-to-edge'
import {Gesture} from 'react-native-gesture-handler'
import PagerView from 'react-native-pager-view'
import Animated, {
type AnimatedRef,
cancelAnimation,
interpolate,
measure,
type MeasuredDimensions,
ReduceMotion,
runOnJS,
runOnUI,
type SharedValue,
useAnimatedReaction,
useAnimatedRef,
useAnimatedStyle,
useDerivedValue,
useSharedValue,
withDecay,
withSpring,
type WithSpringConfig,
} from 'react-native-reanimated'
import {SafeAreaView} from 'react-native-safe-area-context'
import * as ScreenOrientation from 'expo-screen-orientation'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Trans} from '@lingui/react/macro'
import {type Dimensions} from '#/lib/media/types'
import {colors, s} from '#/lib/styles'
import {type Lightbox} from '#/state/lightbox'
import {Button} from '#/view/com/util/forms/Button'
import {Text} from '#/view/com/util/text/Text'
import {ScrollView} from '#/view/com/util/Views'
import {useTheme} from '#/alf'
import {setSystemUITheme} from '#/alf/util/systemUI'
import {IS_IOS} from '#/env'
import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army'
import {
type ImageSource,
type LightboxTransforms,
type Transform,
} from './@types'
import ImageDefaultHeader from './components/ImageDefaultHeader'
import ImageItem from './components/ImageItem/ImageItem'
type Rect = {x: number; y: number; width: number; height: number}
const PORTRAIT_UP = ScreenOrientation.OrientationLock.PORTRAIT_UP
const PIXEL_RATIO = PixelRatio.get()
const SLOW_SPRING: WithSpringConfig = {
mass: IS_IOS ? 1.25 : 0.75,
damping: 300,
stiffness: 800,
restDisplacementThreshold: 0.001,
}
const FAST_SPRING: WithSpringConfig = {
mass: IS_IOS ? 1.25 : 0.75,
damping: 150,
stiffness: 900,
restDisplacementThreshold: 0.001,
}
function canAnimate(lightbox: Lightbox): boolean {
if (PlatformInfo.getIsReducedMotionEnabled()) {
return false
}
const img = lightbox.images[lightbox.index]
return !!img.thumbRect && !!(img.dimensions || img.thumbDimensions)
}
export default function ImageViewRoot({
lightbox: nextLightbox,
onRequestClose,
onPressSave,
onPressShare,
}: {
lightbox: Lightbox | null
onRequestClose: () => void
onPressSave: (uri: string) => void
onPressShare: (uri: string) => void
}) {
'use no memo'
const ref = useAnimatedRef<View>()
const [activeLightbox, setActiveLightbox] = useState(nextLightbox)
const [orientation, setOrientation] = useState<'portrait' | 'landscape'>(
'portrait',
)
const openProgress = useSharedValue(0)
const thumbRects = useSharedValue<Record<number, MeasuredDimensions | null>>(
{},
)
if (!activeLightbox && nextLightbox) {
setActiveLightbox(nextLightbox)
}
useEffect(() => {
if (!nextLightbox) {
return
}
const initial: Record<number, MeasuredDimensions | null> = {}
nextLightbox.images.forEach((img, i) => {
initial[i] = img.thumbRect ?? null
})
thumbRects.set(initial)
const isAnimated = canAnimate(nextLightbox)
// https://github.com/software-mansion/react-native-reanimated/issues/6677
rAF_FIXED(() => {
openProgress.set(() =>
isAnimated ? withClampedSpring(1, SLOW_SPRING) : 1,
)
})
return () => {
// https://github.com/software-mansion/react-native-reanimated/issues/6677
rAF_FIXED(() => {
openProgress.set(() =>
isAnimated ? withClampedSpring(0, SLOW_SPRING) : 0,
)
})
}
}, [nextLightbox, openProgress, thumbRects])
const onFullyClosed = useCallback(() => {
setActiveLightbox(null)
runOnUI(() => {
'worklet'
thumbRects.set({})
})()
}, [thumbRects])
useAnimatedReaction(
() => openProgress.get() === 0,
(isGone, wasGone) => {
if (isGone && !wasGone) {
runOnJS(onFullyClosed)()
}
},
)
// Delay the unlock until after we've finished the scale up animation.
// It's complicated to do the same for locking it back so we don't attempt that.
useAnimatedReaction(
() => openProgress.get() === 1,
(isOpen, wasOpen) => {
if (isOpen && !wasOpen) {
runOnJS(ScreenOrientation.unlockAsync)()
} else if (!isOpen && wasOpen) {
// default is PORTRAIT_UP - set via config plugin in app.config.js -sfn
runOnJS(ScreenOrientation.lockAsync)(PORTRAIT_UP)
}
},
)
const onFlyAway = useCallback(() => {
'worklet'
openProgress.set(0)
runOnJS(onRequestClose)()
}, [onRequestClose, openProgress])
return (
// Keep it always mounted to avoid flicker on the first frame.
<View
style={[styles.screen, !activeLightbox && styles.screenHidden]}
aria-modal
accessibilityViewIsModal
aria-hidden={!activeLightbox}>
<Animated.View
ref={ref}
style={{flex: 1}}
collapsable={false}
onLayout={e => {
const layout = e.nativeEvent.layout
setOrientation(
layout.height > layout.width ? 'portrait' : 'landscape',
)
}}>
{activeLightbox && (
<ImageView
key={activeLightbox.id + '-' + orientation}
lightbox={activeLightbox}
orientation={orientation}
onRequestClose={onRequestClose}
onPressSave={onPressSave}
onPressShare={onPressShare}
onFlyAway={onFlyAway}
safeAreaRef={ref}
openProgress={openProgress}
thumbRects={thumbRects}
/>
)}
</Animated.View>
</View>
)
}
function ImageView({
lightbox,
orientation,
onRequestClose,
onPressSave,
onPressShare,
onFlyAway,
safeAreaRef,
openProgress,
thumbRects,
}: {
lightbox: Lightbox
orientation: 'portrait' | 'landscape'
onRequestClose: () => void
onPressSave: (uri: string) => void
onPressShare: (uri: string) => void
onFlyAway: () => void
safeAreaRef: AnimatedRef<View>
openProgress: SharedValue<number>
thumbRects: SharedValue<Record<number, MeasuredDimensions | null>>
}) {
const {images, index: initialImageIndex} = lightbox
const isAnimated = useMemo(() => canAnimate(lightbox), [lightbox])
const [isScaled, setIsScaled] = useState(false)
const [isDragging, setIsDragging] = useState(false)
const [imageIndex, setImageIndex] = useState(initialImageIndex)
const [showControls, setShowControls] = useState(true)
const [isAltExpanded, setIsAltExpanded] = useState(false)
const dismissSwipeTranslateY = useSharedValue(0)
const isFlyingAway = useSharedValue(false)
const containerStyle = useAnimatedStyle(() => {
if (openProgress.get() < 1) {
return {
pointerEvents: 'none',
opacity: isAnimated ? 1 : 0,
}
}
if (isFlyingAway.get()) {
return {
pointerEvents: 'none',
opacity: 1,
}
}
return {pointerEvents: 'auto', opacity: 1}
})
const backdropStyle = useAnimatedStyle(() => {
const screenSize = measure(safeAreaRef)
let opacity = 1
const openProgressValue = openProgress.get()
if (openProgressValue < 1) {
opacity = Math.sqrt(openProgressValue)
} else if (screenSize && orientation === 'portrait') {
const dragProgress = Math.min(
Math.abs(dismissSwipeTranslateY.get()) / (screenSize.height / 2),
1,
)
opacity -= dragProgress
}
const factor = IS_IOS ? 100 : 50
return {
opacity: Math.round(opacity * factor) / factor,
}
})
const animatedHeaderStyle = useAnimatedStyle(() => {
const show = showControls && dismissSwipeTranslateY.get() === 0
return {
pointerEvents: show ? 'box-none' : 'none',
opacity: withClampedSpring(
show && openProgress.get() === 1 ? 1 : 0,
FAST_SPRING,
),
transform: [
{
translateY: withClampedSpring(show ? 0 : -30, FAST_SPRING),
},
],
}
})
const animatedFooterStyle = useAnimatedStyle(() => {
const show = showControls && dismissSwipeTranslateY.get() === 0
return {
flexGrow: 1,
pointerEvents: show ? 'box-none' : 'none',
opacity: withClampedSpring(
show && openProgress.get() === 1 ? 1 : 0,
FAST_SPRING,
),
transform: [
{
translateY: withClampedSpring(show ? 0 : 30, FAST_SPRING),
},
],
}
})
const handleRequestClose = useCallback(() => {
const activeRef = images[imageIndex]?.thumbRef
if (isAnimated && activeRef) {
runOnUI(() => {
'worklet'
const rect = measure(activeRef)
thumbRects.modify(rects => {
'worklet'
rects[imageIndex] = rect
return rects
})
runOnJS(onRequestClose)()
})()
} else {
onRequestClose()
}
}, [isAnimated, images, imageIndex, thumbRects, onRequestClose])
const onTap = useCallback(() => {
setShowControls(show => !show)
}, [])
const onZoom = useCallback((nextIsScaled: boolean) => {
setIsScaled(nextIsScaled)
if (nextIsScaled) {
setShowControls(false)
}
}, [])
useAnimatedReaction(
() => {
const screenSize = measure(safeAreaRef)
return (
!screenSize ||
Math.abs(dismissSwipeTranslateY.get()) > screenSize.height
)
},
(isOut, wasOut) => {
if (isOut && !wasOut) {
// Stop the animation from blocking the screen forever.
cancelAnimation(dismissSwipeTranslateY)
onFlyAway()
}
},
)
// style system ui on android
const t = useTheme()
useEffect(() => {
setSystemUITheme('lightbox', t)
return () => {
setSystemUITheme('theme', t)
}
}, [t])
return (
<Animated.View style={[styles.container, containerStyle]}>
<SystemBars
style={{statusBar: 'light', navigationBar: 'light'}}
hidden={{
statusBar: isScaled || !showControls,
navigationBar: false,
}}
/>
<Animated.View
style={[styles.backdrop, backdropStyle]}
renderToHardwareTextureAndroid
/>
<PagerView
scrollEnabled={!isScaled}
initialPage={initialImageIndex}
onPageSelected={e => {
setImageIndex(e.nativeEvent.position)
setIsScaled(false)
}}
onPageScrollStateChanged={e => {
setIsDragging(e.nativeEvent.pageScrollState !== 'idle')
}}
overdrag={true}
style={styles.pager}>
{images.map((imageSrc, i) => (
<View key={imageSrc.uri}>
<LightboxImage
onTap={onTap}
onZoom={onZoom}
imageSrc={imageSrc}
onRequestClose={handleRequestClose}
isScrollViewBeingDragged={isDragging}
showControls={showControls}
safeAreaRef={safeAreaRef}
isScaled={isScaled}
isFlyingAway={isFlyingAway}
isActive={i === imageIndex}
dismissSwipeTranslateY={dismissSwipeTranslateY}
openProgress={openProgress}
thumbRects={thumbRects}
imageIndex={i}
/>
</View>
))}
</PagerView>
<View style={styles.controls}>
<Animated.View
style={animatedHeaderStyle}
renderToHardwareTextureAndroid>
<ImageDefaultHeader onRequestClose={handleRequestClose} />
</Animated.View>
<Animated.View
style={animatedFooterStyle}
renderToHardwareTextureAndroid={!isAltExpanded}>
<LightboxFooter
images={images}
index={imageIndex}
isAltExpanded={isAltExpanded}
toggleAltExpanded={() => setIsAltExpanded(e => !e)}
onPressSave={onPressSave}
onPressShare={onPressShare}
/>
</Animated.View>
</View>
</Animated.View>
)
}
function LightboxImage({
imageSrc,
onTap,
onZoom,
onRequestClose,
isScrollViewBeingDragged,
isScaled,
isFlyingAway,
isActive,
showControls,
safeAreaRef,
openProgress,
dismissSwipeTranslateY,
thumbRects,
imageIndex,
}: {
imageSrc: ImageSource
onRequestClose: () => void
onTap: () => void
onZoom: (scaled: boolean) => void
isScrollViewBeingDragged: boolean
isScaled: boolean
isActive: boolean
isFlyingAway: SharedValue<boolean>
showControls: boolean
safeAreaRef: AnimatedRef<View>
openProgress: SharedValue<number>
dismissSwipeTranslateY: SharedValue<number>
thumbRects: SharedValue<Record<number, MeasuredDimensions | null>>
imageIndex: number
}) {
const [fetchedDims, setFetchedDims] = useState<Dimensions | null>(null)
const dims = fetchedDims ?? imageSrc.dimensions ?? imageSrc.thumbDimensions
let imageAspect: number | undefined
if (dims) {
imageAspect = dims.width / dims.height
if (Number.isNaN(imageAspect)) {
imageAspect = undefined
}
}
const {
width: widthDelayedForJSThreadOnly,
height: heightDelayedForJSThreadOnly,
} = useWindowDimensions()
const measureSafeArea = useCallback(() => {
'worklet'
let safeArea: Rect | null = measure(safeAreaRef)
if (!safeArea) {
if (_WORKLET) {
console.error('Expected to always be able to measure safe area.')
}
safeArea = {
x: 0,
y: 0,
width: widthDelayedForJSThreadOnly,
height: heightDelayedForJSThreadOnly,
}
}
return safeArea
}, [safeAreaRef, heightDelayedForJSThreadOnly, widthDelayedForJSThreadOnly])
const {thumbRect: thumbRectJS, thumbBorderRadius} = imageSrc
const transforms = useDerivedValue<LightboxTransforms>(() => {
'worklet'
const safeArea = measureSafeArea()
const openProgressValue = openProgress.get()
const dismissTranslateY =
isActive && openProgressValue === 1 ? dismissSwipeTranslateY.get() : 0
if (openProgressValue === 0 && isFlyingAway.get()) {
return {
isHidden: true,
isResting: false,
borderRadius: 0,
scaleAndMoveTransform: [],
cropFrameTransform: [],
cropContentTransform: [],
}
}
if (isActive && imageAspect && openProgressValue < 1) {
let thumbRect
if (_WORKLET) {
thumbRect = thumbRects.get()[imageIndex]
} else {
thumbRect = thumbRectJS
}
if (thumbRect) {
return interpolateTransform(
openProgressValue,
thumbRect,
safeArea,
imageAspect,
thumbBorderRadius,
)
}
}
return {
isHidden: false,
isResting: dismissTranslateY === 0,
borderRadius: 0,
scaleAndMoveTransform: [{translateY: dismissTranslateY}],
cropFrameTransform: [],
cropContentTransform: [],
}
})
const dismissSwipePan = Gesture.Pan()
.enabled(isActive && !isScaled)
.activeOffsetY([-10, 10])
.failOffsetX([-10, 10])
.maxPointers(1)
.onUpdate(e => {
'worklet'
if (openProgress.get() !== 1 || isFlyingAway.get()) {
return
}
dismissSwipeTranslateY.set(e.translationY)
})
.onEnd(e => {
'worklet'
if (openProgress.get() !== 1 || isFlyingAway.get()) {
return
}
if (Math.abs(e.velocityY) > 200) {
isFlyingAway.set(true)
if (dismissSwipeTranslateY.get() === 0) {
// HACK: If the initial value is 0, withDecay() animation doesn't start.
// This is a bug in Reanimated, but for now we'll work around it like this.
dismissSwipeTranslateY.set(1)
}
dismissSwipeTranslateY.set(() => {
'worklet'
return withDecay({
velocity: e.velocityY,
velocityFactor: Math.max(3500 / Math.abs(e.velocityY), 1), // Speed up if it's too slow.
deceleration: 1, // Danger! This relies on the reaction below stopping it.
reduceMotion: ReduceMotion.Never, // If this animation doesn't run, the image gets stuck - therefore override Reduce Motion
})
})
} else {
dismissSwipeTranslateY.set(() => {
'worklet'
return withSpring(0, {
stiffness: 700,
damping: 50,
reduceMotion: ReduceMotion.Never,
})
})
}
})
return (
<ImageItem
imageSrc={imageSrc}
onTap={onTap}
onZoom={onZoom}
onRequestClose={onRequestClose}
onLoad={setFetchedDims}
isScrollViewBeingDragged={isScrollViewBeingDragged}
showControls={showControls}
measureSafeArea={measureSafeArea}
imageAspect={imageAspect}
imageDimensions={dims ?? undefined}
dismissSwipePan={dismissSwipePan}
transforms={transforms}
/>
)
}
function LightboxFooter({
images,
index,
isAltExpanded,
toggleAltExpanded,
onPressSave,
onPressShare,
}: {
images: ImageSource[]
index: number
isAltExpanded: boolean
toggleAltExpanded: () => void
onPressSave: (uri: string) => void
onPressShare: (uri: string) => void
}) {
const {alt: altText, uri} = images[index]
const isMomentumScrolling = useRef(false)
return (
<ScrollView
style={styles.footerScrollView}
scrollEnabled={isAltExpanded}
onMomentumScrollBegin={() => {
isMomentumScrolling.current = true
}}
onMomentumScrollEnd={() => {
isMomentumScrolling.current = false
}}
contentContainerStyle={{
paddingVertical: 12,
paddingHorizontal: 24,
}}>
<SafeAreaView edges={['bottom']}>
{altText ? (
<View accessibilityRole="button" style={styles.footerText}>
<Text
style={{color: colors.gray3}}
numberOfLines={isAltExpanded ? undefined : 3}
selectable
onPress={() => {
if (isMomentumScrolling.current) {
return
}
LayoutAnimation.configureNext({
duration: 450,
update: {type: 'spring', springDamping: 1},
})
toggleAltExpanded()
}}
onLongPress={() => {}}
emoji>
{altText}
</Text>
</View>
) : null}
<View style={styles.footerBtns}>
<Button
type="primary-outline"
style={styles.footerBtn}
onPress={() => onPressSave(uri)}>
<FontAwesomeIcon icon={['far', 'floppy-disk']} style={s.white} />
<Text type="xl" style={s.white}>
<Trans context="action">Save</Trans>
</Text>
</Button>
<Button
type="primary-outline"
style={styles.footerBtn}
onPress={() => onPressShare(uri)}>
<FontAwesomeIcon icon="arrow-up-from-bracket" style={s.white} />
<Text type="xl" style={s.white}>
<Trans context="action">Share</Trans>
</Text>
</Button>
</View>
</SafeAreaView>
</ScrollView>
)
}
const styles = StyleSheet.create({
screen: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
screenHidden: {
opacity: 0,
pointerEvents: 'none',
},
container: {
flex: 1,
},
backdrop: {
backgroundColor: '#000',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
controls: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
gap: 20,
zIndex: 1,
pointerEvents: 'box-none',
},
pager: {
flex: 1,
},
header: {
position: 'absolute',
width: '100%',
top: 0,
pointerEvents: 'box-none',
},
footer: {
position: 'absolute',
width: '100%',
maxHeight: '100%',
bottom: 0,
},
footerScrollView: {
backgroundColor: '#000d',
flex: 1,
position: 'absolute',
bottom: 0,
width: '100%',
maxHeight: '100%',
},
footerText: {
paddingBottom: IS_IOS ? 20 : 16,
},
footerBtns: {
flexDirection: 'row',
justifyContent: 'center',
gap: 8,
},
footerBtn: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
backgroundColor: 'transparent',
borderColor: colors.white,
},
})
function interpolatePx(
px: number,
inputRange: readonly number[],
outputRange: readonly number[],
) {
'worklet'
const value = interpolate(px, inputRange, outputRange)
return Math.round(value * PIXEL_RATIO) / PIXEL_RATIO
}
function interpolateTransform(
progress: number,
thumbnailDims: {
pageX: number
width: number
pageY: number
height: number
},
safeArea: {width: number; height: number; x: number; y: number},
imageAspect: number,
thumbBorderRadius?: number,
): {
scaleAndMoveTransform: Transform
cropFrameTransform: Transform
cropContentTransform: Transform
borderRadius: number
isResting: boolean
isHidden: boolean
} {
'worklet'
const thumbAspect = thumbnailDims.width / thumbnailDims.height
let uncroppedInitialWidth
let uncroppedInitialHeight
if (imageAspect > thumbAspect) {
uncroppedInitialWidth = thumbnailDims.height * imageAspect
uncroppedInitialHeight = thumbnailDims.height
} else {
uncroppedInitialWidth = thumbnailDims.width
uncroppedInitialHeight = thumbnailDims.width / imageAspect
}
const safeAreaAspect = safeArea.width / safeArea.height
let finalWidth
let finalHeight
if (safeAreaAspect > imageAspect) {
finalWidth = safeArea.height * imageAspect
finalHeight = safeArea.height
} else {
finalWidth = safeArea.width
finalHeight = safeArea.width / imageAspect
}
const initialScale = Math.min(
uncroppedInitialWidth / finalWidth,
uncroppedInitialHeight / finalHeight,
)
const croppedFinalWidth = thumbnailDims.width / initialScale
const croppedFinalHeight = thumbnailDims.height / initialScale
const screenCenterX = safeArea.width / 2
const screenCenterY = safeArea.height / 2
const thumbnailSafeAreaX = thumbnailDims.pageX - safeArea.x
const thumbnailSafeAreaY = thumbnailDims.pageY - safeArea.y
const thumbnailCenterX = thumbnailSafeAreaX + thumbnailDims.width / 2
const thumbnailCenterY = thumbnailSafeAreaY + thumbnailDims.height / 2
const initialTranslateX = thumbnailCenterX - screenCenterX
const initialTranslateY = thumbnailCenterY - screenCenterY
const scale = interpolate(progress, [0, 1], [initialScale, 1])
const translateX = interpolatePx(progress, [0, 1], [initialTranslateX, 0])
const translateY = interpolatePx(progress, [0, 1], [initialTranslateY, 0])
const cropScaleX = interpolate(
progress,
[0, 1],
[croppedFinalWidth / finalWidth, 1],
)
const cropScaleY = interpolate(
progress,
[0, 1],
[croppedFinalHeight / finalHeight, 1],
)
// The border radius in the source thumbnail needs to be scaled to account
// for the crop frame and overall scale so it visually matches at progress=0.
const sourceBorderRadius = thumbBorderRadius ?? 0
const initialCropScaleX = croppedFinalWidth / finalWidth
const borderRadius = interpolate(
progress,
[0, 1],
[sourceBorderRadius / (initialScale * initialCropScaleX), 0],
)
return {
isHidden: false,
isResting: progress === 1,
scaleAndMoveTransform: [{translateX}, {translateY}, {scale}],
cropFrameTransform: [{scaleX: cropScaleX}, {scaleY: cropScaleY}],
cropContentTransform: [{scaleX: 1 / cropScaleX}, {scaleY: 1 / cropScaleY}],
borderRadius,
}
}
function withClampedSpring(value: any, config: WithSpringConfig) {
'worklet'
return withSpring(value, {...config, overshootClamping: true})
}
// We have to do this because we can't trust RN's rAF to fire in order.
// https://github.com/facebook/react-native/issues/48005
let isFrameScheduled = false
let pendingFrameCallbacks: Array<() => void> = []
function rAF_FIXED(callback: () => void) {
pendingFrameCallbacks.push(callback)
if (!isFrameScheduled) {
isFrameScheduled = true
requestAnimationFrame(() => {
const callbacks = pendingFrameCallbacks.slice()
isFrameScheduled = false
pendingFrameCallbacks = []
let hasError = false
let error
for (let i = 0; i < callbacks.length; i++) {
try {
callbacks[i]()
} catch (e) {
hasError = true
error = e
}
}
if (hasError) {
throw error
}
})
}
}
src/view/com/lightbox/ImageViewing/transforms.ts
-98
View File
@@ -1,98 +0,0 @@
import {type Position} from './@types'
export type TransformMatrix = [
number,
number,
number,
number,
number,
number,
number,
number,
number,
]
// These are affine transforms. See explanation of every cell here:
// https://en.wikipedia.org/wiki/Transformation_matrix#/media/File:2D_affine_transformation_matrix.svg
export function createTransform(): TransformMatrix {
'worklet'
return [1, 0, 0, 0, 1, 0, 0, 0, 1]
}
export function applyRounding(t: TransformMatrix) {
'worklet'
t[2] = Math.round(t[2])
t[5] = Math.round(t[5])
// For example: 0.985, 0.99, 0.995, then 1:
t[0] = Math.round(t[0] * 200) / 200
t[4] = Math.round(t[0] * 200) / 200
}
// We're using a limited subset (always scaling and translating while keeping aspect ratio) so
// we can assume the transform doesn't encode have skew, rotation, or non-uniform stretching.
// All write operations are applied in-place to avoid unnecessary allocations.
export function readTransform(t: TransformMatrix): [number, number, number] {
'worklet'
const scale = t[0]
const translateX = t[2]
const translateY = t[5]
return [translateX, translateY, scale]
}
export function prependTranslate(t: TransformMatrix, x: number, y: number) {
'worklet'
t[2] += t[0] * x + t[1] * y
t[5] += t[3] * x + t[4] * y
}
export function prependScale(t: TransformMatrix, value: number) {
'worklet'
t[0] *= value
t[1] *= value
t[3] *= value
t[4] *= value
}
export function prependTransform(ta: TransformMatrix, tb: TransformMatrix) {
'worklet'
// In-place matrix multiplication.
const a00 = ta[0],
a01 = ta[1],
a02 = ta[2]
const a10 = ta[3],
a11 = ta[4],
a12 = ta[5]
const a20 = ta[6],
a21 = ta[7],
a22 = ta[8]
ta[0] = a00 * tb[0] + a01 * tb[3] + a02 * tb[6]
ta[1] = a00 * tb[1] + a01 * tb[4] + a02 * tb[7]
ta[2] = a00 * tb[2] + a01 * tb[5] + a02 * tb[8]
ta[3] = a10 * tb[0] + a11 * tb[3] + a12 * tb[6]
ta[4] = a10 * tb[1] + a11 * tb[4] + a12 * tb[7]
ta[5] = a10 * tb[2] + a11 * tb[5] + a12 * tb[8]
ta[6] = a20 * tb[0] + a21 * tb[3] + a22 * tb[6]
ta[7] = a20 * tb[1] + a21 * tb[4] + a22 * tb[7]
ta[8] = a20 * tb[2] + a21 * tb[5] + a22 * tb[8]
}
export function prependPan(t: TransformMatrix, translation: Position) {
'worklet'
prependTranslate(t, translation.x, translation.y)
}
export function prependPinch(
t: TransformMatrix,
scale: number,
origin: Position,
translation: Position,
) {
'worklet'
prependTranslate(t, translation.x, translation.y)
prependTranslate(t, origin.x, origin.y)
prependScale(t, scale)
prependTranslate(t, -origin.x, -origin.y)
}
src/view/com/lightbox/Lightbox.tsx
-26
View File
@@ -1,26 +0,0 @@
import {useCallback} from 'react'
import {shareImageModal} from '#/lib/media/manip'
import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
import {useLightbox, useLightboxControls} from '#/state/lightbox'
import ImageView from './ImageViewing'
export function Lightbox() {
const {activeLightbox} = useLightbox()
const {closeLightbox} = useLightboxControls()
const onClose = useCallback(() => {
closeLightbox()
}, [closeLightbox])
const saveImageToAlbum = useSaveImageToMediaLibrary()
return (
<ImageView
lightbox={activeLightbox}
onRequestClose={onClose}
onPressSave={saveImageToAlbum}
onPressShare={uri => shareImageModal({uri})}
/>
)
}
src/view/com/lightbox/Lightbox.web.tsx
-450
View File
@@ -1,450 +0,0 @@
import {useCallback, useEffect, useRef, useState} from 'react'
import {Pressable, StyleSheet, View} from 'react-native'
import {Image} from 'expo-image'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {FocusGuards, FocusScope} from 'radix-ui/internal'
import {RemoveScrollBar} from 'react-remove-scroll-bar'
import {saveImageToMediaLibrary} from '#/lib/media/manip'
import {useA11y} from '#/state/a11y'
import {useLightbox, useLightboxControls} from '#/state/lightbox'
import {
atoms as a,
flatten,
ThemeProvider,
useBreakpoints,
useTheme,
} from '#/alf'
import {Button} from '#/components/Button'
import {Backdrop} from '#/components/Dialog'
import {
ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeftIcon,
ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon,
} from '#/components/icons/Chevron'
import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
import {Loader} from '#/components/Loader'
import * as Menu from '#/components/Menu'
import * as Toast from '#/components/Toast'
import {Text} from '#/components/Typography'
import {type ImageSource} from './ImageViewing/@types'
export function Lightbox() {
const {activeLightbox} = useLightbox()
const {closeLightbox} = useLightboxControls()
const isActive = !!activeLightbox
if (!isActive) {
return null
}
const initialIndex = activeLightbox.index
const imgs = activeLightbox.images
return (
<ThemeProvider theme="dark">
<LightboxContainer handleBackgroundPress={closeLightbox}>
<LightboxGallery
key={activeLightbox.id}
imgs={imgs}
initialIndex={initialIndex}
onClose={closeLightbox}
/>
</LightboxContainer>
</ThemeProvider>
)
}
function LightboxContainer({
children,
handleBackgroundPress,
}: {
children: React.ReactNode
handleBackgroundPress: () => void
}) {
const {_} = useLingui()
FocusGuards.useFocusGuards()
return (
<Pressable
accessibilityHint={undefined}
accessibilityLabel={_(msg`Close image viewer`)}
onPress={handleBackgroundPress}
style={[a.fixed, a.inset_0, a.z_10]}>
<Backdrop />
<RemoveScrollBar />
<FocusScope.FocusScope loop trapped asChild>
<div
role="dialog"
aria-modal="true"
aria-label={_(msg`Image viewer`)}
style={{position: 'absolute', inset: 0}}>
{children}
</div>
</FocusScope.FocusScope>
</Pressable>
)
}
function LightboxGallery({
imgs,
initialIndex = 0,
onClose,
}: {
imgs: ImageSource[]
initialIndex: number
onClose: () => void
}) {
const t = useTheme()
const {_} = useLingui()
const {reduceMotionEnabled} = useA11y()
const [index, setIndex] = useState(initialIndex)
const [hasAnyLoaded, setAnyHasLoaded] = useState(false)
const [isAltExpanded, setAltExpanded] = useState(false)
const {gtPhone} = useBreakpoints()
const canGoLeft = index >= 1
const canGoRight = index < imgs.length - 1
const onPressLeft = useCallback(() => {
if (canGoLeft) {
setIndex(index - 1)
}
}, [index, canGoLeft])
const onPressRight = useCallback(() => {
if (canGoRight) {
setIndex(index + 1)
}
}, [index, canGoRight])
const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.key === 'Escape') {
e.preventDefault()
onClose()
} else if (e.key === 'ArrowLeft') {
onPressLeft()
} else if (e.key === 'ArrowRight') {
onPressRight()
}
},
[onClose, onPressLeft, onPressRight],
)
useEffect(() => {
window.addEventListener('keydown', onKeyDown)
return () => window.removeEventListener('keydown', onKeyDown)
}, [onKeyDown])
// Push a history entry so the browser back button closes the lightbox
// instead of navigating away from the page.
const closedByPopStateRef = useRef(false)
useEffect(() => {
history.pushState({lightbox: true}, '')
const handlePopState = () => {
closedByPopStateRef.current = true
onClose()
}
window.addEventListener('popstate', handlePopState)
return () => {
window.removeEventListener('popstate', handlePopState)
// Only pop our entry if it's still the current one. If navigation
// already pushed a new entry on top, leave the orphaned entry —
// it shares the same URL so traversing through it is harmless.
if (
!closedByPopStateRef.current &&
(history.state as {lightbox?: boolean})?.lightbox
) {
history.back()
}
}
}, [onClose])
const delayedFadeInAnim = !reduceMotionEnabled && [
a.fade_in,
{animationDelay: '0.2s', animationFillMode: 'both'},
]
const img = imgs[index]
return (
<View style={[a.absolute, a.inset_0]}>
<View style={[a.flex_1, a.justify_center, a.align_center]}>
<LightboxGalleryItem
key={index}
source={img.uri}
alt={img.alt}
type={img.type}
hasAnyLoaded={hasAnyLoaded}
onLoad={() => setAnyHasLoaded(true)}
/>
{canGoLeft && (
<Button
onPress={onPressLeft}
style={[
a.absolute,
styles.leftBtn,
styles.blurredBackdrop,
a.transition_color,
delayedFadeInAnim,
]}
hoverStyle={styles.blurredBackdropHover}
color="secondary"
label={_(msg`Previous image`)}
shape="round"
size={gtPhone ? 'large' : 'small'}>
<ChevronLeftIcon
size={gtPhone ? 'md' : 'sm'}
style={{color: t.palette.white}}
/>
</Button>
)}
{canGoRight && (
<Button
onPress={onPressRight}
style={[
a.absolute,
styles.rightBtn,
styles.blurredBackdrop,
a.transition_color,
delayedFadeInAnim,
]}
hoverStyle={styles.blurredBackdropHover}
color="secondary"
label={_(msg`Next image`)}
shape="round"
size={gtPhone ? 'large' : 'small'}>
<ChevronRightIcon
size={gtPhone ? 'md' : 'sm'}
style={{color: t.palette.white}}
/>
</Button>
)}
</View>
{img.alt ? (
<View style={[a.px_4xl, a.py_2xl, t.atoms.bg, delayedFadeInAnim]}>
<Pressable
accessibilityLabel={_(msg`Expand alt text`)}
accessibilityHint={_(
msg`If alt text is long, toggles alt text expanded state`,
)}
onPress={() => {
setAltExpanded(!isAltExpanded)
}}>
<Text
style={[a.text_md, a.leading_snug]}
numberOfLines={isAltExpanded ? 0 : 3}
ellipsizeMode="tail">
{img.alt}
</Text>
</Pressable>
</View>
) : null}
{imgs.length > 1 && (
<div aria-live="polite" aria-atomic="true" style={a.sr_only}>
<Text>{_(msg`Image ${index + 1} of ${imgs.length}`)}</Text>
</div>
)}
<Menu.Root>
<Menu.Trigger label={_(msg`Image options`)}>
{({props}) => (
<Button
{...props}
style={[
a.absolute,
styles.menuBtn,
styles.blurredBackdrop,
a.transition_color,
delayedFadeInAnim,
]}
hoverStyle={styles.blurredBackdropHover}
color="secondary"
label={_(msg`Image options`)}
shape="round"
size={gtPhone ? 'large' : 'small'}>
<EllipsisIcon
size={gtPhone ? 'md' : 'sm'}
style={{color: t.palette.white}}
/>
</Button>
)}
</Menu.Trigger>
<Menu.Outer>
<Menu.Group>
<Menu.Item
label={_(msg`Download image`)}
onPress={() => {
saveImageToMediaLibrary({uri: img.uri}).then(
() => {
Toast.show(_(msg`Image saved`))
},
() => {
Toast.show(_(msg`Failed to save image`), {type: 'error'})
},
)
}}>
<Menu.ItemText>
<Trans>Download image</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={DownloadIcon} position="right" />
</Menu.Item>
</Menu.Group>
</Menu.Outer>
</Menu.Root>
<Button
onPress={onClose}
style={[
a.absolute,
styles.closeBtn,
styles.blurredBackdrop,
a.transition_color,
delayedFadeInAnim,
]}
hoverStyle={styles.blurredBackdropHover}
color="secondary"
label={_(msg`Close image viewer`)}
shape="round"
size={gtPhone ? 'large' : 'small'}>
<XIcon size={gtPhone ? 'md' : 'sm'} style={{color: t.palette.white}} />
</Button>
</View>
)
}
function LightboxGalleryItem({
source,
alt,
type,
onLoad,
hasAnyLoaded,
}: {
source: string
alt: string | undefined
type: ImageSource['type']
onLoad: () => void
hasAnyLoaded: boolean
}) {
const {reduceMotionEnabled} = useA11y()
const [hasLoaded, setHasLoaded] = useState(false)
const [isFirstToLoad] = useState(!hasAnyLoaded)
/**
* We want to show a zoom/fade in animation when the lightbox first opens.
* To avoid showing it as we switch between images, we keep track in the parent
* whether any image has loaded yet. We then save what the value of this is on first
* render (as when it changes, we don't want to then *remove* then animation). when
* the image loads, if this is the first image to load, we play the animation.
*
* We also use this `hasLoaded` state to show a loading indicator. This is on a 1s
* delay and then a slow fade in to avoid flicker. -sfn
*/
const zoomInWhenReady =
!reduceMotionEnabled &&
isFirstToLoad &&
(hasAnyLoaded
? [a.zoom_fade_in, {animationDuration: '0.5s'}]
: {opacity: 0})
const handleLoad = () => {
setHasLoaded(true)
onLoad()
}
let image = null
switch (type) {
case 'circle-avi':
case 'rect-avi':
image = (
<img
src={source}
style={flatten([
styles.avi,
{
borderRadius:
type === 'circle-avi' ? '50%' : type === 'rect-avi' ? '10%' : 0,
},
zoomInWhenReady,
])}
alt={alt}
onLoad={handleLoad}
/>
)
break
case 'image':
image = (
<Image
source={{uri: source}}
alt={alt}
style={[a.w_full, a.h_full, zoomInWhenReady]}
onLoad={handleLoad}
contentFit="contain"
accessibilityIgnoresInvertColors
/>
)
break
}
return (
<>
{image}
{!hasLoaded && (
<View
style={[
a.absolute,
a.inset_0,
a.justify_center,
a.align_center,
a.fade_in,
{
opacity: 0,
animationDuration: '500ms',
animationDelay: '1s',
animationFillMode: 'both',
},
]}>
<Loader size="xl" />
</View>
)}
</>
)
}
const styles = StyleSheet.create({
avi: {
// @ts-ignore web-only
maxWidth: `calc(min(400px, 100vw))`,
// @ts-ignore web-only
maxHeight: `calc(min(400px, 100vh))`,
padding: 16,
boxSizing: 'border-box',
},
menuBtn: {
top: 20,
left: 20,
},
closeBtn: {
top: 20,
right: 20,
},
leftBtn: {
left: 20,
right: 'auto',
top: '50%',
},
rightBtn: {
right: 20,
left: 'auto',
top: '50%',
},
blurredBackdrop: {
backgroundColor: '#00000077',
// @ts-expect-error web only -sfn
backdropFilter: 'blur(10px)',
},
blurredBackdropHover: {
backgroundColor: '#00000088',
},
})
src/view/com/profile/ProfileSubpageHeader.tsx
+1 -1
View File
@@ -13,13 +13,13 @@ import {makeProfileLink} from '#/lib/routes/links'
import {type NavigationProp} from '#/lib/routes/types'
import {sanitizeHandle} from '#/lib/strings/handles'
import {emitSoftReset} from '#/state/events'
import {useLightboxControls} from '#/state/lightbox'
import {TextLink} from '#/view/com/util/Link'
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {Text} from '#/view/com/util/text/Text'
import {UserAvatar, type UserAvatarType} from '#/view/com/util/UserAvatar'
import {StarterPack} from '#/components/icons/StarterPack'
import * as Layout from '#/components/Layout'
import {useLightboxControls} from '#/components/Lightbox/state'
export function ProfileSubpageHeader({
isLoading,
src/view/com/util/List.tsx
+1 -1
View File
@@ -12,8 +12,8 @@ import {useDedupe} from '#/lib/hooks/useDedupe'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {useScrollHandlers} from '#/lib/ScrollContext'
import {addStyle} from '#/lib/styles'
import {useLightbox} from '#/state/lightbox'
import {useTheme} from '#/alf'
import {useLightbox} from '#/components/Lightbox/state'
import {IS_IOS} from '#/env'
import {FlatList_INTERNAL} from './Views'