From 9178efdddd321bcbbf8abd76ee8b7d561b7db26a Mon Sep 17 00:00:00 2001
From: Nick Cherry <nickcherryjiggz@gmail.com>
Date: Fri, 26 Jan 2024 12:02:29 -0500
Subject: [PATCH] improve mobile cast images

---
 mobile/bun.lockb                              | Bin 441921 -> 441921 bytes
 mobile/src/components/feed/Cast.tsx           |   5 +-
 mobile/src/components/feed/CastEmbeds.tsx     |  22 ++++++++
 mobile/src/components/feed/CastImageEmbed.tsx |  48 ++++++++++++++++++
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 mobile/src/components/feed/CastEmbeds.tsx
 create mode 100644 mobile/src/components/feed/CastImageEmbed.tsx

diff --git a/mobile/bun.lockb b/mobile/bun.lockb
index a80b2c6b122495ca0c119dc5774c4049693c040b..c317af6859db7cd84e4f00f52fb93e7ec34df00b 100755
GIT binary patch
delta 39
tcmX^3N9y1osfHHD7N!>FEi7x3*cs!D^^Ell+qWdK05R+KElF&>(EvI*4&ML(

delta 39
qcmX^3N9y1osfHHD7N!>FEi7x3*qIo>pnXdc3lOtz-;%`E8w~&=&kc_N

diff --git a/mobile/src/components/feed/Cast.tsx b/mobile/src/components/feed/Cast.tsx
index e00bd84..6bf9691 100644
--- a/mobile/src/components/feed/Cast.tsx
+++ b/mobile/src/components/feed/Cast.tsx
@@ -5,6 +5,8 @@ import { formatDistance } from 'date-fns';
 import { useCallback } from 'react';
 import { Text, View } from 'react-native';
 
+import { CastEmbeds } from './CastEmbeds';
+
 type CastProps = {
   cast: CastType;
 };
@@ -22,7 +24,7 @@ export function Cast({ cast }: CastProps) {
   return (
     <View className="w-full flex-row border-[0.25px] border-y border-gray-200 p-4">
       <Avatar user={cast.user} />
-      <View className="ml-2 mt-1 shrink grow flex-col ">
+      <View className="ml-2 mt-1 shrink grow flex-col">
         <Text ellipsizeMode="tail" numberOfLines={1}>
           <Text className="font-bold" onPress={pushProfile}>
             {cast.user.display_name}
@@ -35,6 +37,7 @@ export function Cast({ cast }: CastProps) {
         <View className="flex-row">
           <Text className="flex-1 flex-wrap">{cast.text}</Text>
         </View>
+        <CastEmbeds embeds={cast.embeds} />
       </View>
     </View>
   );
diff --git a/mobile/src/components/feed/CastEmbeds.tsx b/mobile/src/components/feed/CastEmbeds.tsx
new file mode 100644
index 0000000..b7eac90
--- /dev/null
+++ b/mobile/src/components/feed/CastEmbeds.tsx
@@ -0,0 +1,22 @@
+import { Embeds } from '@shared/types/models';
+import { View } from 'react-native';
+
+import { CastImageEmbed } from './CastImageEmbed';
+
+type CastEmbedsProps = {
+  embeds: Embeds;
+};
+
+export function CastEmbeds({ embeds }: CastEmbedsProps) {
+  if (embeds.images.length === 0) {
+    return null;
+  }
+
+  return (
+    <View className="mt-2">
+      {embeds.images.map((url) => (
+        <CastImageEmbed key={url} url={url} />
+      ))}
+    </View>
+  );
+}
diff --git a/mobile/src/components/feed/CastImageEmbed.tsx b/mobile/src/components/feed/CastImageEmbed.tsx
new file mode 100644
index 0000000..148726f
--- /dev/null
+++ b/mobile/src/components/feed/CastImageEmbed.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { Image, View } from 'react-native';
+
+import { Loader } from '../loader/Loader';
+
+type CastImageEmbedProps = {
+  url: string;
+};
+
+export function CastImageEmbed({ url }: CastImageEmbedProps) {
+  const [error, setError] = useState<unknown>();
+  const [size, setSize] = useState<{ width: number; height: number }>();
+  const [containerWidth, setContainerWidth] = useState<number>();
+
+  useEffect(() => {
+    Image.getSize(url, (width, height) => {
+      setSize({ width, height });
+    });
+  }, [url]);
+
+  if (error) {
+    return null;
+  }
+
+  if (!size) {
+    return <Loader />;
+  }
+
+  return (
+    <View
+      className="overflow-hidden rounded-lg border-[0.25px] border-gray-200"
+      onLayout={(e) => {
+        setContainerWidth(e.nativeEvent.layout.width);
+      }}
+    >
+      {containerWidth && (
+        <Image
+          className="max-w-full"
+          resizeMode="cover"
+          source={{ uri: url }}
+          width={size.width}
+          height={containerWidth / (size.width / size.height)}
+          onError={setError}
+        />
+      )}
+    </View>
+  );
+}