stream-chat-react-native-core 4.6.1 → 4.7.0-beta.1

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -7,7 +7,7 @@ import { vw } from '../../../utils/utils';
 
 const screenWidth = vw(100);
 const halfScreenWidth = vw(50);
-const oneEight = 1 / 8;
+const oneEighth = 1 / 8;
 
 type Props = {
   index: number;
@@ -65,7 +65,7 @@ export const AnimatedGalleryImage: React.FC<Props> = React.memo(
             translateY: selected ? translateY.value + yScaleOffset : yScaleOffset,
           },
           {
-            scale: selected ? scale.value / 8 : oneEight,
+            scale: selected ? scale.value / 8 : oneEighth,
           },
           { scaleX: -1 },
         ],
@@ -78,7 +78,7 @@ export const AnimatedGalleryImage: React.FC<Props> = React.memo(
      * load on memory.
      */
     if (!shouldRender) {
-      return <View style={[style, { transform: [{ scale: oneEight }] }]} />;
+      return <View style={[style, { transform: [{ scale: oneEighth }] }]} />;
     }
 
     return (
@@ -95,7 +95,7 @@ export const AnimatedGalleryImage: React.FC<Props> = React.memo(
               {
                 translateX: -translateX.value + 7 * screenWidth * (0.5 + index),
               },
-              { scale: oneEight },
+              { scale: oneEighth },
             ],
           },
         ]}

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import type { StyleProp } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+
+import {
+  PlaybackStatus,
+  Video,
+  VideoPayloadData,
+  VideoProgressData,
+  VideoType,
+} from '../../../native';
+
+import { vw } from '../../../utils/utils';
+import { Spinner } from '../../Spinner/Spinner';
+
+const screenWidth = vw(100);
+const halfScreenWidth = vw(50);
+const oneEighth = 1 / 8;
+
+type Props = {
+  handleEnd: () => void;
+  handleLoad: (payload: VideoPayloadData) => void;
+  handleProgress: (data: VideoProgressData) => void;
+  index: number;
+  offsetScale: Animated.SharedValue<number>;
+  paused: boolean;
+  previous: boolean;
+  scale: Animated.SharedValue<number>;
+  screenHeight: number;
+  selected: boolean;
+  shouldRender: boolean;
+  source: { uri: string };
+  translateX: Animated.SharedValue<number>;
+  translateY: Animated.SharedValue<number>;
+  videoRef: React.RefObject<VideoType>;
+  style?: StyleProp<ViewStyle>;
+};
+
+const styles = StyleSheet.create({
+  activityIndicator: {
+    alignSelf: 'center',
+  },
+  videoPlayer: {
+    height: '100%',
+    width: '100%',
+  },
+});
+
+export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
+  (props) => {
+    const [opacity, setOpacity] = useState<number>(1);
+    const {
+      handleEnd,
+      handleLoad,
+      handleProgress,
+      index,
+      offsetScale,
+      paused,
+      previous,
+      scale,
+      screenHeight,
+      selected,
+      shouldRender,
+      source,
+      style,
+      translateX,
+      translateY,
+      videoRef,
+    } = props;
+
+    const onLoadStart = () => {
+      setOpacity(1);
+    };
+
+    const onLoad = (payload: VideoPayloadData) => {
+      setOpacity(0);
+      handleLoad(payload);
+    };
+
+    const onEnd = () => {
+      handleEnd();
+    };
+
+    const onProgress = (data: VideoProgressData) => {
+      handleProgress(data);
+    };
+
+    const onBuffer = ({ isBuffering }: { isBuffering: boolean }) => {
+      if (isBuffering) setOpacity(1);
+      else setOpacity(0);
+    };
+
+    const onPlayBackStatusUpdate = (playbackStatus: PlaybackStatus) => {
+      if (!playbackStatus.isLoaded) {
+        // Update your UI for the unloaded state
+        setOpacity(1);
+        if (playbackStatus.error) {
+          console.error(`Encountered a fatal error during playback: ${playbackStatus.error}`);
+        }
+      } else {
+        // Update your UI for the loaded state
+        setOpacity(0);
+        handleLoad({ duration: playbackStatus.durationMillis / 1000 });
+        if (playbackStatus.isPlaying) {
+          // Update your UI for the playing state
+          handleProgress({
+            currentTime: playbackStatus.positionMillis / 1000,
+            seekableDuration: playbackStatus.durationMillis / 1000,
+          });
+        }
+
+        if (playbackStatus.isBuffering) {
+          // Update your UI for the buffering state
+          setOpacity(1);
+        }
+
+        if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
+          // The player has just finished playing and will stop. Maybe you want to play something else?
+          handleEnd();
+        }
+      }
+    };
+
+    const animatedViewStyles = useAnimatedStyle<ViewStyle>(() => {
+      const xScaleOffset = -7 * screenWidth * (0.5 + index);
+      const yScaleOffset = -screenHeight * 3.5;
+      return {
+        transform: [
+          {
+            translateX: selected
+              ? translateX.value + xScaleOffset
+              : scale.value < 1 || scale.value !== offsetScale.value
+              ? xScaleOffset
+              : previous
+              ? translateX.value - halfScreenWidth * (scale.value - 1) + xScaleOffset
+              : translateX.value + halfScreenWidth * (scale.value - 1) + xScaleOffset,
+          },
+          {
+            translateY: selected ? translateY.value + yScaleOffset : yScaleOffset,
+          },
+          {
+            scale: selected ? scale.value / 8 : oneEighth,
+          },
+          { scaleX: -1 },
+        ],
+      };
+    }, [previous, selected]);
+
+    /**
+     * An empty view is rendered for images not close to the currently
+     * selected in order to maintain spacing while reducing the image
+     * load on memory.
+     */
+    if (!shouldRender) {
+      return <View style={[style, { transform: [{ scale: oneEighth }] }]} />;
+    }
+
+    return (
+      <Animated.View
+        style={[
+          style,
+          animatedViewStyles,
+          {
+            transform: [
+              { scaleX: -1 },
+              { translateY: -screenHeight * 3.5 },
+              {
+                translateX: -translateX.value + 7 * screenWidth * (0.5 + index),
+              },
+              { scale: oneEighth },
+            ],
+          },
+        ]}
+      >
+        <Video
+          onBuffer={onBuffer}
+          onEnd={onEnd}
+          onLoad={onLoad}
+          onLoadStart={onLoadStart}
+          onPlaybackStatusUpdate={onPlayBackStatusUpdate}
+          onProgress={onProgress}
+          paused={paused}
+          resizeMode='cover'
+          style={style}
+          uri={source.uri}
+          videoRef={videoRef}
+        />
+        <Animated.View
+          style={[
+            styles.activityIndicator,
+            {
+              opacity,
+              transform: [
+                { scaleX: -1 },
+                { translateY: -screenHeight * 4 },
+                { scale: 1 / oneEighth },
+              ],
+            },
+          ]}
+        >
+          <Spinner height={40} width={40} />
+        </Animated.View>
+      </Animated.View>
+    );
+  },
+
+  (prevProps, nextProps) => {
+    if (
+      prevProps.paused === nextProps.paused &&
+      prevProps.shouldRender === nextProps.shouldRender &&
+      prevProps.source.uri === nextProps.source.uri &&
+      prevProps.screenHeight === nextProps.screenHeight &&
+      prevProps.selected === nextProps.selected &&
+      prevProps.previous === nextProps.previous &&
+      prevProps.index === nextProps.index
+    ) {
+      return true;
+    }
+    return false;
+  },
+);
+
+AnimatedGalleryVideo.displayName = 'AnimatedGalleryVideo';

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
+import { ImageGalleryVideoControl } from './ImageGalleryVideoControl';
+
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
@@ -60,6 +62,22 @@ export type ImageGalleryFooterCustomComponent<
   photo?: Photo<StreamChatGenerics>;
 }) => React.ReactElement | null;
 
+export type ImageGalleryFooterVideoControlProps = {
+  duration: number;
+  onPlayPause: () => void;
+  onProgressDrag: (progress: number) => void;
+  paused: boolean;
+  progress: number;
+};
+
+export type ImageGalleryFooterVideoControlComponent = ({
+  duration,
+  onPlayPause,
+  onProgressDrag,
+  paused,
+  progress,
+}: ImageGalleryFooterVideoControlProps) => React.ReactElement | null;
+
 export type ImageGalleryFooterCustomComponentProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
@@ -68,41 +86,55 @@ export type ImageGalleryFooterCustomComponentProps<
   leftElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
   rightElement?: ImageGalleryFooterCustomComponent<StreamChatGenerics>;
   ShareIcon?: React.ReactElement;
+  videoControlElement?: ImageGalleryFooterVideoControlComponent;
 };
 
-type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
-  ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {
-    opacity: Animated.SharedValue<number>;
-    openGridView: () => void;
-    photo: Photo<StreamChatGenerics>;
-    photoLength: number;
-    selectedIndex: number;
-    visible: Animated.SharedValue<number>;
-  };
+type ImageGalleryFooterPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {
+  duration: number;
+  onPlayPause: () => void;
+  onProgressDrag: (progress: number) => void;
+  opacity: Animated.SharedValue<number>;
+  openGridView: () => void;
+  paused: boolean;
+  photo: Photo<StreamChatGenerics>;
+  photoLength: number;
+  progress: number;
+  selectedIndex: number;
+  visible: Animated.SharedValue<number>;
+};
 
-export const ImageGalleryFooter = <
+export const ImageGalleryFooterWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: Props<StreamChatGenerics>,
+  props: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     centerElement,
+    duration,
     GridIcon,
     leftElement,
+    onPlayPause,
+    onProgressDrag,
     opacity,
     openGridView,
+    paused,
     photo,
     photoLength,
+    progress,
     rightElement,
     selectedIndex,
     ShareIcon,
+    videoControlElement,
     visible,
   } = props;
+
   const [height, setHeight] = useState(200);
   const [shareMenuOpen, setShareMenuOpen] = useState(false);
   const {
     theme: {
-      colors: { black, white },
+      colors: { black },
       imageGallery: {
         footer: {
           centerContainer,
@@ -126,18 +158,21 @@ export const ImageGalleryFooter = <
         },
       ],
     }),
-    [],
+    [height],
   );
 
   const share = async () => {
     setShareMenuOpen(true);
     try {
-      const localImage = await saveFile({
-        fileName: `${photo.user?.id || 'ChatPhoto'}-${photo.messageId}-${selectedIndex}.jpg`,
+      const extension = photo.mime_type?.split('/')[1] || 'jpg';
+      const localFile = await saveFile({
+        fileName: `${photo.user?.id || 'ChatPhoto'}-${
+          photo.messageId
+        }-${selectedIndex}.${extension}`,
         fromUrl: photo.uri,
       });
-      await shareImage({ type: 'image/jpeg', url: localImage });
-      await deleteFile({ uri: localImage });
+      await shareImage({ type: photo.mime_type, url: localFile });
+      await deleteFile({ uri: localFile });
     } catch (error) {
       console.log(error);
     }
@@ -150,8 +185,21 @@ export const ImageGalleryFooter = <
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, container, footerStyle]}>
-        <View style={[styles.innerContainer, innerContainer]}>
+      <ReanimatedSafeAreaView style={[container, footerStyle]}>
+        {photo.type === 'video' ? (
+          videoControlElement ? (
+            videoControlElement({ duration, onPlayPause, onProgressDrag, paused, progress })
+          ) : (
+            <ImageGalleryVideoControl
+              duration={duration}
+              onPlayPause={onPlayPause}
+              onProgressDrag={onProgressDrag}
+              paused={paused}
+              progress={progress}
+            />
+          )
+        ) : null}
+        <View style={[styles.innerContainer, innerContainer, { backgroundColor: 'white' }]}>
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
           ) : (
@@ -188,4 +236,51 @@ export const ImageGalleryFooter = <
   );
 };
 
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,
+  nextProps: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    duration: prevDuration,
+    paused: prevPaused,
+    progress: prevProgress,
+    selectedIndex: prevSelectedIndex,
+  } = prevProps;
+  const {
+    duration: nextDuration,
+    paused: nextPaused,
+    progress: nextProgress,
+    selectedIndex: nextSelectedIndex,
+  } = nextProps;
+
+  const isDurationEqual = prevDuration === nextDuration;
+  if (!isDurationEqual) return false;
+
+  const isPausedEqual = prevPaused === nextPaused;
+  if (!isPausedEqual) return false;
+
+  const isProgressEqual = prevProgress === nextProgress;
+  if (!isProgressEqual) return false;
+
+  const isSelectedIndexEqual = prevSelectedIndex === nextSelectedIndex;
+  if (!isSelectedIndexEqual) return false;
+
+  return true;
+};
+
+const MemoizedImageGalleryFooter = React.memo(
+  ImageGalleryFooterWithContext,
+  areEqual,
+) as typeof ImageGalleryFooterWithContext;
+
+export type ImageGalleryFooterProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ImageGalleryFooterPropsWithContext<StreamChatGenerics>;
+
+export const ImageGalleryFooter = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ImageGalleryFooterProps<StreamChatGenerics>,
+) => <MemoizedImageGalleryFooter {...props} />;
+
 ImageGalleryFooter.displayName = 'ImageGalleryFooter{imageGallery{footer}}';

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import dayjs from 'dayjs';
+
+import type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';
+import { ProgressControl } from './ProgressControl';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+
+import { Pause, Play } from '../../../icons';
+
+const styles = StyleSheet.create({
+  durationTextStyle: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  roundedView: {
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 50,
+    display: 'flex',
+    elevation: 2,
+    height: 36,
+    justifyContent: 'center',
+    width: 36,
+  },
+  videoContainer: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(52, 52, 52, 0.1)',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 10,
+  },
+});
+
+export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlProps> = React.memo(
+  (props) => {
+    const { duration, onPlayPause, onProgressDrag, paused, progress } = props;
+
+    const videoDuration = duration
+      ? duration / 3600 >= 1
+        ? dayjs.duration(duration, 'second').format('HH:mm:ss')
+        : dayjs.duration(duration, 'second').format('mm:ss')
+      : null;
+
+    const progressValueInSeconds = progress * duration;
+
+    const progressDuration = progressValueInSeconds
+      ? progressValueInSeconds / 3600 >= 1
+        ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')
+        : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')
+      : null;
+
+    const {
+      theme: {
+        imageGallery: {
+          videoControl: { durationTextStyle, roundedView, videoContainer },
+        },
+      },
+    } = useTheme();
+
+    return (
+      <View style={[styles.videoContainer, videoContainer]}>
+        <TouchableOpacity onPress={onPlayPause}>
+          <View style={[styles.roundedView, roundedView]}>
+            {paused ? (
+              <Play height={24} pathFill={'#000'} width={24} />
+            ) : (
+              <Pause height={24} width={24} />
+            )}
+          </View>
+        </TouchableOpacity>
+        <Text style={[styles.durationTextStyle, durationTextStyle]}>
+          {progressDuration ? progressDuration : '00:00'}
+        </Text>
+        <ProgressControl
+          duration={duration}
+          onPlayPause={onPlayPause}
+          onProgressDrag={onProgressDrag}
+          progress={progress}
+        />
+        <Text style={[styles.durationTextStyle, durationTextStyle]}>
+          {videoDuration ? videoDuration : '00:00'}
+        </Text>
+      </View>
+    );
+  },
+  (prevProps, nextProps) => {
+    if (
+      prevProps.duration === nextProps.duration &&
+      prevProps.paused === nextProps.paused &&
+      prevProps.progress === nextProps.progress
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  },
+);
+
+ImageGalleryVideoControl.displayName = 'ImageGalleryVideoControl{imageGallery{videoControl}}';

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { ImageBackground, StyleSheet } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
 
 import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
+import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { vw } from '../../../utils/utils';
-import { Avatar } from '../../Avatar/Avatar';
 
 import type { Photo } from '../ImageGallery';
 
@@ -66,15 +66,14 @@ const GridImage = <
 }) => {
   const {
     theme: {
-      colors: { white },
       imageGallery: {
-        grid: { gridAvatar, gridAvatarWrapper, gridImage },
+        grid: { gridImage },
       },
     },
   } = useTheme();
-  const { avatarComponent, imageComponent, ...restItem } = item;
+  const { imageComponent, ...restItem } = item;
 
-  const { numberOfImageGalleryGridColumns, selectAndClose, uri, user } = restItem;
+  const { numberOfImageGalleryGridColumns, selectAndClose, type, uri } = restItem;
 
   const size = vw(100) / (numberOfImageGalleryGridColumns || 3) - 2;
 
@@ -84,25 +83,13 @@ const GridImage = <
 
   return (
     <TouchableOpacity onPress={selectAndClose}>
-      <ImageBackground
-        source={{ uri }}
-        style={[styles.image, { height: size, width: size }, gridImage]}
-      >
-        {avatarComponent
-          ? avatarComponent({ item: restItem })
-          : !!user?.image && (
-              <Avatar
-                containerStyle={[
-                  styles.avatarImageWrapper,
-                  { backgroundColor: white },
-                  gridAvatarWrapper,
-                ]}
-                image={user.image}
-                imageStyle={gridAvatar}
-                size={22}
-              />
-            )}
-      </ImageBackground>
+      {type === 'video' ? (
+        <View style={[styles.image, { height: size, width: size }, gridImage]}>
+          <VideoThumbnail />
+        </View>
+      ) : (
+        <Image source={{ uri }} style={[styles.image, { height: size, width: size }]} />
+      )}
     </TouchableOpacity>
   );
 };