@kesha-antonov/react-native-chat 5.0.1 → 6.0.0

package/lib/MessageImage.js

@@ -1,169 +1,438 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Image, StyleSheet, View, useWindowDimensions, StatusBar, Text } from 'react-native';
-import { BaseButton, GestureHandlerRootView } from 'react-native-gesture-handler';
-import { OverKeyboardView } from 'react-native-keyboard-controller';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, } from 'react-native-reanimated';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
-import Zoom from 'react-native-zoom-reanimated';
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback, useMemo, useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { isRemoteUri } from './components/mediaDownload';
+import { MEDIA_BUTTON_SIZE, MEDIA_LOADER_BACKGROUND, MEDIA_LOADER_ICON, MediaInfoPill, transferLabel } from './components/MediaLoader';
+import { clampProgress, useMediaTransfer } from './components/mediaTransfer';
+import { useMediaGallery } from './components/mediaViewer/gallery';
+import { MediaViewer } from './components/mediaViewer/MediaViewer';
+import { suppressPressAfterHold } from './components/messagePress';
+import { RadialProgress } from './components/RadialProgress';
 import { TouchableOpacity } from './components/TouchableOpacity';
+import { useThemedStyles } from './hooks/useTheme';
+import { getExpoImage } from './optional';
 import commonStyles from './styles';
-function ModalContent({ isVisible, imageSource, modalImageDimensions, imageProps, onClose }) {
-    const insets = useSafeAreaInsets();
-    // Animation values
-    const modalOpacity = useSharedValue(0);
-    const modalScale = useSharedValue(0.9);
-    const modalBorderRadius = useSharedValue(40);
-    const handleModalClose = useCallback(() => {
-        modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) });
-        modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
-            runOnJS(onClose)();
-        });
-        modalBorderRadius.value = withTiming(40, { duration: 200, easing: Easing.in(Easing.ease) });
-    }, [onClose, modalOpacity, modalScale, modalBorderRadius]);
-    // Animate on visibility change
-    useEffect(() => {
-        if (isVisible) {
-            modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) });
-            modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) });
-            modalBorderRadius.value = withTiming(0, { duration: 300, easing: Easing.out(Easing.ease) });
-        }
-    }, [isVisible, modalOpacity, modalScale, modalBorderRadius]);
-    const modalAnimatedStyle = useAnimatedStyle(() => ({
-        opacity: modalOpacity.value,
-        transform: [{ scale: modalScale.value }],
-    }));
-    const modalBorderRadiusStyle = useAnimatedStyle(() => ({
-        borderRadius: modalBorderRadius.value,
-    }));
-    return (<>
-      <StatusBar animated barStyle='dark-content'/>
-      <Animated.View style={[styles.modalOverlay, modalAnimatedStyle, modalBorderRadiusStyle]}>
-        <GestureHandlerRootView style={commonStyles.fill}>
-          <Animated.View style={[commonStyles.fill, styles.modalContent, modalBorderRadiusStyle, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-
-            {/* close button */}
-            <View style={styles.closeButtonContainer}>
-              <BaseButton onPress={handleModalClose}>
-                <View style={styles.closeButtonContent}>
-                  <Text style={styles.closeButtonIcon}>
-                    {'X'}
-                  </Text>
-                </View>
-              </BaseButton>
-            </View>
+const expoImage = getExpoImage();
+const ExpoImage = expoImage?.Image ?? null;
 
-            <View style={[commonStyles.fill, commonStyles.centerItems]}>
-              <Zoom>
-                <Image style={modalImageDimensions} source={imageSource} resizeMode='contain' {...imageProps}/>
-              </Zoom>
-            </View>
-          </Animated.View>
-        </GestureHandlerRootView>
-      </Animated.View>
-    </>);
-}
-export function MessageImage({ containerStyle, imageProps, imageSourceProps, imageStyle, currentMessage, }) {
-    const [isModalVisible, setIsModalVisible] = useState(false);
-    const [imageDimensions, setImageDimensions] = useState();
-    const windowDimensions = useWindowDimensions();
-    const imageSource = useMemo(() => ({
-        ...imageSourceProps,
-        uri: currentMessage?.image,
-    }), [imageSourceProps, currentMessage?.image]);
-    const isImageSourceChanged = useRef(true);
-    const computedImageStyle = useMemo(() => [
-        styles.image,
-        imageStyle,
-    ], [imageStyle]);
-    const handleImagePress = useCallback(() => {
-        if (!imageSource.uri)
-            return;
-        setIsModalVisible(true);
-        if (isImageSourceChanged.current || !imageDimensions)
-            Image.getSize(imageSource.uri, (width, height) => {
-                setImageDimensions({ width, height });
-            });
-    }, [imageSource.uri, imageDimensions]);
-    const handleModalClose = useCallback(() => {
-        setIsModalVisible(false);
-    }, []);
-    const handleImageLayout = useCallback((e) => {
-        setImageDimensions({
-            width: e.nativeEvent.layout.width,
-            height: e.nativeEvent.layout.height,
-        });
-    }, []);
-    const modalImageDimensions = useMemo(() => {
-        if (!imageDimensions)
-            return undefined;
-        const aspectRatio = imageDimensions.width / imageDimensions.height;
-        let width = windowDimensions.width;
-        let height = width / aspectRatio;
-        if (height > windowDimensions.height) {
-            height = windowDimensions.height;
-            width = height * aspectRatio;
+/** `ImageReceiver`'s crossfade when a photo arrives (`setCrossfadeDuration`, 150ms). */
+export const IMAGE_CROSSFADE_MS = 150;
+/**
+ * What sits under a photo until it has loaded: its blurred thumbnail when the message has one,
+ * else a plain fill in the bubble's track color.
+ */
+const ImagePlaceholder = t0 => {
+  const $ = _c(17);
+  const {
+    placeholder,
+    style
+  } = t0;
+  const fill = useThemedStyles(createPlaceholderStyles);
+  if (placeholder && isRemoteUri(placeholder) || placeholder?.startsWith("file:") || placeholder?.startsWith("data:")) {
+    let t1;
+    if ($[0] !== style) {
+      t1 = [style, StyleSheet.absoluteFill];
+      $[0] = style;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== placeholder) {
+      t2 = {
+        uri: placeholder
+      };
+      $[2] = placeholder;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    let t3;
+    if ($[4] !== t1 || $[5] !== t2) {
+      t3 = <Image style={t1} source={t2} blurRadius={8} resizeMode="cover" />;
+      $[4] = t1;
+      $[5] = t2;
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    return t3;
+  }
+  if (placeholder && ExpoImage) {
+    let t1;
+    if ($[7] !== style) {
+      t1 = [style, StyleSheet.absoluteFill];
+      $[7] = style;
+      $[8] = t1;
+    } else {
+      t1 = $[8];
+    }
+    let t2;
+    if ($[9] !== placeholder) {
+      t2 = {
+        blurhash: placeholder
+      };
+      $[9] = placeholder;
+      $[10] = t2;
+    } else {
+      t2 = $[10];
+    }
+    let t3;
+    if ($[11] !== t1 || $[12] !== t2) {
+      t3 = <ExpoImage style={t1} placeholder={t2} contentFit="cover" />;
+      $[11] = t1;
+      $[12] = t2;
+      $[13] = t3;
+    } else {
+      t3 = $[13];
+    }
+    return t3;
+  }
+  let t1;
+  if ($[14] !== fill.fill || $[15] !== style) {
+    t1 = <View testID="message-image-placeholder" style={[style, StyleSheet.absoluteFill, fill.fill]} />;
+    $[14] = fill.fill;
+    $[15] = style;
+    $[16] = t1;
+  } else {
+    t1 = $[16];
+  }
+  return t1;
+};
+const createPlaceholderStyles = theme => StyleSheet.create({
+  fill: {
+    backgroundColor: theme.colors.incomingVoiceTrack
+  }
+});
+export function MessageImage(t0) {
+  const $ = _c(77);
+  const {
+    containerStyle,
+    imageProps,
+    imageSourceProps,
+    imageStyle,
+    currentMessage
+  } = t0;
+  const gallery = useMediaGallery();
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+  const mediaTransfer = useMediaTransfer();
+  const uri = currentMessage?.image;
+  const transfer = currentMessage?.transfer;
+  const isDownloadRequired = !!currentMessage?.isDownloadRequired;
+  const isRemote = isRemoteUri(uri);
+  const [attempt, setAttempt] = useState(0);
+  const [isCancelled, setIsCancelled] = useState(false);
+  const [isRequested, setIsRequested] = useState(false);
+  const loadKey = `${uri}#${attempt}`;
+  const [loadResult, setLoadResult] = useState();
+  const loadState = loadResult?.key === loadKey ? loadResult.state : isRemote ? "loading" : "loaded";
+  const shouldLoad = transfer?.type !== "download" && !isCancelled && (!isDownloadRequired || isRequested);
+  const loadProgress = useSharedValue(0);
+  const [loadLabel, setLoadLabel] = useState(null);
+  const imageOpacity = useSharedValue(isRemote ? 0 : 1);
+  const imageFadeStyle = useAnimatedStyle(() => ({
+    opacity: imageOpacity.value
+  }));
+  currentMessage?.image;
+  const t1 = currentMessage?.image;
+  let t2;
+  if ($[0] !== imageSourceProps || $[1] !== t1) {
+    t2 = {
+      ...imageSourceProps,
+      uri: t1
+    };
+    $[0] = imageSourceProps;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const imageSource = t2;
+  let t3;
+  if ($[3] !== imageStyle) {
+    t3 = [styles.image, imageStyle];
+    $[3] = imageStyle;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const computedImageStyle = t3;
+  let buttonIcon;
+  if ($[5] !== loadState || $[6] !== shouldLoad || $[7] !== transfer) {
+    buttonIcon = "none";
+    if (transfer) {
+      buttonIcon = "cancel";
+    } else {
+      if (!shouldLoad || loadState === "error") {
+        buttonIcon = "download";
+      } else {
+        if (loadState === "loading") {
+          buttonIcon = "cancel";
         }
-        return {
-            width,
-            height,
-        };
-    }, [imageDimensions, windowDimensions.height, windowDimensions.width]);
-    useEffect(() => {
-        isImageSourceChanged.current = true;
-    }, [imageSource.uri]);
-    if (currentMessage == null)
-        return null;
-    return (<View style={containerStyle}>
-      <TouchableOpacity onPress={handleImagePress} testID='message-image-touchable'>
-        <Image {...imageProps} style={computedImageStyle} source={imageSource} onLayout={handleImageLayout} resizeMode='cover'/>
-      </TouchableOpacity>
-
-      {/* Mounted only once opened. `ModalContent` holds three shared values and the animated
-            styles over them, and `SafeAreaProvider` is a context provider of its own, so leaving
-            this in the tree put all of it on every image message in the conversation for a viewer
-            almost none of them will ever show. It mounts already-visible, and its open animation
-            runs from the same effect that used to react to `isVisible` flipping. */}
-      {isModalVisible && (<OverKeyboardView visible>
-          <SafeAreaProvider>
-            <ModalContent isVisible imageSource={imageSource} modalImageDimensions={modalImageDimensions} imageProps={imageProps} onClose={handleModalClose}/>
-          </SafeAreaProvider>
-        </OverKeyboardView>)}
-    </View>);
+      }
+    }
+    $[5] = loadState;
+    $[6] = shouldLoad;
+    $[7] = transfer;
+    $[8] = buttonIcon;
+  } else {
+    buttonIcon = $[8];
+  }
+  const [hasShownButton, setHasShownButton] = useState(buttonIcon !== "none");
+  if (!hasShownButton && buttonIcon !== "none") {
+    setHasShownButton(true);
+  }
+  let t4;
+  if ($[9] !== loadProgress) {
+    t4 = () => {
+      loadProgress.set(0);
+    };
+    $[9] = loadProgress;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const onLoadStart = t4;
+  let t5;
+  if ($[11] !== loadProgress) {
+    t5 = event => {
+      const {
+        loaded,
+        total
+      } = event.nativeEvent;
+      if (!(total > 0)) {
+        return;
+      }
+      loadProgress.set(loaded / total);
+      const label = transferLabel(loaded / total, total);
+      setLoadLabel(previous => previous === label ? previous : label);
+    };
+    $[11] = loadProgress;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const onLoadProgress = t5;
+  let t6;
+  if ($[13] !== imageOpacity || $[14] !== loadKey) {
+    t6 = () => {
+      setLoadResult({
+        key: loadKey,
+        state: "loaded"
+      });
+      imageOpacity.set(withTiming(1, {
+        duration: IMAGE_CROSSFADE_MS
+      }));
+    };
+    $[13] = imageOpacity;
+    $[14] = loadKey;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  const onLoad = t6;
+  let t7;
+  if ($[16] !== loadKey) {
+    t7 = () => {
+      setLoadResult({
+        key: loadKey,
+        state: "error"
+      });
+    };
+    $[16] = loadKey;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  const onError = t7;
+  let t8;
+  if ($[18] !== currentMessage || $[19] !== gallery || $[20] !== imageSource.uri) {
+    t8 = () => {
+      if (!imageSource.uri || !currentMessage) {
+        return;
+      }
+      if (gallery) {
+        gallery.open(currentMessage._id);
+      } else {
+        setIsViewerOpen(true);
+      }
+    };
+    $[18] = currentMessage;
+    $[19] = gallery;
+    $[20] = imageSource.uri;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  const handleImagePress = t8;
+  let t9;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => setIsViewerOpen(false);
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  const closeViewer = t9;
+  if (currentMessage == null) {
+    return null;
+  }
+  let t10;
+  if ($[23] !== buttonIcon || $[24] !== currentMessage || $[25] !== handleImagePress || $[26] !== imageOpacity || $[27] !== isDownloadRequired || $[28] !== loadState || $[29] !== mediaTransfer || $[30] !== transfer) {
+    t10 = () => {
+      if (transfer) {
+        mediaTransfer.onCancel(currentMessage);
+        return;
+      }
+      if (buttonIcon === "download") {
+        setIsCancelled(false);
+        if (loadState === "error") {
+          imageOpacity.set(0);
+          setAttempt(_temp);
+        } else {
+          if (isDownloadRequired && mediaTransfer.hasDownloadHandler()) {
+            mediaTransfer.onDownload(currentMessage);
+          } else {
+            setIsRequested(true);
+          }
+        }
+        return;
+      }
+      if (buttonIcon === "cancel") {
+        setIsCancelled(true);
+        return;
+      }
+      handleImagePress();
+    };
+    $[23] = buttonIcon;
+    $[24] = currentMessage;
+    $[25] = handleImagePress;
+    $[26] = imageOpacity;
+    $[27] = isDownloadRequired;
+    $[28] = loadState;
+    $[29] = mediaTransfer;
+    $[30] = transfer;
+    $[31] = t10;
+  } else {
+    t10 = $[31];
+  }
+  const onPress = t10;
+  let t11;
+  if ($[32] !== buttonIcon || $[33] !== loadLabel || $[34] !== transfer) {
+    t11 = transfer ? transferLabel(clampProgress(transfer.progress), transfer.totalBytes) : buttonIcon === "cancel" ? loadLabel : null;
+    $[32] = buttonIcon;
+    $[33] = loadLabel;
+    $[34] = transfer;
+    $[35] = t11;
+  } else {
+    t11 = $[35];
+  }
+  const transferText = t11;
+  const buttonLabel = buttonIcon === "cancel" ? transfer?.type === "upload" ? "cancel upload" : "cancel download" : buttonIcon === "download" ? "download photo" : "photo";
+  let t12;
+  if ($[36] !== buttonIcon || $[37] !== computedImageStyle || $[38] !== currentMessage || $[39] !== loadState) {
+    t12 = loadState !== "loaded" || buttonIcon !== "none" ? <ImagePlaceholder placeholder={currentMessage.imagePlaceholder} style={computedImageStyle} /> : null;
+    $[36] = buttonIcon;
+    $[37] = computedImageStyle;
+    $[38] = currentMessage;
+    $[39] = loadState;
+    $[40] = t12;
+  } else {
+    t12 = $[40];
+  }
+  let t13;
+  if ($[41] !== computedImageStyle || $[42] !== imageFadeStyle || $[43] !== imageProps || $[44] !== imageSource || $[45] !== loadKey || $[46] !== onError || $[47] !== onLoad || $[48] !== onLoadProgress || $[49] !== onLoadStart || $[50] !== shouldLoad || $[51] !== transfer?.type) {
+    t13 = shouldLoad || transfer?.type === "upload" ? <Animated.View style={imageFadeStyle}><Image key={loadKey} testID="message-image" {...imageProps} style={computedImageStyle} source={imageSource} onLoadStart={onLoadStart} onProgress={onLoadProgress} onLoad={onLoad} onError={onError} resizeMode="cover" /></Animated.View> : <View style={computedImageStyle} />;
+    $[41] = computedImageStyle;
+    $[42] = imageFadeStyle;
+    $[43] = imageProps;
+    $[44] = imageSource;
+    $[45] = loadKey;
+    $[46] = onError;
+    $[47] = onLoad;
+    $[48] = onLoadProgress;
+    $[49] = onLoadStart;
+    $[50] = shouldLoad;
+    $[51] = transfer?.type;
+    $[52] = t13;
+  } else {
+    t13 = $[52];
+  }
+  let t14;
+  if ($[53] !== buttonIcon || $[54] !== hasShownButton || $[55] !== loadProgress || $[56] !== transfer) {
+    t14 = hasShownButton && <View style={[StyleSheet.absoluteFill, commonStyles.centerItems]} pointerEvents="none"><RadialProgress icon={buttonIcon} progress={transfer ? clampProgress(transfer.progress) : loadProgress} size={MEDIA_BUTTON_SIZE} color={MEDIA_LOADER_ICON} backgroundColor={MEDIA_LOADER_BACKGROUND} /></View>;
+    $[53] = buttonIcon;
+    $[54] = hasShownButton;
+    $[55] = loadProgress;
+    $[56] = transfer;
+    $[57] = t14;
+  } else {
+    t14 = $[57];
+  }
+  let t15;
+  if ($[58] !== transferText) {
+    t15 = transferText != null && <MediaInfoPill label={transferText} />;
+    $[58] = transferText;
+    $[59] = t15;
+  } else {
+    t15 = $[59];
+  }
+  let t16;
+  if ($[60] !== t12 || $[61] !== t13 || $[62] !== t14 || $[63] !== t15) {
+    t16 = <View>{t12}{t13}{t14}{t15}</View>;
+    $[60] = t12;
+    $[61] = t13;
+    $[62] = t14;
+    $[63] = t15;
+    $[64] = t16;
+  } else {
+    t16 = $[64];
+  }
+  let t17;
+  if ($[65] !== buttonLabel || $[66] !== onPress || $[67] !== t16) {
+    t17 = <TouchableOpacity onPress={onPress} {...suppressPressAfterHold} testID="message-image-touchable" accessibilityLabel={buttonLabel}>{t16}</TouchableOpacity>;
+    $[65] = buttonLabel;
+    $[66] = onPress;
+    $[67] = t16;
+    $[68] = t17;
+  } else {
+    t17 = $[68];
+  }
+  let t18;
+  if ($[69] !== currentMessage || $[70] !== imageProps || $[71] !== isViewerOpen) {
+    t18 = isViewerOpen && <MediaViewer items={[currentMessage]} initialIndex={0} imageProps={imageProps} onClose={closeViewer} />;
+    $[69] = currentMessage;
+    $[70] = imageProps;
+    $[71] = isViewerOpen;
+    $[72] = t18;
+  } else {
+    t18 = $[72];
+  }
+  let t19;
+  if ($[73] !== containerStyle || $[74] !== t17 || $[75] !== t18) {
+    t19 = <View style={containerStyle}>{t17}{t18}</View>;
+    $[73] = containerStyle;
+    $[74] = t17;
+    $[75] = t18;
+    $[76] = t19;
+  } else {
+    t19 = $[76];
+  }
+  return t19;
+}
+function _temp(value) {
+  return value + 1;
 }
 const styles = StyleSheet.create({
-    image: {
-        width: 150,
-        height: 100,
-        borderRadius: 13,
-        margin: 3,
-    },
-    modalOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 1000,
-    },
-    modalContent: {
-        backgroundColor: '#000',
-        overflow: 'hidden',
-    },
-    modalImageContainer: {
-        width: '100%',
-        height: '100%',
-    },
-    closeButtonContainer: {
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-    },
-    closeButtonContent: {
-        padding: 20,
-    },
-    closeButtonIcon: {
-        fontSize: 20,
-        lineHeight: 20,
-        color: 'white',
-    },
+  // `Bubble` insets the photo by 2 and rounds its corners to follow the bubble's. The width is
+  // a minimum, not fixed: a caption wider than the photo widens the bubble, and the photo
+  // then widens to fill it rather than
+  // leaving a strip of bubble beside it. The source is always a uri, so the image has no
+  // intrinsic size of its own to grow to.
+  image: {
+    minWidth: 240,
+    height: 180,
+    borderRadius: 15
+  }
 });
 //# sourceMappingURL=MessageImage.js.map