octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Fix some zoomed image not shown correctly

Browse Source
This commit is contained in:
xmflsct
2023-03-14 21:14:09 +01:00
parent 4977e91b66
commit b5ddebe123
2 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/GracefullyImage.tsx
View File

@ -1,7 +1,7 @@
import { useAccessibility } from '@utils/accessibility/AccessibilityManager' import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { connectMedia } from '@utils/api/helpers/connect' import { connectMedia } from '@utils/api/helpers/connect'
import { useTheme } from '@utils/styles/ThemeManager' import { useTheme } from '@utils/styles/ThemeManager'
import { Image, ImageSource, ImageStyle } from 'expo-image' import { Image, ImageContentFit, ImageSource, ImageStyle } from 'expo-image'
import React, { useState } from 'react' import React, { useState } from 'react'
import { AccessibilityProps, Pressable, StyleProp, View, ViewStyle } from 'react-native' import { AccessibilityProps, Pressable, StyleProp, View, ViewStyle } from 'react-native'
@ -21,6 +21,7 @@ export interface Props {
onPress?: () => void onPress?: () => void
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
imageStyle?: ImageStyle imageStyle?: ImageStyle
contentFit?: ImageContentFit
dim?: boolean dim?: boolean
withoutTransition?: boolean withoutTransition?: boolean
@ -36,6 +37,7 @@ const GracefullyImage = ({
onPress, onPress,
style, style,
imageStyle, imageStyle,
contentFit,
dim, dim,
withoutTransition = false, withoutTransition = false,
enableLiveTextInteraction = false enableLiveTextInteraction = false
@ -63,6 +65,7 @@ const GracefullyImage = ({
source={hidden ? sources.blurhash : connectMedia(source)} source={hidden ? sources.blurhash : connectMedia(source)}
{...(!withoutTransition && !reduceMotionEnabled && { transition: { duration: 120 } })} {...(!withoutTransition && !reduceMotionEnabled && { transition: { duration: 120 } })}
style={{ flex: 1, ...imageStyle }} style={{ flex: 1, ...imageStyle }}
contentFit={contentFit}
onError={() => { onError={() => {
if ( if (
sources.default?.uri && sources.default?.uri &&

29
src/screens/ImageViewer/index.tsx
View File

@ -159,8 +159,8 @@ const ScreenImagesViewer = ({
}) => { }) => {
const screenRatio = WINDOW_WIDTH / WINDOW_HEIGHT const screenRatio = WINDOW_WIDTH / WINDOW_HEIGHT
const imageRatio = item.width && item.height ? item.width / item.height : 1 const imageRatio = item.width && item.height ? item.width / item.height : 1
const imageWidth = item.width || 100 const imageWidth = item.width
const imageHeight = item.height || 100 const imageHeight = item.height
const maxWidthScale = item.width const maxWidthScale = item.width
? (item.width / WINDOW_WIDTH / PixelRatio.get()) * 4 ? (item.width / WINDOW_WIDTH / PixelRatio.get()) * 4
@ -198,16 +198,21 @@ const ScreenImagesViewer = ({
default: { uri: item.url }, default: { uri: item.url },
remote: { uri: item.remote_url } remote: { uri: item.remote_url }
}} }}
dimension={{ style={{ flex: 1 }}
width: contentFit='contain'
screenRatio > imageRatio {...(imageWidth &&
? (WINDOW_HEIGHT / imageHeight) * imageWidth imageHeight && {
: WINDOW_WIDTH, dimension: {
height: width:
screenRatio > imageRatio screenRatio > imageRatio
? WINDOW_HEIGHT ? (WINDOW_HEIGHT / imageHeight) * imageWidth
: (WINDOW_WIDTH / imageWidth) * imageHeight : WINDOW_WIDTH,
}} height:
screenRatio > imageRatio
? WINDOW_HEIGHT
: (WINDOW_WIDTH / imageWidth) * imageHeight
}
})}
enableLiveTextInteraction enableLiveTextInteraction
/> />
</View> </View>