2022-02-12 18:25:53 +01:00
|
|
|
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
2021-02-14 00:27:21 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-04-30 21:29:08 +02:00
|
|
|
import React, { useMemo, useState } from 'react'
|
2021-03-18 23:54:40 +01:00
|
|
|
import {
|
2021-04-09 21:43:12 +02:00
|
|
|
AccessibilityProps,
|
2021-03-18 23:54:40 +01:00
|
|
|
Image,
|
|
|
|
ImageStyle,
|
2022-06-16 23:22:28 +02:00
|
|
|
Platform,
|
2021-03-18 23:54:40 +01:00
|
|
|
Pressable,
|
|
|
|
StyleProp,
|
|
|
|
StyleSheet,
|
2021-04-01 18:39:53 +02:00
|
|
|
View,
|
2021-03-18 23:54:40 +01:00
|
|
|
ViewStyle
|
|
|
|
} from 'react-native'
|
2022-06-16 23:22:28 +02:00
|
|
|
import FastImage from 'react-native-fast-image'
|
2021-01-28 01:31:19 +01:00
|
|
|
import { Blurhash } from 'react-native-blurhash'
|
2021-02-14 00:27:21 +01:00
|
|
|
|
|
|
|
// blurhas -> if blurhash, show before any loading succeed
|
|
|
|
// original -> load original
|
|
|
|
// original, remote -> if original failed, then remote
|
|
|
|
// preview, original -> first show preview, then original
|
|
|
|
// preview, original, remote -> first show preview, then original, if original failed, then remote
|
2021-01-16 00:00:31 +01:00
|
|
|
|
|
|
|
export interface Props {
|
2021-04-09 21:43:12 +02:00
|
|
|
accessibilityLabel?: AccessibilityProps['accessibilityLabel']
|
|
|
|
accessibilityHint?: AccessibilityProps['accessibilityHint']
|
|
|
|
|
2021-01-16 00:00:31 +01:00
|
|
|
hidden?: boolean
|
2022-02-12 18:25:53 +01:00
|
|
|
uri: { preview?: string; original?: string; remote?: string; static?: string }
|
2021-01-16 00:00:31 +01:00
|
|
|
blurhash?: string
|
|
|
|
dimension?: { width: number; height: number }
|
|
|
|
onPress?: () => void
|
|
|
|
style?: StyleProp<ViewStyle>
|
2021-01-23 02:41:50 +01:00
|
|
|
imageStyle?: StyleProp<ImageStyle>
|
2021-02-14 00:27:21 +01:00
|
|
|
// For image viewer when there is no image size available
|
|
|
|
setImageDimensions?: React.Dispatch<
|
|
|
|
React.SetStateAction<{
|
|
|
|
width: number
|
|
|
|
height: number
|
|
|
|
}>
|
|
|
|
>
|
2021-01-16 00:00:31 +01:00
|
|
|
}
|
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
const GracefullyImage = ({
|
|
|
|
accessibilityLabel,
|
|
|
|
accessibilityHint,
|
|
|
|
hidden = false,
|
|
|
|
uri,
|
|
|
|
blurhash,
|
|
|
|
dimension,
|
|
|
|
onPress,
|
|
|
|
style,
|
|
|
|
imageStyle,
|
|
|
|
setImageDimensions
|
|
|
|
}: Props) => {
|
|
|
|
const { reduceMotionEnabled } = useAccessibility()
|
|
|
|
const { colors } = useTheme()
|
|
|
|
const [originalFailed, setOriginalFailed] = useState(false)
|
|
|
|
const [imageLoaded, setImageLoaded] = useState(false)
|
2021-01-16 00:00:31 +01:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
const source = originalFailed
|
|
|
|
? { uri: uri.remote || undefined }
|
|
|
|
: {
|
|
|
|
uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
|
2021-02-02 22:50:38 +01:00
|
|
|
}
|
2021-05-30 22:12:22 +02:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
const onLoad = () => {
|
|
|
|
setImageLoaded(true)
|
|
|
|
if (setImageDimensions && source.uri) {
|
|
|
|
Image.getSize(source.uri, (width, height) =>
|
|
|
|
setImageDimensions({ width, height })
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const onError = () => {
|
|
|
|
if (!originalFailed) {
|
|
|
|
setOriginalFailed(true)
|
|
|
|
}
|
|
|
|
}
|
2021-02-02 22:50:38 +01:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
const blurhashView = useMemo(() => {
|
|
|
|
if (hidden || !imageLoaded) {
|
|
|
|
if (blurhash) {
|
|
|
|
return (
|
|
|
|
<Blurhash
|
|
|
|
decodeAsync
|
|
|
|
blurhash={blurhash}
|
|
|
|
style={styles.placeholder}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<View
|
2021-04-19 17:15:52 +02:00
|
|
|
style={[
|
|
|
|
styles.placeholder,
|
2022-02-12 14:51:01 +01:00
|
|
|
{ backgroundColor: colors.shimmerDefault }
|
2021-04-19 17:15:52 +02:00
|
|
|
]}
|
2021-02-10 00:40:44 +01:00
|
|
|
/>
|
2022-04-30 21:29:08 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
}, [hidden, imageLoaded])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Pressable
|
|
|
|
{...(onPress
|
|
|
|
? { accessibilityRole: 'imagebutton' }
|
|
|
|
: { accessibilityRole: 'image' })}
|
|
|
|
accessibilityLabel={accessibilityLabel}
|
|
|
|
accessibilityHint={accessibilityHint}
|
|
|
|
style={[style, dimension, { backgroundColor: colors.shimmerDefault }]}
|
|
|
|
{...(onPress
|
|
|
|
? hidden
|
|
|
|
? { disabled: true }
|
|
|
|
: { onPress }
|
|
|
|
: { disabled: true })}
|
|
|
|
>
|
|
|
|
{uri.preview && !imageLoaded ? (
|
2021-03-18 23:54:40 +01:00
|
|
|
<Image
|
2021-04-19 22:50:55 +02:00
|
|
|
fadeDuration={0}
|
2022-04-30 21:29:08 +02:00
|
|
|
source={{ uri: uri.preview }}
|
|
|
|
style={[
|
|
|
|
styles.placeholder,
|
|
|
|
{ backgroundColor: colors.shimmerDefault }
|
|
|
|
]}
|
2021-02-14 00:27:21 +01:00
|
|
|
/>
|
2022-04-30 21:29:08 +02:00
|
|
|
) : null}
|
2022-06-16 23:22:28 +02:00
|
|
|
{Platform.OS === 'ios' ? (
|
|
|
|
<Image
|
|
|
|
fadeDuration={0}
|
|
|
|
source={source}
|
|
|
|
style={[{ flex: 1 }, imageStyle]}
|
|
|
|
onLoad={onLoad}
|
|
|
|
onError={onError}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<FastImage
|
|
|
|
fadeDuration={0}
|
|
|
|
source={source}
|
|
|
|
// @ts-ignore
|
|
|
|
style={[{ flex: 1 }, imageStyle]}
|
|
|
|
onLoad={onLoad}
|
|
|
|
onError={onError}
|
|
|
|
/>
|
|
|
|
)}
|
2022-04-30 21:29:08 +02:00
|
|
|
{blurhashView}
|
|
|
|
</Pressable>
|
|
|
|
)
|
|
|
|
}
|
2021-01-16 00:00:31 +01:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
2021-04-19 17:15:52 +02:00
|
|
|
placeholder: {
|
2021-02-14 00:27:21 +01:00
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
2021-03-27 00:17:34 +01:00
|
|
|
position: 'absolute'
|
2021-01-16 00:00:31 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
export default GracefullyImage
|