[Lightbox] Small tweaks (#6301)
* Tweak lightbox springs * Speed up dismiss speed * Don't scroll to top while active lightbox * Make Android a bit faster
This commit is contained in:
@@ -62,7 +62,7 @@ const EDGES =
|
|||||||
? (['top', 'bottom', 'left', 'right'] satisfies Edge[])
|
? (['top', 'bottom', 'left', 'right'] satisfies Edge[])
|
||||||
: (['left', 'right'] satisfies Edge[]) // iOS, so no top/bottom safe area
|
: (['left', 'right'] satisfies Edge[]) // iOS, so no top/bottom safe area
|
||||||
|
|
||||||
const SLOW_SPRING = {stiffness: 120}
|
const SLOW_SPRING = {stiffness: isIOS ? 180 : 250}
|
||||||
const FAST_SPRING = {stiffness: 700}
|
const FAST_SPRING = {stiffness: 700}
|
||||||
|
|
||||||
export default function ImageViewRoot({
|
export default function ImageViewRoot({
|
||||||
@@ -433,7 +433,7 @@ function LightboxImage({
|
|||||||
if (openProgress.value !== 1 || isFlyingAway.value) {
|
if (openProgress.value !== 1 || isFlyingAway.value) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (Math.abs(e.velocityY) > 1000) {
|
if (Math.abs(e.velocityY) > 200) {
|
||||||
isFlyingAway.value = true
|
isFlyingAway.value = true
|
||||||
if (dismissSwipeTranslateY.value === 0) {
|
if (dismissSwipeTranslateY.value === 0) {
|
||||||
// HACK: If the initial value is 0, withDecay() animation doesn't start.
|
// HACK: If the initial value is 0, withDecay() animation doesn't start.
|
||||||
@@ -442,7 +442,7 @@ function LightboxImage({
|
|||||||
}
|
}
|
||||||
dismissSwipeTranslateY.value = withDecay({
|
dismissSwipeTranslateY.value = withDecay({
|
||||||
velocity: e.velocityY,
|
velocity: e.velocityY,
|
||||||
velocityFactor: Math.max(3000 / Math.abs(e.velocityY), 1), // Speed up if it's too slow.
|
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.
|
deceleration: 1, // Danger! This relies on the reaction below stopping it.
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {useDedupe} from '#/lib/hooks/useDedupe'
|
|||||||
import {useScrollHandlers} from '#/lib/ScrollContext'
|
import {useScrollHandlers} from '#/lib/ScrollContext'
|
||||||
import {addStyle} from '#/lib/styles'
|
import {addStyle} from '#/lib/styles'
|
||||||
import {isIOS} from '#/platform/detection'
|
import {isIOS} from '#/platform/detection'
|
||||||
|
import {useLightbox} from '#/state/lightbox'
|
||||||
import {useTheme} from '#/alf'
|
import {useTheme} from '#/alf'
|
||||||
import {FlatList_INTERNAL} from './Views'
|
import {FlatList_INTERNAL} from './Views'
|
||||||
|
|
||||||
@@ -52,6 +53,7 @@ function ListImpl<ItemT>(
|
|||||||
const isScrolledDown = useSharedValue(false)
|
const isScrolledDown = useSharedValue(false)
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const dedupe = useDedupe(400)
|
const dedupe = useDedupe(400)
|
||||||
|
const {activeLightbox} = useLightbox()
|
||||||
|
|
||||||
function handleScrolledDownChange(didScrollDown: boolean) {
|
function handleScrolledDownChange(didScrollDown: boolean) {
|
||||||
onScrolledDownChange?.(didScrollDown)
|
onScrolledDownChange?.(didScrollDown)
|
||||||
@@ -143,6 +145,7 @@ function ListImpl<ItemT>(
|
|||||||
contentOffset={contentOffset}
|
contentOffset={contentOffset}
|
||||||
refreshControl={refreshControl}
|
refreshControl={refreshControl}
|
||||||
onScroll={scrollHandler}
|
onScroll={scrollHandler}
|
||||||
|
scrollsToTop={!activeLightbox}
|
||||||
scrollEventThrottle={1}
|
scrollEventThrottle={1}
|
||||||
onViewableItemsChanged={onViewableItemsChanged}
|
onViewableItemsChanged={onViewableItemsChanged}
|
||||||
viewabilityConfig={viewabilityConfig}
|
viewabilityConfig={viewabilityConfig}
|
||||||
|
|||||||
Reference in New Issue
Block a user