martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-04 23:45:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

clear thumb so not visible on far pan

Browse Source
This commit is contained in:
balzack 2025-01-06 10:13:58 -08:00
parent 970057351b
commit c46c927324
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/client/mobile/src/message/imageAsset/ImageAsset.tsx
View File

@ -12,6 +12,7 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
const [modal, setModal] = useState(false); const [modal, setModal] = useState(false);
const opacity = useAnimatedValue(0); const opacity = useAnimatedValue(0);
const [alert, setAlert] = useState(''); const [alert, setAlert] = useState('');
const [cleared, setCleared] = useState(false);
useEffect(() => { useEffect(() => {
if (state.loaded && show) { if (state.loaded && show) {
@ -28,6 +29,7 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
const showImage = () => { const showImage = () => {
setModal(true); setModal(true);
setCleared(false);
actions.loadImage(); actions.loadImage();
}; };
@ -63,12 +65,14 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
<Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={hideImage}> <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={hideImage}>
<View style={styles.modal}> <View style={styles.modal}>
<BlurView style={styles.blur} blurType="dark" blurAmount={16} reducedTransparencyFallbackColor="dark" /> <BlurView style={styles.blur} blurType="dark" blurAmount={16} reducedTransparencyFallbackColor="dark" />
<Image { !cleared && (
style={styles.full} <Image
resizeMode="contain" style={styles.full}
source={{ uri: state.thumbUrl }} resizeMode="contain"
onLayout={actions.fullscreen} source={{ uri: state.thumbUrl }}
/> onLayout={actions.fullscreen}
/>
)}
{ state.dataUrl && ( { state.dataUrl && (
<ReactNativeZoomableView width={state.width} height={state.height} minZoom={1} maxZoom={30}> <ReactNativeZoomableView width={state.width} height={state.height} minZoom={1} maxZoom={30}>
<Image <Image
@ -77,6 +81,7 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
resizeMode="contain" resizeMode="contain"
onError={(err)=>console.log(err)} onError={(err)=>console.log(err)}
source={{ uri: state.dataUrl }} source={{ uri: state.dataUrl }}
onLoad={()=>setCleared(true)}
/> />
</ReactNativeZoomableView> </ReactNativeZoomableView>
)} )}