This commit is contained in:
Zhiyuan Zheng 2021-04-19 17:15:52 +02:00
parent 292101ab30
commit 7a12792393
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
5 changed files with 22 additions and 8 deletions

View File

@ -57,6 +57,7 @@ declare namespace Nav {
'Screen-ImagesViewer': { 'Screen-ImagesViewer': {
imageUrls: { imageUrls: {
id: Mastodon.Attachment['id'] id: Mastodon.Attachment['id']
preview_url: Mastodon.AttachmentImage['preview_url']
url: Mastodon.AttachmentImage['url'] url: Mastodon.AttachmentImage['url']
remote_url?: Mastodon.AttachmentImage['remote_url'] remote_url?: Mastodon.AttachmentImage['remote_url']
blurhash: Mastodon.AttachmentImage['blurhash'] blurhash: Mastodon.AttachmentImage['blurhash']

View File

@ -81,13 +81,17 @@ const GracefullyImage = React.memo(
const previewView = useMemo( const previewView = useMemo(
() => () =>
uri.preview && !imageLoaded ? ( // Android flickrs between transition, thus keep showing the preview image
uri.preview ? (
<Image <Image
source={{ uri: uri.preview }} source={{ uri: uri.preview }}
style={[{ flex: 1 }, imageStyle]} style={[
styles.placeholder,
{ backgroundColor: theme.shimmerDefault }
]}
/> />
) : null, ) : null,
[imageLoaded] []
) )
const originalView = useMemo( const originalView = useMemo(
() => ( () => (
@ -104,12 +108,19 @@ const GracefullyImage = React.memo(
if (hidden || !imageLoaded) { if (hidden || !imageLoaded) {
if (blurhash) { if (blurhash) {
return ( return (
<Blurhash decodeAsync blurhash={blurhash} style={styles.blurhash} /> <Blurhash
decodeAsync
blurhash={blurhash}
style={styles.placeholder}
/>
) )
} else { } else {
return ( return (
<View <View
style={[styles.blurhash, { backgroundColor: theme.disabled }]} style={[
styles.placeholder,
{ backgroundColor: theme.shimmerDefault }
]}
/> />
) )
} }
@ -146,7 +157,7 @@ const GracefullyImage = React.memo(
) )
const styles = StyleSheet.create({ const styles = StyleSheet.create({
blurhash: { placeholder: {
width: '100%', width: '100%',
height: '100%', height: '100%',
position: 'absolute' position: 'absolute'

View File

@ -47,6 +47,7 @@ const TimelineAttachment = React.memo(
case 'image': case 'image':
imageUrls.push({ imageUrls.push({
id: attachment.id, id: attachment.id,
preview_url: attachment.preview_url,
url: attachment.url, url: attachment.url,
remote_url: attachment.remote_url, remote_url: attachment.remote_url,
blurhash: attachment.blurhash, blurhash: attachment.blurhash,
@ -107,6 +108,7 @@ const TimelineAttachment = React.memo(
) { ) {
imageUrls.push({ imageUrls.push({
id: attachment.id, id: attachment.id,
preview_url: attachment.preview_url,
url: attachment.url, url: attachment.url,
remote_url: attachment.remote_url, remote_url: attachment.remote_url,
blurhash: attachment.blurhash, blurhash: attachment.blurhash,

View File

@ -90,10 +90,10 @@ const ImageItem = ({
children={ children={
<GracefullyImage <GracefullyImage
uri={{ uri={{
preview: imageSrc.preview_url,
original: imageSrc.url, original: imageSrc.url,
remote: imageSrc.remote_url remote: imageSrc.remote_url
}} }}
blurhash={imageSrc.blurhash}
{...((!imageSrc.width || !imageSrc.height) && { {...((!imageSrc.width || !imageSrc.height) && {
setImageDimensions setImageDimensions
})} })}

View File

@ -145,10 +145,10 @@ const ImageItem = ({
children={ children={
<GracefullyImage <GracefullyImage
uri={{ uri={{
preview: imageSrc.preview_url,
original: imageSrc.url, original: imageSrc.url,
remote: imageSrc.remote_url remote: imageSrc.remote_url
}} }}
blurhash={imageSrc.blurhash}
{...((!imageSrc.width || !imageSrc.height) && { {...((!imageSrc.width || !imageSrc.height) && {
setImageDimensions setImageDimensions
})} })}