stream-chat-expo 7.2.9 → 7.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-expo",
   "description": "The official Expo SDK for Stream Chat, a service for building chat applications",
-  "version": "7.2.9",
+  "version": "7.3.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -11,7 +11,7 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "mime": "^4.0.7",
-    "stream-chat-react-native-core": "7.2.9"
+    "stream-chat-react-native-core": "7.3.0"
   },
   "peerDependencies": {
     "expo": ">=51.0.0",

package/src/optionalDependencies/AudioVideo.ts

@@ -1,17 +1,20 @@
 let AudioComponent;
+let VideoComponent;
 let RecordingObject;
+
 try {
   const audioVideoPackage = require('expo-av');
   AudioComponent = audioVideoPackage.Audio;
+  VideoComponent = audioVideoPackage.Video;
   RecordingObject = audioVideoPackage.RecordingObject;
 } catch (e) {
   // do nothing
 }
 
-if (!AudioComponent) {
+if (!AudioComponent || !VideoComponent) {
   console.log(
     'Audio Video library is currently not installed. To allow in-app audio playback, install the "expo-av" package.',
   );
 }
 
-export { AudioComponent, RecordingObject };
+export { AudioComponent, RecordingObject, VideoComponent };

package/src/optionalDependencies/Video.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 import { useEventListener } from 'expo';
 
-import { AudioComponent } from './AudioVideo';
+import { AudioComponent, VideoComponent as ExpoAVVideoComponent } from './AudioVideo';
 
 let videoPackage;
 
@@ -18,56 +18,98 @@ if (!videoPackage) {
   );
 }
 
-const VideoComponent = videoPackage ? videoPackage.VideoView : null;
+const VideoComponent = videoPackage ? videoPackage.VideoView : ExpoAVVideoComponent;
 const useVideoPlayer = videoPackage ? videoPackage.useVideoPlayer : null;
 
-export const Video = videoPackage
-  ? ({ onLoadStart, onLoad, onEnd, onProgress, onBuffer, resizeMode, style, uri, videoRef }) => {
-      const player = useVideoPlayer(uri, (player) => {
-        player.timeUpdateEventInterval = 0.5;
-        videoRef.current = player;
-      });
+let Video = null;
 
-      useEventListener(player, 'statusChange', ({ status, oldStatus }) => {
-        if ((!oldStatus || oldStatus === 'idle') && status === 'loading') {
-          onLoadStart();
-        } else if ((oldStatus === 'loading' || oldStatus === 'idle') && status === 'readyToPlay') {
-          onLoad({ duration: player.duration });
-          onBuffer({ buffering: false });
-        } else if (oldStatus === 'readyToPlay' && status === 'loading') {
-          onBuffer({ buffering: true });
-        }
-      });
+// expo-video
+if (videoPackage) {
+  Video = ({
+    onLoadStart,
+    onLoad,
+    onEnd,
+    onProgress,
+    onBuffer,
+    resizeMode,
+    style,
+    uri,
+    videoRef,
+  }) => {
+    const player = useVideoPlayer(uri, (player) => {
+      player.timeUpdateEventInterval = 0.5;
+      videoRef.current = player;
+    });
+
+    useEventListener(player, 'statusChange', ({ status, oldStatus }) => {
+      if ((!oldStatus || oldStatus === 'idle') && status === 'loading') {
+        onLoadStart();
+      } else if ((oldStatus === 'loading' || oldStatus === 'idle') && status === 'readyToPlay') {
+        onLoad({ duration: player.duration });
+        onBuffer({ buffering: false });
+      } else if (oldStatus === 'readyToPlay' && status === 'loading') {
+        onBuffer({ buffering: true });
+      }
+    });
 
-      useEventListener(player, 'playToEnd', () => {
-        player.replay();
-        onEnd();
-      });
+    useEventListener(player, 'playToEnd', () => {
+      player.replay();
+      onEnd();
+    });
 
-      useEventListener(player, 'timeUpdate', ({ currentTime }) =>
-        onProgress({ currentTime, seekableDuration: player.duration }),
-      );
+    useEventListener(player, 'timeUpdate', ({ currentTime }) =>
+      onProgress({ currentTime, seekableDuration: player.duration }),
+    );
+
+    // This is done so that the audio of the video is not muted when the phone is in silent mode for iOS.
+    useEffect(() => {
+      const initializeSound = async () => {
+        if (AudioComponent) {
+          await AudioComponent.setAudioModeAsync({
+            playsInSilentModeIOS: true,
+          });
+        }
+      };
+      initializeSound();
+    }, []);
 
-      // This is done so that the audio of the video is not muted when the phone is in silent mode for iOS.
-      useEffect(() => {
-        const initializeSound = async () => {
-          if (AudioComponent) {
-            await AudioComponent.setAudioModeAsync({
-              playsInSilentModeIOS: true,
-            });
-          }
-        };
-        initializeSound();
-      }, []);
+    return (
+      <VideoComponent
+        allowsFullscreen
+        contentFit={resizeMode}
+        nativeControls={false}
+        player={player}
+        style={[style]}
+      />
+    );
+  };
+}
+// expo-av
+else if (ExpoAVVideoComponent) {
+  Video = ({ onPlaybackStatusUpdate, paused, resizeMode, style, uri, videoRef }) => {
+    // This is done so that the audio of the video is not muted when the phone is in silent mode for iOS.
+    useEffect(() => {
+      const initializeSound = async () => {
+        await AudioComponent.setAudioModeAsync({
+          playsInSilentModeIOS: true,
+        });
+      };
+      initializeSound();
+    }, []);
+
+    return (
+      <VideoComponent
+        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+        ref={videoRef}
+        resizeMode={resizeMode}
+        shouldPlay={!paused}
+        source={{
+          uri,
+        }}
+        style={[style]}
+      />
+    );
+  };
+}
 
-      return (
-        <VideoComponent
-          allowsFullscreen
-          contentFit={resizeMode}
-          nativeControls={false}
-          player={player}
-          style={[style]}
-        />
-      );
-    }
-  : null;
+export { Video };