From acdb94be306ad7d95f5ee876a55f68df79740ff9 Mon Sep 17 00:00:00 2001 From: vineyardbovines Date: Tue, 21 Apr 2026 12:44:05 -0400 Subject: [PATCH] feat(lightbox): replace native chrome with new header/footer Wire Header and Footer from src/features/lightbox/chrome/ into ImagePager.tsx, removing the old ImageDefaultHeader and LightboxFooter inline function, and deleting the now-empty src/view/com/lightbox/ tree. Co-Authored-By: Claude Sonnet 4.6 --- src/features/lightbox/pager/ImagePager.tsx | 155 ++---------------- .../components/ImageDefaultHeader.tsx | 61 ------- 2 files changed, 17 insertions(+), 199 deletions(-) delete mode 100644 src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx diff --git a/src/features/lightbox/pager/ImagePager.tsx b/src/features/lightbox/pager/ImagePager.tsx index 5dd5d614b2..994ed530fd 100644 --- a/src/features/lightbox/pager/ImagePager.tsx +++ b/src/features/lightbox/pager/ImagePager.tsx @@ -7,14 +7,8 @@ */ // 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 {useCallback, useEffect, useMemo, useState} from 'react' +import {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' @@ -37,22 +31,16 @@ import Animated, { 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 {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 {type Lightbox} from '#/features/lightbox/state' import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army' -import ImageDefaultHeader from '../../../view/com/lightbox/ImageViewing/components/ImageDefaultHeader' +import {Footer} from '../chrome/Footer' +import {Header} from '../chrome/Header' import { type ImageSource, type LightboxTransforms, @@ -413,22 +401,27 @@ function ImageView({ ))} - + - +
onPressShare(images[imageIndex].uri)} + onPressSave={() => onPressSave(images[imageIndex].uri)} + /> - setIsAltExpanded(e => !e)} - onPressSave={onPressSave} - onPressShare={onPressShare} + onToggleAltExpanded={() => setIsAltExpanded(e => !e)} + imageCount={images.length} + activeIndex={imageIndex} /> @@ -607,85 +600,6 @@ function LightboxImage({ ) } -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 ( - { - isMomentumScrolling.current = true - }} - onMomentumScrollEnd={() => { - isMomentumScrolling.current = false - }} - contentContainerStyle={{ - paddingVertical: 12, - paddingHorizontal: 24, - }}> - - {altText ? ( - - { - if (isMomentumScrolling.current) { - return - } - LayoutAnimation.configureNext({ - duration: 450, - update: {type: 'spring', springDamping: 1}, - }) - toggleAltExpanded() - }} - onLongPress={() => {}} - emoji> - {altText} - - - ) : null} - - - - - - - ) -} - const styles = StyleSheet.create({ screen: { position: 'absolute', @@ -722,41 +636,6 @@ const styles = StyleSheet.create({ 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( diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx deleted file mode 100644 index feaef3bac4..0000000000 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ /dev/null @@ -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 ( - - - - - - ) -} - -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