fix: auto restart video in gallery when end reached on Expo (#2304)

GetStream · Nov 13, 2023 · 9bfa408 · 9bfa408
1 parent 899aaf2
commit 9bfa408
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx
@@ -669,6 +669,7 @@ export const ImageGallery = <
           photoLength={imageGalleryAttachments.length}
           progress={imageGalleryAttachments[selectedIndex].progress || 0}
           selectedIndex={selectedIndex}
+          videoRef={videoRef}
           visible={headerFooterVisible}
           {...imageGalleryCustomComponents?.footer}
         />

diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
@@ -7,7 +7,7 @@ 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';
-import { deleteFile, saveFile, shareImage } from '../../../native';
+import { deleteFile, saveFile, shareImage, VideoType } from '../../../native';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
@@ -67,6 +67,7 @@ export type ImageGalleryFooterVideoControlProps = {
   onPlayPause: (status?: boolean) => void;
   paused: boolean;
   progress: number;
+  videoRef: React.RefObject<VideoType>;
 };
 
 export type ImageGalleryFooterVideoControlComponent = ({
@@ -100,6 +101,7 @@ type ImageGalleryFooterPropsWithContext<
   photoLength: number;
   progress: number;
   selectedIndex: number;
+  videoRef: React.RefObject<VideoType>;
   visible: Animated.SharedValue<number>;
 };
 
@@ -125,6 +127,7 @@ export const ImageGalleryFooterWithContext = <
     selectedIndex,
     ShareIcon,
     videoControlElement,
+    videoRef,
     visible,
   } = props;
 
@@ -181,13 +184,14 @@ export const ImageGalleryFooterWithContext = <
       <ReanimatedSafeAreaView style={[container, footerStyle, { backgroundColor: white }]}>
         {photo.type === 'video' ? (
           videoControlElement ? (
-            videoControlElement({ duration, onPlayPause, paused, progress })
+            videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
           ) : (
             <ImageGalleryVideoControl
               duration={duration}
               onPlayPause={onPlayPause}
               paused={paused}
               progress={progress}
+              videoRef={videoRef}
             />
           )
         ) : null}

diff --git a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
 
 export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlProps> = React.memo(
   (props) => {
-    const { duration, onPlayPause, paused, progress } = props;
+    const { duration, onPlayPause, paused, progress, videoRef } = props;
 
     const videoDuration = duration
       ? duration / 3600 >= 1
@@ -60,14 +60,19 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
       },
     } = useTheme();
 
+    const handlePlayPause = async () => {
+      if (progress === 1) {
+        // For expo CLI
+        if (videoRef.current?.setPositionAsync) {
+          await videoRef.current.setPositionAsync(0);
+        }
+      }
+      onPlayPause();
+    };
+
     return (
       <View style={[styles.videoContainer, videoContainer]}>
-        <TouchableOpacity
-          accessibilityLabel='Play Pause Button'
-          onPress={() => {
-            onPlayPause();
-          }}
-        >
+        <TouchableOpacity accessibilityLabel='Play Pause Button' onPress={handlePlayPause}>
           <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
             {paused ? (
               <Play accessibilityLabel='Play Icon' height={24} pathFill={static_black} width={24} />