Spaces:
Running
Running
File size: 3,563 Bytes
947c08e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import { useState, useEffect, useContext, useCallback } from "react"
import { Image as _Image } from 'expo-image';
import { View } from "react-native"
import ImageCacheStorage from "@/constants/module/image_cache_storage";
import {blobToBase64} from "@/constants/module/file_manager";
import { Icon, Button } from 'react-native-paper';
import { ActivityIndicator } from 'react-native-paper';
import { CONTEXT } from "@/constants/module/context";
import { useFocusEffect } from "expo-router";
const Image = ({source, style, onError, contentFit, transition, onLoad, onLoadEnd}:any) => {
const [imageData, setImageData]:any = useState(null)
const [isError, setIsError]:any = useState(false)
const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
const controller = new AbortController();
const signal = controller.signal;
const request_image = () =>{
(async ()=>{
if(source.hasOwnProperty("type")){
if (source.type === "blob"){
setImageData({uri:await blobToBase64(source.data)})
}else if (source.type === "base64"){
setImageData({uri:source.data})
}else if (source.type === "file_path"){
setImageData({uri:source.data})
}else{
setIsError(true)
}
} else if (source.hasOwnProperty("uri")){
const result:any = await ImageCacheStorage.get(setShowCloudflareTurnstileContext,source.uri,signal);
if (result.type === "blob"){
setImageData({uri:await blobToBase64(result.data)})
}else if (result.type === "base64"){
setImageData({uri:result.data})
}else if (result.type === "file_path"){
setImageData({uri:result.data})
}else{
setIsError(true)
}
}else{
setImageData(source)
}
})()
}
useFocusEffect(useCallback(() => {
return () => {
controller.abort();
};
},[]))
useEffect(()=>{
request_image()
},[])
return ( <>
{isError
? <View style={{...style,display:'flex',justifyContent:"center",alignItems:"center"}}>
<Button mode="outlined" onPress={()=>{
request_image()
setIsError(false)
}}
style={{
borderWidth:0,
}}
>
<Icon source={"refresh-circle"} size={25} color={"yellow"}/>
</Button>
</View>
: <>{imageData
? <_Image
onError={onError}
source={imageData}
style={style}
contentFit={contentFit}
transition={transition}
onLoad={onLoad}
onLoadEnd={onLoadEnd}
/>
: <View style={{...style,display:'flex',justifyContent:"center",alignItems:"center"}}>
<ActivityIndicator animating={true}/>
</View>
}</>
}
</>
)
}
export default Image |