Fixed #9

2021-02-14 00:27:21 +01:00 · 2021-02-14 00:27:21 +01:00 · 13efb56324
parent a9326c381a
commit 13efb56324
7 changed files with 214 additions and 203 deletions
--- a/src/@types/react-navigation.d.ts
+++ b/src/@types/react-navigation.d.ts
@ -51,6 +51,8 @@ declare namespace Nav {
    'Screen-ImagesViewer': {
      imageUrls: {
        url: Mastodon.AttachmentImage['url']
+        width?: number
+        height?: number
        preview_url: Mastodon.AttachmentImage['preview_url']
        remote_url?: Mastodon.AttachmentImage['remote_url']
        imageIndex: number
--- a/src/components/GracefullyImage.tsx
+++ b/src/components/GracefullyImage.tsx
@ -1,12 +1,17 @@
 import { StyleConstants } from '@utils/styles/constants'
-import React, { useCallback, useMemo, useState } from 'react'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { Pressable, StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
 import FastImage, { ImageStyle } from 'react-native-fast-image'
-import { useTheme } from '@utils/styles/ThemeManager'
+
+// 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

 export interface Props {
-  sharedElement?: string
  hidden?: boolean
  uri: { preview?: string; original: string; remote?: string }
  blurhash?: string
@ -14,115 +19,113 @@ export interface Props {
  onPress?: () => void
  style?: StyleProp<ViewStyle>
  imageStyle?: StyleProp<ImageStyle>
+  // For image viewer when there is no image size available
+  setImageDimensions?: React.Dispatch<
+    React.SetStateAction<{
+      width: number
+      height: number
+    }>
+  >
 }

 const GracefullyImage = React.memo(
  ({
-    sharedElement,
    hidden = false,
    uri,
    blurhash,
    dimension,
    onPress,
    style,
-    imageStyle
+    imageStyle,
+    setImageDimensions
  }: Props) => {
-    const { mode, theme } = useTheme()
-    const [previewLoaded, setPreviewLoaded] = useState(
-      uri.preview ? false : true
+    const { theme } = useTheme()
+    const originalFailed = useRef(false)
+    const [imageLoaded, setImageLoaded] = useState(false)
+
+    const source = useMemo(() => {
+      if (originalFailed.current) {
+        return { uri: uri.remote || undefined }
+      } else {
+        return { uri: uri.original }
+      }
+    }, [originalFailed.current])
+    const onLoad = useCallback(
+      ({ nativeEvent }) => {
+        setImageLoaded(true)
+        setImageDimensions &&
+          setImageDimensions({
+            width: nativeEvent.width,
+            height: nativeEvent.height
+          })
+      },
+      [source.uri]
    )
-    const [originalLoaded, setOriginalLoaded] = useState(false)
-    const [originalFailed, setOriginalFailed] = useState(false)
-    const [remoteLoaded, setRemoteLoaded] = useState(uri.remote ? false : true)
-
-    const sourceUri = useMemo(() => {
-      if (previewLoaded) {
-        if (originalFailed) {
-          return uri.remote
-        } else {
-          return uri.original
-        }
-      } else {
-        return uri.preview
-      }
-    }, [previewLoaded, originalLoaded, originalFailed, remoteLoaded])
-    const onLoad = useCallback(() => {
-      if (previewLoaded) {
-        if (originalFailed) {
-          return setRemoteLoaded(true)
-        } else {
-          return setOriginalLoaded(true)
-        }
-      } else {
-        return setPreviewLoaded(true)
-      }
-    }, [previewLoaded, originalLoaded, originalFailed, remoteLoaded])
    const onError = useCallback(() => {
-      if (previewLoaded) {
-        if (originalFailed) {
-          return
-        } else {
-          return setOriginalFailed(true)
-        }
-      } else {
-        return
+      if (!originalFailed.current) {
+        originalFailed.current = true
      }
-    }, [previewLoaded, originalLoaded, originalFailed, remoteLoaded])
+    }, [originalFailed.current])

-    const children = useCallback(() => {
-      return (
-        <>
+    const previewView = useMemo(
+      () =>
+        uri.preview && !imageLoaded ? (
          <FastImage
-            source={{ uri: sourceUri }}
-            style={[styles.image, imageStyle]}
-            onLoad={onLoad}
-            onError={onError}
+            source={{ uri: uri.preview }}
+            style={[{ flex: 1 }, imageStyle]}
          />
-          {blurhash &&
-          (hidden || !(previewLoaded || originalLoaded || remoteLoaded)) ? (
-            <Blurhash
-              decodeAsync
-              blurhash={blurhash}
-              style={{
-                width: '100%',
-                height: '100%',
-                position: 'absolute',
-                top: StyleConstants.Spacing.XS / 2,
-                left: StyleConstants.Spacing.XS / 2
-              }}
-            />
-          ) : null}
-        </>
-      )
-    }, [hidden, previewLoaded, originalLoaded, remoteLoaded, mode, uri])
+        ) : null,
+      [imageLoaded]
+    )
+    const originalView = useMemo(
+      () => (
+        <FastImage
+          source={source}
+          style={[{ flex: imageLoaded ? 1 : undefined }, imageStyle]}
+          onLoad={onLoad}
+          onError={onError}
+        />
+      ),
+      [source, imageLoaded]
+    )
+    const blurhashView = useMemo(() => {
+      return blurhash && (hidden || !imageLoaded) ? (
+        <Blurhash decodeAsync blurhash={blurhash} style={styles.blurhash} />
+      ) : null
+    }, [hidden, imageLoaded])

    return (
      <Pressable
-        children={children}
-        style={[
-          style,
-          { backgroundColor: theme.shimmerDefault },
-          dimension && { ...dimension }
-        ]}
+        style={[style, dimension, { backgroundColor: theme.shimmerDefault }]}
        {...(onPress
          ? hidden
            ? { disabled: true }
            : { onPress }
          : { disabled: true })}
-      />
+      >
+        {previewView}
+        {originalView}
+        {blurhashView}
+      </Pressable>
    )
  },
  (prev, next) => {
    let skipUpdate = true
    skipUpdate = prev.hidden === next.hidden
+    skipUpdate = prev.uri.preview === next.uri.preview
    skipUpdate = prev.uri.original === next.uri.original
+    skipUpdate = prev.uri.remote === next.uri.remote
    return false
  }
 )

 const styles = StyleSheet.create({
-  image: {
-    flex: 1
+  blurhash: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: StyleConstants.Spacing.XS / 2,
+    left: StyleConstants.Spacing.XS / 2
  }
 })

--- a/src/components/Timeline/Shared/Attachment.tsx
+++ b/src/components/Timeline/Shared/Attachment.tsx
@ -32,11 +32,7 @@ const TimelineAttachment: React.FC<Props> = ({ status }) => {
    haptics('Light')
  }, [])

-  let imageUrls: (App.IImageInfo & {
-    preview_url: Mastodon.AttachmentImage['preview_url']
-    remote_url?: Mastodon.AttachmentImage['remote_url']
-    imageIndex: number
-  })[] = []
+  let imageUrls: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'] = []
  const navigation = useNavigation()
  const navigateToImagesViewer = (imageIndex: number) =>
    navigation.navigate('Screen-ImagesViewer', {
@ -52,6 +48,8 @@ const TimelineAttachment: React.FC<Props> = ({ status }) => {
              url: attachment.url,
              preview_url: attachment.preview_url,
              remote_url: attachment.remote_url,
+              width: attachment.meta?.original?.width,
+              height: attachment.meta?.original?.height,
              imageIndex: index
            })
            return (
--- a/src/components/Timeline/Shared/Attachment/Image.tsx
+++ b/src/components/Timeline/Shared/Attachment/Image.tsx
@ -28,12 +28,7 @@ const AttachmentImage: React.FC<Props> = ({
  return (
    <GracefullyImage
      hidden={sensitiveShown}
-      uri={{
-        preview: image.preview_url,
-        original: image.url,
-        remote: image.remote_url
-      }}
-      sharedElement={image.url}
+      uri={{ original: image.preview_url, remote: image.remote_url }}
      blurhash={image.blurhash}
      onPress={onPress}
      style={[
--- a/src/components/Timeline/Shared/Avatar.tsx
+++ b/src/components/Timeline/Shared/Avatar.tsx
@ -1,10 +1,10 @@
-import React, { useCallback } from 'react'
-import { StyleConstants } from '@utils/styles/constants'
-import { useNavigation } from '@react-navigation/native'
-import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import GracefullyImage from '@components/GracefullyImage'
-import { StackNavigationProp } from '@react-navigation/stack'
 import analytics from '@components/analytics'
+import GracefullyImage from '@components/GracefullyImage'
+import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { StyleConstants } from '@utils/styles/constants'
+import React, { useCallback } from 'react'

 export interface Props {
  queryKey?: QueryKeyTimeline
--- a/src/modules/react-native-image-viewing
+++ b/src/modules/react-native-image-viewing
@ -1 +1 @@
-Subproject commit c93d6462d598a7b65086f58d40b6b5589be2eefe
+Subproject commit c8af057d3cc4d6757fd377f97d18f8df33fa1d61
--- a/src/screens/ImagesViewer.tsx
+++ b/src/screens/ImagesViewer.tsx
@ -1,6 +1,6 @@
 import analytics from '@components/analytics'
+import haptics from '@components/haptics'
 import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
-import { toast } from '@components/toast'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import CameraRoll from '@react-native-community/cameraroll'
 import { StackScreenProps } from '@react-navigation/stack'
@ -13,10 +13,119 @@ import {
  Platform,
  Share,
  StatusBar,
-  StyleSheet,
  View
 } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets
+} from 'react-native-safe-area-context'
+
+const HeaderComponent = React.memo(
+  ({
+    navigation,
+    currentIndex,
+    imageUrls
+  }: {
+    navigation: ScreenImagesViewerProp['navigation']
+    currentIndex: number
+    imageUrls: {
+      url: string
+      width?: number | undefined
+      height?: number | undefined
+      preview_url: string
+      remote_url?: string | undefined
+      imageIndex: number
+    }[]
+  }) => {
+    const insets = useSafeAreaInsets()
+    const { t } = useTranslation('screenImageViewer')
+    const { showActionSheetWithOptions } = useActionSheet()
+
+    const hasAndroidPermission = async () => {
+      const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
+
+      const hasPermission = await PermissionsAndroid.check(permission)
+      if (hasPermission) {
+        return true
+      }
+
+      const status = await PermissionsAndroid.request(permission)
+      return status === 'granted'
+    }
+
+    const saveImage = async () => {
+      if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
+        return
+      }
+      CameraRoll.save(
+        imageUrls[currentIndex].url ||
+          imageUrls[currentIndex].remote_url ||
+          imageUrls[currentIndex].preview_url
+      )
+        .then(() => haptics('Success'))
+        .catch(() => haptics('Error'))
+    }
+
+    const onPress = useCallback(() => {
+      analytics('imageviewer_more_press')
+      showActionSheetWithOptions(
+        {
+          options: [
+            t('content.options.save'),
+            t('content.options.share'),
+            t('content.options.cancel')
+          ],
+          cancelButtonIndex: 2
+        },
+        async buttonIndex => {
+          switch (buttonIndex) {
+            case 0:
+              analytics('imageviewer_more_save_press')
+              saveImage()
+              break
+            case 1:
+              analytics('imageviewer_more_share_press')
+              switch (Platform.OS) {
+                case 'ios':
+                  return Share.share({ url: imageUrls[currentIndex].url })
+                case 'android':
+                  return Share.share({ message: imageUrls[currentIndex].url })
+              }
+              break
+          }
+        }
+      )
+    }, [currentIndex])
+
+    return (
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: insets.top
+        }}
+      >
+        <HeaderLeft
+          content='X'
+          native={false}
+          onPress={() => navigation.goBack()}
+        />
+        <HeaderCenter
+          inverted
+          content={`${currentIndex + 1} / ${imageUrls.length}`}
+        />
+        <HeaderRight
+          content='MoreHorizontal'
+          native={false}
+          onPress={onPress}
+        />
+      </View>
+    )
+  },
+  (prev, next) => prev.currentIndex === next.currentIndex
+)

 export type ScreenImagesViewerProp = StackScreenProps<
  Nav.RootStackParamList,
@ -37,120 +146,24 @@ const ScreenImagesViewer = ({
    findIndex(imageUrls, ['imageIndex', imageIndex])
  )

-  const hasAndroidPermission = async () => {
-    const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
-
-    const hasPermission = await PermissionsAndroid.check(permission)
-    if (hasPermission) {
-      return true
-    }
-
-    const status = await PermissionsAndroid.request(permission)
-    return status === 'granted'
-  }
-  const saveImage = async () => {
-    if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
-      return
-    }
-    CameraRoll.save(
-      imageUrls[imageIndex].url ||
-        imageUrls[imageIndex].remote_url ||
-        imageUrls[imageIndex].preview_url
-    )
-      .then(() =>
-        toast({ type: 'success', message: t('content.save.success') })
-      )
-      .catch(() =>
-        toast({
-          type: 'error',
-          message: t('common:toastMessage.error.message', {
-            function: t('content.save.function')
-          })
-        })
-      )
-  }
-
-  const { t } = useTranslation('screenImageViewer')
-  const { showActionSheetWithOptions } = useActionSheet()
-  const onPress = useCallback(() => {
-    analytics('imageviewer_more_press')
-    showActionSheetWithOptions(
-      {
-        options: [
-          t('content.options.save'),
-          t('content.options.share'),
-          t('content.options.cancel')
-        ],
-        cancelButtonIndex: 2
-      },
-      async buttonIndex => {
-        switch (buttonIndex) {
-          case 0:
-            analytics('imageviewer_more_save_press')
-            saveImage()
-            break
-          case 1:
-            analytics('imageviewer_more_share_press')
-            switch (Platform.OS) {
-              case 'ios':
-                return Share.share({ url: imageUrls[currentIndex].url })
-              case 'android':
-                return Share.share({ message: imageUrls[currentIndex].url })
-            }
-            break
-        }
-      }
-    )
-  }, [currentIndex])
-
-  const HeaderComponent = useCallback(
-    () => (
-      <View
-        style={{
-          flex: 1,
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center'
-        }}
-      >
-        <HeaderLeft
-          content='X'
-          native={false}
-          onPress={() => navigation.goBack()}
-        />
-        <HeaderCenter
-          inverted
-          content={`${currentIndex + 1} / ${imageUrls.length}`}
-        />
-        <HeaderRight
-          content='MoreHorizontal'
-          native={false}
-          onPress={onPress}
-        />
-      </View>
-    ),
-    [currentIndex]
-  )
-
  return (
-    <SafeAreaView style={styles.base} edges={['top']}>
+    <SafeAreaProvider>
      <StatusBar backgroundColor='rgb(0,0,0)' />
      <ImageView
-        images={imageUrls.map(urls => ({ uri: urls.url }))}
+        images={imageUrls}
        imageIndex={imageIndex}
        onImageIndexChange={index => setCurrentIndex(index)}
        onRequestClose={() => navigation.goBack()}
-        HeaderComponent={HeaderComponent}
+        HeaderComponent={() => (
+          <HeaderComponent
+            navigation={navigation}
+            currentIndex={currentIndex}
+            imageUrls={imageUrls}
+          />
+        )}
      />
-    </SafeAreaView>
+    </SafeAreaProvider>
  )
 }

-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    backgroundColor: 'black'
-  }
-})
-
 export default ScreenImagesViewer