From dcbe297d658adcd9726485b08177c4f6c684fc27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fl=C3=A1vio=20Juvenal?= <flavio@vinta.com.br>
Date: Wed, 15 Jan 2025 22:45:36 -0300
Subject: [PATCH] Prevent unnecessary re-renders for VideoAttachment

---
 components/ChatMessageBubble.tsx | 90 ++++++++++++++++----------------
 utils/media.ts                   | 18 +++++--
 2 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/components/ChatMessageBubble.tsx b/components/ChatMessageBubble.tsx
index 5c3d7ae..301aa6b 100644
--- a/components/ChatMessageBubble.tsx
+++ b/components/ChatMessageBubble.tsx
@@ -3,7 +3,7 @@ import { Image } from "expo-image";
 import { useVideoPlayer } from "expo-video";
 import { VideoView } from "expo-video";
 import { CirclePlay, FileDown, UserRound } from "lucide-react-native";
-import { useCallback, useRef, useState } from "react";
+import { memo, useCallback, useRef, useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { Alert } from "react-native";
 
@@ -14,7 +14,7 @@ import { Text } from "@/components/ui/text";
 import type { ChatMessage } from "@/models/chat";
 import type { AttachmentWithUrl } from "@/types/attachment";
 import { formatTime } from "@/utils/datetime";
-import { mediaKey, shareFile } from "@/utils/media";
+import { isMediaExpired, mediaKey, shareFile } from "@/utils/media";
 
 interface ChatMessageBubbleProps {
   message: ChatMessage;
@@ -28,50 +28,53 @@ const mediaStyles = StyleSheet.create({
   },
 });
 
-function VideoAttachment({ uri }: { uri: string }) {
-  const player = useVideoPlayer(uri, (player) => {
-    player.loop = true;
-    player.bufferOptions = {
-      minBufferForPlayback: 0,
-      preferredForwardBufferDuration: 5,
-      maxBufferBytes: 0,
-      prioritizeTimeOverSizeThreshold: false,
-      waitsToMinimizeStalling: true,
-    };
-  });
-  const videoRef = useRef<VideoView>(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
+const VideoAttachment = memo(
+  ({ uri }: { uri: string }) => {
+    const player = useVideoPlayer(uri, (player) => {
+      player.loop = true;
+      player.bufferOptions = {
+        // Reduce buffer for performance:
+        minBufferForPlayback: 0,
+        preferredForwardBufferDuration: 5,
+      };
+    });
+    const videoRef = useRef<VideoView>(null);
+    const [isFullscreen, setIsFullscreen] = useState(false);
 
-  const handlePlayPress = useCallback(() => {
-    if (!player) return;
-    player.play();
-    videoRef.current?.enterFullscreen();
-    setIsFullscreen(true);
-  }, [player]);
+    const handlePlayPress = useCallback(() => {
+      if (!player) return;
+      player.play();
+      videoRef.current?.enterFullscreen();
+      setIsFullscreen(true);
+    }, [player]);
 
-  const handleExitFullscreen = useCallback(() => {
-    setIsFullscreen(false);
-  }, []);
+    const handleExitFullscreen = useCallback(() => {
+      player?.pause();
+      setIsFullscreen(false);
+    }, [player]);
 
-  return (
-    <View className="relative">
-      <VideoView
-        ref={videoRef}
-        key={mediaKey(uri)}
-        style={mediaStyles.media}
-        player={player}
-        nativeControls={isFullscreen}
-        onFullscreenExit={handleExitFullscreen}
-      />
-      <Pressable
-        onPress={handlePlayPress}
-        className="absolute inset-0 items-center justify-center bg-black/50"
-      >
-        <Icon as={CirclePlay} size="xl" className="text-typography-0" />
-      </Pressable>
-    </View>
-  );
-}
+    return (
+      <View className="relative">
+        <VideoView
+          ref={videoRef}
+          style={mediaStyles.media}
+          player={player}
+          nativeControls={isFullscreen}
+          onFullscreenExit={handleExitFullscreen}
+        />
+        <Pressable
+          onPress={handlePlayPress}
+          className="absolute inset-0 items-center justify-center bg-black/50"
+        >
+          <Icon as={CirclePlay} size="xl" className="text-typography-0" />
+        </Pressable>
+      </View>
+    );
+  },
+  (oldProps: { uri: string }, newProps: { uri: string }) =>
+    mediaKey(oldProps.uri) === mediaKey(newProps.uri) && !isMediaExpired(oldProps.uri),
+);
+VideoAttachment.displayName = "VideoAttachment";
 
 function FileAttachment({ attachment }: { attachment: AttachmentWithUrl }) {
   const [isDownloading, setIsDownloading] = useState(false);
@@ -129,7 +132,6 @@ export function ChatMessageBubble({ message, avatarURL }: ChatMessageBubbleProps
               {hasImage ? (
                 <Image
                   style={mediaStyles.media}
-                  key={mediaKey(message.attachment.url)}
                   source={message.attachment.url}
                   contentFit="contain"
                   alt={`Attachment ${message.attachment.title}`}
diff --git a/utils/media.ts b/utils/media.ts
index 7f92173..26a9e5a 100644
--- a/utils/media.ts
+++ b/utils/media.ts
@@ -3,6 +3,20 @@ import * as Sharing from "expo-sharing";
 
 import type { AttachmentWithUrl } from "@/types/attachment";
 
+/**
+ * Check AWS media URL isn't expired
+ * @param url - The media URL
+ * @returns True if the media URL is expired, false otherwise
+ */
+export function isMediaExpired(url: string): boolean {
+  const urlObj = new URL(url);
+  const expires = urlObj.searchParams.get("Expires");
+  if (!expires) {
+    return false;
+  }
+  return new Date(parseInt(expires, 10) * 1000) < new Date();
+}
+
 /**
  * Removes AWS secret parameters from a media URL
  * @param attachment - The attachment with the URL
@@ -10,9 +24,7 @@ import type { AttachmentWithUrl } from "@/types/attachment";
  */
 export function mediaKey(url: string): string {
   const urlObj = new URL(url);
-  urlObj.searchParams.delete("AWSAccessKeyId");
-  urlObj.searchParams.delete("Signature");
-  urlObj.searchParams.delete("Expires");
+  urlObj.search = "";
   return urlObj.toString();
 }