mirror of https://github.com/tooot-app/app
Fixed #107
This commit is contained in:
parent
292101ab30
commit
7a12792393
|
@ -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']
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -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
|
||||||
})}
|
})}
|
||||||
|
|
Loading…
Reference in New Issue