2021-02-14 00:27:21 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
|
|
import React, { useCallback, useMemo, useRef, 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,
|
|
|
|
Pressable,
|
|
|
|
StyleProp,
|
|
|
|
StyleSheet,
|
2021-04-01 18:39:53 +02:00
|
|
|
View,
|
2021-03-18 23:54:40 +01:00
|
|
|
ViewStyle
|
|
|
|
} from 'react-native'
|
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
|
2021-03-19 21:44:52 +01:00
|
|
|
uri: { preview?: string; original?: string; remote?: 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
|
|
|
}
|
|
|
|
|
2021-02-02 22:50:38 +01:00
|
|
|
const GracefullyImage = React.memo(
|
|
|
|
({
|
2021-04-09 21:43:12 +02:00
|
|
|
accessibilityLabel,
|
|
|
|
accessibilityHint,
|
2021-02-02 22:50:38 +01:00
|
|
|
hidden = false,
|
|
|
|
uri,
|
|
|
|
blurhash,
|
|
|
|
dimension,
|
|
|
|
onPress,
|
|
|
|
style,
|
2021-02-14 00:27:21 +01:00
|
|
|
imageStyle,
|
|
|
|
setImageDimensions
|
2021-02-02 22:50:38 +01:00
|
|
|
}: Props) => {
|
2021-02-14 00:27:21 +01:00
|
|
|
const { theme } = useTheme()
|
|
|
|
const originalFailed = useRef(false)
|
|
|
|
const [imageLoaded, setImageLoaded] = useState(false)
|
2021-01-16 00:00:31 +01:00
|
|
|
|
2021-02-14 00:27:21 +01:00
|
|
|
const source = useMemo(() => {
|
|
|
|
if (originalFailed.current) {
|
|
|
|
return { uri: uri.remote || undefined }
|
2021-02-02 22:50:38 +01:00
|
|
|
} else {
|
2021-02-14 00:27:21 +01:00
|
|
|
return { uri: uri.original }
|
2021-02-02 22:50:38 +01:00
|
|
|
}
|
2021-02-14 00:27:21 +01:00
|
|
|
}, [originalFailed.current])
|
|
|
|
const onLoad = useCallback(
|
|
|
|
({ nativeEvent }) => {
|
|
|
|
setImageLoaded(true)
|
|
|
|
setImageDimensions &&
|
|
|
|
setImageDimensions({
|
|
|
|
width: nativeEvent.width,
|
|
|
|
height: nativeEvent.height
|
|
|
|
})
|
|
|
|
},
|
|
|
|
[source.uri]
|
|
|
|
)
|
2021-02-02 22:50:38 +01:00
|
|
|
const onError = useCallback(() => {
|
2021-02-14 00:27:21 +01:00
|
|
|
if (!originalFailed.current) {
|
|
|
|
originalFailed.current = true
|
2021-02-02 22:50:38 +01:00
|
|
|
}
|
2021-02-14 00:27:21 +01:00
|
|
|
}, [originalFailed.current])
|
2021-02-02 22:50:38 +01:00
|
|
|
|
2021-02-14 00:27:21 +01:00
|
|
|
const previewView = useMemo(
|
|
|
|
() =>
|
2021-04-19 17:15:52 +02:00
|
|
|
// Android flickrs between transition, thus keep showing the preview image
|
|
|
|
uri.preview ? (
|
2021-03-18 23:54:40 +01:00
|
|
|
<Image
|
2021-02-14 00:27:21 +01:00
|
|
|
source={{ uri: uri.preview }}
|
2021-04-19 17:15:52 +02:00
|
|
|
style={[
|
|
|
|
styles.placeholder,
|
|
|
|
{ backgroundColor: theme.shimmerDefault }
|
|
|
|
]}
|
2021-02-10 00:40:44 +01:00
|
|
|
/>
|
2021-02-14 00:27:21 +01:00
|
|
|
) : null,
|
2021-04-19 17:15:52 +02:00
|
|
|
[]
|
2021-02-14 00:27:21 +01:00
|
|
|
)
|
|
|
|
const originalView = useMemo(
|
|
|
|
() => (
|
2021-03-18 23:54:40 +01:00
|
|
|
<Image
|
2021-02-14 00:27:21 +01:00
|
|
|
source={source}
|
2021-03-18 23:54:40 +01:00
|
|
|
style={[{ flex: 1 }, imageStyle]}
|
2021-02-14 00:27:21 +01:00
|
|
|
onLoad={onLoad}
|
|
|
|
onError={onError}
|
|
|
|
/>
|
|
|
|
),
|
2021-03-18 23:54:40 +01:00
|
|
|
[source]
|
2021-02-14 00:27:21 +01:00
|
|
|
)
|
|
|
|
const blurhashView = useMemo(() => {
|
2021-04-01 18:39:53 +02:00
|
|
|
if (hidden || !imageLoaded) {
|
|
|
|
if (blurhash) {
|
|
|
|
return (
|
2021-04-19 17:15:52 +02:00
|
|
|
<Blurhash
|
|
|
|
decodeAsync
|
|
|
|
blurhash={blurhash}
|
|
|
|
style={styles.placeholder}
|
|
|
|
/>
|
2021-04-01 18:39:53 +02:00
|
|
|
)
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<View
|
2021-04-19 17:15:52 +02:00
|
|
|
style={[
|
|
|
|
styles.placeholder,
|
|
|
|
{ backgroundColor: theme.shimmerDefault }
|
|
|
|
]}
|
2021-04-01 18:39:53 +02:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return null
|
|
|
|
}
|
2021-02-14 00:27:21 +01:00
|
|
|
}, [hidden, imageLoaded])
|
2021-01-16 00:00:31 +01:00
|
|
|
|
2021-02-02 22:50:38 +01:00
|
|
|
return (
|
|
|
|
<Pressable
|
2021-04-09 21:43:12 +02:00
|
|
|
{...(onPress
|
|
|
|
? { accessibilityRole: 'imagebutton' }
|
|
|
|
: { accessibilityRole: 'image' })}
|
|
|
|
accessibilityLabel={accessibilityLabel}
|
|
|
|
accessibilityHint={accessibilityHint}
|
2021-03-27 00:17:34 +01:00
|
|
|
style={[style, dimension, { backgroundColor: theme.shimmerDefault }]}
|
2021-02-02 22:50:38 +01:00
|
|
|
{...(onPress
|
|
|
|
? hidden
|
|
|
|
? { disabled: true }
|
|
|
|
: { onPress }
|
|
|
|
: { disabled: true })}
|
2021-02-14 00:27:21 +01:00
|
|
|
>
|
|
|
|
{previewView}
|
|
|
|
{originalView}
|
|
|
|
{blurhashView}
|
|
|
|
</Pressable>
|
2021-02-02 22:50:38 +01:00
|
|
|
)
|
|
|
|
},
|
2021-03-02 01:17:06 +01:00
|
|
|
(prev, next) =>
|
|
|
|
prev.hidden === next.hidden &&
|
|
|
|
prev.uri.preview === next.uri.preview &&
|
|
|
|
prev.uri.original === next.uri.original &&
|
|
|
|
prev.uri.remote === next.uri.remote
|
2021-02-02 22:50:38 +01:00
|
|
|
)
|
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
|