fix: image gallery crash when many videos are present (#3380)

## 🎯 Goal

This PR fixes an issue only present in the in-development V9 version,
where we rely on videos refs to determine our interactions with a video
component.

As our clean-up function within the video player pool depends on the
`videoRef` being up to date, we have to respect React's lifecycle when
we want to run it (and make sure that the `videoRef` is always up to
date accordingly).

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

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

@@ -85,6 +85,10 @@ export const AnimatedGalleryVideo = React.memo(
       if (videoRef.current) {
         videoPlayer.initPlayer({ playerRef: videoRef.current });
       }
+
+      return () => {
+        videoPlayer.playerRef = null;
+      };
     }, [videoPlayer]);
 
     const { isPlaying } = useStateStore(videoPlayer.state, videoPlayerSelector);

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { Pressable, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
@@ -92,9 +92,14 @@ export const ImageGalleryHeader = (props: Props) => {
 
   const hideOverlay = () => {
     setOverlay('none');
-    imageGalleryStateStore.clear();
   };
 
+  useEffect(() => {
+    return () => {
+      imageGalleryStateStore.clear();
+    };
+  }, [imageGalleryStateStore]);
+
   return (
     <View
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}

package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx

@@ -159,7 +159,6 @@ export const useImageGalleryGestures = ({
   const assetsLength = imageGalleryStateStore.assets.length;
 
   const clearImageGallery = () => {
-    runOnJS(imageGalleryStateStore.clear)();
     runOnJS(setOverlay)('none');
   };
 

package/src/state-store/image-gallery-state-store.ts

@@ -219,7 +219,7 @@ export class ImageGalleryStateStore {
   };
 
   clear = () => {
-    this.state.partialNext(INITIAL_STATE);
     this.videoPlayerPool.clear();
+    this.state.partialNext(INITIAL_STATE);
   };
 }